# 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.

Canonical: https://gsapvault.com/templates/layered-depth-template
Live demo: https://gsapvault.com/demos/layered-depth-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | advanced |
| Plugins | ScrollTrigger, Flip |
| Techniques | 3d-transforms, scrub, pinned-section, parallax, pointer-tilt, flip-layout, scroll-reveal, click-toggle |
| Uses Lenis | Yes |

## Overview

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.

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.

## Features

- 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

## Use Cases

- 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

## 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.

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## 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.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Upload the folder.** `index.html`, `assets/style.css`, `assets/script.js` (or `assets/script.min.js`) and `assets/img/` are the whole site. Any static host will do.

**2. Check the `<head>`.** Three things must stay, in this order:

```html
<link href="https://fonts.googleapis.com/css2?family=Tomorrow:wght@400;500;700&family=Sarabun:wght@300;400;500;600&display=swap" rel="stylesheet">
<script data-cfasync="false">document.documentElement.classList.add('has-js')</script>
<link rel="stylesheet" href="assets/style.css">
```

That one-line script must stay synchronous and stay in `<head>`. It is what stops every reveal target painting visible for a frame and then flashing to zero. `data-cfasync="false"` stops Cloudflare Rocket Loader deferring it, which would bring the flash back on the live site only.

**3. Keep the scripts before `</body>`:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Flip.min.js"></script>
<script src="https://unpkg.com/lenis@1.3.17/dist/lenis.min.js"></script>
<script src="assets/script.js"></script>
```

**4. Rewrite the copy and swap the photographs.** Everything else is optional.

---

### Accessibility

- **Keyboard.** Each work plane is a real `<button>`: Enter or Space flattens it, focus moves to the close control, Escape closes it from anywhere, and focus returns to the plane it came from. Every hover state has a matching `:focus-visible` state.
- **Reduced motion.** `prefers-reduced-motion: reduce` gives a designed static page, not the animated one with the motion switched off: the depth pass lays out as a static row of planes beside its legend, with every entry set rather than only the active one, the clusters hold a fixed three-quarter view, and every project detail is open in the document. Nothing is invisible and nothing is reachable only by an animation that never runs.
- **Without JavaScript.** The head script's class is removed if GSAP fails to load, so a blocked CDN leaves a plain, complete document with every project detail readable.
- **Touch and small screens.** Below 900px, or on any coarse pointer, the 3D scenes resolve into flat compositions and the blur channel is dropped with them. The pointer tilt is never attached on a touch device; the cluster keeps a styled static angle.
- **Decorative layers.** The plane scenes, the ghost numeral and the light gradients are `aria-hidden`; the words they illustrate live in the legend and the section copy.

### Dependencies

- GSAP 3.15.0 — core, ScrollTrigger, Flip
- Lenis 1.3.17 (optional)
- Google Fonts: Tomorrow, Sarabun

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Layered Depth Template](https://gsapvault.com/templates/layered-depth-template)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt