UI FORGE.ORIGINAL EFFECTS
REACT + TYPESCRIPT
EXPERIMENTALTry effects ↗
Menu
EFFECT FACTORY / LIVE PLAYGROUND

Glyph Morph

A moment of beautiful disorder. Characters rearrange into real, accessible text, with deterministic timing and a motion preference fallback.

↗ORIGINAL REACT STUDIESDOM · CSS · MOTIONREUSABLE SOURCE INCLUDED
01 EFFECT SELECTOR
02 LIVE CONTROLS
Reduced-motion preference overrides visual movement. Controls affect this preview only.
LIVE STAGE / GLYPH MORPH INTERACTIVE PREVIEW
F/01 — TYPOGRAPHY
HELLO WORLD
TYPE / EXPERIMENT 001 ORIGINAL SOURCE
Glyph MorphA moment of beautiful disorder. Characters rearrange into real, accessible text, with deterministic timing and a motion preference fallback.
SOURCE INCLUDED
03 SOURCE CONTRACT

A little source.
A lot of possibility.

Each effect is a React component with a scoped CSS Module. Copy the required files below, preserve their relative imports, and adjust the example to your interface. Keyboard support and motion preferences come with it.

GLYPH MORPH / REQUIRED FILESLOCAL PROOF
01components/forge-factory-01/glyph-morph.tsxTS/CSS
02components/forge-factory-01/glyph-morph.module.cssTS/CSS
03components/forge-factory-01/use-reduced-motion.tsTS/CSS
Local review source. The component package and registry release remain unpublished.

03 / CODE & INSTALLATION

Take it from here.

REACT + CSS MODULES

Copy each source file into components/forge-factory-01/. Keep the filenames and their relative imports together. Then use the example below. Use the runtime and file types listed on this effect’s usage notes. The example uses the common @/ import alias; use a relative import if your project has no alias.

In your React component
import { GlyphMorph } from "@/components/forge-factory-01/glyph-morph";

export function MyInterface() {
  return <GlyphMorph text={"HELLO WORLD"} durationMs={850} frameMs={74} seed={17} paused={false} />;
}

The source above powers this preview. Local review build; no published package required.

DISCOVERY NOTE / APPROVED / SOURCE INCLUDED

Glyph Morph in practice.

Glyph Morph animates a headline through seeded character noise and lands on the real accessible text, so the final state never depends on animation.

Use it for

  • Headline reveals that need a distinctive transition without losing selectable text.
  • Status or label changes that benefit from a short burst of character noise.
  • Editorial interfaces where the text must remain available to assistive technology.

Limits

  • The sequence is deterministic for a given seed, text and timing; it is not random art generation.
  • The animated glyph layer is cosmetic and hidden from assistive technology.
  • Very long strings or very short frame intervals increase update cost; test on the target device.

Use the source

  1. 01

    Copy glyph-morph.tsx, glyph-morph.module.css and use-reduced-motion.ts into components/forge-factory-01/.

  2. 02

    Import GlyphMorph and pass the final text; durationMs, frameMs and seed control the deterministic sequence.

  3. 03

    Verify that the screen-reader copy and the reduced-motion state both show the final text.

Code & media rights

Application code is MIT-licensed. This study uses no third-party media or fonts beyond the site font packages.

Compare the collection