Render with Remotion CLI
npx remotion render remotion/index.tsx ProductCard output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
export const ProductCard: React.FC = () => {
const frame = useCurrentFrame();
const cardScale = interpolate(frame, [8, 38], [0.88, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.2)) });
const priceOpacity = interpolate(frame, [60, 80], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
const ctaScale = interpolate(frame, [90, 115], [0.85, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.4)) });
return (
<AbsoluteFill style={{ background: "#f8f8f5", fontFamily: "Inter, sans-serif", display: "flex", alignItems: "center", justifyContent: "center" }}>
<div style={{ width: 840, background: "white", borderRadius: 32, boxShadow: "0 24px 48px rgba(0,0,0,0.08)", overflow: "hidden", transform: `scale(${cardScale})` }}>
<div style={{ height: 320, background: "linear-gradient(135deg, #0d0d1e, #1a1a3a)", display: "flex", alignItems: "center", justifyContent: "center" }}>Product Card
Clean e-commerce product card on white background with shimmer, badge reveal, star rating, price, and CTA.
Duration6s
Resolution1080 × 1080
Frame rate30 fps
Frames180
Copy the code snippet into your Remotion project and run the render command to generate this template locally.
