Dithered Footer

Footers 25

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 DitheredFooterAccentDemo() {
    return (
        <div className="flex min-h-screen flex-col justify-end bg-background">
            <DitheredFooter
                brand="Verdant"
                tagline="Climate data for teams that build. Open datasets, updated hourly."
                accent="#10b981"
                copyright={`© ${new Date().getFullYear()} Verdant Labs`}
                status={{ label: "All systems normal", href: "/status" }}
            />
        </div>
    );
}