"use client";
import * as React from "react";
import { MetaBalls } from "@/components/ui/meta-balls";
const tones = ["pink", "olive", "blue", "yellow"] as const;
/** The demo brings its own 000h canvas, so it looks right on any host page (the component package sets nothing global). */
function DemoSurface({ children }: { children: import("react").ReactNode }) {
return <div className="grid min-h-screen w-full place-items-center bg-[var(--v-canvas)] p-4 font-[family-name:var(--font-text)] text-[length:var(--fs-body)] leading-[var(--lh-body)] text-[var(--v-text)]">{children}</div>;
}
export default function Demo() {
const [paused, setPaused] = React.useState(false);
const [tone, setTone] = React.useState<(typeof tones)[number]>("pink");
return (
<DemoSurface>
<div className="mx-auto grid w-full max-w-3xl gap-5 p-8">
<MetaBalls paused={paused} tone={tone} />
<div className="flex flex-wrap items-center gap-2">
<button
type="button"
aria-pressed={paused}
onClick={() => setPaused((value) => !value)}
className="rounded-full border border-[var(--v-border)] bg-[var(--v-paper)] px-4 py-2 text-sm font-medium text-[var(--v-text)] transition-colors hover:bg-[var(--v-beige)]"
>
{paused ? "Resume effect" : "Pause effect"}
</button>
{tones.map((option) => (
<button
key={option}
type="button"
aria-pressed={tone === option}
onClick={() => setTone(option)}
className="rounded-full border border-[var(--v-border)] bg-[var(--v-paper)] px-4 py-2 text-sm font-medium capitalize text-[var(--v-text)] transition-colors hover:bg-[var(--v-beige)] aria-pressed:border-[var(--v-ink)] aria-pressed:bg-[var(--v-ink)] aria-pressed:text-[var(--v-on-ink)]"
>
{option}
</button>
))}
</div>
<p className="text-sm text-[var(--v-text-2)]">
Move or tap to add a local body. Nearby shapes meet and separate through liquid contours.
</p>
</div>
</DemoSurface>
);
}
Part of 000h — browse the full library on 21st.dev.