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

Prism Text

A spectrum that moves with purpose. Slow color shifts inside selectable text, with adjustable speed and saturation. Pure CSS, no canvas.

↗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 / PRISM TEXT INTERACTIVE PREVIEW
F/01 — MATERIAL
Somewhere else.
TYPE / EXPERIMENT 001 ORIGINAL SOURCE
Prism TextA spectrum that moves with purpose. Slow color shifts inside selectable text, with adjustable speed and saturation. Pure CSS, no canvas.
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.

PRISM TEXT / REQUIRED FILESLOCAL PROOF
01components/forge-factory-01/prism-text.tsxTS/CSS
02components/forge-factory-01/prism-text.module.cssTS/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 { PrismText } from "@/components/forge-factory-01/prism-text";

export function MyInterface() {
  return <PrismText text={"Somewhere else."} speed={1} intensity={0.68} paused={false} />;
}

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

DISCOVERY NOTE / APPROVED / SOURCE INCLUDED

Prism Text in practice.

Prism Text is a pure-CSS material study: a selectable spectrum moves inside live text, with speed and saturation exposed as simple React props.

Use it for

  • Expressive headings or quotes that still need normal text selection and copy.
  • Editorial labels that benefit from a slow color drift rather than a moving layout.
  • Interfaces that want a decorative text treatment without canvas or WebGL.

Limits

  • The component does not read prefers-reduced-motion itself; callers must pass paused when required.
  • The effect animates color, not layout, and is not a substitute for accessible contrast testing.
  • No gradient image or canvas is used; the visible treatment is CSS.

Use the source

  1. 01

    Copy prism-text.tsx and prism-text.module.css into components/forge-factory-01/.

  2. 02

    Import PrismText and pass text, speed and intensity; paused is exposed for user or preference control.

  3. 03

    Check color contrast at the chosen saturation and pause the effect for reduced-motion users.

Code & media rights

Application code is MIT-licensed. This study uses no third-party media.

Compare the collection