Experiment 02Technique study
Cards that arrive from depth
Why do 3D card reveals look convincing in one grid and broken in another?
Explore the experiment
Runs live in your browser on CSS 3D transforms, no canvas
This runs on CSS 3D transforms driven by GSAP against scroll position. No canvas, no shader and no WebGL context — which is the point of the study. With reduced motion requested, the finished state is shown immediately instead.
How to use it
Scroll the demo below into view and back out. The entrance is scrubbed against scroll position rather than fired once, so it advances and reverses with you.
The technique, running
Three cards, each with its own perspective origin, scrubbed against scroll position and staggered in reading order. This is the same code the write-up describes — not a recording of it.
Own vanishing point
Perspective is set per card, so no card at the edge of the row skews as though shot on the wrong lens.
Scrubbed, not fired
The entrance is tied to scroll position, so it reverses when you scroll back up. Motion stops when you stop.
Finished before read
The range ends about a third up the viewport, so nothing is still settling once it has your attention.
The problem with parent perspective
The obvious way to build a 3D card grid is perspective on the container. Every
card then shares one vanishing point, which is geometrically correct and looks
wrong: cards at the edges of a wide grid skew hard, as though photographed with a
lens they were not designed for.
Setting perspective per element instead gives each card its own camera. Less correct, considerably better looking — the kind of trade that is obvious in motion and invisible in a still.
Scrubbing versus firing
A card entrance that fires once on intersection feels like a page effect. The same animation scrubbed against scroll position feels like the reader is pulling the cards forward, because the motion stops when they stop.
The catch is the range. Scrub to the end of the section and cards are still settling while someone is trying to read them. Ending the range early — around a third of the way up the viewport — means the motion is finished before attention arrives.
What it taught us
Stagger direction matters more than duration. Cards emerging in reading order feel deliberate; simultaneous emergence feels like a transition, not an arrival.
Where this gets used
Websites
A Drasyo build is static-first: pages are generated ahead of time and served as HTML, so they load fast, work without JavaScript, and give crawlers and answer engines something to read on the first request rather than after a fetch.
More from the lab
Want something like this built?
Tell us what you are building and we will say whether this belongs in it.
Start a conversation