Loading, Transitions & ContinuityHectorpattern
Threshold Crossing
The first three seconds and every route change — a threshold that never mounts under reduced motion and never scroll-jacks.
Hector: Solid, honourable, high-craft work.
Why it matters
Presence breaks at the seam: load, route, lazy stage. Charon owns the crossing so Hermes can own the motion inside the room.
Key techniques
- Threshold component skipped entirely under reduced motion.
- View transitions for same-origin navigation.
- Lazy ClientOnly boundaries for WebGL halls.
What to steal
The transferable part.Refuse to mount. The cheapest animation is the one that never runs.
What not to copy
Context-specific or costly.Do not block LCP on a branded preloader that cannot be dismissed.
Inclusion rationale
First Charon seed — continuity as a chamber with a standard.
Technical register
Performance
Threshold is decorative; content remains in the document.
Mobile
Shorter threshold; larger tap targets on skip controls if present.
Accessibility
Never trap focus in a splash. Esc and reduced motion both clear the way.
Study next
Related entries
HermesRoute View TransitionsAsymmetric enter/leave choreography for same-origin navigation, with named chrome that never cross-fades against itself.Learning value: 4 of 5HermesContinuity SwapOne persistent marker interpolated between two authored positions, with a cut mode beside it that shows exactly what continuity buys.Learning value: 4 of 5HephaestusThe Instanced ForgeFour thousand ingots drawn in a single call, with the draw-call figure published next to the frame time so the cost of the scene is stated rather than implied.Learning value: 5 of 5HermesEasing ComparatorSix curves, one scrubbable timeline — see the same motion under different laws instead of arguing about feel.Learning value: 5 of 5