A word drops in letter by letter out of defocus, then a search field pops open, an address is typed into it and a pointer clicks the magnifier, which bursts
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 · 5 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.
- Word *word · string
The word that drops in letter by letter before the field. Four letters fill the reference frame; eight is the most that stays in frame at 9:16.
now: Meet
- Query *query · string
What gets typed into the field. The typing always takes the same nine frames, so a longer address types faster rather than later.
now: softriver.co
- Pointer *pointer · boolean
Draw the pointer gliding in and turning into a hand. Off, the button still hovers and clicks on its own beats.
now: true
- Burst *burst · boolean
The eight rays out of the button on the click.
now: true
- Brand *brand · "slate" | "paper" | "signal" | "press" | "circuit" | "linen" | "field" | "ledger" | "sky" | "frost"
Brand palette. The reference is `frost`: lavender ground, teal ink, violet accent.
now: frost
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A near-white lavender frame. One bold word falls in from above, each letter on its own spring, blurred and pale while it is far off and sharp by the time it lands and settles. The word slides off to the left, faster and faster, and is gone. A rounded lavender search field pops into the middle and widens, a magnifier at its right end, and an address types itself in with a violet caret. A pointer glides in from the bottom right, the magnifier turns solid teal as it arrives, the pointer becomes a hand, and on the click the button turns violet and eight rays burst out of it. The field lifts out through the top of the frame.
