A nine-beat vertical brand film that scrambles, swings, rolls and wipes one sentence into a call to action
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 · 3 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.
- Wordmark *wordmark · string
The name set in the serif, on the artwork in the middle of the film. Two or three words at most: it is measured to rest 756 reference pixels wide on a cap of 58, and it is drawn 12 percent narrow to get there, so a longer name narrows further rather than wrapping.
now: Bluepath.org Onward
- Url *url · string
The address, on the closing pill and again on the end card. Written without a scheme, the way it is spoken. About 30 characters is the pill's measured width.
now: bluepath.org/onward
- Brand *brand · string
Brand token id, one of the keys of BRANDS. The film reads four values from it: `bg` is the paper, `accent` the type, `inkMuted` the unresolved ghost and `ink` the drawn line and the pill. Written for `beacon`, which was sampled off the reference; any light brand with a saturated accent re-voices it without changing a frame number.
now: beacon
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A twenty-four second vertical film on white and electric blue. A line scrambles out of symbols and resolves word by word, then slides away and a hand-drawn stroke crosses it. White type on blue swings off the bottom of the frame one letter at a time. Five words climb the frame and turn blue in turn under a drawn arc. A wave of blue ribbons opens to the full frame behind a serif wordmark, which stretches in, holds, and is magnified until one white stroke wipes the frame. A sentence rolls up a column of words, the read word blue at the centre and its neighbours grey. Two single words punch in, then the last word settles, three gradient marks fly across, a call to action builds and an address pill opens under it. It closes on white with the address alone.
