About Shape Grid
Description
Shape Grid is a powerful generative grid component that creates beautiful, animated shape patterns with advanced wave control.
You can generate circular ripples, linear waves, spirals, diagonal flows, and more. All are fully controllable from the properties panel.
A unique feature links scale directly to opacity, so shapes naturally shrink as they fade, creating smooth, organic depth. Directional glow support adds an extra layer of polish.
Highly customizable yet performance-conscious, with a smart Canvas Preview mode that lets you design without lag.
Features
Multiple wave types: Circular Ripple, Linear Horizontal/Vertical, Diagonal, Spiral, Random, and Uniform Pulse,
Unique Opacity-Linked Scaling - shapes shrink as they fade (fully controllable intensity),
Directional Glow system with color, blur, opacity, distance, and angle controls,
7 base shapes: Circle, Square, Triangle, Pentagon, Hexagon, Octagon + Custom Polygon,
Adjustable Aspect Ratio for stretched or compressed shapes,
Canvas Preview mode (strong frozen wave for designing + quieter mode for performance),
Full control over speed, amplitude, frequency, stagger, and intensity,
Up to 50×50 grid density.
What’s it perfect for?
Hero section backgrounds,
Abstract decorative sections,
Loading and waiting states,
Portfolio and agency websites,
SaaS / tech product pages,
Any design that needs dynamic, generative energy.
How to use it
Drag Shape Grid onto your canvas
Resize the component to your desired area
Use the property controls to choose:
Grid density,
Wave Type and Origin,
Shape style and Aspect Ratio,
Animation intensities (Fade, Scale, Float, Rotate),
Optional Glow effects,
Toggle Canvas Preview on to see a strong frozen version of the wave while designing
Preview the page to see the full continuous animation
All controls are live, changes appear instantly.
What’s included
Fully customizable code component,
7 wave algorithms,
Opacity-linked scale system,
Performance-optimized for Framer & more.
