跪拜 Guibai
← Back to the summary

Name the Physics: 12 UI Interactions and the AI Prompts That Reproduce Them

12 Advanced UI Interaction Effects and Their AI Prompts: Teaching Physical Feel from Press Bounce to Bottom Sheet

Core Conclusion: The difference between advanced UI interaction and ordinary interaction, in essence, is 'whether it has physical feel' — advanced interaction simulates the mechanics of the real world (bounce, elasticity, friction, inertia), while ordinary interaction is just "mechanically changing something". If you ask AI to make a button and say "add an animation", it only gives a plain scale; but if you say the specific name of the interaction (press bounce, elastic toggle, ripple following finger, liquid slider, card stack...), AI can reproduce it precisely. This article breaks down the visual features of 12 advanced interactions + one-sentence AI prompts, along with a directly runnable demo. This column discussed overall design principles in 7 Core Principles for More Elegant Interfaces in UI Design Advanced Techniques; this article focuses on the specific dimension of interaction animation.

Table of Contents

1. One-Sentence Conclusion

Let me build an intuition first 🎭: advanced interaction feels like the smooth touch of an old object — an old radio knob has damping when turned, a cabinet door has a buffer when closed, and you feel "comfortable"; cheap plastic parts give a “clack” at the lightest touch, and you feel "cheap". The elegance of UI interaction is moving this physical feel into the screen.

So remember one sentence:

If you want AI to make advanced interactions, don't describe "add motion", say "what the motion is called" — press bounce, elastic toggle, ripple, confetti, liquid slider; each word corresponds to a clear specification that AI can understand.

12 interactions, one main thread: they are all simulating the physics of the real world. Here’s the breakdown.

2. The Underlying Logic of Advanced Interaction: Physical Feel

First, the principle — why these 12 effects look "advanced":

Using an analogy 🎭: an ordinary animation is like a robot raising its arm, it only "executes"; an advanced animation is like a human raising their arm — there is acceleration at the start, a buffer at the top, and inertia on the way down. AI defaults to the former; you need precise vocabulary to turn it into the latter.

💡 Core prompt technique: describe "physical behavior" rather than "visual result" — saying "on release it bounces slightly larger than original, then settles back" is ten times more precise than saying "add a bounce effect", so AI can implement it correctly.

3. Interactions 1–2: Press Bounce Button + Elastic Toggle

① Press Bounce Button (Press Bounce)

② Elastic Toggle (Elastic Toggle)

Using an analogy 🎭: press bounce is like pressing a silicone rubber key — it depresses when pressed and springs back on release; elastic toggle is like a small ball on a rubber band — it elongates halfway and returns to a circle only when in position. Both are typical applications of "spring physics".

4. Interactions 3–4: Ripple From Touch Point + Confetti Burst

③ Ripple From Touch Point (Ripple From Touch Point)

④ Confetti Burst (Confetti Burst)

⚠️ The "degree" in the prompt matters: confetti should be used sparingly — the phrase "only for likes and favorites" must be written into the prompt, otherwise AI will add it to every button, degrading the effect.

5. Interactions 5–6: Checkmark Draw + Liquid Slider

⑤ Checkmark Draw (Checkmark Draw)

⑥ Liquid Slider (Liquid Slider)

Using an analogy 🎭: checkmark draw is like a teacher grading homework and making a check — a single stroke gives it force; liquid slider is like pouring water into a measuring cup — the water level, the wetted cup wall, and the reading all happen at the same time; if they don’t sync, it feels fake.

6. Interactions 7–8: Easing Number Scroll + Stable Layout with Gray Placeholder

⑦ Easing Number Scroll

⑧ Stable Layout (Stable Layout)

💡 The eighth one is the "invisible but most critical" interaction — the page not jumping is the invisible part of elegance, more important than any flashy animation.

7. Interactions 9–10: Card Flip + Hamburger Morph

⑨ Card Flip

⑩ Hamburger Morph

Using an analogy 🎭: card flip is like turning over a playing card — when at the side you only see the card edge, you can’t see the back ahead of time; hamburger morph is like a Transformer — the same part deforms into another shape; swapping parts breaks the illusion.

8. Interactions 11–12: Card Stack Peek + Bottom Sheet Hold

⑪ Card Stack Peek

⑫ Bottom Sheet Hold

💡 Interactions 11 and 12 are "user guiding" interactions — they are not showing off, but telling the user "there is more content below". The highest level of advanced interaction is "guidance" rather than "performance".

9. List of 12 Prompt Comparisons

Put all 12 prompts into one list, copy directly to AI:

# Interaction One-Sentence Prompt
1 Press Bounce Button scales to 0.92 on press, springs to 1.05 on release then back to 1.0, use spring
2 Elastic Toggle When sliding, the thumb first stretches into a capsule, then springs back to a circle, simulating weight
3 Ripple From Touch Ripple spreads from the touch point on click, not from the center, Material ripple
4 Confetti Burst On like, scatter a small cluster of particles from the icon; only for likes and favorites, not for ordinary buttons
5 Checkmark Draw Draw the checkmark with a stroke animation from bottom-left to top-right, with a stroke tail
6 Liquid Slider Track fill, thumb, and numeric value fully synchronized, same animation duration
7 Number Deceleration In the last 200ms, ease-out decelerate to a stop, simulating inertia
8 Gray Placeholder Stable Layout Use a gray placeholder of the same height before load, fill in place when data arrives, page does not jump
9 Card Flip 3D flip, switch front and back at 90 degrees, back text orientation correct
10 Hamburger Morph Three lines morph into an X with a shape animation, keeping continuity, no icon switching
11 Card Stack After swiping, reveal one edge of the lower card, hinting there is more
12 Bottom Sheet Hold Drag to half-screen, hold briefly, show content, then pull full or close

10. Complete Runnable Code (HTML/CSS Demo)

Below is a copy-paste-and-run complete HTML demonstrating 4 of the easiest interactions (press bounce, ripple from touch, checkmark draw, hamburger morph), so you can see what a "physical feel" animation looks like. Save it as ui-interactions.html and open it in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12 Advanced UI Interactions Demo (Pick 4)</title>
<style>
  body { font-family: sans-serif; display: grid; gap: 30px; padding: 40px; }
  button { border: none; border-radius: 12px; padding: 16px 28px;
           font-size: 16px; cursor: pointer; background: #111; color: #fff;
           position: relative; overflow: hidden; }

  /* ① Press Bounce: shrink on press, on release spring larger then fall back (spring approximation) */
  .bounce { transition: transform 0.15s ease; }
  .bounce:active { transform: scale(0.92); transition: none; }
  .bounce.released { transform: scale(1.05); transition: transform 0.15s ease-out; }

  /* ③ Ripple from touch point: use CSS variables x/y to position the ripple start */
  .ripple { overflow: hidden; }
  .ripple::after { content: ""; position: absolute; width: 0; height: 0;
                   border-radius: 50%; background: rgba(255,255,255,.5);
                   left: var(--x); top: var(--y); transform: translate(-50%,-50%); }
  .ripple:active::after { animation: ripple .5s ease-out; }
  @keyframes ripple { to { width: 240px; height: 240px; opacity: 0; } }

  /* ⑤ Checkmark draw: use SVG path stroke animation to simulate strokes */
  .check { width: 120px; height: 120px; }
  .check path { stroke: #22c55e; stroke-width: 8; fill: none;
                stroke-dasharray: 60; stroke-dashoffset: 60; }
  .check.drawn path { animation: draw .4s ease-out forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  /* ⑩ Hamburger morph: three lines translate and rotate into an X, keeping the same element */
  .burger { width: 40px; height: 40px; cursor: pointer; }
  .burger span { display: block; width: 100%; height: 4px; background: #111;
                 border-radius: 2px; transition: transform .3s, opacity .3s;
                 margin: 8px 0; }
  .burger.open span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }
</style>
</head>
<body>
  <!-- ① Press Bounce: trigger released class on release for bounce -->
  <button class="bounce ripple" id="btn">① Press Bounce + ③ Ripple</button>

  <!-- ⑤ Checkmark Draw -->
  <svg class="check" id="check" viewBox="0 0 120 120">
    <path d="M 20 60 L 50 90 L 100 30"/>
  </svg>

  <!-- ⑩ Hamburger Morph -->
  <div class="burger" id="burger">
    <span></span><span></span><span></span>
  </div>

<script>
  // Ripple from touch: record click position into CSS variables (ripple starts from finger)
  document.querySelectorAll('.ripple').forEach(el => {
    el.addEventListener('pointerdown', e => {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--x', (e.clientX - r.left) + 'px');
      el.style.setProperty('--y', (e.clientY - r.top) + 'px');
    });
  });
  // Press Bounce: add released class on pointerup to spring larger then fall back
  const btn = document.getElementById('btn');
  btn.addEventListener('pointerup', () => {
    btn.classList.add('released');
    setTimeout(() => btn.classList.remove('released'), 180);
  });
  // Checkmark Draw: click to trigger stroke animation
  document.getElementById('check').addEventListener('click', e =>
    e.currentTarget.classList.toggle('drawn'));
  // Hamburger Morph: click to toggle shape (same three lines deform, not icon swap)
  document.getElementById('burger').addEventListener('click', e =>
    e.currentTarget.classList.toggle('open'));
</script>
</body>
</html>

How to read this code: .bounce uses :active to shrink + a .released class on pointer up to spring to 1.05 then fall back, which is the spring approximation for "press bounce"; .ripple::after uses --x/--y variables that JavaScript records from the actual click position, so the ripple starts from the finger rather than the center — this is the implementation of "ripple from touch point" from section 4; the stroke-dashoffset animation on .check path is the standard implementation of "checkmark draw"; and the .burger span uses translateY + rotate on the three lines to deform into an X, keeping the same element. All four effects run directly in the browser so you can feel the "physical sense".

11. Comparison Table: Symptom → Cause → Solution

Symptom Cause Solution
Getting only a plain scale when asking AI to add motion The prompt only says "motion" without a name Say the specific interaction name: press bounce / elastic toggle
Button ripple always starts from the center Default centered ripple, not following the finger Add "ripple spreads from the touch point" to the prompt
Every button has confetti, looks cheap Particle effects overused Add "only for likes and favorites" to the prompt
Slider number and track out of sync Each element has independent animation duration Add "fully synchronized, same animation duration"
Number scroll stops abruptly, looks like a stutter No ease-out easing Add "ease-out to decelerate at the end"
Page jumps around while data loads Placeholder height doesn’t match real content Use same-height gray skeleton, fill in place
Card flip breaks (back text mirrored or shown through) Both faces visible during flip Switch front and back at 90 degrees, back text orientation correct
Hamburger and X are two icon swaps Using icon replacement instead of morphing Add "three lines morph, keep continuity"

12. Judgment Closing

When to use these advanced interactions: when you’re building interfaces users will interact with repeatedly, or that deserve to be remembered — high-frequency interactions like buttons, toggles, sliders, cards; adding physical feel significantly boosts the "smoothness" and "quality". Emotional actions like likes and favorites deserve confetti. When not to use them: for pure data display pages or backend management interfaces where "efficiency first" matters, too much motion is distraction — interaction 8, "page doesn’t jump", is the only one worth doing there. The single judgment criterion: is this interaction the user’s focus of attention? If yes, add physical feel; if not, restraint is the height of elegance.

This column, Full Stack Development, covers front-end engineering, UI design, and development toolchains. Each post comes with runnable code and practical explanations and is continuously updated. If you want to avoid detours in interface details, you can subscribe on the column page.

References (comprehensive):

Comments

Top 1 from juejin.cn, machine-translated. The original thread is authoritative.

晴天丨而已

Like