"use client"; /** * @author: @dorianbaffier * @description: Glitch Text (Signal Text). Flat text that bursts into hard-cut * horizontal bands with a thin red/cyan channel split, on idle, hover, or as * the transition to new text. * @version: 2.0.0 * @date: 2026-10-14 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import type { CSSProperties, PointerEvent } from "react"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; /** * - `idle`: a burst every 4-9s while on screen, plus on text changes. * - `hover`: a burst on pointer enter (or tap), plus on text changes. * - `change`: only text changes glitch; the burst is the transition. */ export type GlitchTextTrigger = "idle" | "hover" | "change"; export type GlitchTextIntensity = "subtle" | "medium" | "strong"; export interface GlitchTextProps { /** Text to render. Changing it glitches over to the new text. */ text?: string; /** What starts a burst. Defaults to `idle`. */ trigger?: GlitchTextTrigger; /** Band count, displacement and channel split. Defaults to `medium`. */ intensity?: GlitchTextIntensity; /** Color of the leading channel during a burst. The other one is cyan. */ accent?: string; className?: string; /** Root element. A span by default, so it also fits inside a heading. */ as?: "span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; } interface Settings { /** Horizontal bands the text is cut into. */ bands: number; /** Max sideways jump of a band, in em (so it scales with the font). */ shift: number; /** Max red/cyan channel offset, in px. */ split: number; /** Hard-cut frames per burst. */ frames: number; /** Length of one frame, in ms. */ frame: number; } const INTENSITY: Record = { subtle: { bands: 3, shift: 0.05, split: 1, frames: 5, frame: 55 }, medium: { bands: 4, shift: 0.12, split: 2, frames: 6, frame: 55 }, strong: { bands: 5, shift: 0.18, split: 3, frames: 7, frame: 50 }, }; const MAX_BANDS = 5; const BAND_IDS = Array.from({ length: MAX_BANDS }, (_, i) => `band-${i}`); const DEFAULT_ACCENT = "oklch(0.63 0.24 25)"; const CYAN = "oklch(0.78 0.14 205)"; // Each keyframe holds until the next one: a glitch cuts, it doesn't glide. const HOLD = "steps(1, end)"; const FIRST_IDLE = 1200; const IDLE_MIN = 4000; const IDLE_SPREAD = 5000; // Chance that a band stays put on a given frame, so the cut reads as broken // signal rather than a uniform shake. const STILL_CHANCE = 0.3; const round = (n: number) => Math.round(n * 1000) / 1000; const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; /** Keyframes that hold each value for one frame, then end on the last one. */ const held = (frames: Keyframe[]): Keyframe[] => [ ...frames.map((k, i) => ({ ...k, offset: i / frames.length, easing: HOLD })), { ...frames.at(-1), offset: 1 }, ]; /** Random band boundaries from 0 to 100%, no band much thinner than another. */ const randomCuts = (count: number) => { const weights = Array.from({ length: count }, () => 0.55 + Math.random()); const total = weights.reduce((a, b) => a + b, 0); const cuts = [0]; for (const w of weights) { cuts.push(round((cuts.at(-1) ?? 0) + (w / total) * 100)); } return cuts; }; const jump = (max: number) => { if (Math.random() < STILL_CHANCE) { return 0; } const sign = Math.random() < 0.5 ? -1 : 1; return round(sign * (0.25 + 0.75 * Math.random()) * max); }; /** Sideways positions of one band: off on frame one, home on the last. */ const bandPath = (s: Settings, forceMove: boolean) => Array.from({ length: s.frames }, (_, f) => { if (f === s.frames - 1) { return 0; } const x = jump(s.shift); return f === 0 && forceMove && x === 0 ? round(s.shift * 0.6) : x; }); interface Shown { /** Text the bands show first during a change burst. */ from: string | null; to: string; /** Bumped on every text change. */ id: number; } const LAYER = "col-start-1 row-start-1 grid"; const TEXT = "col-start-1 row-start-1"; const GHOST = "pointer-events-none select-none opacity-0"; function LayerText({ from, to }: { from: string | null; to: string }) { return ( <> {from !== null && ( {from} )} {to} ); } const GlitchText = ({ text = "Signal Text", trigger = "idle", intensity = "medium", accent = DEFAULT_ACCENT, className, as: Root = "span", }: GlitchTextProps) => { const layersRef = useRef(null); const animsRef = useRef([]); const runningRef = useRef(false); const intensityRef = useRef(intensity); intensityRef.current = intensity; const [shown, setShown] = useState({ from: null, to: text, id: 0 }); if (shown.to !== text) { setShown({ from: shown.to, to: text, id: shown.id + 1 }); } const stop = useCallback(() => { for (const a of animsRef.current) { a.cancel(); } animsRef.current = []; runningRef.current = false; }, []); /** Runs one burst. With `swap`, the bands cut from old text to new midway. */ const burst = useCallback( (swap: boolean, onDone?: () => void) => { const root = layersRef.current; if (!root) { return; } stop(); const s = INTENSITY[intensityRef.current]; const opts: KeyframeAnimationOptions = { duration: s.frames * s.frame, fill: "none", }; const anims: Animation[] = []; const run = (el: Element, frames: Keyframe[]) => { anims.push(el.animate(held(frames), opts)); }; const base = root.querySelector('[data-layer="base"]'); if (base) { run(base, [{ opacity: 0 }]); } // The bands tile the text top to bottom, so at rest they rebuild it. // The outer edges reach past the box to keep ascenders and descenders. const cuts = randomCuts(s.bands); const bands = root.querySelectorAll('[data-layer="band"]'); const mover = Math.floor(Math.random() * s.bands); bands.forEach((band, i) => { if (i >= s.bands) { return; } const top = i === 0 ? -50 : cuts[i]; const bottom = i === s.bands - 1 ? -50 : round(100 - cuts[i + 1]); band.style.clipPath = `inset(${top}% -25% ${bottom}% -25%)`; run( band, bandPath(s, i === mover).map((x) => ({ opacity: 1, transform: `translate3d(${x}em, 0, 0)`, })) ); }); // Red and cyan copies sit behind the bands and peek out on either side. const channels = root.querySelectorAll('[data-layer="channel"]'); const offsets = Array.from({ length: s.frames }, () => Math.max(1, Math.ceil(Math.random() * s.split)) ); channels.forEach((channel, c) => { const dir = c === 0 ? -1 : 1; run( channel, offsets.map((d, f) => ({ opacity: f === s.frames - 1 ? 0 : 1, transform: `translate3d(${dir * d}px, 0, 0)`, })) ); }); if (swap) { const half = Math.ceil(s.frames / 2); const flip = (selector: string, before: number) => { for (const el of root.querySelectorAll(selector)) { run( el, Array.from({ length: s.frames }, (_, f) => ({ opacity: f < half ? before : 1 - before, })) ); } }; flip('[data-layer]:not([data-layer="base"]) [data-text="from"]', 1); flip('[data-layer]:not([data-layer="base"]) [data-text="to"]', 0); } animsRef.current = anims; runningRef.current = true; const last = anims.at(-1); if (last) { last.onfinish = () => { animsRef.current = []; runningRef.current = false; onDone?.(); }; } }, [stop] ); // Text changed: the burst is the transition. A layout effect, so the new // text never paints clean before the bands take over. useLayoutEffect(() => { if (shown.from === null) { return; } const id = shown.id; const settle = () => setShown((s) => (s.id === id ? { ...s, from: null } : s)); if (prefersReducedMotion()) { settle(); return; } burst(true, settle); }, [shown.from, shown.id, burst]); // Idle: a rare burst every 4-9s, only while on screen and the tab is visible. useEffect(() => { const root = layersRef.current; if (trigger !== "idle" || !root) { return; } let visible = false; let timer: ReturnType | undefined; const schedule = (delay: number) => { clearTimeout(timer); timer = setTimeout(() => { if ( !(document.hidden || runningRef.current || prefersReducedMotion()) ) { burst(false); } schedule(IDLE_MIN + Math.random() * IDLE_SPREAD); }, delay); }; const update = () => { if (visible && !document.hidden) { if (timer === undefined) { schedule(FIRST_IDLE); } } else { clearTimeout(timer); timer = undefined; } }; const io = new IntersectionObserver(([entry]) => { visible = entry?.isIntersecting ?? false; update(); }); io.observe(root); document.addEventListener("visibilitychange", update); return () => { io.disconnect(); document.removeEventListener("visibilitychange", update); clearTimeout(timer); }; }, [trigger, burst]); useEffect(() => stop, [stop]); const onPointer = (e: PointerEvent) => { // Mouse bursts on enter; touch and pen burst on press, since they can't hover. const isMouse = e.pointerType === "mouse"; if ( trigger !== "hover" || (e.type === "pointerenter") !== isMouse || runningRef.current || prefersReducedMotion() ) { return; } burst(false); }; const { from, to } = shown; return ( {text} ); }; export default GlitchText;

Glitch Text

Signal TextSignal TextSignal TextSignal TextSignal TextSignal TextSignal TextSignal TextSignal Text

On this page

Signal TextSignal TextSignal TextSignal TextSignal TextSignal TextSignal TextSignal TextSignal Text

Signal Text

Signal Text