Exploded Isometric UI Layers

About this style

Exploded views come from technical illustration, where an assembly is drawn pulled apart along one axis so every part and its place can be seen; engineering manuals and patent drawings have long relied on them. Isometric projection, formalized for engineering drawing by William Farish in 1822, keeps parallel lines parallel and sizes comparable, so labels stay legible. Software marketing combined the two to show the stack behind a simple screen: the interface lifts away to reveal the rules and the data underneath. Companies use the format on architecture pages and in launch films to say the product is simple on top and serious underneath without a wall of text. It works when the layers part along one clear axis, each carries one idea and the parts reassemble exactly.

Make a 10-second product film in which an inventory app's screen tilts into isometric and comes apart into three stacked layers, interface, logic and data, each labeled like an exploded technical drawing; one order drops down through the stack, and its result climbs back up to the screen before the layers snap together into a single app again.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Ordervane, orders and stock for independent brands (fictional). Mark: a 22px rounded square in #1D1E21 holding a cream arrow pointing up and to the right.
- Headline, two lines: "Simple on top." / "Serious underneath."
- Caption: "Every order checks stock, runs your rules and updates the books in under a second."
- Layers, top to bottom, with their notes: INTERFACE · "What your team sees"; LOGIC · "Rules you set once"; DATA · "One source of truth".
- The order: #4821 · Mara Quinn · 3 items · $186.00, one of them a linen apron. Apron stock goes 18 → 17, the rule "If stock < 20, reorder 50" fires, purchase order PO-1132 (linen apron, 50 units) is created, and the toast reads "Reorder PO-1132 sent".
- Sign-off: the mark, "Ordervane" and "Free for 30 days".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a precise technical drawing that moves. A flat, honest app UI sits on top; beneath it two translucent engineering layers are drawn in thin lines like an exploded assembly, in parallel projection on a dark graphite drafting ground. Lines are crisp hairlines, the UI stays legible at an angle, and every movement is mechanical: straight along one axis, with exact easing and a firm stop.
- Palette: ground #17181B with a faint isometric dot grid (1.5px dots, #26282D, on a 40px triangular lattice). Interface layer: app surface #F3F0E8, sidebar #E7E2D6, ink #1D1E21, secondary text #6F6B63, hairlines #D9D3C6, status green #2F9E6B, status amber #D98E1F. Logic layer: plate fill #F0A830 at 8% with a 1.5px #F0A830 outline, node cards #241D12 with 1px #F0A830 borders and #F7D9A3 text. Data layer: plate fill #3FB8A6 at 8% with a 1.5px #3FB8A6 outline, table blocks #10211F with 1px #3FB8A6 borders and #BDEDE4 text. Labels #EDEAE3, label notes #8D8A84, connectors #8D8A84. The traveling order and its path are #FF6B4A, the only warm red, used for nothing else. Slab edges, on each plate's two visible sides: interface #CFC8B8 and #B8B0A0, logic #8A6420 and #6E5019, data #1F6B61 and #185249.
- Type: Instrument Sans 600 for the headline at 60px, line-height 72px, line 1 #EDEAE3 and line 2 #8D8A84; the caption in Instrument Sans 400, 22px, line-height 32px, #8D8A84, max width 440px; UI text on the planes in Instrument Sans 400/600 at 12–22px plane units; labels in IBM Plex Mono 500, 18px, tracked 0.14em, uppercase; label notes in IBM Plex Mono 400, 15px; plate captions and card kind labels in IBM Plex Mono 500, 10–12px.
- Projection, computed in code so every line is exact: each layer is a flat 760 × 475 plane in its own units, drawn as an SVG <g> whose transform is the affine matrix M(p) = translate(cx, cy) · scale(k, k·s) · rotate(θ) · translate(−380, −237.5), with θ from 0° to 45° and s from 1 to 0.5774 as p goes 0 → 1, and k from 1.55 (front-on) to 1.0 (isometric). At p = 1 that is true isometric: the plane becomes a 873 × 504px rhombus whose top corner is the UI's top-left, whose bottom corner is its bottom-right, and whose right corner sits 437px right of and 58px below the plane's center. Text, rectangles and lines all ride the same matrix, so labels shear exactly with their plane. No perspective anywhere.
- Slab thickness: from the tilt onward each plate has a 10px edge hanging straight down from its two front sides (the UI's bottom edge and right edge), drawn as two parallelograms in that layer's edge colors; the edges and the stack offsets below scale with p, so the front-on screen is a single flat UI. Draw order, bottom to top: data slab and plate, the connectors between data and logic, logic slab and plate, the connectors between logic and interface, interface slab and plate. Anything that passes under the opaque interface plate or under a card is hidden by it, connectors and the traveling order included; under the translucent logic plate it shows through the tint.
- Positions: assembled, the plate centers sit at (1180, 540), (1180, 550) and (1180, 560) (interface, logic, data), so the stack reads as one 30px slab with three colored bands on its edge. Exploded, they sit at (1180, 340), (1180, 550) and (1180, 760). Front-on, the stack is centered at (960, 540). The headline at x 120, first baseline y 392; a 1px #34363C rule at y 486, 56px long; the caption at x 120 from baseline y 530. Each label sits at x 1660 with its baseline level with its plate's right corner (y 398, 608 and 818 when exploded), joined to the corner by a 1px #8D8A84 leader from x 1617 to x 1648 that starts in a 5px open circle; its note 26px below.
- Interface plane (units from its top-left): sidebar x 0–150 in #E7E2D6 with the mark and "Ordervane" (600, 15) at (18, 30) and nav items at x 18 on baselines 86, 116, 146, 176, 206: Orders (active, 600, with a 3px ink bar on the left edge), Products, Customers, Reorders, Reports (400, 14). Header: "Orders" (600, 22) at (174, 40) and "Today · 214 orders" (400, 13, secondary) at (174, 60). Stat chips at y 76–112: "Open 38" at x 174–284, "Packed 141" at 296–406, "Shipped 35" at 418–528, each a #FBF9F4 rounded rectangle with a hairline border, a 12px secondary label and a 600 16px number. Orders table from x 174 to 740: a header row at baseline 130 (ORDER, CUSTOMER, ITEMS, TOTAL, STATUS in 11px secondary caps at x 184, 254, 414, right-aligned 540, 576) and five 30px rows from y 140: #4821 Mara Quinn 3 $186.00 Open; #4820 Theo Barre 1 $42.00 Packed; #4819 Ines Halloran 5 $311.50 Packed; #4818 Dev Okoro 2 $96.00 Shipped; #4817 Lena Fiske 4 $228.00 Packed, each status with a 6px dot (amber for Open, ink for Packed, green for Shipped). A notification column at x 520–740: a toast slot at y 316–366 and a new-order card slot at y 380–450, both empty at first.
- Logic plane (the interface hides its top-left area, x < 503 and y < 218, when exploded, so everything sits outside it): the caption "rules · 5 active" in amber at (24, 466). Five node cards, 200 × 54, radius 8, each with a kind label above its title: "Order placed" (TRIGGER) at (530, 388); "Reserve at nearest warehouse" (ACTION) at (290, 388); "If stock < 20, reorder 50" (CONDITION) at (50, 388); "Update books" (ACTION) at (530, 314); "Flag orders over $500" (CONDITION) at (530, 240), its border dashed because this order doesn't trip it. Wires are 1.5px amber lines with 6px rounded turns: from card 1 left along y 415 through card 2 to card 3; from the top of card 3 up to y 341 and right to card 4's left edge; a dashed wire from card 1's right edge out to x 748, up to y 267 and into card 5.
- Data plane (the logic plate covers its top-left area, x < 503 and y < 218, so the tables sit outside it and no card ever hides them): the caption "ledger · 4 tables" in teal at (24, 470). Four table blocks of 210 × 150, each a 26px header (name · row count) and 24px rows: customers · 9,870 at (530, 60) with Mara Quinn · Leeds, Theo Barre · Lyon, Ines Halloran · Cork; products · 312 at (40, 305) with Waxed tote · 64, Field cap · 41, Market basket · 27 and, in its last row at y 403–427, Linen apron · 18; purchase_orders · 1,131 at (285, 305) with PO-1131 · Waxed tote · 80 and PO-1130 · Field cap · 40; orders · 18,402 at (530, 305) with #4821 · $186.00, #4820 · $42.00, #4819 · $311.50. A dotted teal wire joins products to purchase_orders at y 371.
- Connectors run straight down the screen, because the layers move only vertically: each joins the same plane point on two layers. A joins the new-order card (630, 415) on the interface to card 1 on the logic layer; B joins card 3 (150, 415) to the linen apron row on the data layer; C joins card 4 (630, 341) to the toast slot on the interface. They are 1px dotted lines (3px dash, 5px gap) at 70%.
- The order: a 12px #FF6B4A square drawn flat in the plane of whatever layer it's on, so it reads as a token lying on that surface, and between layers a small upright 10 × 10px square on the connector. The path it has traveled stays drawn as a 1.5px #FF6B4A line at 80%, connectors included. Cards light as it reaches them: border to 2px and fill to #3A2C14. Numbers that change roll their digits up over 0.2 s on easeOutCubic.
- Motion rules: things move only along the screen's vertical axis, along a wire, or by the projection itself; tilts and separations use easeInOutCubic or easeInOutQuart with no overshoot; the one exception is the final snap. Nothing floats, bobs or idles.
- Premium: an exact parallel projection, slabs with crisp edges in three distinct colors, UI text sharp and sheared with its plane, motion along one axis with firm stops, one red accent used only for the order. Cheap: a wobbly CSS perspective tilt with blurry text, neon glowing edges, layers that bob, random particles, labels that point at nothing, a color for every element.
- Banned: perspective distortion, glows or neon, blurred drop shadows under the plates, idle bobbing, gradients on the plates, purple, chromatic effects, real company names, logos and UI copied from existing products (including real database or cloud names), anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–1.0s: the app front-on (p = 0) centered on the graphite ground, rising 24px and fading in over 0.4 s on easeOutCubic, then holding so its UI can be read.
- 1.0–2.0s: the tilt: p goes 0 → 1 on easeInOutCubic while the stack moves to its assembled position at (1180, 550) and k falls to 1.0; the three-band slab edge grows in with it.
- 1.6–2.4s: the headline lines rise 20px into place 0.15 s apart, the rule draws left to right, the caption fades in.
- 2.2–3.4s: the separation: the interface lifts to y 340 (2.2–3.2 s) and the data plate drops to 760 (2.4–3.4 s) on easeInOutQuart; the logic plate stays.
- 3.2–3.6s: connectors A, B and C draw downward at 600px/s.
- 3.3–3.9s: labels, one per layer at 3.30, 3.45 and 3.60 s: the leader draws in 0.12 s, the label types at 40 characters per second, its note fades in.
- 3.80–5.90s: the order's trip: row #4821 takes a 1.5px #FF6B4A outline and the card "New order #4821 · $186.00" slides into its slot (3.80); the token drops down A to "Order placed" (3.95–4.20), runs along the wire through "Reserve at nearest warehouse" to "If stock < 20, reorder 50" (4.20–4.55), drops down B to the linen apron row (4.55–4.80), where 18 rolls to 17 (4.80); it slides along the data wire to purchase_orders, where "PO-1132 · Linen apron · 50" slides in on top and the count rolls to 1,132 (4.90–5.10); it comes back and climbs B to card 3 (5.10–5.30), runs to "Update books" (5.30–5.45), climbs C to the interface (5.45–5.65), and the toast "Reorder PO-1132 sent" slides in while #4821 flips to Packed and the chips roll to Open 37 · Packed 142 (5.65–5.90).
- 5.9–6.3s: hold. The 6.0 s frame is the hero: three plates exploded with their labels, notes and connectors, the whole red path from the order card down to the data layer and back up to the toast, the updated table and chips, the headline and caption.
- 6.3–6.6s: labels, notes, leaders and the red path fade out.
- 6.5–7.1s: the layers close on easeInCubic, interface down to 540 and data up to 560, the connectors shortening with the gaps until they vanish.
- 7.1–7.4s: the snap: the whole stack dips 6px and springs back (ω 30 rad/s, ζ 0.45).
- 7.4–8.2s: the sign-off fades in under the caption at baseline y 640: the mark, "Ordervane" (Instrument Sans 600, 26px, #EDEAE3) and "Free for 30 days" (#8D8A84).
- 8.2–10.0s: hold on the assembled isometric app with its toast, the three-band edge, the headline, caption and sign-off.
For other lengths, stretch the holds and the order's trip; keep the tilt, the separation and the snap at their speeds and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: SVG. One inline <svg viewBox="0 0 1920 1080">; seek recomputes M(p) for each layer and sets every transform, path, line endpoint, dash offset, opacity and text from t. Slab parallelograms, rhombus outlines, connector endpoints and label anchors all come from one project(layer, x, y) function using the same matrix, so they can never drift apart. The dot grid is a <pattern> made in code. Text rolls are two stacked <text> elements inside a clip.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that at 0.5 s the front-on UI is fully readable; at 2.0 s the projection is true isometric with no perspective and the slab shows three bands; text on every plane is crisp and sheared with its plane; the visible parts of the logic and data plates show their cards and tables rather than hiding them under the interface; connectors are vertical and meet their anchors exactly; the token is hidden only while it's under the interface plate or a card; every number adds up (Open 37 + Packed 142 + Shipped 35 = 214); the 6.0 s frame shows all three plates, all labels and the complete red path; and the final frame is the assembled app with the sign-off. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…