About
Topographic lines from seeded noise or an image's luminance, drawn as SVG strokes in currentColor. The noise terrain drifts slowly, and any photo can be read as elevation.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Contour Field to your project and fits it to your theme.
Code
How Contour Field is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { Toggle } from "@base-ui/react/toggle"
import { ToggleGroup } from "@base-ui/react/toggle-group"
import { ContourField } from "@/components/ui/contour-field"
const FIT_CSS = "html,body{overflow:hidden}[data-fit-small] [data-fit-hide]{display:none!important}"
/**
* 21st shows a demo in a small frame: about 674 by 421 on a component page, 358 by 224 on a
* phone and 245 by 139 on a profile card. A demo taller than its frame gets scrollbars, which
* render white on dark pages. FitFrame fills the frame exactly instead.
*
* - "scale": the content shrinks until it fits, centered. For visuals such as orbs.
* - "crop": the content stays at full size from the top and fades out at the bottom. For text
* that streams in, where a changing scale would make the page breathe.
*
* Anything marked `data-fit-hide` (state buttons, the chatcn.dev line) drops out in frames
* shorter than `hideBelow`, so a profile card shows the visual alone.
*/
function FitFrame({
children,
mode = "scale",
hideBelow = 360,
}: {
children: React.ReactNode
mode?: "scale" | "crop"
hideBelow?: number
}) {
const content = React.useRef<HTMLDivElement>(null)
const [cropped, setCropped] = React.useState(false)
React.useLayoutEffect(() => {
const el = content.current
if (!el) return
const measure = () => {
const vw = window.innerWidth
const vh = window.innerHeight
el.toggleAttribute("data-fit-small", vh < hideBelow)
// Layout sizes ignore the transform, so measuring never feeds back.
const w = Math.max(el.offsetWidth, el.scrollWidth)
const h = Math.max(el.offsetHeight, el.scrollHeight)
const scale = mode === "scale" ? Math.min(1, vw / w, vh / h) : 1
el.style.transform = scale < 1 ? `scale(${scale})` : ""
setCropped(mode === "crop" && h > vh + 1)
}
measure()
const observer = new ResizeObserver(measure)
observer.observe(el)
window.addEventListener("resize", measure)
return () => {
observer.disconnect()
window.removeEventListener("resize", measure)
}
}, [mode, hideBelow])
const fade = "linear-gradient(to bottom, #000 calc(100% - 40px), transparent)"
return (
<div
className="flex w-full justify-center overflow-hidden"
style={{
height: "100dvh",
alignItems: mode === "crop" ? "flex-start" : "center",
maskImage: cropped ? fade : undefined,
WebkitMaskImage: cropped ? fade : undefined,
}}
>
<style>{FIT_CSS}</style>
<div
ref={content}
className="w-full shrink-0"
style={{ transformOrigin: mode === "crop" ? "top center" : "center" }}
>
{children}
</div>
</div>
)
}
// The photo ships inline (picsum.photos id 1027, 640 x 960), so the preview needs no image host.
const PORTRAIT_SRC =
"data:image/webp;base64,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"
/** A labeled segmented control on Base UI ToggleGroup. One value is always selected. */
function Segmented<T extends string>({
label,
value,
onValueChange,
options,
className,
}: {
label: string
value: T
onValueChange: (value: T) => void
options: readonly { value: T; label: string }[]
className?: string
}) {
return (
<div className={cn("flex max-w-full min-w-0 flex-col gap-1.5", className)}>
<span className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-subtle) font-medium">{label}</span>
<ToggleGroup
value={[value]}
onValueChange={(next) => {
const picked = next[0] as T | undefined
if (picked) onValueChange(picked)
}}
aria-label={label}
className="bg-(color:--chatcn-fill) rounded-(--chatcn-radius-md) chatcn-scroll flex h-8 w-fit max-w-full items-center gap-0.5 overflow-x-auto p-0.5 pointer-coarse:h-11"
>
{options.map((option) => (
<Toggle
key={option.value}
value={option.value}
className={cn(
"chatcn-focus rounded-(--chatcn-radius-sm) text-[0.8125rem]/[1.25rem] inline-flex h-full shrink-0 items-center px-2.5 font-medium whitespace-nowrap",
"text-(color:--chatcn-fg-subtle) ease-(--chatcn-ease-standard) transition-[color,background-color,box-shadow] duration-150",
"hover:text-(color:--chatcn-fg) data-[pressed]:bg-(color:--chatcn-card) data-[pressed]:text-(color:--chatcn-fg) data-[pressed]:shadow-(--chatcn-shadow-xs)",
)}
>
{option.label}
</Toggle>
))}
</ToggleGroup>
</div>
)
}
/** The line under each 21st demo that points back to the kit. */
function MoreOn({ slug, children }: { slug: string; children: React.ReactNode }) {
return (
<p data-fit-hide className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-faint) text-center text-balance">
{children}{" "}
<a
href={`https://chatcn.dev/docs/components/${slug}`}
target="_blank"
rel="noopener"
className="text-(color:--chatcn-fg-subtle) hover:text-(color:--chatcn-fg) underline underline-offset-2"
>
chatcn.dev
</a>
</p>
)
}
/** Noise terrain drifting slowly, or a portrait read as elevation. */
export default function ContourFieldPreview() {
const [source, setSource] = React.useState<"noise" | "image">("noise")
return (
<FitFrame>
<div className="flex w-full flex-col items-center justify-center gap-8 p-6">
<div className="flex w-full max-w-2xl flex-col gap-4">
<div className="rounded-(--chatcn-radius-xl) bg-(color:--chatcn-bg-subtle) shadow-(--chatcn-shadow-border) overflow-hidden">
{source === "noise" ? (
<ContourField animate seed={11} levels={16} className="text-(color:--chatcn-fg-muted)" />
) : (
<ContourField
src={PORTRAIT_SRC}
levels={18}
resolution={140}
aspectRatio="16 / 9"
label="Portrait drawn as contour lines"
className="text-(color:--chatcn-fg-muted)"
/>
)}
</div>
<div data-fit-hide>
<Segmented
label="Source"
value={source}
onValueChange={setSource}
options={[
{ value: "noise", label: "Noise, drifting" },
{ value: "image", label: "Image luminance" },
]}
/>
</div>
</div>
<MoreOn slug="contour-field">
Seeded noise or any image, drawn as SVG strokes. More on
</MoreOn>
</div>
</FitFrame>
)
}















