Components & Blocks/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 install with the shadcn CLI.

Free
Diamond Grid

Diamond Grid

A faint canvas grid of diamonds. Seeded sparks send light outward until fronts meet.

View Component
Premium
3D Gem Pricing Section

3D Gem Pricing Section

Three pricing cards, each topped by a still faceted gem that grows and spins on hover.

View Component
Free
Signature Pad

Signature Pad

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

View Component
Free
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
Sticker Wall

Sticker Wall

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

View Component
Free
Wave Lines

Wave Lines

An animated line background. Dense vertical lines ripple with two layered sine waves, bunching and breathing. Hover to send waves across the canvas.

View Component
Free
Distortion Grid

Distortion Grid

An animated grid background. Thin lines undulate in slow sweeping waves, and hovering repels the grid fabric outward from your cursor.

View Component
Free
Grid Lines

Grid Lines

A grid background of dots connected by thin lines. The cursor lights a radial glow and bulges the grid outward like a lens as it moves.

View Component
Free
Bubble Field

Bubble Field

An animated bubble background. A monochrome grid of outline circles bursts near the cursor, expanding and fading, then reforming.

View Component
Free
Grain Background

Grain Background

A grain background of randomly scattered dots. Hover to illuminate them with a soft Gaussian glow and organic connection lines.

View Component
Free
X Grid

X Grid

An animated X grid background. Marks illuminate and connect to their neighbors with constellation lines as your cursor passes.

View Component
Free
Dot Grid

Dot Grid

An animated dot grid background. Hovering lights up nearby dots with a smooth glow and an organic fade.

View Component
Free
Wireframe Globe

Wireframe Globe

An animated wireframe globe background. A narrow wave band drifts slowly across the surface, and hovering ripples the lines under your cursor.

View Component
Free
Magnetic Dots

Magnetic Dots

An interactive dot background. A dense grid of dots is magnetically pulled toward your cursor, snapping back with an elastic bounce.

View Component
Free
Spider Web

Spider Web

An animated spider web background. Silk strands bow slowly at rest, and hovering pushes each node so it bounces back under tension.

View Component
Free
Noise Field

Noise Field

An animated flow field background. A grid of arrows driven by layered sine-wave noise drifts like wind. Hover and they turn to point at your cursor.

View Component
Free
Particle Sphere

Particle Sphere

A 3D particle background built with Three.js. 9,000 particles sit on a slowly spinning sphere in warm gold and cool silver.

View Component