Signature / Molecule

Chromatic Text

Text with chromatic aberration effect, RGB channel splitting.

Edit on GitHub

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

Live, Nov 12

Signal Conf 2026

One day of talks on realtime systems, observability and the humans who carry the pager.

Installation$

Install from

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

Prefer the package?

Usage$

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

Examples$

Variants$

DefaultGlitchNeon

import { ChromaticText } from "@glinui/ui"


export function ChromaticVariants() {
  return (
    <div data-glin-theme="dark" className="flex w-full flex-wrap items-center justify-center gap-x-10 gap-y-4 rounded-xl bg-[var(--surface-0)] p-8">
      <ChromaticText className="text-4xl font-semibold text-[var(--color-foreground)]">Default</ChromaticText>
      <ChromaticText duration={3} offset={3} className="text-4xl font-semibold text-[var(--color-foreground)]">Glitch</ChromaticText>
      <ChromaticText colors={["#06b6d4", "#f97316"]} offset={4} className="text-4xl font-semibold text-[var(--color-foreground)]">Neon</ChromaticText>
    </div>
  )
}

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	`["var(--tone-danger)", "var(--tone-info)"]`	Colors for the channels [red, blue]. Defaults come from theme tokens; the fringes sit behind the base text so they read on any stage.
`duration`	`number`	No	`0`	Animation duration in seconds (0 = static)
`offset`	`number`	No	`2`	Offset amount in px for the chromatic split

Source$

import { 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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

ChromaticTextProps

`ChromaticTextProps`

Prop	Type	Required	Default	Description
`colors`	`[string, string]`	No	`["var(--tone-danger)", "var(--tone-info)"]`	Colors for the channels [red, blue]. Defaults come from theme tokens; the fringes sit behind the base text so they read on any stage.
`duration`	`number`	No	`0`	Animation duration in seconds (0 = static)
`offset`	`number`	No	`2`	Offset amount in px for the chromatic split