Scale Letter Text

Renders text with animated scaling and rotation effects on hover. Each letter reacts based on its position relative to the hovered letter. Use for visually engaging text displays.

byMudunuri bhaskara karthikeya varma from Eldoraui

Installation

terminal

pnpm dlx layro-cli add @karthikmudunuri/scale-letter-text

npx layro-cli add @karthikmudunuri/scale-letter-text

npx layro-cli add @karthikmudunuri/scale-letter-text

bunx layro-cli add @karthikmudunuri/scale-letter-text

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, { useState } from "react"

interface ScaleLetterTextProps {
  text: string
  className?: string
}

export default function ScaleLetterText({
  text,
  className = "",
}: ScaleLetterTextProps) {
  const [hoveredIndex, setHoveredIndex] = useState<number>(-1)