Magic Text

Text 849

About

Simple animated text component that reveals as we scroll down the page.

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

Code

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

Usage.tsx

import { MagicText } from "@/components/ui/magic-text"

const Demo = () => {
  return (
    <>
      <div className= "relative flex items-center justify-center pb-[30rem] mt-[70rem]" >
        <MagicText
          text={
          "Hi there! I'm preet, creator of HextaUI. Thank you so much of all the support and love you've shown me. I hope you enjoy using HextaUI as much as I enjoyed creating it."
        }
        />
      < /div>
        <p className="absolute top-1/2 left-1/2 -translate-x-1/2">Scroll Down 👇</p>
    < />
    )
}

export { Demo }