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

---

title: Scramble Text description: A hover-triggered text effect that scrambles and restores characters with smooth motion.

<DemoCodePreview path="demo/components/scramble-text/default.tsx" v0Link="/gsap/scramble-text" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> ```npm npx shadcn@latest add @paceui-ui/scramble-text ``` </TabsContent> <TabsContent value="manual"> <Steps> <Step> **Install the following dependencies** </Step> ```npm npm install gsap @gsap/react ``` <Step> **Copy and paste the following code into your project** </Step> <CodePreview path='components/gsap/scramble-text.tsx' collapsible></CodePreview>

        <Step>
            **Update the import paths to fit your project setup**
        </Step>

    </Steps>
</TabsContent>

</Tabs>

Props

ScrambleText

| Prop | Type | Default | |----------------|-----------|---------| | random | boolean | true | | scrambleOnLoad | boolean | true |

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