Dithered Footer

Footers 97

About

Footer whose brand name is cut out of a drifting field of dithered dots that brighten under the cursor. One accent colour, light and dark mode, newsletter signup and social links. Pure CSS masks, no images.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dithered Footer to your project and fits it to your theme.

Code

How Dithered Footer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import DitheredFooter from "@/components/ui/dithered-footer";

export default function DitheredFooterDemo() {
    return (
        // Footer pinned to the bottom of the frame, so the whole dot band is in view.
        <div className="flex min-h-screen flex-col justify-end bg-background">
            {/* Swap this for your real signup call. Resolving shows the thank-you message. */}
            <DitheredFooter onSubscribe={() => new Promise((resolve) => setTimeout(resolve, 600))} />
        </div>
    );
}