Animated Shapes

Create bouncing and rotating SVG shapes with spring animations using @remotion/shapes

This snippet demonstrates how to create animated SVG shapes with spring animations, rotation, and bouncing effects using the @remotion/shapes package.

What This Snippet Demonstrates

• Using @remotion/shapes components (Circle, Triangle, Rect, Star)
• Spring animations with custom damping and stiffness
• Staggered entrance animations with delays
• Rotation and bounce effects using interpolation
• Combining multiple animation properties (scale, opacity, transform)

Complete Code

import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
import { Circle, Triangle, Rect, Star } from "@remotion/shapes";

export const MyAnimation = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const shapes = [
    { type: "circle", color: "#6366f1", delay: 0 },
    { type: "triangle", color: "#10b981", delay: 15 },
    { type: "rect", color: "#f59e0b", delay: 30 },
    { type: "star", color: "#ec4899", delay: 45 },
  ];

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#0f0f0f",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        style={{
          display: "flex",
          gap: 80,
          alignItems: "center",
        }}
      >
        {shapes.map((shape, i) => {
          const entrance = spring({
            frame: frame - shape.delay,
            fps,
            config: { damping: 12, stiffness: 200 },
          });

          const rotation = interpolate(
            frame,
            [0, 180],
            [0, 360],
            { extrapolateRight: "clamp" }
          );

          const bounce = Math.sin((frame - shape.delay) * 0.1) * 10;

          const scale = entrance;
          const opacity = entrance;

          const shapeProps = {
            fill: shape.color,
            stroke: "#fff",
            strokeWidth: 2,
          };

          return (
            <div
              key={i}
              style={{
                opacity,
                transform: `scale(${scale}) translateY(${bounce}px) rotate(${shape.type === "star" ? rotation : 0}deg)`,
              }}
            >
              {shape.type === "circle" && (
                <Circle radius={60} {...shapeProps} />
              )}
              {shape.type === "triangle" && (
                <Triangle length={120} direction="up" {...shapeProps} />
              )}
              {shape.type === "rect" && (
                <Rect width={100} height={100} cornerRadius={12} {...shapeProps} />
              )}
              {shape.type === "star" && (
                <Star points={5} innerRadius={40} outerRadius={70} {...shapeProps} />
              )}
            </div>
          );
        })}
      </div>
    </AbsoluteFill>
  );
};

Key Concepts

Spring Animations

Each shape uses a spring animation with a delay to create a staggered entrance effect:

const entrance = spring({
  frame: frame - shape.delay,
  fps,
  config: { damping: 12, stiffness: 200 },
});

Bounce Effect

The sine wave creates a continuous bouncing motion:

const bounce = Math.sin((frame - shape.delay) * 0.1) * 10;

Rotation

The star rotates from 0 to 360 degrees over 180 frames:

const rotation = interpolate(
  frame,
  [0, 180],
  [0, 360],
  { extrapolateRight: "clamp" }
);

When to Use This Pattern

• Creating animated logos or brand elements
• Building attention-grabbing intro sequences
• Demonstrating product features with visual metaphors
• Educational content explaining geometric concepts
• Decorative elements in presentations

Customization Tips

• Adjust damping and stiffness values for different spring behaviors
• Modify the delay values to change the timing between shape entrances
• Change the bounce amplitude by adjusting the multiplier (currently * 10)
• Add more shapes to the array for more complex compositions
• Experiment with different colors and stroke styles