---
name: "@sekei"
slug: "sekei"
description: "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."
category: "Animated components"
tags: ["animation", "hooks"]
framework: "react"
license: "MIT"
author: "sekeidesign"
website: "https://www.sekei.design/shad-fx"
github: "https://github.com/sekeidesign/shad-fx"
registry: "https://www.sekei.design/registry/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 11
generated_at: "2026-10-10T06:32:55.998Z"
---

# @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.

## Links

- Website: https://www.sekei.design/shad-fx
- GitHub: https://github.com/sekeidesign/shad-fx
- Registry JSON: https://www.sekei.design/registry/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/sekei
- This file: https://sh4dcn.vercel.app/md/sekei.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.sekei.design/registry/registry.json
pnpm dlx shadcn@latest add https://www.sekei.design/registry/registry.json
bunx shadcn@latest add https://www.sekei.design/registry/registry.json
# clone the source repo
git clone https://github.com/sekeidesign/shad-fx.git
# fetch the raw registry index
curl -s https://www.sekei.design/registry/registry.json
```

## Components (11)

| name | type | description | install |
| --- | --- | --- | --- |
| use-prefers-reduced-motion | registry: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 | registry:lib | The frame loop, the Surface and FxEffect contracts, the useFx hook, 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 | registry: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-fire | registry:lib | Rising flame front with embers. | `npx shadcn@latest add https://www.sekei.design/registry/shad-fx-fire.json` |
| shad-fx-rings | registry:lib | Concentric rings pulsing out from an anchor. | `npx shadcn@latest add https://www.sekei.design/registry/shad-fx-rings.json` |
| shad-fx-beam | registry:lib | Directional beam with drifting motes. | `npx shadcn@latest add https://www.sekei.design/registry/shad-fx-beam.json` |
| shad-fx-bolt | registry:lib | Intermittent lightning arcs on a randomised interval. | `npx shadcn@latest add https://www.sekei.design/registry/shad-fx-bolt.json` |
| shad-fx-fluid | registry:lib | Sloshing liquid level with rising bubbles. | `npx shadcn@latest add https://www.sekei.design/registry/shad-fx-fluid.json` |
| shad-fx-rain | registry: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 | registry: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 | registry:ui | The dither renderer, every effect, and a barrel that re-exports them. | `npx shadcn@latest add https://www.sekei.design/registry/shad-fx.json` |

## For AI agents

```text
You are adding components from @sekei to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/sekei.md) for the component list.
2. Fetch the machine-readable index: https://www.sekei.design/registry/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: sekei).
```