Sekei

Overview

shad-fx, published by PG Gonni under the @sekei namespace, is a library of canvas effects for React that installs as source with the shadcn CLI. It ships seven effects (fire, lightning bolt, sonar rings, light beam, sloshing fluid, rain and snow) and two renderers: a dither renderer that draws each cell as a Bayer-thresholded pixel, and an ASCII renderer that draws colored glyphs.

Effects are separate from the renderer, so swapping DitherCanvas for AsciiCanvas changes nothing else, and each frame stays at a handful of draw calls. Projects can take the whole library or just one renderer and the effects they need. Files land under components/shad-fx/ and hooks/, following the project's components.json aliases.

Features

• Seven effects: fire, bolt, rings, beam, fluid, rain and snow, each with its own options such as colors, height, rate and embers
• Two renderers: DitherCanvas and AsciiCanvas run every effect unchanged
• useFx hook: Builds an effect once and applies option changes in place without restarting the simulation
• Per-frame updates: fx.set handles values like pointer position without a re-render, and createFx works outside React
• Seeded and controllable: Props for active, cell size, seed and max columns and rows
• Reduced motion: Renderers include a use-prefers-reduced-motion hook
• Agent skills: npx skills add sekeidesign/shad-fx installs two skills, one for placing effects and one for writing new ones

Tech stack

• React, HTML canvas, shadcn CLI registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @sekei/component-name