Scroll-Driven 3D Card Gallery

Shipped

A CSS-only card gallery with 3D tilt driven purely by scroll-driven animations — zero JavaScript on the interaction path.

Code Try it

Question: how far can animation-timeline: view() go before you need JS? Answer: surprisingly far. Each card's rotate/scale/opacity is a keyframe timeline tied to its position in the viewport, so the "framework" is the compositor — the main thread is not involved at all.

Fallback strategy: wrap everything in @supports (animation-timeline: view()) and let unsupported browsers get a plain, perfectly readable list. Progressive enhancement doing what it was designed for.

The 3D tilt itself uses scroll-driven custom property interpolation. It shipped as the project gallery prototype for this site.