Kinetic Text

A text component that displays each letter as a separate element with animated font weight changes on hover. It uses CSS transitions for smooth effects. Use it to add interactive text animations to headings or labels.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/kinetic-text

npx layro-cli add @magicuidesign/kinetic-text

npx layro-cli add @magicuidesign/kinetic-text

bunx layro-cli add @magicuidesign/kinetic-text

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

Code

Demo

import React from "react"

import { cn } from "@/lib/utils"

type As = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"

type KineticTextProps = React.HTMLAttributes<HTMLElement> & {
  text: string
  as?: As
}

export function KineticText({
  text,
  as: Tag = "h1",