Filament Flow is a procedural WebGL texture of silver filament sheets drifting through ragged folds and dark cavities in a continuous organic motion. Use it as an atmospheric hero background or as a transparent layer over other content. Scale and turbulence set the size and roughness of the folds, filament density and weight control the strands, and contrast and brightness set the overall tone. Background opacity can drop to fully transparent. Speed, variation, timeline offset and palette are editable, and the live editor and the code exports share one original renderer.
How this shader works
Filament Flow shows sheets of silver filaments drifting through ragged folds and dark cavities in a continuous, organic motion. It works as a hero background or as a transparent layer over other content. Scale and Turbulence set the size and roughness of the folds, Filament density and Filament weight control the strands, and Background opacity can drop to fully transparent.
Tips
- Turbulence decides how ragged the folds are. Lower it for smooth, silky sheets.
- Filament weight sets the thickness of each strand.
- Set Background opacity to 0 to lay the filaments over a photo or a coloured section.
- Variation picks a different arrangement of the folds.
Questions
How do I add a transparent animated overlay to my site?
Open Filament Flow and set Background opacity to 0. Only the filaments are drawn, so the exported HTML, React or Svelte component can sit on top of your existing section. MP4 video exports are always opaque.
How do I make the filaments more visible?
Raise Contrast and Brightness, or increase Filament weight.
Preview and customize in the browser. Exports require membership.