to-spring-or-not-to-spring

Q: How do I install to-spring-or-not-to-spring?

Run npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill to-spring-or-not-to-spring in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/to-spring-or-not-to-spring/ (personal) or .claude/skills/to-spring-or-not-to-spring/ (project).

by raphaelsalajaBackend & APIs

Audit animation code for correct timing function selection. Use when reviewing motion implementations, debugging animations that feel wrong, or choosing between springs and easing. Outputs file:line findings.

Installs: 152
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill to-spring-or-not-to-spring

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads to-spring-or-not-to-spring automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

To Spring or Not To Spring

Review animation code for correct timing function selection based on interaction type.

How It Works

Read the specified files (or prompt user for files/pattern)
Check against all rules below
Output findings in file:line format

Rule Categories

Priority	Category	Prefix
1	Spring Selection	`spring-`
2	Easing Selection	`easing-`
3	Duration	`duration-`
4	No Animation	`none-`

Decision Framework

Ask: Is this motion reacting to the user, or is the system speaking?

Motion Type	Best Choice	Why
User-driven (drag, flick, gesture)	Spring	Survives interruption, preserves velocity
System-driven (state change, feedback)	Easing	Clear start/end, predictable timing
Time representation (progress, loading)	Linear	1:1 relationship between time and progress
High-frequency (typing, fast toggles)	None	Animation adds noise, feels slower

Rules

Spring Selection Rules

`spring-for-gestures`

Gesture-driven motion (drag, flick, swipe) must use springs.

Fail:

<motion.div
  drag="x"
  transition={{ duration: 0.3, ease: "easeOut" }}
/>

Pass:

<motion.div
  drag="x"
  transition={{ type: "spring", stiffness: 500, damping: 30 }}
/>

`spring-for-interruptible`

Motion that can be interrupted must use springs.

Fail:

// User can click again mid-animation
<motion.div
  animate={{ x: isOpen ? 200 : 0 }}
  transition={{ duration: 0.3 }}
/>

Pass:

<motion.div
  animate={{ x: isOpen ? 200 : 0 }}
  transition={{ type: "spring", stiffness: 400, damping: 25 }}
/>

`spring-preserves-velocity`

When velocity matters, use springs to preserve input energy.

Fail:

// Fast flick and slow flick animate identically
onDragEnd={(e, info) => {
  animate(target, { x: 0 }, { duration: 0.3 });
}}

Pass:

// Fast flick moves faster than slow flick
onDragEnd={(e, info) => {
  animate(target, { x: 0 }, {
    type: "spring",
    velocity: info.velocity.x,
  });
}}

`spring-params-balanced`

Spring parameters must be balanced; avoid excessive oscillation.

Fail:

transition={{
  type: "spring",
  stiffness: 1000,
  damping: 5, // Too low - excessive bounce
}}

Pass:

transition={{
  type: "spring",
  stiffness: 500,
  damping: 30, // Balanced - settles quickly
}}

Easing Selection Rules

`easing-for-state-change`

System-initiated state changes should use easing curves.

Fail:

// Toast notification using spring
<motion.div
  animate={{ y: 0 }}
  transition={{ type: "spring" }}
/>
// Feels restless for a simple announcement

Pass:

<motion.div
  animate={{ y: 0 }}
  transition={{ duration: 0.2, ease: "easeOut" }}
/>

`easing-entrance-ease-out`

Entrances must use ease-out (arrive fast, settle gently).

Fail:

.modal-enter {
  animation-timing-function: ease-in;
}

Pass:

.modal-enter {
  animation-timing-function: ease-out;
}

`easing-exit-ease-in`

Exits must use ease-in (build momentum before departure).

Fail:

.modal-exit {
  animation-timing-function: ease-out;
}

Pass:

.modal-exit {
  animation-timing-function: ease-in;
}

`easing-transition-ease-in-out`

View/mode transitions use ease-in-out for neutral attention.

Pass:

.page-transition {
  animation-timing-function: ease-in-out;
}

`easing-linear-only-progress`

Linear easing only for progress bars and time representation.

Fail:

.card-slide {
  transition: transform 200ms linear; /* Mechanical feel */
}

Pass:

.progress-bar {
  transition: width 100ms linear; /* Honest time representation */
}

Duration Rules

`duration-press-hover`

Press and hover interactions: 120-180ms.

Fail:

.button:hover {
  transition: background-color 400ms;
}

Pass:

.button:hover {
  transition: background-color 150ms;
}

`duration-small-state`

Small state changes: 180-260ms.

Pass:

.toggle {
  transition: transform 200ms ease;
}

`duration-max-300ms`

User-initiated animations must not exceed 300ms.

Fail:

<motion.div transition={{ duration: 0.5 }} />

Pass:

<motion.div transition={{ duration: 0.25 }} />

`duration-shorten-before-curve`

If animation feels slow, shorten duration before adjusting curve.

Fail (common mistake):

/* Trying to fix slowness with sharper curve */
.element {
  transition: 400ms cubic-bezier(0, 0.9, 0.1, 1);
}

Pass:

/* Fix slowness with shorter duration */
.element {
  transition: 200ms ease-out;
}

No Animation Rules

`none-high-frequency`

High-frequency interactions should have no animation.

Fail:

// Animated on every keystroke
function SearchInput() {
  return (
    <motion.div animate={{ scale: [1, 1.02, 1] }}>
      <input onChange={handleSearch} />
    </motion.div>
  );
}

Pass:

function SearchInput() {
  return <input onChange={handleSearch} />;
}

`none-keyboard-navigation`

Keyboard navigation should be instant, no animation.

Fail:

function Menu() {
  return items.map(item => (
    <motion.li
      whileFocus={{ scale: 1.05 }}
      transition={{ duration: 0.2 }}
    />
  ));
}

Pass:

function Menu() {
  return items.map(item => (
    <li className={styles.menuItem} /> // CSS :focus-visible only
  ));
}

`none-context-menu-entrance`

Context menus should not animate on entrance (exit only).

Fail:

<motion.div
  initial={{ opacity: 0, scale: 0.95 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0 }}
/>

Pass:

<motion.div exit={{ opacity: 0, scale: 0.95 }} />

Output Format

When reviewing files, output findings as:

file:line - [rule-id] description of issue

Example:
components/drawer/index.tsx:45 - [spring-for-gestures] Drag interaction using easing instead of spring
components/modal/styles.module.css:23 - [easing-entrance-ease-out] Modal entrance using ease-in

Summary Table

After findings, output a summary:

Rule	Count	Severity
`spring-for-gestures`	2	HIGH
`easing-entrance-ease-out`	1	MEDIUM
`duration-max-300ms`	3	MEDIUM

Quick Reference

Interaction	Timing	Type
Drag release	Spring	`stiffness: 500, damping: 30`
Button press	150ms	`ease`
Modal enter	200ms	`ease-out`
Modal exit	150ms	`ease-in`
Page transition	250ms	`ease-in-out`
Progress bar	varies	`linear`
Typing feedback	0ms	none

References

FAQ

What does the to-spring-or-not-to-spring skill do?

How do I install to-spring-or-not-to-spring?

Run npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill to-spring-or-not-to-spring in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/to-spring-or-not-to-spring/ (personal) or .claude/skills/to-spring-or-not-to-spring/ (project).

Which AI agents can use to-spring-or-not-to-spring?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is to-spring-or-not-to-spring safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains to-spring-or-not-to-spring?

It is published by raphaelsalaja in raphaelsalaja/userinterface-wiki. It has 152 recorded installs.