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

---

title: Squash Text description: Characters bounce and squash into place with playful, dynamic energy.

<DemoCodePreview path="demo/components/squash-text/default.tsx" v0Link="/gsap/squash-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/squash-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/squash-text.tsx' collapsible></CodePreview>

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

    </Steps>
</TabsContent>

</Tabs>

Props

SquashText

| Prop | Type | Default | |-----------|-------------------|---------| | repeat | boolean | number | true |

<span className="text-muted-foreground">Inspired by Tom Miller's work</span>

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