Particle Converge
Logo & brandPoints fly in from off frame and resolve into a mark, each trail sampled from its own velocity so it stretches in flight and collapses on arrival
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 · 6 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 that resolves under the mark, once the points have landed.
now: MOTIONSTASH
- Taglinetagline · string
One quiet line under the wordmark. Arrives last.
now: One timing grammar. Every format.
- Markmark · "chevron" | "ring" | "frame"
The shape the points converge into. 'chevron' is a rising mark, 'ring' a closed circle, 'frame' a rounded square outline.
now: chevron
- Halohalo · boolean
Add a second, sparser ring of points orbiting the mark. Reads as depth around the shape.
now: true
- Countcount · number
How many points. Below 120 the shape reads as dotted; above 320 the trails start to merge into a solid.
now: 240
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: signal
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A vertical logo reveal where a few hundred points fly in from off frame and converge into a geometric mark. Each point needs a motion trail whose length comes from its actual velocity, so it stretches while travelling and becomes a dot the instant it lands. Distribute the points evenly along the shape by arc length rather than per vertex, vary their depth so the far ones are softer and dimmer, and flash a bloom at the moment the last one arrives before the wordmark resolves underneath.
