Exploded View.

Slides are layers of an isometric stack; the active layer lifts out while a dimension rail tracks it.

Look

As designed

Use Exploded View in the Studio Open full screen

How it moves

Dark technical illustration. Every slide is a flat plate in a true orthographic exploded stack on the left; moving on lifts the next plate up and out, fills it with the accent and drags a leader line and callout up an upright dimension rail to meet it. The slide content sits in a plain column on the right. Use it for layered things: architectures, stacks, funnels, processes with parts.

This is the specification the Studio sends to the model, written for Exploded View's own look. Change the look in the Studio and every value follows.

Palette

Background#0f1014
Text#f2f3f7
Muted#878c99
Accent#7c5cff
Surfacergba(242,243,247,.05)
Hairlinergba(242,243,247,.16)

Type: Inter Tight. Corners: 6px.

Layout

- Three zones on #0f1014: the exploded stack on the left, a thin dimension rail in the middle, an upright content column on the right. Only the content column is ordinary layout; the stack is a real 3D rig.

- THE PROJECTION. The rig is an element at left 22vw, top 76vh (0 x 0) with transform: rotateX(55deg) rotateZ(-45deg), transform-style preserve-3d and NO perspective, so it is a true orthographic isometric-family view. All 3D offsets are multiples of --z, the pitch between plates on the Z axis: --z = min(9.6vh, 5.7vw) (about 69px at 1280x720; min(8.6vh, 5.2vw) under 1100px). A plate is calc(--z x 4.2) wide and calc(--z x 2.5) tall in its own plane, centred on the rig origin. Projection constants: a local point (x, y, z) lands at X = (x + y) / sqrt2 and Y = (y - x) x cos55 / sqrt2 - z x sin55, with sin55 = .8192 and cos55 / sqrt2 = .4056. So one --z of Z lifts a plate .8192 x --z UP the screen, and a plate's screen-right corner sits 2.3689 x --z right of, and .3447 x --z above, its centre.

- One plate per slide, each a real <button> (data-goto) with --k = its index. The face is a 6px-radius rectangle with a 1px border of accent 34% mixed into rgba(242,243,247,.16), fill #f2f3f7 at 5%, opacity .25, and a hard offset "slab thickness" shadow of (--z x -.05, --z x .05, blur 0) in #f2f3f7 13% mixed into #0f1014. Along the front-right edge, printed in the plane of the plate (left/right 6%, bottom 5.5%, font-size --z x .28, weight 650, tracked .035em) sits the two-digit number and the slide title: #878c99 idle, a bit lighter once visited, and when active the number in an accent-tinted ink (color-mix accent 70% into #f2f3f7, so it still passes 4.5:1 as text) and the title #f2f3f7.

- Plate poses, all pure CSS keyed on the engine's .active / .done classes and --k: FUTURE plates parked at translate3d(0, 0, (k + .9) x --z), face opacity .25. DONE plates compress toward the base at translate3d(0, 0, k x .72 x --z), opacity .6. The ACTIVE plate lifts and slides out: translate3d(--z x -.601, --z x .601, (k + 1.55) x --z), face opacity 1, fill accent 13% into #0f1014, border #7c5cff, slab shadow accent 60% into #0f1014. Hover raises opacity to .78. The whole stack reads as a deck of cards that fans upward, with the current one pulled out on its front diagonal.

- Dimension rail: the spine is a 1px rgba(242,243,247,.16) vertical line at --spine = (rig x + 2.3689 x --z) + 14vw, running 9vh to 9vh. It carries one tick button per slide at translateY(k x -.8192 x --z), each a .85rem hairline (idle rgba(242,243,247,.16), done a lighter grey, hover scaleX 1.5 in #f2f3f7), the active tick becoming a .5rem #7c5cff dot. A leader line starts at the active plate's right corner (left: --corner) and runs 14vw to the spine: 1px, a gradient from #7c5cff to accent 45%, with a 6px round node at its start, translateY(--i x -.8192 x --z) where --i is the engine's active index, scaleX from 0 (before the first move) to 1. A callout box sits on the spine's left, riding the same translate: number "03 / 07" (.7rem, tracked .16em, accent-tinted ink) over the slide title (clamp(.95rem, 1.2vw, 1.3rem) / 700), text-align right, 1px rgba(242,243,247,.16) border with an #7c5cff bottom border, background #0f1014 mixed 12% toward #f2f3f7, max width 14vw.

- Axis legend fixed bottom-left (left 3vw, bottom 4.5vh, width clamp(78px, 7vw, 116px)): a tiny SVG of the X and Y axes in rgba(242,243,247,.16) and Z in #7c5cff with arrowheads and letters at .08em tracking in #878c99.

- Content column: left calc(--spine + 2.6vw), right 4vw, top 6vh, bottom 11vh, content vertically centred, gap clamp(1rem, 2.2vh, 1.7rem). Slide title is a visually-hidden h2 (the plate carries it visibly); the visible content is an accent-ink kicker (.78rem caps, tracked .16em), a lede clamp(1rem, 1.3vw, 1.3rem) (cover: clamp(1.15rem, 1.7vw, 1.7rem) in #f2f3f7, 22ch), then objects sized for a column (rings clamp(4.4rem, 6.4vw, 6.8rem), stat values clamp(1.7rem, 2.6vw, 2.8rem), carousel items min-height 9.5rem, bullets clamp(1rem, 1.35vw, 1.35rem)). HUD "03 / 07" bottom-right, a hint bottom-left that fades after slide 1. Closing slide is simply the last plate lifted to the top of the stack with a bullet list; no takeover.

Motion

- Every plate transform and face opacity/fill/border/shadow transitions .7s cubic-bezier(.22,1,.36,1); the leader and callout transforms use the same .7s curve so the rail keeps pace with the lift. The content column is opacity 0 with translateY(18px) when inactive and rises in (opacity .5s ease, transform .6s the same curve) after a .32s delay. Set body data-reveal-delay="820" data-animate-delay="820".

- Under 760px the 3D flattens: the rig becomes a wrapping row of pill chips (number + title, 1px rgba(242,243,247,.16) border, active gets accent border and accent-16% fill), faces, spine, leader, axis and hint are hidden, the callout becomes a left-bordered heading, and the content stacks below (the page scrolls).

Navigation. arrows / Space / PageUp / PageDown / Home / End / 1-9; wheel and trackpad move one slide per gesture; every plate in the stack and every tick on the rail is a button and jumps.