Topography Background

Heroes 23

About

An animated full-bleed background of living contour lines, like a topographic map, that rise into a hill under the cursor and ripple outward on click.

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

Code

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

Usage.tsx

"use client";

import { TopographyBackground } from "@/components/ui/backgrounds-topography";

export default function TopographyBackgroundDemo() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <TopographyBackground className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,#fafafa_0%,#f0f0f0_100%)] text-neutral-500 dark:bg-[radial-gradient(ellipse_at_center,#171717_0%,#000_100%)] dark:text-neutral-400" />
    </div>
  );
}