Components/Canvas Animation Components for React

Canvas Animation Components for React

These components draw straight to an HTML canvas for smooth, GPU-friendly animation at any size: particle fields, noise backgrounds, and generative grids. Each one is self-contained React and TypeScript, ready to copy or install with the shadcn CLI.

Free component
Signature Pad

Signature Pad

A signature pad widget — pill button morphs into a canvas to draw with mouse or touch.

View Component
Free component
Slice Type

Slice Type

A typographic magic trick. At rest you read one ambiguous word; hover and it splits into two — LIGHT lifting up, NIGHT sinking down, the shared letters resolving into separate glyphs.

View Component
Free component
Sticker Wall

Sticker Wall

A draggable sticker card wall. Drop notes, toss emoji, pile them up with real 2D physics.

View Component
Free component
Noise Field

Noise Field

A grid of flowing arrows driven by layered sine-wave noise — like wind mapped on a weather chart. Hover to create a swirling vortex at the cursor.

View Component
Free component
Spider Web

Spider Web

An organic silk web that breathes with a slow idle bow. Hover to physically push the nodes — each intersection bounces back with tension, fading the strings near your cursor.

View Component
Free component
Magnetic Dots

Magnetic Dots

A dense grid of dots that get magnetically pulled toward the cursor, snapping back with a satisfying elastic bounce when you leave.

View Component
Free component
Wireframe Globe

Wireframe Globe

A wire-frame globe that breathes on its own — a narrow wave band drifts quietly across the surface. Hover to ripple the lines right where your cursor lands.

View Component
Free component
Particle Sphere

Particle Sphere

9,000 particles arranged on a sphere with warm gold and cool silver tones, slowly spinning in Three.js.

View Component
Free component
Dot Grid

Dot Grid

A canvas-based dot grid background where hovering illuminates nearby dots with a smooth radial glow and organic fade.

View Component
Free component
X Grid

X Grid

A canvas-based interactive background of × marks that illuminate and connect to neighbours with constellation lines on hover.

View Component
Free component
Grain Background

Grain Background

A canvas-based grain background of randomly scattered dots that illuminate with a soft Gaussian glow and organic connection lines on hover.

View Component
Free component
Bubble Field

Bubble Field

A grid of outline circles that burst on hover — each expanding and fading like a soap bubble popping, then reforming, with a soft pastel blue palette.

View Component
Free component
Grid Lines

Grid Lines

A dot grid connected by thin lines. On hover, a radial wave pulses outward from the cursor, illuminating lines and dots as it spreads.

View Component
Free component
Distortion Grid

Distortion Grid

A canvas grid of thin lines that slowly undulate with large sweeping waves. Hovering repels the grid fabric outward from the cursor, amplifying the distortion across the entire canvas.

View Component
Free component
Wave Lines

Wave Lines

Dense vertical lines that ripple across the canvas — two layered sine waves create organic bunching and breathing. Hover to send the lines into extreme waves across the whole canvas.

View Component