Real components.
Not video captures.
Every example below runs on live GPU spring physics and visual state machines. Inspect the interaction, tweak parameters in real time, and copy production React code directly into your codebase.
Focus Mode Switch
Tactile spring-loaded toggle with micro-sound cues, day/night orbit states, and decoupled spring physics.
import { ExodeUICanvas } from 'exodeui';
export function FocusToggle({ isFocused, onToggle }) {
return (
<ExodeUICanvas
src="/scenes/focus-toggle.json"
stateMachine="ToggleMachine"
inputs={{
"isFocused": isFocused,
"stiffness": 220,
"damping": 18
}}
onStateChange={(state) => onToggle(state === 'focused')}
/>
);
}Bloom Petal Geometry
Continuous parametric petal rotor driven by rigid body constraints and variable harmonic frequency.
import { ExodeUICanvas } from 'exodeui';
export function BloomPetals({ patternIndex }) {
return (
<ExodeUICanvas
src="/scenes/bloom-geometry.json"
inputs={{
"pattern": patternIndex,
"rotationVelocity": 45.0,
"petalTension": 0.82
}}
autoPlay={true}
/>
);
}Momo Interactive Character
Cursor-tracking eye physics, procedural squash-and-stretch body deformation, and spring gestures.
import { ExodeUICanvas } from 'exodeui';
export function MomoCharacter({ pointerX, pointerY, isJoyful }) {
return (
<ExodeUICanvas
src="/scenes/momo-character.json"
inputs={{
"targetLookX": pointerX,
"targetLookY": pointerY,
"triggerJoy": isJoyful
}}
/>
);
}Send Joy Micro-Celebration
Three-stage optimistic action button: airplane launch, spring spinner, and dynamic checkmark.
import { ExodeUICanvas } from 'exodeui';
export function SendJoyButton({ state, onClick }) {
return (
<button onClick={onClick} className="send-btn">
<ExodeUICanvas
src="/scenes/send-joy.json"
stateMachine="SendFlow"
inputs={{ "status": state }}
/>
</button>
);
}Kinetic Typography Wiggle
Per-glyph variable spring physics responsive to text inputs, kerning shifts, and cadence waves.
import { ExodeUICanvas } from 'exodeui';
export function KineticText({ word }) {
return (
<ExodeUICanvas
src="/scenes/kinetic-text.json"
inputs={{
"text": word,
"waveFrequency": 1.4,
"amplitude": 12.0
}}
/>
);
}Fluid Wayfinder Navigation
Shared-axis layout transitions and fluid sliding tabs with zero CSS keyframe flicker.
import { ExodeUICanvas } from 'exodeui';
export function FluidTabBar({ activeTab, onTabChange }) {
return (
<ExodeUICanvas
src="/scenes/wayfinder-nav.json"
stateMachine="NavigationTab"
inputs={{ "activeTab": activeTab }}
onTrigger={(event) => onTabChange(event.name)}
/>
);
}Build your next living interface today.
Stop recreating motion in manual keyframe code. Design fluid physics and visual logic in ExodeUI and export directly to React, Swift, and Flutter.