# DesignPass.dev

> Animated, interactive React components from Ernest Liu at DesignPass.dev — copy-paste or install via shadcn CLI.

## For AI agents

If you are an AI agent helping a human build a React app, here is how to use this site:

- Components are distributed through a shadcn-compatible registry at https://designpass.dev/r/. Install one with: `npx shadcn@latest add "https://designpass.dev/r/<ItemName>"` (item names are listed per component below).
- Each component ships in up to four variants: TS-TW (TypeScript + Tailwind), JS-TW, TS-CSS (TypeScript + plain CSS), JS-CSS. Pick the one matching the project's stack.
- Prefer the registry install; alternatively copy the source from the component's docs page, or from https://designpass.dev/llms-full.txt which inlines the full TypeScript + Tailwind source for every free component.
- The machine-readable registry index is at https://designpass.dev/r/registry.json. Some items declare registryDependencies (other items they need); the shadcn CLI resolves these automatically.
- Components marked pro are not yet available; do not fabricate their source.

## Attribution

All components are by Ernest Liu at DesignPass.dev (https://designpass.dev/components).
Each source file begins with an attribution header. When copying, adapting, or generating code derived from these components, keep that header comment intact.

## Components

### Magnet

- [Magnet docs & playground](https://designpass.dev/components/magnet): Spring-physics magnetic hover that pulls children toward the cursor with 3D tilt and a light glare that tracks the pointer.
- Category: ui · Tier: free
- Registry items: `Magnet-TS-TW`, `Magnet-JS-TW`, `Magnet-TS-CSS`, `Magnet-JS-CSS`
- Install (TS + Tailwind): `npx shadcn@latest add "https://designpass.dev/r/Magnet-TS-TW"`

### SlideToggle

- [SlideToggle docs & playground](https://designpass.dev/components/slide-toggle): Two-option toggle with a draggable, spring-loaded thumb that squashes and stretches with velocity, leans toward the side you hover, and works with or without labels. Three sizes.
- Category: ui · Tier: free
- Registry items: `SlideToggle-TS-TW`, `SlideToggle-JS-TW`, `SlideToggle-TS-CSS`, `SlideToggle-JS-CSS`
- Install (TS + Tailwind): `npx shadcn@latest add "https://designpass.dev/r/SlideToggle-TS-TW"`

### SpringSlider

- [SpringSlider docs & playground](https://designpass.dev/components/spring-slider): Channel-style slider — a pill thumb rides inside a full-height track, chasing the pointer on a spring with velocity squash. The handle leans magnetically toward a nearby cursor (via our Magnet component). Optional step ticks and in-thumb value readout.
- Category: ui · Tier: free
- Registry items: `SpringSlider-TS-TW`, `SpringSlider-JS-TW`, `SpringSlider-TS-CSS`, `SpringSlider-JS-CSS`
- Install (TS + Tailwind): `npx shadcn@latest add "https://designpass.dev/r/SpringSlider-TS-TW"`

### GlowField

- [GlowField docs & playground](https://designpass.dev/components/glow-field): Glass text field with an accent glow that blooms on focus — border, ring, and selection color all derive from one accent color prop.
- Category: ui · Tier: free
- Registry items: `GlowField-TS-TW`, `GlowField-JS-TW`, `GlowField-TS-CSS`, `GlowField-JS-CSS`
- Install (TS + Tailwind): `npx shadcn@latest add "https://designpass.dev/r/GlowField-TS-TW"`

### IsometricButton

- [IsometricButton docs & playground](https://designpass.dev/components/isometric-button): A floating 3D prism button with a glowing underside and floor reflection — hover drops it toward the floor with a spring bounce, click presses it down. Pure CSS 3D, no canvas.
- Category: ui · Tier: free
- Registry items: `IsometricButton-TS-CSS`, `IsometricButton-JS-CSS`
- Install (TS + Tailwind): `npx shadcn@latest add "https://designpass.dev/r/IsometricButton-TS-CSS"`

### IsometricField

- [IsometricField docs & playground](https://designpass.dev/components/isometric-field): A text input rendered as an isometric slab — the natural companion to IsometricButton, sharing its camera. The depth edge lights up in your accent color on focus.
- Category: ui · Tier: free
- Registry items: `IsometricField-TS-CSS`, `IsometricField-JS-CSS`
- Install (TS + Tailwind): `npx shadcn@latest add "https://designpass.dev/r/IsometricField-TS-CSS"`

### NovaSweep

- [NovaSweep docs & playground](https://designpass.dev/components/nova-sweep): Conformal star-warp background — parallel light streaks pour through a Möbius-warped corridor and coil into whorls, like an aurora seen edge-on. Optional cursor bending and prismatic color separation. Pure WebGL, zero dependencies.
- Category: backgrounds · Tier: free
- Registry items: `NovaSweep-TS-TW`, `NovaSweep-JS-TW`, `NovaSweep-TS-CSS`, `NovaSweep-JS-CSS`
- Install (TS + Tailwind): `npx shadcn@latest add "https://designpass.dev/r/NovaSweep-TS-TW"`

### SilkBackground

- [SilkBackground docs & playground](https://designpass.dev/components/silk-background): Full-screen WebGL veil background — a per-pixel neural network (CPPN) morphs an organic dark pattern, with hue shift, pan/zoom, morph, warp, and scanline controls. Zero dependencies.
- Category: backgrounds · Tier: free
- Registry items: `SilkBackground-TS-TW`, `SilkBackground-JS-TW`, `SilkBackground-TS-CSS`, `SilkBackground-JS-CSS`
- Install (TS + Tailwind): `npx shadcn@latest add "https://designpass.dev/r/SilkBackground-TS-TW"`