Magic Text

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

Preview

Scroll Down 👇

HiHithere!there!I'mI'mpreet,preet,creatorcreatorofofHextaUI.HextaUI.ThankThankyouyousosomuchmuchofofallallthethesupportsupportandandloveloveyou'veyou'veshownshownme.me.IIhopehopeyouyouenjoyenjoyusingusingHextaUIHextaUIasasmuchmuchasasIIenjoyedenjoyedcreatingcreatingit.it.

This component is available on 21st.dev.

Installation

NPM

npx shadcn@latest add "https://21st.dev/r/hextaui/magic-text"

Usage

index.tsx

import { MagicText } from "@/components/library/animation/MagicText";

<div className="h-[70rem] relative flex items-center justify-center">
  <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>;

Props

Prop	Type	Default
`text`	`string`	-