# Mellow UI

> Mellow UI is a shadcn-compatible, copy-paste React component library with an editorial / print aesthetic. Each component is a single self-contained file — install via the shadcn CLI, own the source. Built for React 19, Next.js 15, TypeScript 5.8, and motion/react v11.

Design tokens (`--ink`, `--background`, `--mute`, `--fog`, `--rule`, font families) auto-flip between dark and light themes. All components are client components, respect `prefers-reduced-motion`, and have no shared utilities — they are meant to be copied, not imported.

## Install any component

```bash
npx shadcn@latest add https://mellowui.com/r/<component-name>.json
```

## Components

- [Encrypted Text Reveal](https://mellowui.com/llms/encrypted-text.md): Characters scramble through random glyphs then resolve to the final text on scroll.
- [Warp Grid Background](https://mellowui.com/llms/warp-grid.md): Canvas grid vertices displaced by evolving value noise — drifts continuously, or warps locally around the cursor.
- [Phosphor Sweep Background](https://mellowui.com/llms/phosphor-sweep.md): Rotating beam sweeps a dot grid, leaving dots to fade with phosphor-persistence decay.
- [Flow Field Background](https://mellowui.com/llms/flow-field.md): Curl noise vector field rendered as dense directional strokes — cursor parts the flow.
- [Depth Button](https://mellowui.com/llms/depth-button.md): A tactile raised button with a fixed depth base — lifts on hover, snaps down on press.
- [Magnetic Button](https://mellowui.com/llms/magnetic-button.md): A button that translates toward the cursor with spring physics, with the label counter-drifting to create a sense of mass.
- [Kinetic Wall](https://mellowui.com/llms/kinetic-wall.md): A grid of miniature analog clocks whose hands choreograph to spell words — inspired by kinetic clock installations.
- [Combination Text](https://mellowui.com/llms/combination-text.md): A mechanical combination lock that spins through characters to form words.
- [Springy Text](https://mellowui.com/llms/springy-text.md): Words fall into place with individual spring physics on scroll enter, drop away downward on exit.
- [Matrix Hero](https://mellowui.com/llms/matrix-hero.md): Full-width hero section with cascading matrix rain and centered green-phosphor glow text.
- [Mechanical Keyboard](https://mellowui.com/llms/mechanical-keyboard.md): Full Mac keyboard with tactile depth-button keycaps — lifts on hover, snaps on press, plays synthesised mechanical click sounds via WebAudio.

## Resources

- [Homepage](https://mellowui.com)
- [llms-full.txt (everything in one file)](https://mellowui.com/llms-full.txt)
- [Registry manifest](https://mellowui.com/registry.json)