Scroll-driven animation
Reveals, parallax and progress bars tied to the scroll timeline — running on the compositor, smooth even under load. Zero main-thread JavaScript.
An explorable showcase of the modern web
See whatthe web canreally do.
A living gallery of scroll-driven motion, view transitions, WebGL and a library of copy-ready templates. Built almost entirely from the platform.
The thesis
Websites got fast. Then they got quiet. Prism is a loud reminder of how much the browser can do when you actually ask it.
Every effect here degrades gracefully, respects prefers-reduced-motion, works with a keyboard, and ships next to nothing to the client. Spectacle and restraint are not opposites.
0kb of JS on a library page*
60fps compositor animation
30+copy-ready templates
AAcontrast, keyboard-complete
* the template index ships only HTML + CSS; interactivity is layered on as progressive enhancement.
/templates
The Archive
A browsable, filterable library of stunning, reusable sections — heroes, galleries, menus, pricing, backgrounds. Each with live preview and one-click copy.
Browse the library →/labThe Lab
Annotated demos of bleeding-edge platform features — scroll timelines, view transitions, anchor positioning, Houdini — each with code and honest browser-support notes.
Run the experiments →/aboutThe Method
How Prism is built: an Astro island architecture, a hand-rolled OKLCH design system, and a hard rule that nothing breaks the moment JavaScript fails.
Read the approach →type that breathes
with the scroll
Under the hood
Four ideas doing the heavy lifting.
View Transitions
Elements morph across page loads. Shared-element animations that used to need a SPA framework, now native to the platform.
WebGL set-pieces
Hand-written GLSL shaders and GPU particle systems, lazy-loaded only where they earn their place — the rest of the site stays feather-light.
Modern CSS
OKLCH color, light-dark(), container queries, :has(), anchor positioning, @scope and the Popover API — the browser doing the heavy lifting.
7,000 points, one shader.
A GPU particle system that drifts with a noise field, follows your cursor, and expands as you scroll — lazy-loaded and paused the moment it leaves the viewport. Move your mouse.
AstroWebGL / GLSLThree.jsscroll-timelineview-timelineView Transitions APIOKLCHcontainer queries:has()Popover APIanchor-positioning@scopeWeb AnimationsHoudiniGSAPLenis
Start with a template,
stay for the tricks.
Copy a section into your own project, or peel back the curtain in the Lab.