Hyper Text

Renders text with a scrambling animation effect. Displays letters as random characters before revealing the final text. Works on hover or when the element comes into view. Use for engaging text transitions on websites.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/hyper-text

npx layro-cli add @magicuidesign/hyper-text

npx layro-cli add @magicuidesign/hyper-text

bunx layro-cli add @magicuidesign/hyper-text

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import {
  useEffect,
  useRef,
  useState,
  type ComponentType,
  type RefAttributes,
} from "react"
import {
  AnimatePresence,
  motion,
  type DOMMotionComponents,
  type HTMLMotionProps,