Macro UI Close-Ups

About this style

Macro product films come from hardware advertising, where a lens a few centimeters from a dial, hinge or button turns an object into texture and light. Software teams borrowed the grammar: the interface is rendered so large that a single toggle fills the frame, with a thin plane of focus and a strip of light sweeping across it as if it were glass. Cutting the shots to a musical beat gives the film energy without any copy. The format suits launches and feature releases because it slows viewers down on craft, the small interactions a team obsessed over, and it usually ends by pulling back to the full screen so the details add up to a product.

Make a 10-second product film made of extreme close-ups, in HTML and CSS: a macro lens drifts over the details of a revenue dashboard (a toggle switching on, a slider being dragged, an avatar stack filling, a chart tooltip landing), each shot cut on the beat with shallow focus and one light sweep, until the last close-up pulls all the way out to the full screen.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Kestrel (fictional), revenue analytics for subscription businesses. Version: "Kestrel 3.0".
- Workspace shown: Fernway Studio (fictional), a small chain of yoga and pilates studios.
- Caption: "Kestrel 3.0" · "Revenue, up close." · "Available now"
- Close-ups, in order: the "Include trials" toggle; the "Forecast horizon" slider; the "Finance · 6" avatar stack; the November chart tooltip; the net revenue retention number; the "Export report" button.
- Tempo: 120 BPM, a beat every 0.5 s. Length: 10 seconds.
</inputs>

<direction>
- Look: macro product photography applied to software. The interface is rendered so large that a toggle fills the frame, seen at a slight tilt like a lens hovering over glass, with a thin plane of focus: the detail is crisp, everything nearer and farther melts. Each shot gets one soft light sweep, like a studio strip light passing over a glossy surface. The palette is cool silver and cobalt: calm, bright and exact.
- Palette: stage #E5E7EA with a lighter center #EFF1F3; app window #FBFBFC; cards #FFFFFF; sidebar #F4F5F7; hairlines #E1E4E8; ink #15171A; secondary #636870; tertiary #9AA0A8; cobalt #2747F5 (the one accent: toggle on, slider fill, chart line, active nav), cobalt tint #E3E8FF; positive #1C9C61; tooltip #15171A with #FFFFFF text; avatar fills #F2B8A2, #A8C6E6, #CBE2B0, #F2D488, #E3C6B6 with ink initials; light sweep #FFFFFF.
- Type: Hanken Grotesk throughout, with tabular figures for every number: window title 28px 600; card labels 15px 500 secondary; KPI values 34px 700; body 16px 500; tooltip 15px/22px 600; the caption "Kestrel 3.0" 28px 700 and "Revenue, up close." 28px 400 italic in secondary.
- The app, built once as real DOM at 1504×846 in its own coordinates. Every close-up is a camera on this same layout, so the details match the final full screen exactly. Window radius 18, shadows 0 40px 80px rgba(20,26,40,0.16) and 0 2px 6px rgba(20,26,40,0.08).
  - Sidebar x 0–220: an original mark (a 26px cobalt kite, a rhombus with a notch cut from its lower right) and "Kestrel" at (24, 28); nav items Overview (active, cobalt text on the tint), Revenue, Churn, Cohorts, Forecast, Customers, Reports from y 96, 40px apart; "Fernway Studio" with a 28px initial tile at the bottom.
  - Header: "Revenue overview" at (252, 44); the avatar stack at x 1060–1230, y 28–64 (five 36px circles overlapping 10px with 2px white rings, then a "+1" circle, then "Finance · 6"); the "Export report" button at x 1328–1472, y 26–64 (ink fill, white label, radius 10).
  - KPI cards y 96–200, four across x 252–1472 with 16px gaps: "MRR · $482,190 · +4.1%", "ARR · $5.79M · +4.1%", "Net revenue retention · 118%", "Churn · 1.9% · −0.3 pts".
  - Chart card x 252–1100, y 220–604: "MRR, last 12 months"; a 2.5px cobalt line over a 12% cobalt area, from Dec 2025 at $318,400 rising unevenly to Oct 2026 at $463,200 and Nov 2026 at $482,190; month labels along the bottom; gridlines at $300k, $400k and $500k. The November point gets a vertical crosshair, a 10px point with a white ring and a tooltip card above and left of it: "Nov 2026", "MRR $482,190", "+4.1% vs Oct" (the last in positive green).
  - Forecast card x 1124–1472, y 220–604: "Forecast"; a row "Include trials" with a 44×26 toggle at x 1404–1448, y 286–312; "Forecast horizon" with a value bubble over a slider (track x 1148–1448 at y 384, 12 to 24 months, 22px thumb); at the bottom "Projected May 2028" over "$731,400" in 34px 700. With the slider at 12 months it reads "Projected Nov 2027" and "$668,900".
  - Table x 252–1472, y 628–818: "Revenue by plan", three rows that add up to the MRR: "Studio Annual · $212,400", "Studio Monthly · $148,760", "Teams · $121,030", each with a thin cobalt share bar.
- The close-up camera: one wrapper with its transform-origin at the detail, scaled 4.5–7× and tilted with perspective(1400px) rotateX(16deg) and rotateZ(±5deg), the roll's sign alternating from shot to shot. Within each shot the zoom grows 5% (linear) and the frame pans 30px along the tilt.
- Shallow focus: render the app twice inside the camera, a blurred copy under a sharp copy. Mask the sharp copy to a horizontal band in the app's own coordinates centered on the detail: fully opaque within ±90/zoom px of the detail's y, feathering to 0 over a further 160/zoom px. Blur the under copy by 16/zoom px so it reads as about 16px on screen. At each cut the sharp band starts 8px soft and sharpens within 0.18 s, a quick rack.
- Light sweeps: one per shot, starting 0.05 s after the cut: a 30%-wide diagonal band (#FFFFFF, 0 → 45% → 0, at 105°) crossing the frame in 0.45 s on easeInOutSine with mix-blend-mode soft-light, plus a matching glint on glossy parts (the toggle knob, the slider thumb, the button) as the band passes.
- Cuts: hard cuts exactly on beats; each new shot starts with a 0.12 s settle from 1.03× to 1× (easeOutCubic), so the cut punches in on the beat. No dissolves, no wipes.
- The interactions: the toggle knob slides 18px right on a spring (stiffness 300, damping 22, a small overshoot) while the track fills cobalt; the slider thumb glides from 12 to 18 months on easeInOutCubic while the bubble steps 13, 14 … 18, and the projection updates with it; avatars slide in from the right one by one, 70 ms apart; the crosshair glides from October to November and the tooltip rises 6px as it fades in; the NRR digits roll up from 112% to 118% (odometer columns, easeOutCubic); the export button presses to 0.97 and back and its label becomes "Exported" with a check that draws.
- The pull-out: the last close-up doesn't cut. The zoom travels from 6× to 1× by interpolating log(scale) on easeInOutCubic, the tilt returns to flat and the sharp band widens until everything is sharp by 5.8 s.
- The full screen at rest: the window at x 208–1712, y 84–930 of the stage, with a soft contact shadow; the caption on a baseline at y 1000: "Kestrel 3.0" at x 208, "Revenue, up close." 16px after it, and "Available now" right-aligned to x 1712 in Hanken Grotesk 600 22px cobalt.
- Premium: macro scale with real, crisp type (DOM text rasterized at size, never a blown-up bitmap), a thin focal plane, one clean light sweep per shot, cuts that land exactly on the beat, every detail matching the final screen. Cheap: blur used as a fog over everything, bokeh balls and lens flares, wobbly zooms, crossfades, a roll that changes mid-shot, close-up details that don't match the final screen.
- Banned: purple gradients, glow, bokeh balls, lens flares, motion blur, chromatic aberration, dissolves or slide transitions, dark mode, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–1.0s: the toggle (zoom 7×, roll −5°): "Include trials" soft in front, the toggle in focus; it switches on at 0.45 s.
- 1.0–2.0s: cut to the slider (zoom 5.5×, roll +5°): the thumb glides 12 → 18 months (1.2–1.75 s); below, half out of focus, the projection ticks from "Nov 2027 · $668,900" to "May 2028 · $731,400".
- 2.0–3.0s: cut to the avatar stack (zoom 7×, roll −5°): five avatars slide in from 2.1 s, "+1" at 2.5 s, "Finance · 6" fades in at 2.6 s.
- 3.0–4.0s: cut to the chart (zoom 4.5×, roll +5°): the line already drawn, glinting under the sweep; the crosshair glides from October to November (3.15–3.5 s) and the tooltip lands at 3.5 s.
- 4.0–4.5s: cut to the NRR card (zoom 6×, roll −5°): the digits roll 112 → 118 by 4.35 s.
- 4.5–5.0s: cut to the export button (zoom 6×, roll +5°): the press at 4.62 s; "Exported" and its check by 4.9 s.
- 5.0–5.9s: the pull-out from the button to the full window; the tilt flattens; the caption fades up from 5.5 s.
- 6.0s: the hero frame: the full window, sharp and flat, with the toggle on, the slider at 18 months, all six avatars, the tooltip on November, NRR 118%, "Exported", and the caption below.
- 6.2–6.9s: one last, broad light sweep across the whole window.
- 6.9–9.0s: a slow push from 1.0× to 1.025× on easeInOutSine.
- 9.0–10.0s: hold.
For other lengths, keep the cuts on the 0.5 s beat grid and add or drop whole-beat shots; keep the pull-out about 0.9 s 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 (the springs, the odometer) 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, weight and style before defining window.seek.
- Engine: HTML/CSS. The app is real DOM built once; the blurred copy is a clone made at load, and seek updates both copies' UI state together (toggle, slider, avatars, tooltip, digits, button) as well as the camera wrapper's transform, the mask, the filter and the sweep. Inline SVG is fine for the mark, the chart and the check.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10) plus 0.5, 1.6, 2.7, 3.7, 4.3 and 4.9: screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that every cut falls exactly on a 0.5 s beat; type stays crisp at 7× with no pixelation; the focus band sits on the detail and the blur never fogs the detail itself; at 0.5 s the toggle is on; at 1.8 s the slider reads 18 and the projection "$731,400"; at 2.7 s all six avatars and "Finance · 6" show; at 3.7 s the tooltip is fully readable; at 4.4 s NRR reads 118%; at 4.9 s the button reads "Exported". At 6.0 s the full window is sharp and flat, matches every close-up, and the caption is readable. The final frame is the same composition pushed in slightly. 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…