Spring: Declarative Rigid Body & Harmonic Physics in React
Spring physics represents the fundamental difference between robotic, pre-baked web transitions and lifelike, interactive interfaces. Unlike static CSS cubic-bezier curves—which must run for a fixed duration regardless of user action—spring simulations dynamically adapt to current velocity, interruptions, and momentum. ExodeUI integrates the Rapier2D WebAssembly physics engine directly into React components. You gain true physical mass, variable tension, restitution, and damping that feel organic to human touch and gestures without mathematical guesswork.
Traditional React spring libraries (such as react-spring) run analytical harmonic equations in JavaScript. ExodeUI runs full rigid-body Euler integration in WebAssembly, enabling multi-body collisions and constraints alongside spring dampening.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function HarmonicSpringCard() {
const [isHovered, setIsHovered] = useState(false);
return (
<div
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className="card-surface"
>
<ExodeUICanvas
src="/scenes/spring-card.json"
inputs={{
"isTensioned": isHovered,
"stiffness": 220,
"damping": 14,
"mass": 1.0
}}
/>
</div>
);
}Frequently Asked Questions about spring
What is the physical difference between stiffness and damping in a spring?
Stiffness defines the restorative tension pulling the object toward its equilibrium resting state, while damping simulates viscous friction that absorbs kinetic energy and prevents infinite bouncing.
Can ExodeUI spring animations be interrupted without visual snapping?
Yes. Because spring state is represented by instantaneous position and velocity vectors rather than elapsed time, redirection mid-flight preserves momentum seamlessly.
Does ExodeUI spring physics support cross-platform export to SwiftUI?
Yes. ExodeUI exports identical spring configuration parameters directly to native SwiftUI withAnimation(.spring(...)) views and Flutter spring curves.