Cinematic Text Reveal

Installation

npx kinetic-ui-cli@latest add cinematic-text-reveal

How It Works

The CinematicTextReveal component automatically splits any string into words, and words into individual characters. When the component scrolls into view (useInView), it fires a staggered framer-motion sequence. Each character animates from an offset rotateX and rotateY angle in 3D space, dropping in with a satisfying spring bounce to create a highly polished, cinematic introduction.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CinematicTextReveal } from "@/components/creative/cinematic-text-reveal";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CinematicTextReveal } from "@/components/creative/cinematic-text-reveal";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CinematicTextReveal
        text="example"
      />
    </div>
  );
}