Animated Input
Input field with animated label, focus ring, and validation states.
effectsinputformanimated
Installation
Terminalbash
npx motioncraft add animated-inputUsage
animated-input.tsxtsx
import { AnimatedInput } from "@/components/effects/animated-input";
<AnimatedInput placeholder="Enter your email" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | — | Placeholder text |
| className | string | — | Additional CSS classes |
Related Components
Custom Cursor
Custom cursor replacement with smooth trailing and hover state changes.
Audio Reactive
NewElements that pulse and react to audio input from the microphone. Includes visualizer bars and scale effects.
Fluid Cursor
NewMetaball-style cursor with trailing blobs that merge and separate. Direction-aware coloring with blend mode effects.
Magnetic Button
Button that magnetically attracts toward the cursor on hover.