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

---

title: Scale Letter Text date: 2024-12-19 description: An interactive text component with 3D scaling and hover effects on individual letters author: Karthikeyavarma published: true

<ComponentPreview name="scale-letter-text-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> ```bash npx shadcn@latest add @eldoraui/scale-letter-text ``` </TabsContent> <TabsContent value="manual"> <Steps> <Step>Copy and paste the following code into your project.</Step>

components/eldoraui/scale-letter-text.tsx

<ComponentSource name="scale-letter-text" /> <Step>Update the import paths to match your project setup.</Step> </Steps> </TabsContent> </Tabs>

Usage

import ScaleLetterText from "@/components/eldoraui/scale-letter-text"

<ScaleLetterText text="Hello World" />

Customization Example

<ScaleLetterText
  className="font-display text-center text-4xl font-bold -tracking-widest text-black md:text-7xl md:leading-[5rem] dark:text-white"
  text="Scale Letter Text"
/>

Props

| Prop | Type | Default | Description | | ----------- | -------- | ------- | -------------------------------------------------- | | text | string | - | The text to display with scaling animation effects | | className | string | "" | Additional CSS classes to apply to the container |

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