Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/developer-exe/llms.txt

Use this file to discover all available pages before exploring further.

GlitchText produces the chromatic-aberration glitch effect seen on headings and labels throughout developer.exe. The component renders a wrapper <span class="glitch-wrapper"> around the target element, sets data-text to the provided string so CSS pseudo-elements can mirror the content, and toggles between an always-on and hover-only animation mode based on the interactive prop. The glitch itself is driven entirely by CSS — no JavaScript animation libraries are involved.

​
Props

​
text
string
required
The text string to display and animate. This value is rendered as the element’s children and also written to the data-text DOM attribute, which the CSS ::before and ::after pseudo-elements read via content: attr(data-text) to create the offset ghost layers.
​
as
string
default:"\"span\""
The HTML element tag to render. Pass any valid tag name — "h1", "h2", "p", "div", "span" — to control the semantic role of the glitched text in your document hierarchy.
​
className
string
default:"\"\""
Additional CSS or Tailwind classes applied to the outer .glitch-wrapper span. Use this for typography scale, colour, spacing, or layout adjustments.
​
interactive
boolean
default:"false"
When false (default), the glitch animation runs continuously. When true, the glitch activates only while the user’s pointer hovers over the element — useful for navigation links or CTAs where a permanent glitch would be visually noisy.

​
Always-on glitch

Use the default interactive={false} behaviour for section headings and decorative labels that should glitch continuously as soon as they mount: 
<GlitchText
  text="MISSION BRIEFINGS"
  as="h1"
  className="font-pixel text-3xl text-neon-yellow"
/>

​
Interactive (hover-only) glitch

Pass interactive to restrict the effect to the hover state. The element renders as plain text until the pointer enters, at which point the glitch-text-base animation class is applied: 
<GlitchText
  text="HOVER TO GLITCH"
  interactive
  className="font-hud text-2xl text-neon-cyan"
/>

​
How it works

GlitchText relies on a two-layer CSS pseudo-element technique:
  1. The rendered element (e.g. <h1>) receives data-text="your string" as a DOM attribute.
  2. The global .glitch-text-base class defines ::before and ::after pseudo-elements that use content: attr(data-text) to duplicate the text.
  3. The ::before pseudo-element is offset by +2px horizontally with a magenta (#ff2bd6) text-shadow, and ::after is offset by -2px with a cyan (#22d3ee) text-shadow.
  4. A CSS keyframe animation shifts these offsets over time, creating the characteristic chromatic-aberration flicker.
When interactive={false}, the glitch-text-base class is applied unconditionally. When interactive={true}, the component uses a React useState boolean toggled by onMouseEnter / onMouseLeave to add or remove the class dynamically.

​
CSS classes involved

ClassPurpose
.glitch-wrapperOuter <span> container; receives onMouseEnter / onMouseLeave handlers
.glitch-text-baseApplied to the inner element; drives the ::before / ::after keyframe animation
The text prop must be a plain string. Do not pass JSX, React elements, or nested components — the value is written directly to the data-text DOM attribute, which only accepts strings. Non-string values will produce [object Object] in the pseudo-element content.

Build docs developers (and LLMs) love

Get started for freeTalk to us