Spotlight Product Tour

About this style

Guided product tours, also called coach marks or walkthroughs, are the step-by-step overlays many web apps show new users at first sign-in: the interface dims, one element is cut out of the shadow, and a tooltip explains it with a Next button and a step count. The pattern became common in web apps during the 2010s, helped by open-source libraries such as Intro.js and Shepherd. In promo videos the same device lets a company show the parts of a busy product in order without losing the viewer. It works when each step points at exactly one thing, the copy is a sentence or two, the spotlight travels smoothly from stop to stop, and the viewer sees at least one feature actually used.

Make a 10-second guided product tour of a dark inventory app: the screen dims, a spotlight with a yellow ring moves from feature to feature with a tooltip and a step counter, a cursor clicks Next, tries the one-click reorder on the way, and the tour finishes on a sign-up card.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Quarry (fictional), inventory planning for growing consumer brands. Company in the demo: Lindqvist Coffee Co. (fictional), with 1,284 SKUs in 3 warehouses.
- Tour steps (title / body):
  1. "Search everything" / "Find any SKU, supplier or purchase order from one box. Press / to jump here."
  2. "Low-stock alerts" / "Quarry flags items before they run out and shows how many days of stock are left."
  3. "Reorder in one click" / "We draft the purchase order at the right quantity for your lead time. Try it."
  4. "Bring your team" / "Invite buyers and warehouse leads so everyone plans from the same numbers."
- Reorder result: "Drafted PO-1042 · 240 units · $1,123.20" (240 × $4.68). Open POs goes from 6 to 7.
- KPIs: Stock value $412,860 · Median days of cover 38 · Low stock 14 · Open POs 6.
- Table rows (SKU · product · on hand · days of cover · reorder point): OM-1L-B · Oat Milk Barista 1L · 96 · 4 · 240; CB-CON-32 · Cold Brew Concentrate 32oz · 58 · 6 · 120; PC-12-W · Paper Cups 12oz · 2,400 · 7 · 6,000; MT-80 · Matcha Tin 80g · 31 · 9 · 40; ES-BLD-1K · Espresso Blend 1kg · 210 · 24 · 90; CH-SYR-750 · Chai Syrup 750ml · 64 · 31 · 30; LD-12-B · Lids 12oz Black · 5,800 · 42 · 3,000.
- Final card: "Quarry" · "Know what to reorder before you run out." · button "Start free trial" · "14-day trial · No card needed".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a real, dense, dark-mode web app filmed full screen, and a tour layer on top that does one thing at a time: dim everything, cut one rounded window out of the dark, ring it in signal yellow and explain it on a warm paper-colored card. The app stays legible under the dim; the spotlight and the card are the only bright things.
- Palette. App: background #17181A, sidebar #121315, cards #1F2023, raised controls #26272B, hairlines #2E3034, text #ECEAE4, secondary #A3A19A, tertiary #6E6C67. Signal yellow #F5C84B (the active nav bar, the spotlight ring, Next buttons, progress), its pressed shade #E0B23A. Status dots: urgent #E5604A (5 days or less), soon #E8A13A (6–9 days), healthy #6CC08B. Overlay: #0A0B0C at 58%. Tooltip card #F4F1E8 with title text #141414, body #45433D, counter #7A6420, inactive progress #D9D3C3. No blue, no purple, no gradients on surfaces.
- The app fills the frame with no browser chrome. Sidebar x 0–248: an original Quarry mark at (28, 24), a 32px yellow square with a 10px diagonal notch cut from its top-right corner, and "Quarry" in 20px 600; nav items 44px tall from y 104: Overview, Inventory (active, with a 3px yellow bar at its left and #26272B fill), Purchase orders, Suppliers, Reports, Settings, each with an 18px line icon; the workspace "Lindqvist Coffee Co." with a 28px initials circle pinned at the bottom (y 1020).
- Top bar y 0–76 across x 248–1920: search field 520×44 at (288, 16) with a magnifier, placeholder "Search SKUs, suppliers, POs" and a "/" key hint; at x 1384 a chip "Getting started 0/4" with a ring progress; at the right a stack of three 32px avatar circles (MK, JL, AT) at x 1700 and an "Invite" button 92×40 at x 1800 (raised fill, hairline border).
- Main column x 288–1880: "Inventory" in 34px 600 at y 108; under it "1,284 SKUs · 3 warehouses · synced 2 min ago" in 15px secondary. KPI strip y 176–296: four cards 386×120 with 16px gaps: label 14px secondary, value 34px 600 tabular.
- Table x 288–1416, y 320–1040: header row 48px in 13px tertiary caps (SKU, PRODUCT, ON HAND, DAYS OF COVER, REORDER AT, and an empty action column), then seven 72px rows with the SKU in JetBrains Mono 14px secondary, the product in 16px, numbers right-aligned and tabular, the days of cover with a status dot, and a "Reorder" button 104×36 (raised fill, 14px) in the action column for every row at or below 9 days; the first row's button is at x 1296–1400, y 386–422.
- Alerts card x 1440–1880, y 320–700: title "Low-stock alerts" with a "14" count pill, "Showing 4 of 14" in 13px tertiary, then the four low rows as two-line items: the product in 16px and "4 days left · reorder 240" in 14px secondary with its status dot.
- Type: Sora 400 / 600 for the app, the tooltips and the final card; JetBrains Mono 500 for SKU codes, the step counter (13px, tracked 0.08em, caps) and the final card's small line.
- The spotlight: a rounded rectangle cut out of the overlay, 12px larger than its target on every side, radius 14 (radius 12 for the button), ringed by a 2px yellow line 4px outside the cut, plus a soft 10px halo of the yellow at 16%. The ring breathes its offset between 4 and 7px on a 1.6 s sine; nothing blinks. Between steps, the cutout's x, y, width and height interpolate together over 0.55 s on easeInOutCubic, so it slides and resizes as one shape; the overlay never flickers or fades between steps.
- Tooltip card: 400px wide, radius 14, padding 24px, shadow 0 18px 40px rgba(0,0,0,0.45), with a 14px nub pointing at the target. Inside: the counter "STEP 2 OF 4", the title in 24px 600, the body in 16px with 1.5 line height, then a footer row with four progress segments (28×4px, filled yellow up to the current step), "Back" as a text button and "Next" as a yellow button 96×40 with #141414 15px 600 text (on step 4 it reads "Finish"). The card travels with the spotlight (same easing, same 0.55 s) and its text crossfades in the middle of the move (0.2 s out, 0.2 s in), so the card never empties.
- Placements: step 1 card below the search field, its nub at the field's center (card at x 288, y 96); step 2 card to the left of the alerts card, nub pointing right (card at x 1010, y 356); step 3 card below the first row's Reorder button, right-aligned to it (card at x 1000, y 440); step 4 card below the invite area, right-aligned to the frame's 40px margin (card at x 1480, y 96).
- The cursor: an original arrow pointer drawn as an SVG path, 28px, white with a 1.5px #0A0B0C outline and a soft shadow. It moves on minimum-jerk curves (10τ³ − 15τ⁴ + 6τ⁵) along a slight arc; on a click it dips to 0.88 scale for 0.08 s and the button shows its pressed shade. It sits above the overlay.
- The reorder moment: clicking the Reorder button turns it, in 0.25 s, into a #6CC08B-outlined chip "PO-1042 drafted" with a check; the tooltip's body is replaced by "Drafted PO-1042 · 240 units · $1,123.20" in 16px 600 #141414 with a small check, the Open POs value under the dim counts 6 → 7, and the "Getting started" chip under the dim fills step by step as the tour advances.
- Premium: one spotlight shape that glides and resizes, a ring that breathes calmly, short real copy, a tooltip that never pops or flashes, a dense believable app that still reads under the dim, one feature actually used. Cheap: a hard black overlay that hides the app, bouncy tooltips, a ring that flashes, arrows bouncing at the target, emoji in tooltips, lorem ipsum, confetti at the end.
- Banned: real company names, logos and UI copied from existing products; purple or blue accents; glow on anything except the ring's 16% halo; blur on the overlay; bouncing or flashing pointers; a command palette; confetti; emoji; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the app sits at full brightness, still, the "Getting started 0/4" chip in the top bar.
- 0.6–1.0s: the overlay fades to 58% while the cutout irises in from the whole frame down to the search field (easeInOutCubic); the ring fades in.
- 1.0–2.25s: step 1's tooltip rises 8px and fades in (1.0–1.25 s); the cursor glides to "Next" (1.6–2.05 s) and clicks at 2.15 s.
- 2.25–3.55s: the spotlight slides and grows to the alerts card (2.25–2.8 s) with its tooltip; the four alert dots come in one after another, 60 ms apart; the cursor clicks "Next" at 3.45 s.
- 3.55–5.1s: the spotlight shrinks onto the first row's Reorder button (3.55–4.1 s) with step 3's tooltip; the cursor moves onto the Reorder button (4.25–4.75 s) and clicks at 4.85 s; the button becomes "PO-1042 drafted", the tooltip shows the drafted line, Open POs counts to 7.
- 5.1–6.3s: step 3 holds. The 6.0 s frame is the hero: the dimmed app fully legible, the spotlight ringing the "PO-1042 drafted" chip, the tooltip with "STEP 3 OF 4", the drafted line and three filled progress segments, the cursor resting beside it.
- 6.3–7.5s: the cursor clicks "Next" at 6.3 s; the spotlight travels to the avatars and Invite button (6.35–6.9 s) with step 4's tooltip; the cursor clicks "Finish" at 7.45 s.
- 7.5–8.4s: the cutout closes to nothing at the invite area (0.35 s, easeInCubic) while the overlay settles to 50%; the final card scales from 0.96 and fades in at the frame's center (7.75–8.1 s): 560×320, #F4F1E8, radius 18, the Quarry mark and "Quarry" in 44px 600, the line in 24px #45433D, the yellow "Start free trial" button 220×52, and "14-day trial · No card needed" in JetBrains Mono 14px #7A6420.
- 8.4–10.0s: hold on the final card over the dimmed app, the "Getting started 4/4" chip complete under the dim; the cursor fades out by 8.6 s.
For other lengths, add or remove a tour step at about 1.3 s each, keep the 0.55 s spotlight moves 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 icon 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. The tour's state (current step, cutout rectangle, card position, text, cursor position and press) is a pure function of t from one step table. 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 and weight before defining window.seek.
- Engine: plain DOM and CSS, every element absolutely positioned in stage pixels; seek writes inline left, top, width, height, transform, opacity and text each frame. The overlay is the cutout element's own box-shadow (0 0 0 4000px of the overlay color), so the hole and the dim are one shape and never separate; the ring is a second element sharing the cutout's rectangle. The cursor is an inline SVG on the top layer.
</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 the app's text stays readable under the dim, the cutout always frames its whole target with even padding, the tooltip's nub points at the target, no tooltip covers its own target or leaves the frame, the cutout and the card move together with no jump, the ring never flashes, and the reorder math reads $1,123.20 for 240 units. At 1.5 s step 1 is on the search field; at 3.0 s step 2 frames the alerts card; the 6.0 s frame shows step 3 with the drafted PO, "STEP 3 OF 4" and three progress segments; at 7.0 s step 4 frames the avatars and Invite; the final frame is the centered card over the dimmed app. 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…