Docs/Hyper Text

Hyper Text

A text component that scrambles letters before revealing the final text on hover or load.

Installation

$pnpm dlx shadcn@latest add @componentry/hyper-text

Usage

API Reference

PropTypeDefault
textThe text content to be animated.
string—
durationTotal animation duration in milliseconds.
number800
animateOnLoadWhether to start the animation automatically on mount.
booleantrue
classNameAdditional CSS classes for styling.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv
Hyper Text
import { HyperText } from "@/components/ui/hyper-text"