CSS 3D, not WebGL
Real depth from transforms alone - no shader pipeline, no fallback to write.
3D and WebGL Templates · v1.0.0
Vault
A perspective grid receding through depth as you scroll.
Rated 4.8 out of 5 based on 49 reviews.760 sold6 variationsUpdated September 20, 2026
01 / 04Click to enlarge
3DPerspectiveScrollGrid
Overview
Vault arranges over two hundred images across six sections in CSS 3D space, then flies the camera through them on scroll - tiles tilt, scale and slide past in depth. No WebGL, no Three.js, just transforms and a well-chosen perspective origin.
That makes it far lighter than a shader template while still reading as genuinely three-dimensional, and it degrades to a flat grid gracefully.
Best for: Archive and index pages that need scale without a WebGL dependency.
What makes it different
Six depth sections
Each with a different camera path and tile arrangement.
237 tiles
Density is what makes the depth legible; the template is built to carry it.
Bodoni Moda intro
Self-hosted variable serif with a real italic axis, matching the original design's intent.
In the box
- 1 page with 6 perspective sections
- GSAP 3.15 + ScrollTrigger + Lenis, vendored
- Self-hosted Bodoni Moda
- 49 sample images
Built with
- GSAP 3.15
- ScrollTrigger
- Lenis
- CSS 3D
Questions about Vault
Is CSS 3D fast enough for 237 tiles?
Yes, because only the tiles near the camera are composited. It holds 60fps on a mid-range laptop.
Can I reduce the density?
Yes - tiles are generated from a list. Shorten it and the sections still compose correctly.
Still unsure? Email us - or read how to choose a template.
Related
