Dream Machine's header needed to feel like the product itself — generative, fluid, and slightly unpredictable. I created a header animation in Rive that shifts and morphs continuously, giving the page a living quality.
Header animations are usually loops — a gradient that shifts, particles that float, shapes that rotate. Dream Machine's brand is about generation and transformation, so the animation needed to feel like it was creating something new each cycle.
Generative feel in Rive — true generative animation requires code, but you can approximate it in Rive using blend states with randomized timing. I set up three shape layers that morph on overlapping timelines with different durations (3s, 5s, 7s). The prime-number relationship means the visual pattern doesn't obviously repeat for about 105 seconds.
Color system — the palette shifts based on scroll position using a Rive number input. At the top of the page, it's cool and ambient. As you scroll into content, it warms up and increases contrast. This creates a natural transition from atmosphere to focus.
Performance — header animations have to be cheap. This runs at 60fps because it's just three shape morphs with opacity blending — no particles, no physics, no complex compositing. Rive's renderer handles this without breaking a sweat.
The best header animations are the ones you don't consciously notice but would miss if they were gone. They set a mood without demanding attention.
Rive — shape morphing with staggered blend timelines