Hyper Text

A text animation that scrambles letters before revealing the final text.

HOVER ME!

import { HyperText } from "@/components/ui/hyper-text"

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

Installation


pnpm dlx shadcn@latest add https://ebonui.com/r/hyper-text.json

import { HyperText } from "@/components/ui/hyper-text"

<HyperText>Hover me</HyperText>

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

On This Page

Support Ebon UI by giving it a star on GitHub!

A lot of work goes into maintaining and improving Ebon UI. Your stars help show your support and encourage further development.