Exploded View Scroll

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect HTML anywhere in your <body>:

Code snippet omitted: it ships with the download.

The scene pins to the top of the viewport and holds for the runway distance, so give it a full viewport of height (the shipped CSS sets 100svh).

Using It With Your Own Design

What the effect needs from your markup: one [data-exploded] scene containing a [data-exploded-stack] with the layers as its direct children, each marked [data-exploded-layer], listed bottom to top. The stack must sit inside an untransformed wrapper (.exploded__scene in the demo) because the callouts are measured from that wrapper's box. Callouts ([data-exploded-callout]) are optional and matched to layers by order; the [data-exploded-lines] SVG is optional and only draws leader lines when present. The mobile legend ([data-exploded-legend]) is optional and reads each callout's data-exploded-title and data-exploded-note. Layers are <button> elements so hover, focus and tap isolation work; plain <div>s also work, and the isolation simply never fires from the keyboard.

What is only the demo's styling: everything under the LAYER ART heading in style.css (the ceramic back, battery, board, display and crystal are CSS drawings), plus the prompt, the eyebrow and title in the corner, and the background gradients. Replace each layer's inner <span> with an <img>, an inline SVG or your own markup. Transparent PNGs of each part, all exported at the same canvas size, give the most convincing result. Set --size and --radius on .exploded to match your parts.

CSS the effect depends on: .exploded__scene must carry perspective and no transform. .exploded__stack must keep transform-style: preserve-3d and its transform must stay scale(var(--zoom)) rotateX(var(--tilt)) rotateZ(var(--turn)): the script writes those custom properties, and the order (turn in the plane, then tilt) is what makes the diagram read as a three-quarter view. Each layer must keep transform: translateZ(var(--z)) rotateX(var(--flap)) and position: absolute; inset: 0. Never put a filter on the stack or the scene: a filter flattens 3D and the layers would render as one plane, which is why the isolation blur lives on the leaf layers. The .has-js .exploded.is-live .exploded__callout { opacity: 0 } pre-hide stops callouts flashing before their reveal; keep it, together with the reduced-motion rule that restores it.

Options

Set these as attributes on the [data-exploded] element.

Live clock

Add data-exploded-clock to any element inside the scene and it shows the visitor's local time (hours and minutes, updated on the minute); data-exploded-date shows the short weekday and day of month. Both are optional and the element's own text is the no-JS fallback, which is why the demo's markup says 10:09.

Interaction

• Scroll drives the explosion. Scrolling back re-assembles it.
• Fast scroll in either direction over-separates and fans the stack in proportion to velocity, then settles with elastic.out(1, 0.38) about 140ms after the last scroll event.
• Hover a layer or its callout to lift it and dim the others (fine pointers only).
• Tab to a layer to do the same from the keyboard. Enter or Space pins the isolation so it survives the pointer leaving; press again or hit Escape to release. Tapping on touch devices does the same.
• The pinned state is exposed as aria-pressed on the layer button.

Accessibility

• Reduced motion: prefers-reduced-motion: reduce renders the finished diagram, fully exploded and labelled, with no pin and no scroll-linked motion. Isolation still works.
• Keyboard: every layer is a focusable button; focus mirrors hover, Enter pins the isolation and Escape releases it.
• Focus visible: :focus-visible draws an accent outline around the focused layer.
• No JavaScript: the stack renders assembled and the callouts render as a plain list beside it.
• Screen readers: give each layer button an aria-label naming the part; decorative inner markup should be aria-hidden="true". The mobile legend is an aria-live="polite" region.

Dependencies

Required:

• GSAP 3.12+ (demo uses 3.15.0)
• ScrollTrigger plugin

Optional:

• Lenis (smooth scroll; the shipped script wires it to ScrollTrigger's clock when present and honours data-smooth="off" on <html>, ?smooth=off in the URL, and reduced motion)