Glitchy404

Guidelines#

Use it for the not-found page, and nothing else.

What you provide: width (default 860), height (default 232; keep the 100 : 29 ratio of the artwork) and color (default #fff). The SVG is serialised to an image, so pass a literal colour, not a CSS variable: Crew OS passes #fff in dark mode and #000 in light mode.

Anatomy: the canvas is the SVG size plus a 50px margin on every side (so a 600 × 174 mark takes 700 × 274). The mark is split into ten groups; each shakes horizontally by up to 2px on its own loop (0.5–1.5s, easeInOut) after a random delay of up to 2s.

Behaviour: after 100ms the SVG is redrawn to an offscreen canvas on every animation frame and copied row by row with a random horizontal offset of up to ±4px (intensity 0.4 × 20px range). The loop runs continuously while mounted and has no reduced-motion branch.

Don't add body text inside it, or use it for errors other than a missing page.

Facts#

Group	Effects
Product	Crew OS
Global	window.DigitalCrew.Glitchy404
Source	digitalcrew-orchestrator: components/ui/glitchy-404-1.tsx
Import in the app	import { Glitchy404 } from "@/components/ui/glitchy-404-1";

API#

TypeScript declarations emitted from components/ui/glitchy-404-1.tsx.

interface Glitchy404Props {
    width?: number;
    height?: number;
    color?: string;
}
export declare function Glitchy404({ width, height, color }: Glitchy404Props): any;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    // As in Crew OS: white on dark themes, black on light ones (the SVG is rasterised, so pass a literal colour).
    var dark = /-dark$/.test(document.documentElement.getAttribute("data-theme") || "");
    return h("div", { className: "grid justify-items-center gap-1" },
      h(DC.Glitchy404, { width: 600, height: 174, color: dark ? "#fff" : "#000" }),
      h("p", { className: "text-muted-foreground -mt-6 text-sm" }, "This page drifted off the pipeline."));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Effects#