Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/physics-spring-for-overshoot.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown24 linesFree

rules/physics-spring-for-overshoot.md

1---
2title: Springs for Overshoot and Settle
3impact: HIGH
4impactDescription: Easing cannot produce natural overshoot; springs are required for organic bounce-and-settle motion.
5tags: physics, spring, overshoot
6---
7 
8## Springs for Overshoot and Settle
9 
10Use springs (not easing) when overshoot-and-settle is needed.
11 
12**Incorrect (easing for bounce):**
13 
14```tsx
15<motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
16// When element should bounce/settle
17```
18 
19**Correct (spring physics):**
20 
21```tsx
22<motion.div transition={{ type: "spring", stiffness: 500, damping: 30 }} />
23```
24

Preparing the source view

User Interface Wiki

rules/physics-spring-for-overshoot.md