Grainient blends cinematic grain, fluid warp motion, and tri-color gradient mixing into a premium full-bleed background effect. It is built to feel alive in motion while staying practical in Framer with reliable static fallback and editor-safe behavior.
Config: Deafult
Config: Noise Scale = 10.00
Config: Noise Scale = 10.00; Warp Amplitude = 3.00
Cinematic grain over a smooth animated gradient field
Deep look control via warp, blend, contrast, gamma, saturation
Three independent color stops for precise palette direction
Canvas-aware preview toggle for smoother editor workflows
Static snapshot fallback for export-safe rendering
Auto resize + visibility/in-view pausing for efficient runtime
Hero backgrounds for landing pages
Portfolio and studio showcase sites
SaaS marketing sections that need subtle motion
Product launch pages with premium visual tone
Creative agency templates and dark-mode experiences
Grainient uses a Three.js shader pipeline with a single fullscreen draw pass, plus in-view and visibility-based pause/resume to avoid unnecessary rendering work. In Framer canvas it can freeze on the current frame when preview is off, and for static rendering it captures one WebGL snapshot and tears the context down. DPR is capped for runtime stability on high-density screens.
Sperara
