Pulse Grid

FreeNewSample

A WebGL dot field where a double-beat ripple travels out from any origin. Dots swell and warm near the pointer, and clicks send ripples of their own.

Original

backgrounds
shader
hero
interactive

Customize

Direction

Flow

Accent

Radius12px

Motion

Speed

These controls show a few ways to adapt it. The source is fully editable.

Install

Not published yet

npx shadcn@latest add @uicoolkit/pulse-grid

Install commands go live when this item ships to the registry.

Dependencies

Use with an agent

Copy a prompt with this component, your current preview settings and links to its docs.

Add the UICoolKit "Pulse Grid" component (pulse-grid) to this project.
Docs: https://uicoolkit.com/components/pulse-grid
Agent docs: https://uicoolkit.com/components/pulse-grid.md
Install: npx shadcn@latest add @uicoolkit/pulse-grid
Preview settings to match: accent Ember, radius 12px, motion on, direction center, flow outward.
Use the documented props and className hooks rather than editing internals, and wire it to this app's real state.
(Note: this is a sample item from the UICoolKit website shell and is not published yet.)

pulse-grid.tsx

<PulseGrid direction="top" flow="outward" className="absolute inset-0" />

Prop	Type	Default
`direction` Where ripples start; a tuple sets any point as fractions of width and height.	`"center" \| "top" \| "bottom" \| "left" \| "right" \| "corner" \| [x, y]`	`"center"`
`flow` Rings spread from the origin or gather toward it.	`"outward" \| "inward"`	`"outward"`
`speed` Time multiplier for the animation.	`number`	`1`
`interactive` React to the pointer (and clicks, where supported).	`boolean`	`true`
`color` Accent color; any CSS color or theme token.	`string`	`var(--accent)`
`className` Merged onto the root after defaults, so consumer styles win.	`string`	`—`
`motion` Disable animation or tune duration, easing and spring values. Reduced motion is honored by default.	`boolean \| MotionOptions`	`true`

Every part accepts className, and consumer classes are merged last so they win. Control state from your own data, replace any content, and tune or disable motion.

A substantially restyled instance

<PulseGrid
  className="rounded-none border-2 border-black bg-yellow-300 font-mono"
  motion={{ duration: 0.2 }}
/>