Signature / Moleculestable

Chromatic Text

Text with chromatic aberration effect — RGB channel splitting.

@glinui/uiComponent: chromatic-text

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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

Usage$

Wrap text in ChromaticText to apply RGB channel splitting. Pass a string as children — the component renders ghost layers with offset colors.

Basic$

Glin UI

TSX

1import { ChromaticText } from "@glinui/ui"
2
3export function ChromaticTextDemo() {
4return (
5  <div className="flex items-center justify-center p-8 bg-neutral-950 rounded-xl">
6    <h2 className="text-4xl font-bold text-white">
7      <ChromaticText>Glin UI</ChromaticText>
8    </h2>
9  </div>
10)
11}

Examples$

Animated$

Set duration to enable continuous chromatic animation.

Glitch

TSX

1import { ChromaticText } from "@glinui/ui"
2
3export function ChromaticTextAnimatedDemo() {
4return (
5  <div className="flex items-center justify-center p-8 bg-neutral-950 rounded-xl">
6    <h2 className="text-4xl font-bold text-white">
7      <ChromaticText duration={3} offset={3}>Glitch</ChromaticText>
8    </h2>
9  </div>
10)
11}

Custom Colors$

Neon

TSX

1import { ChromaticText } from "@glinui/ui"
2
3export function ChromaticTextColorsDemo() {
4return (
5  <div className="flex items-center justify-center p-8 bg-neutral-950 rounded-xl">
6    <h2 className="text-4xl font-bold text-white">
7      <ChromaticText colors={["#06b6d4", "#f97316"]} offset={4}>Neon</ChromaticText>
8    </h2>
9  </div>
10)
11}

Accessibility$

Ghost layers are aria-hidden="true" — screen readers only see the base text.
The base text remains fully readable and accessible.

Reduced Motion$

When prefers-reduced-motion: reduce is active, the animated chromatic shift is paused via motion-reduce:[animation:none]. The static offset layers remain visible.

API Reference$

Prop	Type	Required	Default	Description
`colors`	`[string, string]`	No	`["#ff0040", "#0080ff"]`	Colors for the channels [red, blue]
`duration`	`number`	No	`0`	Animation duration in seconds (0 = static)
`offset`	`number`	No	`2`	Offset amount in px for the chromatic split

Source$

TSX

1import { ChromaticText } from "@glinui/ui"

packages/ui/src/components/chromatic-text.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/chromatic-text.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

ChromaticTextProps

`ChromaticTextProps`

Prop	Type	Required	Default	Description
`colors`	`[string, string]`	No	`["#ff0040", "#0080ff"]`	Colors for the channels [red, blue]
`duration`	`number`	No	`0`	Animation duration in seconds (0 = static)
`offset`	`number`	No	`2`	Offset amount in px for the chromatic split