Micro-animations
The tactile physics of living software. Newtonian spring mechanics, calibrated spatial time budgets, and vector-level kinetics giving Elementa interfaces an organic heartbeat without cognitive fatigue or visual bloat.
Spring Physics
Hooke’s Law
Tactile Bounce
Goldilocks Zone
100ms–500ms Budgets
Vector SVG Morphing
layoutId Springs
Reduced Motion WCAG
Spring Physics & The Tactile Bounce
Linear animations feel like robotic assembly lines. In Elementa, movement is governed by real Newtonian spring mechanics: velocity is conserved, momentum is interruptible, and every gesture resolves with organic tactile weight.
The Three Motion Paradigms
Click "Fire Motion" to observe how linear, ease-out, and Elementa spring physics travel across identical distances.
1. Linear (Synthetic Robot)
duration: 0.8s · ease: 'linear' · 0% overshoot
2. Cubic-Bezier Ease (Predictable Deceleration)
duration: 0.8s · ease: [0.16, 1, 0.3, 1] · 0% overshoot
3. Elementa Spring (Tactile Bounce & Overshoot)
type: 'spring' · k:340 · c:18 · m:1
Notice the overshoot in Track 3: natural deceleration dampens dynamically without dead mechanical halts.
Interruptible at any millisecond
Physical Parameter Tuning
Curated Archetypes:
Stiffness (k)
340 N/m
Higher stiffness accelerates the return velocity, increasing tension and snap.
Damping (c)
18 Ns/m
Controls friction and resistance. Lower damping creates elastic overshoot.
Mass (m)
1.0 kg
Simulates physical heft and inertia. Higher mass feels deliberate and heavy.
Displacement Waveform
Mathematical Decay Curve
Live visualization of the displacement y(t) as the spring settles to rest.
Equilibrium Line (y=0)
Live Spring Reaction Test
Updates dynamically on every preset & slider scrub
Duration, Speed & The Goldilocks Zone
Animation exists to confirm intent, not to hold user attention hostage. Too fast, and it registers as a broken GPU glitch; too slow, and it feels like UI thread lag. Elementa calibrates duration strictly to spatial displacement.
Perceptual Speed Simulator
Toggle between the 3 timing modes or drag the duration scrub to physically feel how speed alters UI perception.
Fine-tune Duration:
240 ms
Telemetry Card Reveal
240ms
✨ Elementa Sweet Spot (150ms–300ms): Perfectly balanced. Transitions feel natural, immediate, and delightfully tactile without delay.
Perceptual Rating:
Optimal Delight
Perceptual Thresholds
< 100ms: Sub-perceptual threshold. Skips eye saccades.
150ms–300ms: Frictionless confirmation window.
> 500ms: Induces perceived latency and delay.
Spatial Scale vs. Time Budgets
Duration scales proportionally with physical screen displacement. Never assign identical durations across different spatial scales.
| Spatial Scale Tier | Recommended Window | Ceiling Budget | Canonical UI Patterns | Perceptual Invariant |
|---|---|---|---|---|
01 Micro-Actions | 100ms – 150ms | 180ms | Button tap depth, switch toggle, icon state shifts, checkbox check. | Instantaneous tactile feedback without perceived pause. |
02 Component Unfolds | 200ms – 250ms | 300ms | Dropdown menus, tooltips, popovers, accordions, toast notifications. | Smooth expansion allowing the eye to track spatial origin. |
03 Structural Overlays | 280ms – 350ms | 400ms | Dialog modals, bottom sheets, navigation drawers, command palettes. | Authoritative entrance establishing context without blocking intent. |
04 View Transitions | 400ms – 500ms | 550ms | Full page routing, major dashboard layout pivots, onboarding carousels. | Cinematic spatial continuity; choreographed with cascading staggers. |
Motion Types: Icons, UI Components & Pages
Different interfaces demand different animation engines. From vector SVG stroke morphs to Framer Motion layout springs and full view orchestration, each level requires specialized implementation patterns.
Icons & SVG Vector Motion
Path length progressive reveals, scale bursts, and angular momentum without bitmap distortion.
Stroke Dasharray Draw
Animated Checkmark
Path length progressive reveal on verification events.
Scale & Fill Kinetic
Heart Pop Burst
Overshoot scale pop with color bloom on favoriting.
Angular Oscillation
Bell Chime Wobble
Damped pendulum oscillation upon incoming notification alert.
Directional Elastic Glide
Morphing Action Cue
Path translation and chevron elongation on active hover.
UI Component Physics
Kinetic tabs, spring-settled accordions, and tactile press physics for interactive components.
Fluid Segmented Pill
The active selection pill transitions smoothly between tab items using shared layout physics. The indicator stretches organically without jumping.
Active Scope: TELEMETRY · Stream bandwidth 1.4 GB/s with 12ms latency.
Tactile Press Depth & Accordion
Tactile interactive depress on tap and smooth spring-interpolated height expansion using Elementa Accordion primitives.
Tactile Press Counter
0 actuations
Content unfolds dynamically without hardcoded height hacks. Fluid height settling prevents layout clipping and guarantees accessible keyboard navigation.
Page Transitions & Cascades
Choreographed multi-element arrivals with stagger sequencing and instant accessible reduce motion overrides.
Masthead Routing
Top-level navigation and breadcrumbs settle with priority ingress.
Data Stream Surface
Primary analytical canvas and telemetry graphs render sequentially.
Telemetry Actions
Interactive control dock and utility actions materialize last.
⚡ Natural Stagger active: 80ms cascade creates cohesive visual rhythm.
WCAG 2.2 Criterion 2.3.3