Sliding Text!

0:00 / 0:02

Installation

CLI

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

Manual

Create a new file, for example, at src/components/clippkit/sliding-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 SlidingTextProps {
  text?: string;
  textColor?: string;
  fontSize?: string;
  slideDirection?: "left" | "right" | "top" | "bottom";
  durationInFrames?: number;
  initialOffset?: number;
  damping?: number;
  mass?: number;
  stiffness?: number;
}
 
export function SlidingText({
  text = "Sliding Text!",
  textColor = "var(--foreground)",
  fontSize = "4rem",
  slideDirection = "left",
  durationInFrames = 30,
  initialOffset = 200,
  damping = 12,
  mass = 0.5,
  stiffness = 100, // Default stiffness
}: SlidingTextProps) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const opacity = spring({
    frame,
    fps,
    from: 0,
    to: 1,
    durationInFrames,
  });
 
  const slideAnimation = spring({
    frame,
    fps,
    from: initialOffset,
    to: 0,
    durationInFrames,
    config: {
      damping,
      mass,
      stiffness,
    },
  });
 
  let transformStyle = "";
  switch (slideDirection) {
    case "left":
      transformStyle = `translate(-50%, -50%) translateX(${slideAnimation}px)`;
      break;
    case "right":
      transformStyle = `translate(-50%, -50%) translateX(${-slideAnimation}px)`;
      break;
    case "top":
      transformStyle = `translate(-50%, -50%) translateY(${slideAnimation}px)`;
      break;
    case "bottom":
      transformStyle = `translate(-50%, -50%) translateY(${-slideAnimation}px)`;
      break;
    default:
      transformStyle = `translate(-50%, -50%) translateX(${slideAnimation}px)`;
  }
 
  return (
    <div
      style={{
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: transformStyle,
        width: "100%",
        textAlign: "center",
      }}
    >
      <h1
        style={{
          opacity,
          color: textColor,
          fontSize: fontSize,
          fontWeight: "bold",
        }}
      >
        {text}
      </h1>
    </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 SlidingText 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 SlidingText from "../components/sliding-text";
 
export function SlidingTextDemo() {
  const slidingTextProps = {
    text: "Sliding Text!",
    textColor: "var(--foreground)",
    fontSize: "2.5rem",
    slideDirection: "left" as const,
    durationInFrames: 30, // Animation duration for the text itself
    initialOffset: 150,
    damping: 12,
    mass: 0.5,
    stiffness: 100,
  };
 
  return (
    <Player
      component={SlidingText}
      inputProps={slidingTextProps}
      durationInFrames={60} // Total duration of the player timeline (e.g., 2 seconds at 30fps)
      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 SlidingText and define a Composition.

app/main.tsx (or equivalent)

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

import SlidingText from "@/components/clippkit/ui/sliding-text"; // Assuming you placed it in src/components/clippkit

export default function SlidingTextDemo() {
  const slidingTextProps = {
    text: "Sliding Text!",
    textColor: "var(--foreground)",
    fontSize: "3rem",
    slideDirection: "left" as const,
    durationInFrames: 30, // Animation duration for the text itself
    initialOffset: 150,
    damping: 12,
    mass: 0.5,
    stiffness: 100,
  };

  return (
    <Player
      component={SlidingText}
      inputProps={slidingTextProps}
      durationInFrames={60} // Total duration of the player timeline (e.g., 2 seconds at 30fps)
      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 SlidingText (e.g., from apps/docs/registry/default/ui/sliding-text.tsx or your project's component path) accepts the following props to customize its animation and appearance:

Prop	Type	Default Value	Description
`text`	`string`	"Sliding Text!"	The text content to display.
`textColor`	`string`	"var(--foreground)"	The color of the text. Accepts any valid CSS color value.
`fontSize`	`string`	"4rem"	The font size of the text. Accepts any valid CSS font-size value.
`slideDirection`	`"left" \| "right" \| "top" \| "bottom"`	"left"	The direction from which the text slides in.
`durationInFrames`	`number`	30	The duration of the slide and fade-in animation in frames.
`initialOffset`	`number`	200	The initial offset (in pixels) from which the text slides.
`damping`	`number`	12	The damping anount for the spring animation. Controls how quickly oscillations die down.
`mass`	`number`	0.5	The mass for the spring animation.
`stiffness`	`number`	100	The stiffness for the spring animation.

Sliding Text