Pastel Mascot Background
A floating mascot filled with an animated pastel mesh gradient and pointer-tracking eyes.
A floating mascot with an animated pink, sky-blue, and navy mesh gradient. Its eyes follow the pointer, while reduced-motion preferences pause both the shader and float animation.
Installation
Add the pastel-mascot-background component from Hangry UI to this project.
Use the project's package manager to run:shadcn@latest add https://ui.razeev.com/r/pastel-mascot-background.json
Integrate the component with the existing layout and styling.Keep its interactions and reduced-motion support intact.How to use
import { PastelMascotBackground } from "@/components/hangry-ui/shader/pastel-mascot-background";
<PastelMascotBackground className="max-w-60" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 0.5 | Gradient animation rate; set to 0 to pause. |
intensity | number | 1 | Gradient brightness, clamped from 0 to 2. |
interactive | boolean | true | Enables pointer-following eye movement. |
Dependencies
- Motion
- vgpu