Signal Lost
A CRT 'no carrier' error screen — RGB glitch slices, film grain, scan roll and a REC counter.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
A complete 404 / 500 / offline screen. The code tears into red and cyan slices, a scan bar rolls, the grain crawls and a VHS HUD ticks. Hover to push the glitch harder.
Installation
$ npx shadcn@latest add https://guetix.com/r/signal-lost.json
Uses the shadcn CLI. It creates components/guetix/signal-lost.tsx and installs nothing else.
Usage
example.tsx
"use client";
import Link from "next/link";
import SignalLost from "@/components/guetix/signal-lost";
export default function SignalLostDemo({ variant = "animated" }: { variant?: string }) {
return (
<SignalLost animated={variant !== "regular"} code="404" title="Signal lost" channel="CH 04 · NO CARRIER">
<Link href="/" className="rounded-full bg-white px-4 py-2 text-sm font-semibold text-black hover:bg-emerald-200">
Back to home
</Link>
<Link href="/components" className="rounded-full border border-white/20 px-4 py-2 text-sm text-white/80 hover:text-white">
Browse components
</Link>
</SignalLost>
);
}
404 page500 / maintenanceOffline stateRetro / gaming brands
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Glitch slices are `clip-path: inset()` keyframes on duplicate layers, run with `steps(1)` for hard cuts.
- 02Film grain is an inline SVG `feTurbulence` data-URI, so there are no image requests.
- 03Hover changes one variable (`--sp`) and every glitch speeds up together.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | "404" | Big glitching text. |
| title | string | "Signal lost" | Heading. |
| message | string | — | Body copy. |
| channel | string | — | HUD line top-left. |
| intensity | "calm" | "normal" | "chaos" | "normal" | Base glitch speed. |
| children | ReactNode | — | Actions under the message. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Labelled section with a real heading; the glitch copies are `aria-hidden`.
- Reduced motion: a static RGB split.