Components that
make you stand out.

React components, animations, and effects. Preview them, make them yours, and bring them into your next project.

Shape Physics

A playful physics canvas that fills with 3D characters: spheres, cones, cubes, clouds, drops and thick flowers that tumble, pile up and follow the cursor. Drag and drop them, or keep them flat in 2D.

Controls

Click to create a shape. Drag and release to throw. Enter adds one; R starts again.

Shapes

Preset

Depth

Shape

Faces

Follow cursor

Cursor followers (%)

Object count

Object radius (px)

Size variation

Objects per second

Appearance duration (s)

Random seed

Physics

Gravity (px/s²)

Wind (px/s²)

Bounce

Contact friction

Air resistance

Initial spin

Pointer interaction

Palette

Shape color 1

Shape color 2

Shape color 3

Shape color 4

Shape color 5

Shape color 6

Shape color 7

Shape color 8

Shape color 9

Face color

Canvas background

Properties

25 properties

Property	Type	Default	Description
`height`	`number \| string`	`100%`	Height of the canvas. Without it the component fills its parent, which needs a defined height.
`depth`	`"3d" \| "2d"`	`3d`	3D volumes tumble and show their sides; 2D keeps the same figures flat.
`shape`	`"mixed" \| "circle" \| "triangle" \| "square" \| "cloud" \| "teardrop" \| "puff"`	`mixed`	Mix figures or give every figure the same shape: spheres, cones, cubes, clouds, drops or flowers.
`faces`	`boolean`	`true`	Show the eyes.
`followCursor`	`boolean`	`true`	Enable mouse or pen tracking for a stable subset of figures. Works during pause; disabling restores the authored expressions.
`cursorFollowRatio`	`number`	`0.4`	Fraction of figures that follow the cursor. The remaining figures keep their independent idle gaze. Use 0 for none or 1 for all.
`count`	`number`	`22`	Upper limit for automatic figures. They keep falling in until the container is full, then stop.
`size`	`number`	`50`	Largest figure radius. Increasing it stops when the current figures would overfill the container.
`sizeVariation`	`number`	`0.15`	Variation below the largest radius. Zero gives every object the same size.
`spawnRate`	`number`	`14`	Figures falling in per second until the container is full.
`appearanceDuration`	`number`	`0.55`	Time for each object to grow into view. Flowers unfold petal by petal; zero creates complete shapes.
`seed`	`number`	`52490`	Reproducible shapes and placement. Changing this value replays the field.
`gravity`	`number`	`1600`	Downward acceleration. Zero makes objects weightless; negative values pull upward.
`wind`	`number`	`0`	Horizontal acceleration. Negative values push left.
`restitution`	`number`	`0.42`	Energy retained after impact. Slow contacts settle without continual bouncing.
`friction`	`number`	`0.45`	Resistance to sliding along objects and canvas boundaries.
`damping`	`number`	`0`	Exponential damping of linear and angular velocity.
`spin`	`number`	`1`	Initial spin of new figures, in the screen plane and (in 3D) out of it.
`faceColor`	`string`	`#ffffff`	Color of the eyes. Accepts CSS colors and variables.
`colors / background`	`readonly string[] / string`	`Default palette / page background`	CSS colors, variables or system colors. The background follows the page theme by default; explicit colors remain unchanged across theme switches.
`paused / interactive`	`boolean`	`false / true`	Pause generation and physics; enable creation and dragging.
`onFullChange`	`(full: boolean) => void`	`—`	Reports when another figure no longer fits at the selected fixed radius.
`onSizeLimitChange`	`(maximum: number) => void`	`—`	Receives the maximum radius that fits the current figure count and container.
`ref`	`ShapePhysicsHandle`	`—`	replay(), clear(), addShape(), shake(). Clear stays empty until creation or replay.
`className / style`	`string / CSSProperties`	`—`	Host styling. The canvas fills the width and height of its parent.

Usage

import { ShapePhysics } from './components/shape-physics';

export function Example() {
  return (
    <ShapePhysics
      height="100svh"
    />
  );
}