Aurora Input
A text field with an aurora border on focus, floating label, live character ring and error shake.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
A conic-gradient border rotates via a registered CSS @property angle (smooth, GPU-friendly), with a blurred copy for glow. The character ring fills and changes color near the limit; errors shake and get announced.
Installation
$ npx shadcn@latest add https://guetix.com/r/aurora-input.json
Uses the shadcn CLI. It creates components/guetix/aurora-input.tsx and installs nothing else.
Usage
example.tsx
import { AuroraInput } from "@/components/guetix/aurora-input";
export default function Example() {
return <AuroraInput />;
}
Sign-up formsSearchSettings
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Animates a typed @property angle, the only way to smoothly spin a conic-gradient border.
- 02Floating label with the :placeholder-shown trick and no JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Email address" | Floating label. |
| limit | number | 40 | Character limit ring (0 hides). |
| hint | string | — | Help text. |
| error | string | — | Error message (shakes + alert). |
| ...input props | InputHTMLAttributes | — | value, onChange, type… |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Label bound to input; help text via aria-describedby; errors role=alert.