Scroll-driven · 1.17
Arrival from depth
Headlights emerging from fog. Small and soft, then suddenly on top of you.
Items that start far away in Z and rush toward you on an accelerating curve as scroll advances.
4 knobs
How it actually works
Depth means Z. Not "moves at a different rate", which is parallax and has been on every site since 2011. Actually far to near, small to large, arriving at you on a curve that accelerates. The exponent is where the whole feeling lives: at 1.0 the cards float forward politely. At 3 they slam into your face.
Cards start at translateZ(-620px), rotateX(10deg), scale(0.5) with a static blur class, then travel near on an ease-in curve of p^2.3, staggered 0.14 per card, driven from the shared rAF via section scroll progress. On arrival the inline styles are cleared so CSS :hover works again. The blur is a class toggled at most twice, never animated: per-frame blur was the single biggest cost we ever measured.
The knobs, named
Start depth, arrival curve exponent, stagger, start scale. The exponent is a single number that turns "floating gently forward" into "slamming into your face". That is the definition of a knob worth turning.
| Knob | Source | What it teaches |
|---|---|---|
| Start depth | sourced | How far away the cards begin. Ours measured out at -620. |
| Arrival curve exponent | sourced | The whole feel. p^1 is linear and lifeless. p^2.3 is ours. Past p^3 it is a jump scare. |
| Stagger | sourced | Delay per card as a fraction of the travel. At 0 they arrive as a wall. |
| Start scale | sourced | Size at the far end. Combined with depth this is your focal length. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (ours, shipped)
Feature block C in clients/tabblabs/build/andrew/app.js, live at tabblabs.net/andrew. Andrew's verdict after 3 rounds: "This is now EXCELLENT." No award-site precedent was found in any of the four research captures.
- Seen on
- tabblabs.net/andrew (ours). The closest relatives in the index are layered zoom and the 3D ring, and neither is this.
- Dependencies
- vanilla: CSS 3D transforms + one shared rAF
- Difficulty
- moderate
- Performance
- Transform and opacity only. IO-gated. Snapped to its extreme on leave.
- Accessibility and the floor
- Below 760px depth degrades to a plain scale(): it degrades, it does not break. Under .anim-gating every card is simply visible at rest.
Notes
Composability. The arrival is the entrance; the ring (1.13) is the exhibit. Do not use both on one page, they fight for the same axis.