Hyper Text

Text whose letters scramble into random characters and then settle left to right on the real text, when it scrolls into view or when it is hovered. The final text is always in the page.

Motionv0.1.0experimentalWCAG 2.2 AAView spec

Optional, and kept apart.

Nothing here is included in a project unless you add it, and the plain component it builds on is unchanged. This effect is decoration: it is hidden from screen readers, stands still for visitors who prefer reduced motion, and can be paused. Use Still on a preview to see that version.

import { HyperText } from "@rdloom/react";

export default function HyperTextBasicExample() {
  return (
    <div className="flex w-full justify-center">
      <HyperText className="text-3xl font-bold">Hover over me</HyperText>
    </div>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add hyper-text

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

It also adds rdloom-motion.css next to your tokens and imports it from the tokens file, once: no setup, and no inline styles. The plain components you already use are untouched.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/hyper-text.json

Works, but without upgrade tracking, and you import the motion CSS yourself.

Usage

import { HyperText } from "@rdloom/react";

<div className="flex w-full justify-center">
  <HyperText className="text-3xl font-bold">Hover over me</HyperText>
</div>

On hover only

import { HyperText } from "@rdloom/react";

// whenInView is off, so the text sits still until the pointer enters it.
export default function HyperTextOnHoverOnlyExample() {
  return (
    <div className="flex w-full justify-center">
      <HyperText whenInView={false} className="text-2xl font-semibold">
        Access granted
      </HyperText>
    </div>
  );
}

Slow

import { HyperText } from "@rdloom/react";

// A slower settle suits a long line. Keep it under about two seconds.
export default function HyperTextSlowExample() {
  return (
    <div className="flex w-full justify-center">
      <HyperText duration={1600} onHover={false} className="text-2xl font-semibold">
        Signal acquired
      </HyperText>
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`children`required The final text.	`string`	none
`duration` Milliseconds until the last letter has settled.	`number`	`800`
`whenInView` Scrambles once when the text scrolls into view.	`boolean`	`true`
`onHover` Scrambles again when the pointer enters the text.	`boolean`	`true`
`isPaused` Stops the animation and shows the finished text. Moving content that lasts more than five seconds should be stoppable.	`boolean`	`false`

Accessibility

Role group, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

The text, once

What your code must do

The full final text is in a visually hidden copy; the scrambling copy is hidden from assistive technology, so random characters are never read
The scramble lasts under about a second and runs once per trigger; it never loops
Hover only repeats the effect and is never needed to read the text
Decoration only: the animated layers are hidden from assistive technology and never take focus
Stands still for visitors who ask for less motion (prefers-reduced-motion), and can also be shown still with the rdm-still class or isPaused
In forced-colors (high contrast) mode the text is drawn in the system colours with no effect
Does not flash: nothing changes more than three times in a second (WCAG 2.3.1)
The text is real text in the server HTML, readable with no script
Optional: it is a separate component, so projects that do not add it carry none of its code

Guidelines

Use it when

A short heading or label that should feel techy or alive
Revealing a name or status

Avoid it when

Body text and any text people must read quickly
Text people must copy accurately while it is scrambling

Don't

Using a very long duration, which leaves unreadable characters on screen
Relying on hover to show the real text

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-text-default