Three named cursors shape a mark on a vector canvas, the camera pulls back until the canvas is a window on a desktop, the window drops away and a lensed field of app icons scrolls until the mark's own disc lands at the centre
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 4 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Names *names · array
The three collaborators, in order of arrival: the one already on the mark when the shot opens, the one who draws the triangle from the bottom-right, the one who draws the circle from the left. Real-looking names read best; a first name alone, a full name and an initialled one is the mix the reference uses.
now: 3 items
- App name *appName · string
The title in the window's bar. Two words at most; it is set small and nobody reads past the second. Do not use a real product's name.
now: Vector Studio
- Mark *mark · "swoosh" | "ring" | "bolt"
The shape being made on the canvas, which is also what everything converges on at the end. 'swoosh' is a two-leaf S. 'ring' and 'bolt' are there for brands whose mark is closer to a circle or a stroke.
now: swoosh
- Brand *brand · string
Brand token id, one of the keys of BRANDS. 'frost' is the near-white lavender ground this style is known for and the one the clip was measured against. Brands without a third accent give the second collaborator the same blue as the first.
now: frost
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
Recreate this clip exactly. It opens zoomed in on a design-tool canvas with a grid: a dark two-leaf S mark inside a blue selection box, and an orange cursor labelled 'Jake' on its top-right handle. Jake drags the handle and the mark grows to about five times its size while the grid stays still. A yellow-green cursor 'Louis Key' comes in from the bottom-right and draws a dark triangle onto the mark's tail as the camera pulls back, until the canvas turns out to be a window titled with the app's name, with three traffic-light dots, on a lavender desktop. A violet cursor 'Alan T.' comes in from the left and drags out a dark circle. Then the whole window falls off the bottom of the frame and behind it there is a grid of round app icons, big in the centre and tiny at the edges, scrolling to the right until a white disc carrying the same S mark stops dead centre. All the other icons shrink away where they are and the disc grows. Match every timing to the frame. Then: the third cursor's animation comes too late in the clip and everything after it feels rushed. Fix the timing so the circle is drawn while the window is still framed and the ending has room, and keep everything else as measured.
