Auto Zoom Screen Recording

About this style

Screen recordings have carried software demos since recording tools became common in the 2000s. A newer style, popularized by recording apps such as Screen Studio, edits the capture automatically: the camera follows the cursor and pushes in on each click, the pointer's path is smoothed, the cursor is enlarged, and the window sits on a padded wallpaper with rounded corners and a soft shadow. Companies use it for launch posts, docs and onboarding because it turns a raw desktop capture into something readable on a phone, where a full-resolution screen would be unreadable. It works when every zoom has a reason: the camera only moves to where the viewer should be looking, and settles before anything happens there.

Make a 10-second product demo in the polished auto-zoom screen-recording style: a reporting app's window floats on a warm wallpaper, the camera glides in on each click and back out, a smoothed cursor leaves a soft trail and every click sends out a ripple, while someone builds a weekly report from a template and shares it.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Tidewell (fictional), a reporting app for small finance teams. Workspace: "Northfield" (fictional).
- Sidebar items: Overview, Reports (active), Dashboards, Data sources, Team.
- Reports list rows (name · owner · updated): "Weekly revenue · Oct 6–12" · Dana Okafor · 2 days ago; "Churn by plan · Q3" · Luis Brandt · Oct 2; "Signup funnel · September" · Dana Okafor · Sep 30; "Support volume · Week 40" · Imke Sato · Sep 29.
- Templates in the picker: "Weekly summary" (Revenue, customers and churn for the last 7 days), "Revenue by channel" (Split by source and plan), "Blank report" (Start from an empty page).
- Report: "Weekly summary · Oct 13–19". KPIs: Revenue $48,210 (+6.4%), New customers 312 (+18), Churned 27 (−5), Net revenue retention 104% (+2 pts).
- Daily revenue (must sum to $48,210): Mon 6,840 · Tue 7,120 · Wed 7,460 · Thu 7,050 · Fri 8,230 · Sat 5,690 · Sun 5,820. Tooltip on Friday: "Fri, Oct 17 · $8,230".
- Share popover: "Share report", "Anyone at Northfield with the link" · "Can view", link field "Northfield / Weekly summary · Oct 13–19", button "Copy link", which becomes "Copied". Toast: "Link copied".
- End caption: "Weekly reports in three clicks." and below it "Tidewell Reports · Free for teams up to 5".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a screen recording that a good editor has finished: one app window on a soft wallpaper, filmed by a virtual camera that zooms toward whatever the cursor is about to do, holds while it happens, and eases back out. The app itself is calm, light and legible; the camera work is the star, and it never moves without a reason.
- Palette. Wallpaper: a diagonal gradient from #F4E3CF (top left) to #E6C2A2 (bottom right) with two large soft radial blobs, #F0B48C at 45% centered at (1580, 220) radius 700 and #FBF1E6 at 60% centered at (300, 900) radius 650, plus seeded grain at 2.5%. App: window #FFFFFF, sidebar #F6F3EE, hairlines #E7E1D8, text #1E1B18, secondary text #6E665D, tertiary #A39A8F; brand green #1F6B4F (primary buttons, active nav, chart bars), green hover #185A42, green tint #E3F0EA (selected fills, positive deltas' background), positive text #1F6B4F, negative text #B4472F with tint #F7E4DE; chart gridlines #EEE9E2; Friday's highlighted bar #2E8A67. Cursor: fill #FFFFFF, outline #1B1814. Ripple: #1F6B4F. End caption: #3A2416 and #7A5B45. No purple, no blue, no neon.
- The recording frame: the app window is 1520×950 at x 200–1720, y 65–1015, radius 18, with a 44px title bar (#FBFAF8, bottom hairline) holding three neutral 12px dots (#DCD5CC) at the left and the centered title "Tidewell — Reports" in 14px secondary text. Shadow: 0 40px 90px rgba(74,40,20,0.26) and 0 8px 22px rgba(74,40,20,0.16).
- App layout, in window coordinates (origin at the window's top left): sidebar x 0–240 below the title bar, with the workspace switcher ("Northfield" with a 28px green square monogram "N") at y 64 and nav items 40px tall from y 120, each with a 18px line icon drawn in SVG; the active item has a #E3F0EA pill and green text. Top bar y 44–108 across x 240–1520: a search field 360×40 at x 272 ("Search reports", with a magnifier) and at the right a "New report" button 148×40 at x 1300 (green, white 15px label, radius 10, a plus icon) and a 36px avatar circle "DO" at x 1464.
- Reports list (the opening screen): heading "Reports" 28px at (272, 150); a table from y 210 with columns Name (x 272), Owner (x 900), Updated (x 1160), 56px rows with hairlines, owner avatars as 24px initial circles.
- Template picker: a modal 720×380 centered on the window with radius 16 and a scrim of #1E1B18 at 18% over the app; title "Choose a template" 22px; three cards 208×220 in a row 20px apart, each with a small drawn thumbnail (bars for Weekly summary, a split donut for Revenue by channel, a dashed empty page for Blank), the name in 16px semibold and the one-line description in 14px secondary text. Hover: border 2px #1F6B4F and the card lifts 2px.
- Report editor: header at y 130: title "Weekly summary · Oct 13–19" 28px, a date chip "Oct 13 – Oct 19" with a calendar icon at x 272 y 176, and a "Share" button (white, hairline border, 15px, share icon) 104×40 at x 1376, y 132, right-aligned with the chart card. KPI row at y 236: four cards 287×120 with 20px gaps from x 272 to x 1480, each with a 14px label, the value 34px semibold and a delta pill (green tint for good news, which includes Churned −5). Chart card at y 380, 1208×520 (to y 900): title "Daily revenue" 18px, a y-axis with $0, $3k, $6k, $9k in 13px tertiary, gridlines, seven bars 96px wide with day labels below, values in 13px above each bar, and Friday's bar in the highlight green when hovered.
- Type: Plus Jakarta Sans 400 / 500 / 600 / 700 for all UI (body 15–16px, labels 14px, numbers with tabular figures); Instrument Serif 400 for the end caption, 64px, with the subline in Plus Jakarta Sans 500, 22px, tracked 0.01em.
- The camera: the wallpaper, window, cursor and ripples live in one 1920×1080 recording layer, and the camera is a single transform on it: translate(960 − fx·s, 540 − fy·s) scale(s) with transform-origin 0 0. The focus (fx, fy) is clamped to [960/s, 1920 − 960/s] × [540/s, 1080 − 540/s] so the edge of the wallpaper never shows. Zoom levels stay between 1.0 and 2.0. Every camera move uses a critically damped spring, p = 1 − (1 + ωτ)·e^(−ωτ) with ω = 9 (it settles in about 0.7 s with no overshoot); scale is interpolated in log space so zooms in and out feel equally fast, and focus is interpolated linearly in screen space. The camera always starts moving 0.15–0.3 s before the cursor arrives, so it leads rather than chases.
- The cursor: an original arrow pointer drawn as one SVG path, 30px tall in recording space (so it grows with the zoom), white fill, 2px #1B1814 outline, a soft shadow 0 3px 6px rgba(0,0,0,0.22). It travels between stops on a slight arc (a quadratic curve whose control point is offset 8% of the distance to one side) with minimum-jerk timing, 10τ³ − 15τ⁴ + 6τ⁵, so it starts and stops softly. Over buttons it stays an arrow. On a click it shrinks to 0.86 for 0.08 s and returns.
- The softened trail: behind the cursor, a tapered stroke through the cursor tip's positions over the last 0.12 s (sampled every 12 ms), width 10px at the tip falling to 0, #1B1814 at 10% falling to 0. It only shows while the cursor moves faster than 400px/s, so it's invisible at rest.
- Click ripples: a ring from the cursor tip expanding from radius 6 to 34px over 0.45 s on easeOutCubic, 3px #1F6B4F stroke fading from 55% to 0, with a filled disc of the same color growing to 18px and fading from 20%. The clicked button darkens to its pressed shade for 0.12 s.
- UI motion inside the recording is the app's own and quick: the modal opens in 0.28 s (scale 0.96→1, opacity 0→1, easeOutQuint), cards lift in 0.15 s, KPI values count up in 0.6 s on easeOutCubic with tabular digits, bars grow from the baseline in 0.4 s on easeOutBack with a 1.05 overshoot, staggered 50 ms, the tooltip fades and rises 4px in 0.15 s.
- Premium: zooms that anticipate the cursor and settle before the click, one smooth curve per move, sharp UI text at 2× (DOM text re-rasterizes at its final scale), a cursor with weight, numbers that add up, a soft real shadow. Cheap: linear zooms, zooming on nothing, whip pans, wobbling springs, blurry upscaled text, a glowing cursor halo, confetti on success.
- Banned: real company names, logos and UI copied from existing products; red, yellow and green window buttons; operating system chrome or a menu bar; zoom above 2.0× or below 1.0×; camera rotation or Dutch tilts; motion blur that smears text; confetti, sparkles, lens flares; purple or blue gradients; lorem ipsum; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.5s: the window settles onto the wallpaper (scale 0.97→1.0, opacity 0→1, easeOutCubic) showing the Reports list at zoom 1.0; the cursor enters from (1500, 900) in recording space.
- 0.5–1.35s: the cursor glides to the "New report" button; from 0.75 s the camera zooms to 1.8 focused on the button. Click at 1.35 s with a ripple.
- 1.4–2.55s: the template picker opens (1.4 s); the camera eases to 1.45 centered on the modal (1.45–2.15 s); the cursor moves to "Weekly summary" (1.8–2.4 s), the card lifts on hover; click at 2.55 s.
- 2.65–4.4s: the modal closes and the report editor appears; the camera settles at 1.35 on the header and KPI row (2.7–3.4 s); the KPI cards fill one after another from 3.0 s, 0.12 s apart; the chart draws its gridlines (3.5 s) and the bars grow (3.7–4.25 s).
- 4.4–5.1s: the cursor moves onto Friday's bar; the camera drifts to 1.5 on the chart (4.3–5.0 s); Friday's bar turns the highlight green and its tooltip appears at 4.95 s.
- 5.1–5.8s: the camera eases all the way out to 1.0 while the cursor rests on Friday with the tooltip showing.
- 5.8–6.3s: the 6.0 s frame is the hero: the whole window at zoom 1.0 on the wallpaper, the finished report with all four KPIs, all seven bars, the Friday tooltip, the cursor at rest and the Share button in view.
- 6.3–6.95s: the cursor travels to "Share"; the camera zooms to 1.9 on it from 6.3 s. Click at 6.95 s; the share popover opens below the button (7.0–7.28 s).
- 7.3–7.9s: the cursor moves to "Copy link"; click at 7.65 s; the button changes to "Copied" with a check (label crossfade 0.15 s) and the "Link copied" toast rises at the bottom center of the window (7.7 s).
- 7.95–8.6s: the camera eases out to 1.0; the cursor fades out (8.2–8.4 s).
- 8.4–9.0s: the whole recording layer scales to 0.8 about (960, 470) and rises, on the same spring, leaving room below; the caption fades and rises 12px at y 948 (8.6 s) and the subline at y 1000 (8.75 s).
- 9.0–10.0s: hold on the framed window and the caption, the toast still visible.
For other lengths, add or remove one click step (keep the share step), keep each camera move at about 0.7 s and keep 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, icon and texture is generated in code (the grain from a seeded noise canvas made at load).
- 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 camera, cursor, trail and every UI state are pure functions of t built from one keyframe 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 is absolutely positioned in stage pixels; seek writes inline transform, opacity and text each frame. Don't set will-change on the recording layer, so Chrome re-rasterizes text sharply at each zoom. The cursor, trail and ripples are one inline SVG inside the recording layer. KPI numbers are formatted from their counted values each frame with tabular figures so they don't jitter.
</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 wallpaper edge never shows during any zoom, no zoom passes 2.0×, every camera move settles before its click, the click ripples land on the cursor tip, the trail is invisible at rest, UI text is sharp at 1.8×, the bar values sum to $48,210, and Churned −5 reads as good news. At 1.35 s the camera is on the New report button; at 2.55 s on the template cards; the 6.0 s frame shows the full window at 1.0 with all four KPIs, all seven bars and the Friday tooltip; at 7.7 s the button reads "Copied" and the toast shows; the final frame is the framed window above the caption and subline. 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…