Kinetic Text

PreviewCode

NostalgiaNostalgia

@/demos/KineticTextDemo.tsx

import { KineticText } from '@/registry/magicui/kinetic-text'

export function KineticTextDemo() {
  return (
    <div class="relative justify-center">
      <KineticText
        text="Nostalgia"
        class="text-[6rem] tracking-[-5%] [font-optical-sizing:auto]"
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/kinetic-text

bun

bunx shadcn@latest add @magicui-solid/kinetic-text

yarn

yarn dlx shadcn@latest add @magicui-solid/kinetic-text

npm

npx shadcn@latest add @magicui-solid/kinetic-text

Usage

import { KineticText } from "@/components/magicui/kinetic-text"

<KineticText text="some text" />

Props

Prop	Type	Default	Description
text	string	-	The text content to render with the kinetic effect.
as	ValidComponent	"h1"	The HTML element to render as.
class	string	-	Additional class names for the wrapper element.

Credits

• Credit to @abdmjd1

Original:

magicui.design/docs/components/kinetic-text