Focus Pull Lines
Kinetic typeFocus racks down a stack of lines with real lens behaviour, blur, focus breathing, contrast loss and bloom
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.
- Lines *lines · array
The lines, in order. Focus racks from the first to the last, so put the payoff at the end. Two to four lines; four is already a lot for five seconds.
now: 3 items
- Eyebroweyebrow · string
Small tracked label above the block. Stays sharp throughout.
now: How it works
- Playheadplayhead · boolean
Draw an accent bar that travels down the left edge to the line currently in focus.
now: true
- Apertureaperture · number
How shallow the depth of field is. Higher blurs the out-of-focus lines harder, 0.6 reads as a fast portrait lens, 0.25 as a phone camera.
now: 0.62
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A vertical text sequence where the camera racks focus down three lines of copy, one at a time. It has to behave like a real lens, not a blur filter: out-of-focus lines should be slightly larger from focus breathing, lower in contrast, and bloom a little past their edges. Move the focus continuously through the lines instead of cutting between them, and mark the live line with a small accent playhead on the left.
