RippleGrid
ripple-gridDisplaces a glowing grid with concentric waves and local pointer ripples.
Usage
Basic usage
Default dark background + chart-1 token grid; placed in relative container comes with absolute inset-0 z-0.
RippleGrid
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.02 265)" }}>
<RippleGrid />
<div className="relative z-10 flex h-full items-center justify-center">
<p className="text-2xl font-bold text-white/90">RippleGrid</p>
</div>
</div>Dense grid·Strong glow
gridSize encrypts the grid, glowIntensity improves line halo, and gridThickness sharpens lines.
Dense grid·Strong glow
<RippleGrid gridSize={18} glowIntensity={0.3} gridThickness={20} />Rainbow color
enableRainbow causes the mesh to cycle between RGB over time (color is ignored at this time).
Rainbow Ripples
<RippleGrid enableRainbow rippleIntensity={0.08} gridSize={12} />Diamond Grid · Custom Color
gridRotation=45 is rotated into a diamond grid, and color is passed to any CSS color to cover token.
45° diamond · warm gold
<RippleGrid
gridRotation={45}
color="oklch(0.78 0.18 75)"
gridSize={9}
rippleIntensity={0.06}
/>When to Use
Want an organic dynamic texture (hero / card background) where the grid is pushed and undulated by ripples. To statically regularize the grid, use GridPattern; to use the perspective retreat grid, use RetroGrid; RippleGrid is the only one in this family that allows the grid to twist with concentric ripples + pointer ripples, and supports rainbow cycle color matching.
Import
import { RippleGrid } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| enableRainbow | boolean | false | Rainbow cycle color matching (gradient between RGB over time, ignore color) |
| color | string | var(--color-chart-1) | Grid main color, any CSS color string; ignored when enableRainbow=true |
| rippleIntensity | number | 0.05 | Ripple perturbation intensity, 0 = stationary grid |
| gridSize | number | 10 | Grid density, the larger the density, the denser it is |
| gridThickness | number | 15 | Inverse line-thickness control; higher values produce thinner, sharper lines |
| fadeDistance | number | 1.5 | The distance from the center to the surroundings fades out exponentially. The larger the distance, the more focused the center is. |
| vignetteStrength | number | 2 | Vignette strength, 0 = no vignetting |
| glowIntensity | number | 0.1 | Grid line luminous intensity, 0 = no glow |
| opacity | number | 1 | Overall opacity (0–1) |
| gridRotation | number | 0 | Grid rotation angle (degrees), 45 = diamond grid |
| mouseInteraction | boolean | true | An extra circle of ripples is caused at the pointer |
| mouseInteractionRadius | number | 1 | Mouse ripple influence radius |
| className | string | — | Passthrough to the root container (or fallback div) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content without WebGL (default static mesh shading div) |
Usage Guidelines
- Requires client-side rendering (WebGL/ogl), the component comes with
"use client"; client subtree or dynamic import is installed in the RSC page. - The component comes with
absolute inset-0 z-0, and the parent container must have positioning + size +overflow-hidden, otherwise it will not be visible. enableRainbowwill ignorecolor, don't count on both at the same time; if you want a single theme color, turn off the rainbow.- Under reduced motion or without WebGL, the component renders the static grid fallback. Do not use motion as the only carrier of information.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
RippleGrid · WebGL Background
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.02 265)" }}>
<RippleGrid
rippleIntensity={0.05}
gridSize={10}
gridThickness={15}
glowIntensity={0.1}
gridRotation={0}
enableRainbow={false}
mouseInteraction={true}
/>
<div className="relative z-10">Content</div>
</div>