Text scramble

Resolves text from scrambled characters when its value changes.

STUDIO NOTES

text-scramble-basic-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { TextScramble } from "@/components/vip-ui/text-scramble";export function TextScrambleBasicDemo() {  const [alternate, setAlternate] = useState(false);  return (    <div className="grid w-full max-w-md justify-items-start gap-4">      <p className="text-3xl font-semibold tracking-tight">        <TextScramble          value={alternate ? "FIELD NOTES" : "STUDIO NOTES"}          aria-live="polite"        />      </p>      <Button        size="sm"        variant="secondary"        onPress={() => setAlternate((value) => !value)}      >        Change title      </Button>    </div>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-text-scramble.json

Glyphs

Use characters that have the same width in your font.

STUDIO NOTES

text-scramble-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { TextScramble } from "@/components/vip-ui/text-scramble";export function TextScrambleDemo() {  const [alternate, setAlternate] = useState(false);  return (    <div className="grid w-full max-w-md gap-4">      <div className="min-w-0 rounded-2xl bg-foreground p-5 text-background">        <p className="text-3xl leading-tight font-bold tracking-[-0.06em] [overflow-wrap:anywhere] sm:text-4xl">          <TextScramble            value={alternate ? "FIELD NOTES" : "STUDIO NOTES"}            glyphs="01"            aria-live="polite"          />        </p>      </div>      <div>        <Button          size="sm"          variant="secondary"          onPress={() => setAlternate((value) => !value)}        >          Change title        </Button>      </div>    </div>  );}

Duration

Use a short duration for status labels.

0.4 seconds: SYNCING
1.2 seconds: SYNCING

text-scramble-duration-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { TextScramble } from "@/components/vip-ui/text-scramble";const durations = [0.4, 1.2];export function TextScrambleDurationDemo() {  const [alternate, setAlternate] = useState(false);  return (    <div className="grid w-full max-w-md justify-items-start gap-4">      <dl className="grid gap-3">        {durations.map((duration) => (          <div key={duration} className="grid gap-1">            <dt className="text-xs text-muted-foreground">              {duration} seconds            </dt>            <dd className="text-xl font-semibold">              <TextScramble                value={alternate ? "UP TO DATE" : "SYNCING"}                duration={duration}              />            </dd>          </div>        ))}      </dl>      <Button        size="sm"        variant="secondary"        onPress={() => setAlternate((value) => !value)}      >        Change status      </Button>    </div>  );}

API reference

value: stringRequired: The text to show. A change starts a scramble. The first value shows without a scramble. Screen readers get the final text at once.
duration: number = 0.7: Time in seconds to resolve the text. Set 0 to change the text without a scramble.
glyphs: string: Characters that show during the scramble. Without it, the scramble uses the letters A to Z and the digits 0 to 9. The default monospace font keeps the width the same.