https://framer.com/m/Fluidshaderbackground-ENTE7x.js
Io / Enhancements / FluidShaderBackground
FluidShaderBackground
FluidShaderBackground fills its frame with a slow-moving shader wash, meant to sit behind a hero or section rather than to be looked at directly.
Examples
Live specimens for every control the component exposes.
Default
Give it a frame and it fills it. Two controls set how the wash moves; everything else is fixed in the shader.
Motion
windSpeed is how quickly the wash drifts. warpPower is how far it bends as it goes.
wind 0.05
wind 0.3
warp 0.6
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for FluidShaderBackground
A hero or section needs a living background rather than a flat fill.
The motion should be slow enough to sit behind text.
You want a shader without writing one.
The section over it is quiet enough to carry a moving ground.
Reach for something else
The background must follow theme tokens — this paints its own colours.
Readers have asked for reduced motion.
You need the wash to react to the pointer or the scroll.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.