Chapter 5: Buttons & Inputs

Core Idea

Interactive controls with built-in animation — buttons that react to hover/click state, and form inputs with motion-driven feedback.

Reference Table

Name	Purpose	Install
Hover Border Gradient	Hover effect that grows a gradient border across the whole container	npx shadcn@latest add @aceternity/hover-border-gradient
Magnetic Button	Button that subtly drifts toward the cursor, springs back on leave	npx shadcn@latest add @aceternity/magnetic-button
Moving Border	Border that continuously travels around the container	npx shadcn@latest add @aceternity/moving-border
Stateful Button	Button with built-in loading → success state transition	npx shadcn@latest add @aceternity/stateful-button
File Upload	Drag-and-drop upload with background grid and micro-interactions	npx shadcn@latest add @aceternity/file-upload
Floating Dock	macOS-style floating dock, doubles as a nav bar	npx shadcn@latest add @aceternity/floating-dock
Gooey Input	Search-style input that expands with a gooey SVG filter	npx shadcn@latest add @aceternity/gooey-input
Placeholders And Vanish Input	Input with cycling placeholder text and a vanish effect on submit	npx shadcn@latest add @aceternity/placeholders-and-vanish-input
Signup Form	Signup form built on shadcn's input/label, with Motion touches	npx shadcn@latest add @aceternity/signup-form

Key Takeaways

1. Stateful Button owns its own loading/success state internally — don't wrap it in a separate loading spinner, wire your submit handler's promise to its API instead.
2. Signup Form assumes shadcn/ui's input/label primitives are already installed — install those first if starting from a bare project.
3. Moving Border and Hover Border Gradient both animate a border but differ in trigger: Moving Border loops continuously, Hover Border Gradient is hover-triggered.

Connects To

• ch001 (Setup & Utilities): the cn helper these all depend on.
• shadcn-ui-docs (separate skill): the input/label/form primitives some of these build on.