Hyper Text

PreviewCode

HOVER ME!

@/demos/HyperTextDemo.tsx

import { HyperText } from '@/registry/magicui/hyper-text'

export function HyperTextDemo() {
  return <HyperText>Hover Me!</HyperText>
}

Installation

pnpm

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

bun

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

yarn

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

npm

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

Import

import { HyperText } from '@/components/magicui/hyper-text'

Usage

<HyperText>Hover me</HyperText>

Props

Prop	Type	Default	Description
children	string	-	Text content to animate
class	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	ValidComponent	"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

Original:

magicui.design/docs/components/hyper-text