About Shape Grid
Remix Link - Shape Grid
About Shape Grid
Shape Grid is a free generative grid component for Framer. It makes animated shape patterns: ripples, beams, waves, spirals, diagonal flows and sparkles.
Pick one of 6 ready-made presets and it looks good straight away. Then adjust anything in the properties panel.
Shapes shrink as they fade, which gives the pattern smooth, natural depth. An optional directional glow adds polish.
It’s built to use many times on one page. Every grid draws on the GPU in the background, so even several 50×50 grids stay smooth. Grids pause when they’re off-screen or the tab is hidden.
Features:
6 presets: Red Ripple, Blue Beams, Yellow Waves, Green Diagonal, Blue Spiral, White Sparkle
7 wave types: Circular Ripple, Linear Horizontal, Linear Vertical, Diagonal, Spiral, Random, Uniform Pulse
Fade, Scale, Float and Rotate animations, each with its own intensity
Shapes shrink as they fade, with adjustable strength
Directional glow with color, blur, opacity, distance and angle controls
7 base shapes: Circle, Square, Triangle, Pentagon, Hexagon, Octagon and Custom Polygon
Adjustable aspect ratio for stretched or squashed shapes
Frozen Wave mode shows a still frame on the canvas, so editing stays fast
Grids up to 50×50
Works with your color styles and dark mode, and supports a transparent background
Perfect for:
Hero backgrounds
Abstract decorative sections
Loading and waiting states
Portfolio and agency sites
SaaS and tech product pages
What’s included:
The Shape Grid code component
6 presets on a labeled Presets Board
A Start Here guide in the remix file
Responsive demo layouts for desktop, tablet and phone
