SplitRevealAnimation

Installation

Examples

Typing Variant

Open in

|

Classic typewriter effect with animated cursor that types out the text character by character.

Morph Variant

Open in

Final Morphed Text

Text morphing animation that transitions through multiple words before settling on the final text.

Usage

import { AnimatedText } from "@/components/ui/animated-text";

usage

export default function AdvancedHeadingDemo() {
  return (
    <div className="min-h-screen space-y-16">
      <AnimatedHeading
        text="Revolutionary Design"
        variant="split-reveal"
        className="text-gradient bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
        duration={3000}
        delay={200}
      />
 
      <AnimatedHeading
        text="Type with Style"
        variant="typing"
        className="text-green-400 font-mono"
        duration={2000}
        trigger="scroll"
      />
 
      <AnimatedHeading
        text="Morphing Magic"
        variant="morph"
        className="text-center text-red-500"
        duration={4000}
        delay={1000}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`text`	`string`	`-`	The text content to animate (required)
`variant`	`"split-reveal" \| "typing" \| "morph" \| "scroll-highlight"`	`"split-reveal"`	Animation style variant
`className`	`string`	`""`	Additional CSS classes for custom styling
`delay`	`number`	`0`	Animation start delay in milliseconds
`duration`	`number`	`2000`	Total animation duration in milliseconds
`trigger`	`"immediate" \| "scroll"`	`"immediate"`	When to start the animation

Variants

Split Reveal (`variant="split-reveal"`)

Animation: Characters slide up from bottom with staggered timing
Effect: Smooth reveal with overflow masking for clean transitions
Timing: Each character delayed by 50ms, words by 100ms
Use Cases: Hero headings, page titles, dramatic reveals

<AnimatedHeading
  text="Split Reveal Animation"
  variant="split-reveal"
  duration={2000}
  className="text-6xl font-bold"
/>

Typing (`variant="typing"`)

Animation: Character-by-character typing with blinking cursor
Effect: Classic typewriter simulation with animated pipe cursor
Timing: Evenly distributed based on text length and duration
Use Cases: Code demos, terminal interfaces, retro aesthetics

<AnimatedHeading
  text="console.log('Hello World!');"
  variant="typing"
  className="font-mono text-green-400"
  duration={1500}
/>

Morph (`variant="morph"`)

Animation: Transitions through predefined words before final text
Effect: Scale and opacity transitions for smooth morphing
Sequence: "Welcome" → "Hello" → "Greetings" → Final Text
Use Cases: Dynamic branding, interactive intros, playful interfaces

<AnimatedHeading
  text="Final Destination"
  variant="morph"
  duration={3000}
  className="text-center text-purple-600"
/>

Scroll Highlight (`variant="scroll-highlight"`)

Animation: Progressive word highlighting with background colors
Effect: Sequential emphasis using primary color backgrounds
Timing: Words highlighted one by one with rounded backgrounds
Use Cases: Reading guides, step-by-step instructions, emphasis

<AnimatedHeading
  text="Highlight Each Important Word"
  variant="scroll-highlight"
  trigger="scroll"
  className="text-2xl"
/>

Animation Triggers

Immediate Trigger

Starts animation immediately after component mount with optional delay:

<AnimatedHeading text="Instant Animation" trigger="immediate" delay={500} />

Scroll Trigger

Starts animation when component enters viewport (10% threshold):

<AnimatedHeading
  text="Scroll to Animate"
  trigger="scroll"
  className="min-h-screen flex items-center justify-center"
/>

Animated Text