# Not Found 07

> A humorous 404 not found block with a glitch effect

A shadcn/ui block from the [@shadcnui-blocks](https://shadcnui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnui-blocks/not-found-07).

- Page, with a live preview: https://shadcn.exchange/r/shadcnui-blocks/not-found-07
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnui-blocks/not-found-07-light-6c8e2200bf96ccc5.png
- Registry item: https://shadcnui-blocks.com/r/not-found-07.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/not-found-07.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`

## Files

### `src/registry/blocks/radix/not-found-07/components/not-found.tsx`

```tsx
import Link from "next/link";
import { Button } from "@/registry/bases/radix/ui/button";
import GlitchText from "./glitch-text";

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center px-6 text-center">
      <div className="relative select-none">
        <GlitchText
          className="tracking-[0.15em]"
          enableOnHover={false}
          enableShadows
          speed={1}
        >
          404
        </GlitchText>
      </div>
      <h1 className="mt-2 font-semibold text-2xl tracking-tight">
        You found the void
      </h1>
      <p className="mt-3 max-w-sm text-muted-foreground">
        This page doesn&apos;t exist, but you found it anyway. Unfortunately,
        there&apos;s nothing here — just empty space and broken dreams.
      </p>
      <div className="mt-8 flex gap-3">
        <Button asChild>
          <Link href="/">Escape the void</Link>
        </Button>
        <Button asChild variant="outline">
          <Link href="/contact">Send a distress signal</Link>
        </Button>
      </div>
    </div>
  );
}
```

### `src/registry/blocks/radix/not-found-07/components/glitch-text.tsx`

```tsx
import type { CSSProperties, FC } from "react";

interface GlitchTextProps {
  children: string;
  speed?: number;
  enableShadows?: boolean;
  enableOnHover?: boolean;
  className?: string;
}

interface CustomCSSProperties extends CSSProperties {
  "--after-duration": string;
  "--before-duration": string;
  "--after-shadow": string;
  "--before-shadow": string;
}

const GlitchText: FC<GlitchTextProps> = ({
  children,
  speed = 0.5,
  enableShadows = true,
  enableOnHover = false,
  className = "",
}) => {
  const inlineStyles: CustomCSSProperties = {
    "--after-duration": `${speed * 3}s`,
    "--before-duration": `${speed * 2}s`,
    "--after-shadow": enableShadows ? "-5px 0 red" : "none",
    "--before-shadow": enableShadows ? "5px 0 cyan" : "none",
  };

  const baseClasses =
    "text-foreground text-[clamp(2rem,10vw,8rem)] font-black relative mx-auto select-none cursor-pointer";

  const pseudoClasses = enableOnHover
    ? "after:content-[''] after:absolute after:top-0 after:left-[10px] after:text-white after:bg-muted/5 after:overflow-hidden after:[clip-path:inset(0_0_0_0)] after:opacity-0 " +
      "before:content-[''] before:absolute before:top-0 before:left-[-10px] before:text-white before:bg-muted/5 before:overflow-hidden before:[clip-path:inset(0_0_0_0)] before:opacity-0 " +
      "hover:after:content-[attr(data-text)] hover:after:opacity-100 hover:after:[text-shadow:var(--after-shadow)] hover:after:animate-glitch-after " +
      "hover:before:content-[attr(data-text)] hover:before:opacity-100 hover:before:[text-shadow:var(--before-shadow)] hover:before:animate-glitch-before"
    : "after:content-[attr(data-text)] after:absolute after:top-0 after:left-[10px] after:text-foreground after:bg-muted/5 after:overflow-hidden after:[clip-path:inset(0_0_0_0)] after:[text-shadow:var(--after-shadow)] after:animate-glitch-after " +
      "before:content-[attr(data-text)] before:absolute before:top-0 before:left-[-10px] before:text-foreground before:bg-muted/5 before:overflow-hidden before:[clip-path:inset(0_0_0_0)] before:[text-shadow:var(--before-shadow)] before:animate-glitch-before";

  const combinedClasses = `${baseClasses} ${pseudoClasses} ${className}`;

  return (
    <div className={combinedClasses} data-text={children} style={inlineStyles}>
      {children}
    </div>
  );
};

export default GlitchText;
```