Name the Physics: 12 UI Interactions and the AI Prompts That Reproduce Them
A prompt that names a specific physics-based interaction, like press-bounce or elastic toggle, is what forces an AI model to produce convincing motion instead of a generic scale. This catalog gives AI-assisted UI work a vocabulary for tactile micro-interactions, along with working CSS and JS to ship the effect if the model misses.
The line between generic and advanced UI motion is physical feel. Pressing a button should compress it, then overshoot and settle; a toggle's thumb should stretch into a capsule before snapping back; ripples should start where your finger lands, not at the widget's center. All twelve effects in this guide simulate spring forces, inertia, friction, or material behavior, and each comes with a one-sentence prompt that tells an AI model exactly what to build.
The core advice: stop describing the desired visual and instead describe the physics. For a press bounce, say "scale to 0.92 on press, overshoot to 1.05 on release, then settle with a spring easing", not "add a bounce". The same precision applies to numbers that ease-out before stopping, skeletons that match real content height to prevent layout jumps, and a bottom sheet that pauses at half-screen. A runnable HTML/CSS demo shows four of the effects working, and a troubleshooting table maps common failures like a centered ripple or confetti on every button to the prompt fix that cures them.
The central claim that 'physical feel' separates advanced from ordinary interaction holds up: every effect maps to a real-world analogue like a silicone key, rubber band, pouring water, or turning over a playing card.
Specifying physical behavior over visual results is a generalizable lesson for AI-assisted coding; it turns a vague request like 'add animation' into a precise specification any model can act on.
The guide repeatedly warns against overusing effects: confetti for every button cheapens it, and the most important interaction may be the invisible one — a skeleton placeholder that prevents layout jumps. That restraint is framed as the highest form of quality, not the flashiest motion.