Kinetic Text

A purely CSS hover-interactive typography effect that dynamically adjusts font weights and offsets.

Preview

pnpm dlx vibe-ui-kit@latest add kinetic-text

import { KineticText } from '@/components/ui/kinetic-text'

<KineticText text="VIBE UI" as="h1" />

Prop	Type	Default	Description
`text`	`string`	`""`	Text string content to apply hover-interactive physics
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span"`	`"h1"`	The wrapper DOM element semantic tag type
`className`	`string?`	`""`	Additional classes for the container

This KineticText component creates a purely CSS hover-interactive weight shifting animation on typography.

Jenish Sabhadiya

Primary Theme Accent

Border Corner Radius

Glass Backdrop Blur8px

Export CSS Config

@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}

Changes apply instantly to this documentation workspace.

Kinetic Text | Vibe UI