An intro that only moves as far as the page is ready
The first visit to ncjk.net opens with a short intro. Its line grows only as far as the page is really ready, and it hands over to the real page instead of covering it.
Context
We wanted the first visit to ncjk.net to begin with a moment of presence: the NCJK wordmark, a thin line, then the page. The risk was the one every loading screen carries. A progress bar that fills on a timer tells the visitor something that is not true, and an intro that hides a page which is already usable only adds waiting.
So the intro had to meet two conditions: it may never claim more readiness than there is, and it may never hold a ready page back for long.
Decision
- The line is tied to real readiness. Three signals count: the document is parsed, the web fonts have loaded, and the images in the first screen are decoded. The line’s length is the smaller of two values: the share of the planned time that has passed, and the share of signals that are done. Analytics and images further down the page are never waited for.
- No percentage. A number would suggest precision we do not have. If loading runs long, the line stops and the status reads “Still preparing…”.
- It ends on the real page. The wordmark moves to the header logo and the line to the divider under the headline. Both targets are measured from the live page at that moment, so the hand-over lands correctly on any screen size.
- It plays once, and only when it makes sense. First visit to Home only, entered from outside the site, without a
#link, with reduced motion off and browser storage available. A language switch or an internal link never shows it. Skip and Escape end it at once.
Evidence
Measured on a local build of the site (times from the start of navigation):
| Condition | Page ready | Intro ends |
|---|---|---|
| No throttling | 0.21 s | 2.01 s |
| Slow 4G, 4× slower CPU | 1.92 s | 2.49 s |
| Fonts delayed by 3 s | — | 3.76 s |
| Fonts delayed by 8 s | — | 4.02 s |
On a fast connection most of the two seconds is deliberate; on a slow one almost none of it is. However long loading takes, the page is shown by about four seconds. In every run the wordmark and the line ended exactly on their targets.
Reflection
Testing found the one failure that mattered most. If the intro script hit an error at the wrong moment, the page underneath could stay non-interactive. There are now three independent ways out: a CSS rule hides the intro at 4.2 s even if no script runs, a script timer releases the page at 4.3 s, and an error during start-up dismisses the intro immediately.
What is not done yet: the intro has been tested in Chromium-based browsers through automation, not yet on real Safari, Firefox or foldable devices, and its effect on input responsiveness has not been measured.