Glitch Text

Slices tear sideways while offset copies split into channels. For error pages, game titles and system moments. Monochrome with chroma off.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add glitch-text

Example

import { GlitchText } from "@/components/galactrex/glitch-text";

<GlitchText as="h1" text="SIGNAL LOST" />

Installs to components/galactrex/glitch-text.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`text`	`string`	—	The text.
`as`	`ElementType`	`"span"`	Element.
`trigger`	`"hover" \| "interval" \| "always"`	`"interval"`	When it glitches.
`every`	`number`	`3.5`	Seconds between bursts.
`intensity`	`number`	`6`	Tear distance in px.
`chroma`	`boolean`	`true`	Split colour channels.
`className`	`string`	—	Extra classes for the outer element.