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.
"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>
);
}