A text field with a glowing dot that slips away from the pointer on a spring and tucks into the corner on focus. The input underneath is a plain accessible input.
Join the waitlist
We open the doors to 200 studios every Monday.
npx shadcn@latest add https://hyperblur.dev/r/micro-dodge-field.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-dodge-field.tsx.
import { MicroDodgeField } from "@/components/hyperblur/micro-dodge-field"
<MicroDodgeField label="Email" type="email" placeholder="you@studio.co" />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Visible label linked to the input. Omit it and pass aria-label instead. | |
| accent | string | "#2f7bff" | Dot color and focus ring color. |
| idle | boolean | true | Sweep a ghost pointer across the field until a real pointer or focus arrives. |
| className / style | string / CSSProperties | Applied to the root wrapper. | |
| ...rest | InputHTMLAttributes<HTMLInputElement> | Every other prop goes to the input: value, defaultValue, onChange, placeholder, type, disabled and so on. |