# Glitchy404

> A "404" made of shaking fragments, rasterised to a canvas where every pixel row is jittered sideways each frame, like a bad signal.

## Facts

- **Product**: Crew OS
- **Family**: Effects
- **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";`
- **Live preview**: /design/components/glitchy-404/preview.html
- **Page**: /design/components/glitchy-404

## 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.

## API

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

## Example

```html
<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

- [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md): A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up.
- [CpuArchitecture](/design/components/cpu-architecture.md): An SVG circuit diagram: eight traces run into a central chip labelled "DIGITAL CREW", with coloured light pulses travelling along them.
- [FlickeringGrid](/design/components/flickering-grid.md): A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares.
- [Globe](/design/components/globe.md): An auto-rotating 3D dot-matrix globe (cobe, WebGL) with orange city markers, which the visitor can drag to spin.
- [GlowingEffect](/design/components/glowing-effect.md): A multicolour glow that runs along a card's border and follows the pointer around it.
- [PixelCard](/design/components/pixel-card.md): A card whose surface fills with shimmering pixels, spreading out from the centre, while it is hovered or focused.
- [ProgressiveBlur](/design/components/progressive-blur.md): A stack of backdrop-blur layers, each masked to a band, so content behind it blurs progressively toward one edge.
- [SecondBentoAnimation](/design/components/second-bento-animation.md): A security emblem for the bento grid: a solid shield sits on a flickering dot grid, and the whole tile is clipped to a shield silhouette until hovered.
- [SplashCursor](/design/components/splash-cursor.md): A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.