Ribbon Wave
BackgroundsA volumetric ribbon of phase-shifted strands travelling across frame, built outside-in with three depth groups and a moving hot spot
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.
- Headlineheadline · string
Optional line over the ribbon. Omit to use this purely as a background layer under another component.
now: Composition, in time
- Eyebroweyebrow · string
Small tracked label above the headline. Ignored when there is no headline.
now: Motionstash
- Amplitudeamplitude · number
Wave height as a fraction of frame height. Above 0.2 the ribbon starts leaving the frame.
now: 0.12
- Densitydensity · number
Number of strands in the ribbon. More strands read as a solid surface; fewer read as lines. 64 is the point where it becomes a surface.
now: 64
- Speedspeed · number
Travel speed of the wave. 0 freezes it into a static sculpture.
now: 0.55
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: circuit
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A flowing volumetric ribbon across a wide frame, the kind used behind a silicon or OS announcement. Build it from many thin phase-shifted strands rather than one filled shape, so the surface has visible striation and appears to twist. Give it a travelling waist so it pinches and swells, split it into depth groups with different blur so it reads as thick, and pass a soft hot spot along it. It has to work both as a hero with a headline and as a background layer on its own.
