Grid Fade lets you drop a grid behind your text without fighting for contrast — the fade does that work for you. Seven vignette shapes, adjustable position, radius, softness, and strength. Invert it to reveal instead of fade.
The grid renders on Canvas with DPR scaling and a RAF loop, so it stays sharp on retina and runs at 60fps. When canvas isn't available, a layered CSS/SVG fallback kicks in automatically.
Mouse proximity makes shapes grow as your cursor passes over them. The appear animation plays on mount or when the component enters the viewport, with seven wave directions to choose from. Click a spot and watch it ripple outward or push shapes away.
Grid — shape (circle, square, diamond, triangle, star, plus, ring), size, and gap.
Colors — 1, 2, or 4-corner gradient modes with configurable direction and background color.
Veil — seven fade shapes (circle, ellipse, vertical ellipse, square, diamond, h-band, v-band) with X/Y position, radius, softness, and strength. Invert to reveal.
Mouse Effect — proximity radius and growth multiplier. Respects reduced motion settings.
Appear Animation — trigger on mount or in-view, easing, duration, stagger, and seven wave directions.
Click Effect — ripple, repel, or none. Configurable radius and duration.
Sanna Granqvist
