Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
HOVER ME!
import { HyperText } from "@/registry/magicui/hyper-text";
export function HyperTextDemo() {
return <HyperText>Hover Me!</HyperText>;
}
Installation
pnpm dlx shadcn@latest add @magicui/hyper-text
Usage
import { HyperText } from "@/components/magicui/hyper-text";<HyperText>Hover me</HyperText>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | - | Text content to animate |
className | string | - | The class name to be applied to the component |
duration | number | 800 | Duration of the animation in milliseconds |
delay | number | 0 | Delay before animation starts (in ms) |
as | React.ElementType | "div" | Component to render as |
startOnView | boolean | false | Start animation when component is in view |
animateOnHover | boolean | true | Enable hover animation |
characterSet | string[] | A-Z | Custom character set for scramble effect |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development