@sekei

Canvas effects for React, copied into your project as source. Starts with ordered dither: fire, lightning, sonar rings, a light beam, a sloshing fluid, rain and snow.

12 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://www.sekei.design/registry/registry.json

pnpm pnpm dlx shadcn@latest add https://www.sekei.design/registry/registry.json

bun bunx shadcn@latest add https://www.sekei.design/registry/registry.json

fetch registry curl -s https://www.sekei.design/registry/registry.json

Components

12 total

usePrefersReducedMotion hook

Tracks the prefers-reduced-motion media query without tripping hydration.

npx shadcn@latest add https://www.sekei.design/registry/use-prefers-reduced-motion.json

shad-fx: engine lib

The frame loop, the Surface and FxEffect contracts, the useFx and useFxEngine hooks, seeded RNG and the colour helpers every renderer and effect builds on.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-engine.json

shad-fx: dither renderer ui

DitherCanvas: fills its positioned parent with a pixelated canvas that draws any effect as Bayer-dithered cells.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-dither.json

shad-fx: ASCII renderer ui

AsciiCanvas: fills its positioned parent with a canvas that draws any effect as coloured glyphs, in the system monospace or a font you pass.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-ascii.json

shad-fx: fire lib

Rising flame front with embers.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-fire.json

shad-fx: rings lib

Concentric rings pulsing out from an anchor.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-rings.json

shad-fx: beam lib

Directional beam with drifting motes.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-beam.json

shad-fx: bolt lib

Intermittent lightning arcs on a randomised interval.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-bolt.json

shad-fx: fluid lib

Sloshing liquid level with rising bubbles.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-fluid.json

shad-fx: rain lib

Slanted streaks of rain, splashing on the floor.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-rain.json

shad-fx: snow lib

Drifting flakes settling into a drift along the floor.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx-snow.json

shad-fx ui

The dither and ASCII renderers, every effect, and a barrel that re-exports them.

npx shadcn@latest add https://www.sekei.design/registry/shad-fx.json