Agent logo glides over dark UI
A 20-second dark app UI film where a logo mark acts as the agent, handles an issue, opens a pull request, then becomes the logo. Copy it into Claude.
A near-black issue tracker lies flat in 3D as the camera glides low across it. A small logo mark picks up an issue, ticks off a plan, writes a diff and opens a pull request. It then answers in chat, lifts off the screen and settles as the logo, with every move landing on a beat.
Change the brand name, issue ID and title, pull request number and title, load times before and after, lines added and removed, the user reply, tagline and accent colour. At 16:9 and 20 seconds it fits product launches, X and LinkedIn posts, and website hero loops.
Use it for
- AI agent launch video
- Developer tool demo teaser
- SaaS homepage hero loop
Specs
- Length: 20 seconds
- Format: widescreen 16:9 (1920x1080), 30 fps
- Built with: Three.js in HyperFrames
- Category: App UI
What's in the scene
- 0 to 2 s. The issue list is already lit at frame 0, the mark gliding down the rows. It settles beside the hero row and taps (a brief dip…
- 2 to 3.5 s. The row lifts out as its own thin slab, leaving a dark recess in the list. It arcs east to the plan panel with the mark…
- 3.5 to 6.5 s. Five plan items stagger in. Ticks land on 4.5, 5.0, 5.5, 5.75 (the agent speeds up) and 6.0 s. Each tick is a glowing disc, a…
- 6.5 to 11 s. The mark leaves on a high arc and the camera whip-trucks east (transition 2). A diff panel rises with a small overshoot. Ten code lines type…
- 11 to 14 s. The camera swings round (transition 3) as a pull request card tilts up off the board to face the camera. It shows [PR title], [#number] and…
- 15 to 16.5 s. Two agent bubbles fold out of the mark ("Checkout now loads [N]× faster.", computed from before and after; "PR #[number] is ready for your review."), then…
- 16.5 to 20 s. The bubbles fold away, the mark climbs (transition 4) and the camera rises to almost straight down. The stage light falls until the mark's glow is…
- One continuous camera, never still. Keys are look-at point, azimuth, elevation and distance, joined by a monotone cubic (continuous velocity, no overshoot). 30° lens. About 30° elevation over the list…
- One soft spotlight above the look-at point travels with the action. Its penumbra fades every edge to black. Soft shadows from floating slabs. A very dim analytic environment (overhead softbox…
- Post: HDR MSAA render target, then a single-pass golden-angle gather bokeh focused per camera key, then camera motion blur (180° shutter, depth reprojection, 6 px dead zone so only the…
Build the world in Three.js
- Panels are bevelled slabs, not planes: rounded-rectangle ExtrudeGeometry with a small bevel, the top cap UV-mapped to a 2D canvas texture (about 4 texels per UI pixel, anisotropic filtering). Draw…
- Face material: MeshPhysicalMaterial with the canvas as both map and emissive map (emissive about 0.3) so the UI glows faintly, plus light clearcoat. Standing cards (PR card, bubbles) go fully…
- The board is a huge near-black plane with a quiet dot grid. The mark leaves a hairline additive trail on it in the accent, fading with age.
- The mark is an extruded white rounded wedge (emissive, so it blooms slightly) with a dark slot arm, carrying a small white point light so the UI brightens as it…
- Motion: every arrival uses one curve: a small anticipation dip, travel, about 4% overshoot, settled exactly on the beat. The mark's path is a chain of segments, each eased in-out…
What you can change
- Expose as variables: [brand], [issue ID], [issue title], [PR number], [PR title], [load before], [load after], [lines added], [lines removed], [user reply], [tagline], [accent], [added…
How the prompt opens
Make a silent 20-second, 16:9 (1920x1080, 30 fps) launch film for [your product: an AI agent, automation tool or dev product]. A near-black app UI lies flat on a dark desk in real 3D and the camera glides low across it. A small white logo mark is the agent: it picks up an issue, ticks off a plan, writes a diff, opens a pull request, replies in chat, then lifts off and becomes the logo. The example is an invented issue tracker called [brand, e.g. Tempo] whose mark is a metronome wedge. Swap in your own copy, numbers and colours.
The full prompt runs 1,096 words. Copy it free (2 a day) from this page.
Copy the prompt into Claude, or pull the scene into Claude Code and render the MP4 on your machine: how it works.