Hyper Text

Installation

pnpm dlx @glinui/cli@latest add hyper-text

Credits. Adapted from Magic UI (MIT, (c) Magic UI). Design tokens, no motion dependency (rAF scramble), real text kept for screen readers, reduced motion levels, trigger modes and SSR safe first paint. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Improvements: no motion dependency (a single rAF loop), per code point cells with no layout shift, graphemes kept together for emoji and combining marks, view and mount triggers, SSR renders the final text so there is no hydration mismatch, and every frame and timer is cancelled on unmount.

Engines: this component drives its main animation through the pluggable motion engine. Pass `engine` (css, motion or gsap), wrap a subtree in `MotionEngineProvider`, or set `data-glin-engine` on `<html>`. The css engine is built in and dependency free; motion and gsap are opt-in via `@glinui/motion/register/*`. `motion="none"` renders the final state and `subtle` is opacity only.

import { HyperText } from "@glinui/ui"
export function Demo() {
  return (

import { HyperText } from "@glinui/ui"


export function Demo() {
  return (
    <HyperText trigger="view" characterSet="01" duration={1200} as="h3">
      Decrypting signal
    </HyperText>
  )
}

import { HyperText } from "@glinui/ui"
export function Demo() {
  return <HyperText tabular={false} className="font-sans text-2xl">Mixed width</HyperText>

import { HyperText } from "@glinui/ui"


export function Demo() {
  return <HyperText tabular={false} className="font-sans text-2xl">Mixed width</HyperText>
}

// Same component, three engines. motion and gsap are opt-in:
// import "@glinui/motion/register/motion"
// import "@glinui/motion/register/gsap"

// Same component, three engines. motion and gsap are opt-in:
// import "@glinui/motion/register/motion"
// import "@glinui/motion/register/gsap"
<HyperText engine="css" trigger="mount">Scramble</HyperText>


<HyperText engine="motion" trigger="mount">Scramble</HyperText>


<HyperText engine="gsap" trigger="mount">Scramble</HyperText>

Accessibility

• The real string is always present in a screen reader only span; the scrambling glyph layer is aria-hidden.
• Assistive tech never reads random characters.
• With focusable, keyboard focus triggers the same effect as hover and shows a visible focus ring.

Reduced Motion

With prefers-reduced-motion, or Glin motion level none or subtle, no scramble runs and the final text is shown immediately.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { HyperText } from "@glinui/ui"