Spring Action Button with Haptic Velocity
A spring button uses second-order differential physics equations rather than fixed cubic-bezier curves to calculate scale, displacement, and rebound. When pressed, energy accumulates; on release, momentum decays naturally based on stiffness and damping coefficients.
Technical Specifications
State Machine Graph
Production Code Output
import React, { useState } from 'react';
import { motion } from 'framer-motion';
export function SpringButton({
children = "Deploy Component",
stiffness = 340,
damping = 22,
onPress
}) {
const [isPressed, setIsPressed] = useState(false);
return (
<motion.button
type="button"
onPointerDown={() => setIsPressed(true)}
onPointerUp={() => setIsPressed(false)}
onPointerCancel={() => setIsPressed(false)}
onClick={onPress}
animate={{
scale: isPressed ? 0.92 : 1,
y: isPressed ? 2 : 0,
}}
transition={{
type: "spring",
stiffness: stiffness,
damping: damping,
mass: 1,
}}
className="px-6 py-3 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-medium shadow-lg shadow-violet-500/25 active:shadow-sm select-none cursor-pointer"
>
{children}
</motion.button>
);
}Architectural Breakdown
Unlike CSS transitions with fixed cubic-bezier curves, a physics-based spring button recalculates momentum dynamically on every pointer event.
If a user interrupts the release animation with another click, momentum transfers seamlessly into the subsequent compression stroke without unnatural jarring or resetting.
ExodeUI generates deterministic spring calculations using clean mathematical formulas that execute without heavy external runtimes.
Frequently Asked Questions
Explore Related Motion Guides & Tooling
Build your next living interface today.
Design fluid physics and visual logic in ExodeUI and export directly to React, Swift, and Flutter.