Pitter Patter

A digital spray paint simulation rendered on canvas. Spray colorful string trails that obey physics - gravity pulls them down and chaos adds randomness. Move your mouse to paint, or watch the auto-demo mode on big screens.

pitter-patter-preview

Why it helps: A physics-based spray paint tool creates an unexpectedly satisfying tactile experience. The string trails that obey gravity feel like painting with actual silly string - a playful interaction that draws users in.

Also good to know:

-Canvas-based rendering means no DOM accessibility for the artwork
-The particle system can become slow with many strands (capped at 8000 particles)
-The auto-demo mode only runs on big screens

Source

components/live/SillyString.tsx

// Loading source...

Usage

example.tsx

import { SillyString } from "@/components/live/SillyString";

<SillyString
  className="w-full aspect-video"
/>
import { SillyString } from "@/components/live/SillyString";

<SillyString
  className="w-full aspect-video"
/>

Props

className-

string

Additional CSS classes.

style-

CSSProperties

Inline styles.