Layered Depth Template
A spatial and exhibition design studio site built as translucent planes in a lit room: a scroll-driven depth pass, a cursor-tilted cluster, and planes that flatten to full bleed.
About This Template
Halflight is a complete one-page site for a spatial, exhibition or scenography practice, art-directed as layers in a lit room rather than cards on a page. Content sits on translucent planes at a slight perspective, casting onto each other over a deep indigo ground, with an oversized ghost numeral behind the type and photography breaking the section seams.
Read the full template overview
Three interactions carry it, each on a different input. Scroll pushes a stack of planes through Z toward the viewer and out past the camera in a pinned sequence. The cursor tilts a second cluster, each plane sliding by its own depth with a specular sweep tracking across it. Clicking a plane in the work strip lifts it out of the stack, flattens it to full bleed with its detail, and settles it back into the exact slot it left.
Everything is static HTML, CSS and one script: no build step, no framework. Repaint the five values in the token block to reskin it, drop your own photographs into assets/img, and rewrite the copy. Every section is independent, so any of them can be deleted without touching the JavaScript.
What's Included
- Pinned depth pass: three planes scrubbed through Z until each one fills the frame and breaks its edges, with the counter, the raking light, the plane tint and the legend all answering the same scroll
- Pointer-tilted plane cluster on fine pointers, with a per-plane depth parallax and a specular sweep, and a designed static three-quarter view on touch
- GSAP Flip flatten: a plane lifts out of the work strip to full bleed and returns to its exact slot with an elastic settle
- Full keyboard path for the flatten interaction: real buttons, Enter or Space to open, Escape to close, managed focus
- Deep indigo, chrome and one warm signal, with every translucent value mixed from --*-rgb triples so a reskin is a five-value edit
- Designed reduced-motion page: the depth pass resolves into a static row beside its legend and every project detail is open
- Readable with JavaScript disabled or the CDN blocked, including every project detail
- Drops to a flat 2D composition below 900px or on a coarse pointer rather than shipping a 3D stack to a phone
- Lenis smooth scroll wired on the shared GSAP clock, opt-out per page or per URL
Perfect For
- Exhibition, scenography and spatial design studios presenting rooms rather than screens
- Architecture and interior practices that need depth and light in the first screen
- Experimental music venues and arts programmes with a layered, low-light identity
- Photography and installation portfolios where each project deserves a full-bleed moment
- Any studio site that needs three distinct interactions rather than one hero animation
How It Works
The plane stack
The hero builds a real 3D scene: a perspective container, a preserve-3d stack, and planes offset in Z so they cast and tint each other. The headline deliberately lives outside that chain, because a 3D context rasterises type and swallows pointer events. All of the 3D scaffolding is pointer-events: none, and only the interactive children take presses back.
The depth pass
One pinned ScrollTrigger with a scrubbed timeline. Each plane travels from far behind the camera to a reading position where it fills most of the frame, keeps growing at full strength until it is breaking every edge, and only then softens and dissolves as the next resolves behind it. The same progress drives four more channels: the oversized counter, the raking light, each plane's tint alpha, and the legend, where only the layer currently at the camera is set. The pin is budgeted at 0.8 viewports of travel per plane, which is long enough that a hard wheel flick cannot clear the sequence in one gesture and short enough that the section does not become the longest stretch of the page.
Tilting the cluster
On a fine pointer, pointermove maps the cursor to the cluster's rotationX and rotationY through gsap.quickTo, and each plane slides by its own data-depth so the group opens and closes as the viewing position moves. Leaving the section relaxes it back to the resting three-quarter view over about a second. Coarse pointers keep that view fixed in CSS and never attach the listener.
Flattening a plane
Flip.getState measures the plane in its slot, a class switches it to a fixed full-bleed panel, and Flip.from animates the difference; closing repeats it in reverse so the plane returns to the pixel it left, with a short elastic dip as it beds back in. The strip and the empty slot are height-locked for the duration, or the page below would jump while the plane is out of flow.
Without JavaScript or motion
A synchronous head script adds .has-js before first paint so nothing flashes; the main script removes it again if the CDN is blocked, leaving a plain complete document with every project detail visible. Under prefers-reduced-motion the CSS lays the depth pass out as a static row beside its fully-set legend, holds the clusters at a fixed angle, and opens every detail, and the matchMedia branch restores each gated reveal.
Questions about this template
Does it ship a 3D stack to phones?
No, deliberately. Below 900px or on a coarse pointer it drops to a flat 2D composition rather than sending translucent 3D planes to a device that will struggle with them. The tilted cluster gets a designed static three-quarter view on touch instead of being switched off.
What are the three interactions?
A pinned depth pass scrubbing three planes through Z until each fills the frame, a pointer-tilted plane cluster with per-plane parallax and a specular sweep, and a Flip flatten where a plane lifts out of the work strip to full bleed and returns to its exact slot with an elastic settle.
Can the flatten be used with a keyboard?
Yes, fully: real buttons, Enter or Space to open, Escape to close, and managed focus. With JavaScript disabled or the CDN blocked every project detail is still readable, and under reduced motion the depth pass resolves into a static row beside its legend with all details open.
What kind of studio is it for?
Ones presenting rooms rather than screens: exhibition, scenography and spatial design, plus architecture and interiors practices that need depth and light in the first screen. Experimental venues and installation portfolios also fit, because each project gets a full-bleed moment.
How hard is it to repalette?
Five values. Deep indigo, chrome and one warm signal, with every translucent value mixed from RGB triples, so there are no stray rgba literals to hunt down when you change the scheme.