404 Animation
Interactive 404 text composed of tiny face icon particles that spring away when hovered.
Installation
1
Run the following Command
>_npx shadcn@latest add https://minimalui.rshv.dev/r/404-animation.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "404" | The text rendered as interactive particle icons. |
| width | number | 800 | Stage width in pixels used for particle text sampling. |
| height | number | 400 | Stage height in pixels used for particle text sampling. |
| font | string | '900 280px "Arial Black", Impact, system-ui, sans-serif' | Font styling string used to generate text outline. |
| iconSize | number | 15 | Size of each face icon in pixels. |
| spacingX | number | 9 | Horizontal grid density between particles. |
| spacingY | number | 7 | Vertical grid density between particles. |
| hoverRadius | number | 85 | Cursor proximity distance (px) required to push particles. |
| spreadDist | number | 26 | Max distance particles travel away from cursor. |
| springConfig | { stiffness?: number; damping?: number; mass?: number } | { stiffness: 210, damping: 16, mass: 1 } | Physics spring configuration for smooth hover reaction. |
| archColor | string | "#c7cfd9" | Stroke color of the icon mouth arc. |
| eyeColor | string | "#aab4c2" | Fill color of the icon eyes. |
| caption | string | null | "Move your cursor over the shape" | Caption string rendered under the stage. |