component
Grain Field
By Artem Kireev

Details
- Artem KireevAuthor
- componentType
- $6.00Price
- 2026-08-22Published
- 2026-08-22Updated
- 2026-08-22Added
- EffectsCategories
Summary
Texture that never looks the same
Description
Description GrainField is a live WebGL shader overlay that adds grain, static, halftone dot, or ordered-dither texture to any layer in Framer. Instead of shipping one locked visual (as most single-purpose grain or dither components on the marketplace do), it packs four distinct noise algorithms behind one set of controls, so a designer can move from a subtle film-grain wash over a hero photo to a loud retro dither over a dark section without buying or wiring up a second component. Drop it above (or below) any content as a transparent, full-bleed layer. Every visual trait — pattern, grain size, intensity, contrast, tint, animation speed, and blend mode — is exposed as a property control, and it degrades gracefully to a CSS/SVG texture in the canvas editor and static exports so it never blocks Framer's automated static-renderer check. Customizations available in Framer Pattern — switches the underlying algorithm between Film Grain, Fine Static, Halftone Dot, and Bayer Dither. Grain Size — pixel size of each grain/dot cell, from fine to chunky. Intensity — overall strength/opacity of the effect. Contrast — pushes the noise distribution toward soft or punchy. Tint Color — any color (including alpha) to tint the texture; alpha also scales intensity. Color Mode — Mono (one noise value per pixel) or Chromatic (independent noise per RGB channel, for subtle color fringing). Animate — toggles the flicker on or off; off renders one static frame. Speed — how fast the pattern flickers, only shown while Animate is on. Blend Mode — Normal, Multiply, Screen, Overlay, Soft Light, Difference, or Color Dodge, for compositing against whatever sits behind it.
Introduction
Texture that never looks the same
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #4327