import React from "react"; import { StaggeredMotion, useViewportRect, steps, type EasingName, type EasingFunction } from "remotion-bits"; export const metadata = { name: "Easings Visualizer", description: "Visualizes different easing functions with sliding squares.", tags: ["easing", "motion", "staggered-motion"], duration: 90, width: 1080, height: 1080, registry: { name: "bit-easings-visualizer", title: "Easings Visualizer", description: "Visualizes different easing functions with sliding squares.", type: "bit" as const, add: "when-needed" as const, registryDependencies: ["staggered-motion"], dependencies: [], files: [ { path: "docs/src/bits/examples/staggered-motion/EasingsVisualizer.tsx", }, ], }, }; export const Component: React.FC = () => { type EasingItem = { label: string; value: EasingName | EasingFunction }; const EASINGS: EasingItem[] = [ { label: "linear", value: "linear" }, { label: "easeInQuad", value: "easeInQuad" }, { label: "easeOutQuad", value: "easeOutQuad" }, { label: "easeInOutQuad", value: "easeInOutQuad" }, { label: "easeInCubic", value: "easeInCubic" }, { label: "easeOutCubic", value: "easeOutCubic" }, { label: "easeInOutCubic", value: "easeInOutCubic" }, { label: "spring", value: "spring" }, { label: "steps(5)", value: steps(5) }, ]; const { width, height } = useViewportRect(); // Calculate responsive dimensions // Reserve space for labels (approx 20% or fixed min) const labelWidth = Math.max(width * 0.2, 120); const trackWidth = width - labelWidth - 40; // 40px padding const verticalPadding = 40; const availableHeight = height - (verticalPadding * 2); const itemHeight = availableHeight / EASINGS.length; const squareSize = Math.min(itemHeight * 0.6, 40); const travelDistance = trackWidth - squareSize; return (

{EASINGS.map((item, i) => (

{item.label}

))}

Duration: 60 frames

); };

Easings Visualizer

Install