Animated Reveal Text

Text 131

About

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Reveal Text to your project and fits it to your theme.

Code

How Animated Reveal Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { HighlightText } from "@/components/ui/animated-reveal-text"

function DefaultDemo() {
  return <HighlightText text="I love Mishra Hub" />
}

function CustomColorDemo() {
  return (
    <HighlightText 
      text="Custom Color"
      highlightColor="#d7ff7b"
    />
  )
}

function CustomStyleDemo() {
  return (
    <HighlightText 
      text="Custom Style"
      textClassName="text-3xl font-black"
      highlightClassName="rounded-full py-2 px-4"
    />
  )
}

function SlowAnimationDemo() {
  return (
    <HighlightText 
      text="Slow Animation"
      duration={2.5}
      ease="easeOut"
    />
  )
}

export {
  DefaultDemo,
  CustomColorDemo,
  CustomStyleDemo,
  SlowAnimationDemo
}