✨ Modern Motion Engine·Zero-JS CSS linear() Springs

Spring Motion & Physics Studio

Experience authentic physical damping and realistic spring momentum. NNUI-KIT leverages multi-stop CSS linear() easing curves for 60fps natural transitions with zero JavaScript runtime overhead.

Watch the overshoot & damping settle below

Playback Speed:

--ui-spring-snappyMicro-Interactions

Duration: 350ms · 15-stop linear()

Used for Segmented Controls, Pill Tabs, Dropdowns, and Cursor Followers. Snaps rapidly into place with tiny elastic settlement.

⚡

--ui-spring-bouncyAttention & Feedback

Duration: 500ms · Playful Overshoot

Used for Toasts, Floating Badges, and Dialog entrances. Demonstrates clear mechanical overshoot with 2 micro-rebounds.

✨

--ui-spring-gentleSurface Navigation

Duration: 400ms · Critically Damped

Used for Sheets, Drawers, Modals, and Accordions. Provides silk-smooth inertia without disorienting bounce.

🌊

Traditional cubic-bezier(0.4, 0, 0.2, 1)Standard Web Default

Rigid Bezier Curve

Standard mathematical ease-in-out. Notice how it abruptly halts at 100% without authentic physical momentum.

⏹

Interactive Component Showcase

1. Sliding Segmented Control

Click between options to feel --ui-transition-spring-snappy gliding the active pill indicator.

2. Bouncy Toast Notification

Trigger a toast notification to observe --ui-spring-bouncy micro-overshoot on entry.

3. Gentle Modal Dialog

Opens native <dialog> with @starting-style and --ui-spring-gentle.

4. macOS Proximity Spring Dock (<ui-dock>)

Hover cursor across icons

Calculates proximity distance in real-time and scales icons with --ui-spring-snappy and tooltips.

5. Interactive Trend Sparkline

Hover across the chart to scrub through live data points with spring-snapped tooltip.

Throughput

2,840 req/s

6. Radar Beacon Timeline

Vertical workflow step timeline with active radar beacon animation.

10:00 AM

Container Built

10:15 AM