TechnicalCollectible prompt

Micro-interactions for toggles, tabs and form controls

Give switches, tabs, inputs and quick actions small, fast motion that confirms what just happened.

Lovablev0Bolt

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Micro-interactions for toggles, tabs and form controls

Act as a senior interaction designer who writes production code. Add micro-interactions to the controls in my {{tech_stack}} project, in this style: {{visual_style}}. Read the existing switch, checkbox, tabs, input, accordion and toast components first, and list which state changes happen with no feedback at all. What moves and why: each animation confirms a change of state, right where the person acted. If nothing changed, nothing moves. Controls: - Switch: the thumb slides with transform in 150ms, ease-out cubic-bezier(0.2, 0, 0, 1); the track color changes in the same 150ms - Checkbox: the check draws in over 150ms; radio dot scales from 0.6 to 1 in 120ms - Tabs: the active indicator slides to the new tab with transform in 200ms, ease-in-out cubic-bezier(0.65, 0, 0.35, 1); panel content swaps with a 120ms fade, no slide - Accordion and disclosure: the chevron rotates 180 degrees in 200ms; the panel opens with a fade, never by animating height in a way that janks - Inputs: the border color changes on focus in 100ms; error text appears in space reserved under the field, so nothing below jumps - Quick actions: copy to clipboard swaps the icon for a check for 1.5 seconds with a "Copied" status for screen readers; favorite or save toggles fill with a 0.9 to 1 scale in 150ms; an added-to-cart count changes with a 150ms fade - Buttons keep their existing states; add only a loading-to-success sequence where an action takes over 300ms Rules: - Animate only transform and opacity, plus color; no layout shift - Feedback starts within 100ms of the input, and nothing blocks the next click - Touch targets at least 44 by 44px, focus-visible rings shown instantly - Under prefers-reduced-motion: reduce, no slides, scales or rotations; keep color changes and instant swaps - Performance budget: CSS transitions only, no animation library for this, and Interaction to Next Paint under 200ms Avoid: ripples everywhere, bouncy springs, confetti, and shaking fields on error. Finish with a table: control, change, animation, duration and reason, plus the files changed.
Technicalnvoka.com/library/nvoka-micro-interactions-for-toggles-tabs-and-form-controlsScan to open
Technical

Micro-interactions for toggles, tabs and form controls

Give switches, tabs, inputs and quick actions small, fast motion that confirms what just happened.

Nvoka logo

Curated by Nvoka

Lovablev0BoltCursor
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 2 filled

Your prompt

Act as a senior interaction designer who writes production code. Add micro-interactions to the controls in my {{tech_stack}} project, in this style: {{visual_style}}. Read the existing switch, checkbox, tabs, input, accordion and toast components first, and list which state changes happen with no feedback at all. What moves and why: each animation confirms a change of state, right where the person acted. If nothing changed, nothing moves. Controls: - Switch: the thumb slides with transform in 150ms, ease-out cubic-bezier(0.2, 0, 0, 1); the track color changes in the same 150ms - Checkbox: the check draws in over 150ms; radio dot scales from 0.6 to 1 in 120ms - Tabs: the active indicator slides to the new tab with transform in 200ms, ease-in-out cubic-bezier(0.65, 0, 0.35, 1); panel content swaps with a 120ms fade, no slide - Accordion and disclosure: the chevron rotates 180 degrees in 200ms; the panel opens with a fade, never by animating height in a way that janks - Inputs: the border color changes on focus in 100ms; error text appears in space reserved under the field, so nothing below jumps - Quick actions: copy to clipboard swaps the icon for a check for 1.5 seconds with a "Copied" status for screen readers; favorite or save toggles fill with a 0.9 to 1 scale in 150ms; an added-to-cart count changes with a 150ms fade - Buttons keep their existing states; add only a loading-to-success sequence where an action takes over 300ms Rules: - Animate only transform and opacity, plus color; no layout shift - Feedback starts within 100ms of the input, and nothing blocks the next click - Touch targets at least 44 by 44px, focus-visible rings shown instantly - Under prefers-reduced-motion: reduce, no slides, scales or rotations; keep color changes and instant swaps - Performance budget: CSS transitions only, no animation library for this, and Interaction to Next Paint under 200ms Avoid: ripples everywhere, bouncy springs, confetti, and shaking fields on error. Finish with a table: control, change, animation, duration and reason, plus the files changed.
See all