React Spring Physics
Bootstrap React + Vite apps with @react-spring/web patterns for springs, trails, gestures, and scroll-driven motion.
Overview
React Spring Physics is an agent skill for the Build phase that guides React + Vite setup and @react-spring/web animation patterns with official examples and gesture integrations.
Install
npx skills add https://github.com/freshtechbro/claudedesignskills --skill react-spring-physicsWhat is this skill?
- Documents Vite + React starter flow with @react-spring/web install steps
- Points to official react-spring.dev docs, examples, and CodeSandbox starters
- Curates basic, trail, and transition animation examples by category
- Covers gesture integration with @use-gesture/react and draggable or viewpager demos
- Lists scroll progress, parallax, and useScroll-oriented animation references
Adoption & trust: 710 installs on skills.sh; 227 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want fluid UI motion in React but waste time hunting current install steps and working CodeSandbox references for springs, trails, and scroll effects.
Who is it for?
Indie front-end builders polishing SaaS or marketing UIs who prefer spring physics over CSS keyframe spaghetti.
Skip if: Native mobile animation stacks, backend-only projects, or teams standardized on Framer Motion with no React Spring adoption.
When should I use this skill?
Building or refining React UIs that need @react-spring/web setups, trails, gestures, or scroll-linked motion.
What do I get? / Deliverables
You leave with a Vite-ready dependency list and categorized links to springs, gestures, and scroll animations you can adapt into components.
- Dependency install command set
- Component animation approach from linked examples
- Gesture or scroll interaction pattern selection
Recommended Skills
Journey fit
Animation implementation belongs in Build when you are composing UI motion, not when you are validating market fit or operating production alerts. Frontend is the shelf for React Spring setup, official example links, and gesture or parallax interaction work.
How it compares
Use as a React Spring–focused template map instead of generic CSS animation advice that ignores @react-spring/web APIs.
Common Questions / FAQ
Who is react-spring-physics for?
Solo and indie developers building React UIs who want spring-based motion with Vite and curated official examples.
When should I use react-spring-physics?
During Build frontend work when adding page transitions, draggable lists, scroll progress, or parallax before you ship the interface.
Is react-spring-physics safe to install?
It is documentation and template guidance without mandated shell exploits; review the Security Audits panel on this Prism page like any community skill.
SKILL.md
READMESKILL.md - React Spring Physics
# React Spring Physics - Assets This directory contains starter templates and example documentation for React Spring animations. ## Contents ### Starter Template (Recommended) For a complete React + Vite starter template with React Spring examples, use the official template: ```bash # Create new project with Vite npm create vite@latest my-spring-app -- --template react # Navigate and install cd my-spring-app npm install # Add React Spring npm install @react-spring/web # Optional: Add gesture library npm install @use-gesture/react ``` ### Official Examples The React Spring team maintains excellent examples at: - **Documentation**: https://react-spring.dev - **Examples**: https://react-spring.dev/examples - **CodeSandbox**: https://codesandbox.io/examples/package/@react-spring/web ### Recommended Examples by Category **Basic Animations:** - Spring basics: https://codesandbox.io/s/react-spring-spring-vqqd5 - Trails: https://codesandbox.io/s/react-spring-trail-q0zq5 - Transitions: https://codesandbox.io/s/react-spring-transition-njgm6 **Gesture Integration:** - Draggable cards: https://codesandbox.io/s/react-spring-draggable-list-xhqod - Viewpager: https://codesandbox.io/s/react-spring-viewpager-8tsle - Gesture examples: https://use-gesture.netlify.app/docs/examples/ **Scroll Animations:** - Scroll progress: https://codesandbox.io/s/react-spring-scroll-progress-8nqwt - Parallax: https://codesandbox.io/s/react-spring-parallax-sticky-xhdn7 - useScroll hook: https://react-spring.dev/docs/components/use-scroll **3D Integration (React Three Fiber):** - Spring animations in 3D: https://codesandbox.io/s/react-spring-3d-ijdj2 - Interactive 3D: https://docs.pmnd.rs/react-three-fiber/tutorials/v8-migration-guide#spring **Advanced Patterns:** - Chained animations: https://codesandbox.io/s/react-spring-chain-dxqgq - Auto-height accordion: https://codesandbox.io/s/react-spring-auto-height-accordion-r4qku - Masonry grid: https://codesandbox.io/s/react-spring-masonry-5bw7y ## Quick Start Template Minimal React Spring setup: ### package.json ```json { "name": "react-spring-starter", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "@react-spring/web": "^9.7.3", "@use-gesture/react": "^10.3.0" }, "devDependencies": { "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", "@vitejs/plugin-react": "^4.2.1", "vite": "^5.0.8" } } ``` ### src/App.jsx ```jsx import { useSpring, animated, config } from '@react-spring/web' import './App.css' function App() { const [springs, api] = useSpring(() => ({ from: { y: -50, opacity: 0 } }), []) const handleClick = () => { api.start({ from: { y: -50, opacity: 0 }, to: { y: 0, opacity: 1 }, config: config.wobbly }) } return ( <div className="app"> <animated.h1 style={springs}> React Spring Physics </animated.h1> <button onClick={handleClick}> Animate </button> <div className="examples"> <ExampleClick /> <ExampleTrail /> </div> </div> ) } function ExampleClick() { const [springs, api] = useSpring(() => ({ scale: 1, config: { tension: 300, friction: 10 } }), []) return ( <animated.div className="box" onClick={() => api.start({ scale: 1.2 })} style={{ transform: springs.scale.to(s => `scale(${s})`) }} > Click Me </animated.div> ) } function ExampleTrail() { const items = ['React', 'Spring', 'Physics'] const trails = useTrail(items.length, { from: { opacity: 0, x: -20 }, to: { opacity: 1, x: 0 }, config: config.gentle }) return ( <div className="trail"> {trails.map((style, i) => ( <animated.div key={i} style={style} className="trail-item"> {items[i]}