Animated Input
A text input with a mouse-following gradient border effect.
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/animated-input.jsonOr manually:
npm install @vueuse/core clsx tailwind-mergeMore Examples
Custom Glow Color
Customize the color of the glowing border effect.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| glowColor | string | '#14b8a6' | The color of the mouse-following gradient border. |
| containerClass | string | - | Class for the wrapper div (useful for spacing/sizing). |
| class | string | - | Class for the input element itself. |