Hairline Terrain

Component 60

About

An isometric field of 81 small pillars on a plinth that rise into a dune shape and ripple upward around the pointer, with a radius you can tune and reduced-motion/offscreen handling built in.

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

Code

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

Usage.tsx

"use client";

import type { CSSProperties } from "react";
import Terrain from "@/components/ui/terrain";

/** The same shadcn-token mapping @lucasmarkes/hairline's own registry wrapper uses, so the figure follows the page's theme instead of its dark-only fallback palette. */
const tokens = {
  "--hairline-plate": "var(--background)",
  "--hairline-hi": "var(--foreground)",
  "--hairline-edge": "var(--muted-foreground)",
  "--hairline-mid": "color-mix(in oklab, var(--muted-foreground) 55%, var(--background))",
  "--hairline-lo": "var(--border)",
} as CSSProperties;

export default function TerrainDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-10 text-foreground">
      <Terrain className="w-full max-w-md" style={tokens} />
    </div>
  );
}