Clippkit

Popping Text

0:00 / 0:03

Installation

Manual

Create a new file, for example, at src/components/popping-text.tsx (or your preferred location) and paste the following code into it.

src/components/popping-text.tsx

"use client";

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

interface PoppingTextProps {
text?: string;
colors?: string[];
fontSize?: string;
delayPerChar?: number;
fontWeight?: string;
}

export default function PoppingText({
text: textProp = "Popping Text",
colors: colorsProp = [
"var(--foreground)", // Default to CSS variable for foreground color
"var(--primary)", // Default to CSS variable for primary color
],
fontSize: fontSizeProp = "4rem", // Changed to 4rem to match sliding-text
delayPerChar = 7,
fontWeight: fontWeightProp = "bold",
}: PoppingTextProps) {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const textChars = textProp.split("");
const currentColors = colorsProp;

return (

<div
style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: "100%",
    textAlign: "center",
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  }} >
{textChars.map((char, i) => {
const delay = i \* delayPerChar;
const colorIndex = i % currentColors.length;

    const opacity = spring({
      frame: frame - delay,
      fps,
      from: 0,
      to: 1,
      config: {
        mass: 0.3,
        damping: 8,
        stiffness: 100,
      },
    });

    const scale = spring({
      frame: frame - delay,
      fps,
      from: 0,
      to: 1,
      config: {
        mass: 0.4,
        damping: 7,
        stiffness: 150,
      },
    });

    return (
      <span
        key={i}
        style={{
          display: "inline-block",
          opacity,
          color: currentColors[colorIndex],
          fontSize: fontSizeProp,
          fontWeight: fontWeightProp,
          transform: `scale(${scale})`,
        }}
      >
        {char === " " ? "\u00A0" : char}
      </span>
    );
  })}
</div>

);
}

Update the import paths in your Remotion compositions if you placed the file in a different location than shown in the usage examples.

Usage

Once the PoppingText component is added to your project (either via CLI or Manually), you can integrate it into your Remotion project by importing it and defining a Composition.

Prerequisite

Ensure you have a Remotion project set up. If not, please refer to the Remotion documentation to get started.

Define a Composition:

In your Remotion project's entry file (commonly src/Root.tsx or src/index.ts), import PoppingText and define a Composition.

src/main.tsx (or equivalent)

import { Player } from "@remotion/player";

import PoppingText from "../ui/popping-text";

export default function PoppingTextDemo() {
  const poppingTextProps = {
    text: "Popping Text",
    colors: ["var(--foreground)"],
    fontSize: "3rem",
    fontWeight: "bold",
  };

  return (
    <Player
      component={PoppingText}
      inputProps={poppingTextProps}
      durationInFrames={90} // Adjusted for potentially longer text or different pacing
      compositionWidth={480}
      compositionHeight={270} // 16:9 aspect ratio
      fps={30}
      style={{
        width: "100%",
        height: "100%", // Player will scale to fit its container
      }}
      autoPlay
      controls // Show player controls
      loop // Loop the animation
    />
  );
}

The component exported as PoppingText (e.g., from apps/docs/remotion-templates/popping-text-sequence.tsx or your project's component path) accepts the following props to customize its animation and appearance:

Prop	Type	Default Value	Description
`text`	`string`	"Popping Text"	The text content to display.
`colors`	`string[]`	`["var(--foreground)", "var(--primary)"]`	An array of CSS color values to cycle through for the text characters.
`fontSize`	`string`	"4rem"	The font size of the text. Accepts any valid CSS font-size value.
`delayPerChar`	`number`	7	The delay in frames before each character starts its animation.
`fontWeight`	`string`	"bold"	The font weight of the text. Accepts any valid CSS font-weight value.

Popping Text

Installation

CLI

Manual

Usage

API Reference

On this page