Developer Snippets
Motion Developer Recipes
Battle-tested UI motion snippets for frontend engineers. Switch between React, React Native Reanimated, and SwiftUI with single-click code copy.
Swipe Card with Inertial Ejection
Smooth card deck swipe gesture with rotation tilt based on translation and release velocity.
import { motion } from 'framer-motion';
export function SwipeCard({ onDismiss }) {
return (
<motion.div
drag="x"
dragConstraints={{ left: 0, right: 0 }}
onDragEnd={(e, { offset, velocity }) => {
if (Math.abs(offset.x) > 150 || Math.abs(velocity.x) > 800) {
onDismiss();
}
}}
style={{ width: 300, height: 420, borderRadius: 24, background: '#1E1B4B' }}
/>
);
}Rubber-Band Pull To Refresh
Non-linear tactile pull resistance with threshold trigger and harmonic spinner recoil.
import { motion, useMotionValue, useTransform } from 'framer-motion';
export function PullToRefresh() {
const y = useMotionValue(0);
const pullResistance = useTransform(y, [0, 200], [0, 80]);
return <motion.div drag="y" dragConstraints={{ top: 0, bottom: 0 }} style={{ y: pullResistance }} />;
}Infinite Inertial Snap Carousel
Continuous smooth wrap-around item carousel with velocity deceleration physics.
import { motion } from 'framer-motion';
export function Carousel({ items }) {
return (
<motion.div drag="x" dragConstraints={{ right: 0, left: -items.length * 320 }}>
{/* Items */}
</motion.div>
);
}Elastic Spring Button Press
Physical tactile micro-interaction with realistic mass inertia and spring rebound.
<motion.button
whileTap={{ scale: 0.94 }}
transition={{ type: "spring", stiffness: 500, damping: 22 }}
>
Press Me
</motion.button>Liquid Glass Sheet Morph
Specular reflection and backdrop blur expansion across viewport boundaries.
<motion.div
layout
style={{ backdropFilter: 'blur(16px)', background: 'rgba(255,255,255,0.7)' }}
/>