║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Hyper Text date: 2024-08-03 description: A text animation that scrambles letters before revealing the final text. author: SwayambhuPrasad published: true

<ComponentPreview name="hyper-text-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/hyper-text

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install motion

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hyper-text" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Usage

import { HyperText } from "@/components/ui/hyper-text"

<HyperText>Hover me</HyperText>

Props

| Prop | Type | Default | Description | | ---------------- | ------------------- | ------- | --------------------------------------------- | | children | string | - | Text content to animate | | className | string | - | The class name to be applied to the component | | duration | number | 800 | Duration of the animation in milliseconds | | delay | number | 0 | Delay before animation starts (in ms) | | as | React.ElementType | "div" | Component to render as | | startOnView | boolean | false | Start animation when component is in view | | animateOnHover | boolean | true | Enable hover animation | | characterSet | string[] | A-Z | Custom character set for scramble effect |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║