Clippkit

Popping Text

0:00 / 0:03

Installation

CLI

npx shadcn@latest add "https://clippkit.com/r/popping-text"

Manual

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

/**
 * Free Remotion Template Component
 * ---------------------------------
 * This template is free to use in your projects!
 * Credit appreciated but not required.
 *
 * Created by the team at https://www.reactvideoeditor.com
 *
 * Happy coding and building amazing videos! 🎉
 */
 
"use client";
 
import { spring, useCurrentFrame, useVideoConfig } from "remotion";
 
interface PoppingTextProps {
  text?: string;
  colors?: string[];
  fontSize?: string;
  delayPerChar?: number;
  fontWeight?: string;
}
 
export 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.

Project Structure Example

Here’s an example folder layout showing where to place the component and how it fits into a typical Remotion project

app/main.tsx

import { Player } from "@remotion/player";
 
import PoppingText from "../components/popping-text";
 
export function PoppingTextDemo() {
  const poppingTextProps = {
    text: "Popping Text",
    colors: ["var(--foreground)"],
    fontSize: "2.5rem",
    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
    />
  );
}

Define a Composition

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

app/main.tsx (or equivalent)

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

import PoppingText from "@/components/clippkit/popping-text"; // Assuming you placed it in src/components/clippkit

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.