Media & effects
Glitch Text
Cybernetic glitch typography with 5 distinct kinetic animation modes
detent-glitch-text
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 4
- Wave
- phase-4-canvas
- Group
- Media & effects
5.9 KB gzip for the class module
Variants
Demo copy, not a dataset. The line in the preview above cycles continuously, as does the first line here (the VHS
button switches it), the second and third glitch on hover, and the last bursts on click. Every string is real text
that a screen reader reads once; the split, slice, ghost and scramble layers are
aria-hidden decoration. With prefers-reduced-motion: reduce
the plain text stays and nothing animates.
Recorded states
reduced motionrecorded state; no setter
Usage
Import
import '/components/glitch-text/define.js';
// or register it yourself
import { DetentGlitchText } from '/components/glitch-text/glitch-text.js';Attributes
color1color2durationgreen-colorintensitypurple-colorrepeat-delaytexttriggervariant
Properties
as
Slots
No slots are recorded for this component.
Events
No events are recorded for this component.
Example
Runnable example: site/examples/glitch-text.ts. The snippet below is generated from the catalogued attributes.
<detent-glitch-text
color1="#00e571"
color2="#8b00ff"
duration="0.5"
green-color
intensity="medium"
purple-color
repeat-delay="2.5"
text
trigger="continuous"
variant="rgb-split"
></detent-glitch-text>Property-only values
const element = document.querySelector('detent-glitch-text');
if (element !== null) {
// as: keyof JSX.IntrinsicElements
element.as = 'span';
}Source
The pinned upstream source for this row:
src/components/ui/GlitchText.tsxsha256 16ddcb3aff4c…
Native files
The native module and its artifacts:
src/components/glitch-text/glitch-text.tssrc/components/glitch-text/styles.csssrc/components/glitch-text/define.tsdocs/components/glitch-text.mdsite/examples/glitch-text.tstests/browser/glitch-text.spec.tsevidence/components/glitch-text.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
color1 | color1 | string | '#00e571' | Kebab-case attribute; camelCase property. |
color2 | color2 | string | '#8b00ff' | Kebab-case attribute; camelCase property. |
duration | duration | number | 0.5 | Kebab-case attribute; camelCase property. |
green-color | — | — | — | Recorded in the catalog as an attribute. |
intensity | intensity | 'low' | 'medium' | 'high' | 'medium' | Kebab-case attribute; camelCase property. |
purple-color | — | — | — | Recorded in the catalog as an attribute. |
repeat-delay | repeatDelay | number | 2.5 | Kebab-case attribute; camelCase property. |
text | text | string | — | Kebab-case attribute; camelCase property. |
trigger | trigger | 'continuous' | 'hover' | 'click' | 'continuous' | Kebab-case attribute; camelCase property. |
variant | variant | 'rgb-split' | 'slice' | 'vhs' | 'scramble' | 'pulse' | 'rgb-split' | Kebab-case attribute; camelCase property. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
as | keyof JSX.IntrinsicElements | 'span' | Property-only: assign from script; not accepted as an attribute. |
Events
No custom events are recorded for this component.
Slots
No slots are recorded for this component.
CSS customisation
- `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- The scramble variant keeps the real text in the accessible layer and paints glyph noise in an aria-hidden layer; the source replaced the primary text, so a screen reader read glyph soup (PC-12.6 correction).
- Decorative layers rest at opacity 0 instead of stacking invisible identical copies of the text; the resting appearance is identical and no duplicate text is painted.
- as is a documented allow-list that only changes the inner text element tag (a custom element cannot change its own tag); unsupported values fall back to span with a warning instead of throwing.
- duration and repeat-delay stay in seconds and reject non-finite or negative input with the documented default (PC-3.4).
- The scramble alphabet is the pinned GLYPH_CHARS driven by a seeded sequence so the decode is reproducible.
- Derived state and variant are published as root[data-motion] and root[data-variant].
- No keyboard trigger is invented for hover or click: the text is complete and readable without the effect, which the docs keyboard table states explicitly.
What it does
Cybernetic glitch typography with five modes (rgb-split, slice, vhs, scramble, pulse), three trigger modes (continuous, hover, click) and three intensity tiers. The caller's text is always real, unbroken, readable text.
Upstream behaviour
- 5 distinct visual glitch modes: 'rgb-split', 'slice', 'vhs', 'scramble', and 'pulse'
- Interactive trigger options: 'continuous' periodic looping, on 'hover', or interactive 'click' burst
- Dual chromatic color customization (color1/color2, with backward-compatible greenColor/purpleColor)
- Calibrated multi-tiered intensity scaling: 'low', 'medium', and 'high'
- Screen-reader safe: rendered as unbroken native text with aria-hidden on decorative duplicate slices
- Full prefers-reduced-motion compliance freezing all displacements into clean resting text
- Polymorphic rendering via the 'as' prop ('span', 'h1', 'h2', 'p', etc.) with full ref forwarding
Differences from upstream
- `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- The scramble variant keeps the real text in the accessible layer and paints glyph noise in an aria-hidden layer; the source replaced the primary text, so a screen reader read glyph soup (PC-12.6 correction).
- Decorative layers rest at opacity 0 instead of stacking invisible identical copies of the text; the resting appearance is identical and no duplicate text is painted.
- as is a documented allow-list that only changes the inner text element tag (a custom element cannot change its own tag); unsupported values fall back to span with a warning instead of throwing.
- duration and repeat-delay stay in seconds and reject non-finite or negative input with the documented default (PC-3.4).
- The scramble alphabet is the pinned GLYPH_CHARS driven by a seeded sequence so the decode is reproducible.
- Derived state and variant are published as root[data-motion] and root[data-variant].
- No keyboard trigger is invented for hover or click: the text is complete and readable without the effect, which the docs keyboard table states explicitly.