Melting Grains is an animated WebGL surface in which a serpentine amber front sweeps across charcoal and reveals densely packed, champagne-lit microbeads. Use it as a warm, tactile hero background or a premium product backdrop. Composition size frames the front, grain density sets how tightly the beads pack, exposure controls brightness and the grain seed picks a different arrangement. Speed, timeline offset and palette are editable, and the live editor and the code exports share one original renderer.
How this shader works
Melting Grains shows a winding amber front sweeping across a charcoal surface and revealing densely packed, champagne-lit microbeads behind it. It reads warm and tactile, suited to a product backdrop or a hero background. Composition size frames the front, Grain density sets how tightly the beads pack, and Grain seed picks a different arrangement of beads.
Tips
- Grain density sets the bead size and count. Lower values give larger, more visible beads.
- Grain seed shuffles the arrangement. Try a few until the pattern sits well with your layout.
- Exposure is raised slightly here. Lower it for a darker, moodier surface.
- Change Amber and Champagne to move away from the warm palette.
Questions
How do I make a warm animated background for a product page?
Open Melting Grains, set Composition size and Grain density, and keep Speed low for a slow reveal. It exports as an HTML file, a React or Svelte component or an MP4 video.
What does Grain seed do?
It changes the random arrangement of the beads without changing their size or density.
Preview and customize in the browser. Exports require membership.