mcpField
I
instant-0-100ms

instant-0-100ms

github.com/dylantarreDesign & UI132484 installsUpdated 43w ago
Repository

About instant-0-100ms

A design skill for choosing animation patterns below 100 ms, where motion provides immediate feedback rather than communicating a larger change. It is for designers shaping responsive interface states such as presses and toggles.

Key features

  1. 01Guidance for sub-100 ms motion
  2. 02Recommendations for easing and timing
  3. 03Examples of subtle scale and opacity changes
  4. 04Patterns for buttons and toggles

Use cases

  1. 01Designing button press feedback
  2. 02Adding feedback to toggles and selections
  3. 03Choosing focus and hover responses

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill instant-0-100ms

After installing, type/instant-0-100msin Claude Code to confirm it loaded.

Details

From the project README

Instant Animations (0-100ms)

Animations under 100ms feel instantaneous to users. This duration is for immediate feedback that confirms actions without perceived delay.

Disney Principles at Instant Speed

Works Well

Squash & Stretch: Subtle - 2-5% compression on button press creates tactile feel without visible deformation.

Anticipation: Skip entirely - no time for preparation at this speed.

Staging: Minimal - rely on position/color change, not movement.

Straight Ahead/Pose to Pose: Straight ahead only - too fast for keyframe complexity.

Follow Through: None - motion completes before follow-through registers.

Slow In/Slow Out: Use ease-out only - starts at full speed, slight deceleration.

Arcs: Linear paths only - curves don't register at this speed.

Secondary Action: Skip - brain can't process multiple simultaneous instant changes.

Timing: 1-3 frames maximum. 60fps = 16.67ms per frame.

Exaggeration: Minimal - subtle scale (0.95-1.05) or opacity changes.

Solid Drawing: Focus on color/opacity shifts, not spatial transformation.

Appeal: Crisp, immediate response builds trust and perceived performance.

Doesn't Work
  • Complex multi-step sequences
  • Visible travel distance
  • Rotation beyond 15 degrees
  • Multiple property changes
  • Staged reveals

Easing Recommendations

/* Primary choice - immediate start, soft landing */
transition: all 50ms ease-out;

/* Alternative - completely linear for state toggles */
transition: opacity 80ms linear;

/* Button press feedback */
transition: transform 50ms ease-out;

Best Use Cases

  • Button active/pressed states
  • Toggle switches
  • Checkbox/radio selections
  • Focus ring appearance
  • Hover color shifts
  • Touch ripple initiation

Implementation Pattern

.button:active {
  transform: scale(0.97);
  transition: transform 50ms ease-out;
}

.toggle-on {
  background: var(--active);
  transition: background 80ms ease-out;
}

Key Insight

At instant speeds, animation serves confirmation, not communication. Users shouldn't consciously perceive the animation - they should feel the interface responding.

Comments

Markdown supported