@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/landing/PixelWordmark.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { DIGITHINGS } from "@digithings-ai/hero-banner/definitions";
+import { HeroBanner } from "@digithings-ai/hero-banner/web";
+
+/** @deprecated Pages use `BrandWordmark` (the studio 4×4 mask). This still
+ *  draws the hero-banner `DIGITHINGS` cells for anything that has not moved.
+ *  Do not mount it on the digithings hero, nav, or footer.
+ *
+ *  Pixel lockup, drawn from the shared hero-banner definition
+ *  (`packages/hero-banner`, `DIGITHINGS`: build 1400 ms, tick 40 ms).
+ *  The hero builds on every load (`replayLoading`); the footer is the same
+ *  mark at page width and stays blank until `live` flips the first time it
+ *  scrolls into view. Reduced motion paints the settled mark with no build
+ *  (inside `HeroBanner`, not in CSS). The `.pixel-word` wrapper keeps the
+ *  responsive widths and the band aspect the footer ruling pins. */
+export function PixelWordmark({
+  variant = "hero",
+  live = false,
+}: {
+  variant?: "hero" | "footer";
+  live?: boolean;
+}) {
+  if (variant === "footer") {
+    return (
+      <div className="pixel-word pixel-word-footer">
+        <HeroBanner def={DIGITHINGS} live={live} armed={live} />
+      </div>
+    );
+  }
+  return (
+    <div className="pixel-word pixel-word-hero is-live">
+      <HeroBanner def={DIGITHINGS} replayLoading />
+    </div>
+  );
+}

package/src/components/logos.ts

@@ -0,0 +1,39 @@
+/**
+ * Static registry of the vendor logos referenced by the module/subsystem
+ * manifests. Named imports (not `import * as`) keep this tree-shakeable so only
+ * these ~18 icons ship — not the whole simple-icons set. Any slug NOT in this
+ * map falls back to a monogram chip in StackLogo (the no-mark names like
+ * NautilusTrader, LiteLLM, LangSmith, Cheaper Inference,
+ * Assistant UI — those publish no single-path monochrome SVG, which is what
+ * StackLogo needs).
+ */
+import {
+  siDocker, siDrizzle, siFastapi, siLangchain, siLanggraph,
+  siModelcontextprotocol, siNextdotjs, siOpenai, siOpentelemetry, siOptuna,
+  siPolars, siPostgresql, siPrometheus, siPydantic, siReact, siRedis, siSqlite,
+  siSupabase, siVercel,
+} from "simple-icons";
+
+export interface SimpleIcon { hex: string; path: string }
+
+export const ICONS: Record<string, SimpleIcon> = {
+  docker: siDocker,
+  drizzle: siDrizzle,
+  fastapi: siFastapi,
+  langchain: siLangchain,
+  langgraph: siLanggraph,
+  modelcontextprotocol: siModelcontextprotocol,
+  nextdotjs: siNextdotjs,
+  openai: siOpenai,
+  opentelemetry: siOpentelemetry,
+  optuna: siOptuna,
+  polars: siPolars,
+  postgresql: siPostgresql,
+  prometheus: siPrometheus,
+  pydantic: siPydantic,
+  react: siReact,
+  redis: siRedis,
+  sqlite: siSqlite,
+  supabase: siSupabase,
+  vercel: siVercel,
+};

package/src/components/marquee/Marquee.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useEffect, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode } from "react";
+import { ICONS } from "../logos";
+
+/**
+ * Marquee — the infinite "built on" strip promoted from the design reference
+ * (data/marquee-ticker), in our terminal register: a mono row drifting behind
+ * an edge-fade mask, looping seamlessly. Hover pins the computed transform so
+ * the strip freezes where it is. Reduced motion stops the drift and the strip
+ * reads statically.
+ *
+ * Seamless loop mechanics: the content renders twice as two `.mq-group` spans
+ * and the track translates exactly -50% per cycle. Each group carries the
+ * inter-item gap as its own padding-right (and the track itself has NO gap),
+ * so half the track width equals exactly one period and the wrap is invisible.
+ *
+ * Items may be plain strings (legacy dress: mono chip with a leading accent
+ * dot) or `{ name, icon }` objects — `icon` is a slug in the shared Simple
+ * Icons registry (components/logos.ts) and renders as a small glyph before the
+ * name; an object without a resolvable icon renders text-only. Arbitrary
+ * `children` are also duplicated into the two groups. The overflow + edge-fade
+ * mask, the loop keyframes, the pause control and the reduced-motion stop live in
+ * styles/marquee.css. Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/marquee.css";
+ *                 @source "<path-to>/packages/ui/src/components/marquee";
+ */
+export type MarqueeItem = {
+  /** Display name (mono lozenge). */
+  name: string;
+  /** Simple Icons slug in the shared registry (components/logos.ts). */
+  icon?: string;
+};
+
+export type MarqueeProps = {
+  /** Row contents — strings (accent-dot chips) or `{ name, icon }` lozenges. */
+  items?: (string | MarqueeItem)[];
+  /** Arbitrary content instead of `items` (duplicated for the seamless loop). */
+  children?: ReactNode;
+  /** Drift direction. */
+  direction?: "left" | "right";
+  /** Loop duration in seconds (one full -50% translate). */
+  speed?: number;
+  /** Item text tone — reference dress is "soft"; "mute" for quieter strips. */
+  tone?: "soft" | "mute";
+  /** Hold the drift still (a consumer's pause control). Hover pauses regardless. */
+  paused?: boolean;
+  /** Accessible label for the strip. */
+  "aria-label"?: string;
+  /** Extra classes on the masked row wrapper. */
+  className?: string;
+};
+
+// Literal class strings (not a `text-ink-${tone}` template) so Tailwind's
+// @source scan generates both variants.
+const TONE: Record<"soft" | "mute", string> = {
+  soft: "text-ink-soft",
+  mute: "text-ink-mute",
+};
+
+/** Horizontal translation from a computed `matrix(...)` or our own `translateX(Npx)`. */
+export function matrixTranslateX(transform: string): number | null {
+  const value = transform.trim();
+  if (value === "" || value === "none") return 0;
+  const translate = value.match(/^translateX\(([-\d.]+)px\)$/);
+  if (translate) {
+    const n = Number(translate[1]);
+    return Number.isFinite(n) ? n : null;
+  }
+  const matrix = value.match(/^matrix\(([^)]+)\)$/);
+  if (!matrix) return null;
+  const parts = matrix[1].split(",").map((part) => Number(part.trim()));
+  if (parts.length !== 6 || parts.some((n) => !Number.isFinite(n))) return null;
+  return parts[4];
+}
+
+/**
+ * Progress through one loop, 0 inclusive to 1 exclusive.
+ * Left drift runs from 0 to `-period`. Right drift runs from `-period` to 0.
+ */
+export function loopProgress(
+  translateX: number,
+  periodPx: number,
+  direction: "left" | "right",
+): number {
+  if (!(periodPx > 0) || !Number.isFinite(translateX)) return 0;
+  const along = direction === "left" ? -translateX / periodPx : (translateX + periodPx) / periodPx;
+  let wrapped = along % 1;
+  if (wrapped < 0) wrapped += 1;
+  return wrapped || 0;
+}
+
+/** Negative delay that restarts a linear loop at `progress`. */
+export function resumeDelaySeconds(progress: number, durationSeconds: number): string {
+  const p = Number.isFinite(progress) ? Math.min(1, Math.max(0, progress)) : 0;
+  const d = Number.isFinite(durationSeconds) && durationSeconds > 0 ? durationSeconds : 0;
+  return `-${p * d}s`;
+}
+
+function Chip({ item, tone }: { item: string | MarqueeItem; tone: "soft" | "mute" }) {
+  const isPlain = typeof item === "string";
+  const name = isPlain ? item : item.name;
+  const icon = !isPlain && item.icon ? (ICONS[item.icon] ?? null) : null;
+  return (
+    <span
+      className={`inline-flex items-center gap-[0.55rem] font-mono text-[0.82rem] whitespace-nowrap ${TONE[tone]}`}
+    >
+      {isPlain ? <span className="h-1 w-1 rounded-full bg-accent" aria-hidden="true" /> : null}
+      {icon ? (
+        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+          <path d={icon.path} fill="currentColor" />
+        </svg>
+      ) : null}
+      {name}
+    </span>
+  );
+}
+
+export function Marquee({
+  items,
+  children,
+  direction = "left",
+  speed = 34,
+  tone = "soft",
+  paused,
+  "aria-label": ariaLabel,
+  className,
+}: MarqueeProps) {
+  const dirClass = direction === "right" ? "mq-track--right" : "mq-track--left";
+  const trackRef = useRef<HTMLDivElement>(null);
+  const hovering = useRef(false);
+  const [frozen, setFrozen] = useState<string | null>(null);
+  const [resumeDelay, setResumeDelay] = useState("0s");
+
+  const pin = () => {
+    const track = trackRef.current;
+    if (!track || frozen) return;
+    const tx = matrixTranslateX(getComputedStyle(track).transform);
+    if (tx === null) return;
+    setFrozen(`translateX(${tx}px)`);
+  };
+
+  const release = () => {
+    if (!frozen) return;
+    const track = trackRef.current;
+    const tx = matrixTranslateX(frozen) ?? 0;
+    const period = track ? track.scrollWidth / 2 : 0;
+    const progress = loopProgress(tx, period, direction);
+    setResumeDelay(resumeDelaySeconds(progress, speed));
+    setFrozen(null);
+  };
+
+  useEffect(() => {
+    if (paused || hovering.current || frozen === null) return;
+    const track = trackRef.current;
+    const tx = matrixTranslateX(frozen) ?? 0;
+    const period = track ? track.scrollWidth / 2 : 0;
+    setResumeDelay(resumeDelaySeconds(loopProgress(tx, period, direction), speed));
+    setFrozen(null);
+  }, [paused, frozen, direction, speed]);
+
+  const onPointerEnter = (event: PointerEvent<HTMLDivElement>) => {
+    hovering.current = true;
+    if (event.pointerType === "touch") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    pin();
+  };
+
+  const onPointerLeave = () => {
+    hovering.current = false;
+    if (!paused) release();
+  };
+
+  const style = {
+    "--mq-speed": `${speed}s`,
+    animationDelay: frozen ? undefined : resumeDelay,
+    animation: frozen ? "none" : undefined,
+    transform: frozen ?? undefined,
+  } as CSSProperties;
+  const group = (hidden: boolean) => (
+    <span className="mq-group" aria-hidden={hidden || undefined}>
+      {items
+        ? items.map((item, i) => (
+            <Chip key={`${typeof item === "string" ? item : item.name}-${i}`} item={item} tone={tone} />
+          ))
+        : children}
+    </span>
+  );
+
+  return (
+    <div
+      className={`mq-row${className ? ` ${className}` : ""}`}
+      aria-label={ariaLabel}
+      data-paused={paused ? "true" : undefined}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
+    >
+      <div ref={trackRef} className={`mq-track ${dirClass}`} style={style}>
+        {group(false)}
+        {group(true)}
+      </div>
+    </div>
+  );
+}

package/src/components/metrics/PerfMetrics.tsx

@@ -0,0 +1,68 @@
+/**
+ * PerfMetrics — the tearsheet grade block promoted from the design reference
+ * (finance/perf-metrics): labels in mono micro-caps, values in large tabular
+ * numerals, laid out on an n-up hairline grid. Only reads that carry money
+ * meaning take `tone: "up" | "down"` (--up / --down phosphor semantics);
+ * everything else stays ink so the eye goes to what matters.
+ *
+ * The hairline cell grid is sibling-index CSS (styles/metrics.css) keyed off
+ * the container's `data-cols` — Tailwind can't express nth-child, so that
+ * grammar stays CSS. Below 720px the grid collapses to two-up and the
+ * borders re-derive. Server component — no state, no effects.
+ *
+ * Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/metrics.css";
+ *                 @source "<path-to>/packages/ui/src/components/metrics";
+ */
+export type PerfMetric = {
+  /** Mono micro-caps label — "CAGR", "Sharpe", "Max drawdown" … */
+  label: string;
+  /** Preformatted display value — "+44.9%", "1.82" … */
+  value: string;
+  /** Optional muted unit suffix rendered after the value — "%", "bps", "×". */
+  unit?: string;
+  /** Money semantics: only return / drawdown-class reads take a tone. */
+  tone?: "up" | "down";
+};
+
+const COLS: Record<2 | 3 | 4, string> = {
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+};
+
+export function PerfMetrics({
+  metrics,
+  columns = 4,
+  className,
+}: {
+  metrics: PerfMetric[];
+  /** Desktop cells per row (collapses to 2 below 720px). */
+  columns?: 2 | 3 | 4;
+  className?: string;
+}) {
+  return (
+    <div
+      data-cols={columns}
+      className={`perf-metrics grid ${COLS[columns]} overflow-hidden rounded-none border border-hair bg-surface max-[720px]:grid-cols-2${
+        className ? ` ${className}` : ""
+      }`}
+    >
+      {metrics.map((m) => (
+        <div key={m.label} className="perf-metric p-[1.2rem]">
+          <span className="block font-mono text-[0.6rem] uppercase tracking-[0.1em] text-ink-mute">
+            {m.label}
+          </span>
+          <span
+            className={`mt-[0.35rem] block font-mono text-[1.5rem] [font-variant-numeric:tabular-nums] ${
+              m.tone === "up" ? "text-up" : m.tone === "down" ? "text-down" : "text-ink"
+            }`}
+          >
+            {m.value}
+            {m.unit ? <span className="ms-[0.15em] text-[0.85rem] text-ink-mute">{m.unit}</span> : null}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/metrics/StatCounter.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { animate, useInView, useReducedMotion } from "motion/react";
+
+/**
+ * StatCounter — the count-up metric strip promoted from the design reference
+ * (data/stat-counter): figures count up from zero the first time the strip
+ * scrolls into view, the one place a number earns a little motion. The running
+ * value is written straight to the DOM node (no per-frame re-render); mono,
+ * tabular numerals keep the digits from reflowing. Fires once; reduced motion
+ * and no-JS both show the final figure immediately (SSR ships the final value).
+ *
+ * Hairline dividers between stats are sibling-index CSS (styles/metrics.css):
+ * left hairlines on every stat but the first, re-derived for the 2-up collapse
+ * below 720px. Client component — in-view observer + imperative count.
+ *
+ * Wiring (in the consuming app):
+ *   globals.css   @import "@digithings-ai/ui/styles/metrics.css";
+ *                 @source "<path-to>/packages/ui/src/components/metrics";
+ */
+export type CounterStat = {
+  /** Final numeric value the counter lands on. */
+  value: number;
+  /** Fixed decimal places; omitted → rounded + locale-grouped. */
+  decimals?: number;
+  /** Literal prefix — "$", "+" … */
+  prefix?: string;
+  /** Literal suffix — "%", "×", "k" … */
+  suffix?: string;
+  /** Mono micro-caps label under the figure. */
+  label: string;
+};
+
+const COLS: Record<2 | 3 | 4, string> = {
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+};
+
+function format(v: number, s: CounterStat) {
+  const n = s.decimals ? v.toFixed(s.decimals) : Math.round(v).toLocaleString();
+  return `${s.prefix ?? ""}${n}${s.suffix ?? ""}`;
+}
+
+function CountUp({ stat }: { stat: CounterStat }) {
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const valueRef = useRef<HTMLSpanElement | null>(null);
+  const inView = useInView(wrapRef, { once: true, margin: "-15% 0px" });
+  const reduced = useReducedMotion();
+
+  // Write the running number straight to the DOM node — no per-frame React
+  // re-render. SSR ships the final value (correct with no JS); the count only
+  // runs once the strip scrolls into view.
+  useEffect(() => {
+    const node = valueRef.current;
+    if (!node || !inView || reduced) return;
+    const controls = animate(0, stat.value, {
+      duration: 1.1,
+      ease: [0.22, 1, 0.36, 1],
+      onUpdate: (v) => {
+        node.textContent = format(v, stat);
+      },
+    });
+    return () => controls.stop();
+  }, [inView, reduced, stat]);
+
+  return (
+    <div ref={wrapRef} className="sc-stat px-[1.2rem] py-[1.4rem]">
+      <span
+        ref={valueRef}
+        className="block font-mono text-[clamp(1.6rem,4vw,2.4rem)] tabular-nums tracking-[-0.01em] text-accent"
+      >
+        {format(stat.value, stat)}
+      </span>
+      <span className="mt-[0.35rem] block font-mono text-[0.62rem] uppercase tracking-[0.1em] text-ink-mute">
+        {stat.label}
+      </span>
+    </div>
+  );
+}
+
+export function StatCounter({
+  stats,
+  columns = 4,
+  className,
+}: {
+  stats: CounterStat[];
+  /** Desktop stats per row (collapses to 2 below 720px). */
+  columns?: 2 | 3 | 4;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`stat-counter grid ${COLS[columns]} overflow-hidden rounded-none border border-hair bg-surface max-[720px]:grid-cols-2${
+        className ? ` ${className}` : ""
+      }`}
+    >
+      {stats.map((stat) => (
+        <CountUp key={stat.label} stat={stat} />
+      ))}
+    </div>
+  );
+}

package/src/components/page-geometry.tsx

@@ -0,0 +1,177 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/utils";
+
+/**
+ * LayoutLines — the persistent page geometry (D1, #4429).
+ *
+ * A fixed, full-viewport-height pair of dashed vertical hairlines at the
+ * container's edges, mounted once per page and `pointer-events-none`. Every
+ * section then sits between them, which is what makes a long page read as one
+ * built object rather than a stack of bordered boxes. Without it the only
+ * vertical structure on the page is whatever each section draws for itself.
+ *
+ * Technique read out of launch-ui's `components/ui/layout-lines.tsx` (MIT) and
+ * re-expressed in this kit's tokens and width register. The width comes from
+ * `--frame-w` plus a gutter on each side, the same register the document
+ * grammar uses.
+ *
+ * Renders nothing meaningful to AT and is `aria-hidden` by construction (an
+ * empty decorative element). `fixed` + `inset-0` means it does not scroll,
+ * which is the point: the rules are a property of the viewport, not the page.
+ *
+ * The rules used to land flush on the column, so text ran straight up to them.
+ * `--line-pad` pushes the pair *outward* from the content: the inner hairline
+ * grows by the gutter on each side while every section keeps its own
+ * `--page-pad`, which is what gives the page air inside its own edges. So the
+ * rails sit one gutter outside the content column rather than on it.
+ *
+ * They deliberately do NOT meet the section dividers. `line-t` / `line-b` on a
+ * section are full-bleed by design, and those full-width rules are part of the
+ * page's document feel; making them stop at the rails would turn every band
+ * into a framed box. Two roles, two weights: the dividers separate sections,
+ * the rails are a fixed vertical guide that the dividers cross. The rails draw
+ * at `--hair-2` because at `--hair` they were invisible — see the note beside
+ * `line-y` in web-theme.css.
+ */
+export function LayoutLines({ className }: { className?: string }) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("pointer-events-none fixed inset-0 top-0 z-0 overflow-hidden", className)}
+      // Above a full-bleed chat canvas, under the site nav (z-index 210).
+      // Inline so a host that never scans the z-20 utility still stacks the rails.
+      style={{ zIndex: 20 }}
+    >
+      <div
+        className="mx-auto h-full w-full max-w-[calc(var(--frame-w)+2*var(--line-pad,0px))] line-y line-dashed"
+        style={{
+          ["--line-pad" as string]: "var(--page-pad)",
+          // Same column as web-theme.css `line-y` + the max-w utility. Inline so a
+          // host that never scans that arbitrary class still insets the rails.
+          width: "100%",
+          maxWidth: "calc(var(--frame-w) + 2 * var(--line-pad, 0px))",
+          marginInline: "auto",
+          // Same 1px dashed --hair-2 rails as web-theme.css `line-y` + `line-dashed`.
+          borderLeft: "1px dashed var(--hair-2)",
+          borderRight: "1px dashed var(--hair-2)",
+          boxSizing: "border-box",
+        }}
+      />
+    </div>
+  );
+}
+
+/**
+ * MockupFrame + Mockup — the two-layer product artefact (D1, #4429).
+ *
+ * A `glow`/gradient frame at one depth holding a surface at another, with the
+ * inner surface carrying the drop shadow. That layering is what gives a product
+ * shot depth; a bare screenshot inside a border reads flat. Pair with <Glow/>
+ * behind it and `fade-bottom` on the section.
+ *
+ * Technique read out of launch-ui's `components/ui/mockup.tsx` (MIT), ported to
+ * this kit's tokens (`--hair`, `--surface`) and to zero radius, matching the
+ * canon's flat-corner rule.
+ */
+export function MockupFrame({
+  size = "small",
+  className,
+  children,
+}: {
+  /** Frame padding — the visible "bezel" around the mockup. */
+  size?: "small" | "large";
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "relative z-10 overflow-hidden bg-hair",
+        size === "small" ? "p-[0.5rem]" : "p-[1rem]",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function Mockup({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "relative z-10 overflow-hidden border border-hair bg-surface shadow-[0_20px_50px_-12px_rgba(0,0,0,0.45)]",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Glow — the light source behind a hero artefact (D1, #4429).
+ *
+ * Two stacked radial ellipses at different scales and opacities, so the falloff
+ * is not a single flat wash. `absolute` and `pointer-events-none`; the parent
+ * must be `relative`. Accent-tinted, so each app's livery (or the umbrella's
+ * neutral ink) dresses it automatically.
+ *
+ * Technique read out of launch-ui's `components/ui/glow.tsx` (MIT). Their
+ * version hardcodes `--brand`; this one reads `--accent`, which digithings.ai
+ * already collapses to neutral ink in its own sheet — so the same component
+ * gives digiquant.io a green wash and us a white one.
+ */
+export function Glow({
+  variant = "top",
+  className,
+}: {
+  variant?: "top" | "above" | "bottom" | "below" | "center";
+  className?: string;
+}) {
+  const position =
+    variant === "above"
+      ? "-top-[128px]"
+      : variant === "bottom"
+        ? "bottom-0"
+        : variant === "below"
+          ? "-bottom-[128px]"
+          : variant === "center"
+            ? "top-[50%]"
+            : "top-0";
+  const centered = variant === "center" ? "-translate-y-1/2" : undefined;
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("pointer-events-none absolute w-full", position, className)}
+    >
+      <div
+        className={cn(
+          "absolute left-1/2 h-[256px] w-[60%] -translate-x-1/2 scale-[2.5] rounded-[50%] opacity-20 sm:h-[512px]",
+          centered,
+        )}
+        style={{
+          backgroundImage:
+            "radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 50%, transparent) 10%, transparent 60%)",
+        }}
+      />
+      <div
+        className={cn(
+          "absolute left-1/2 h-[128px] w-[40%] -translate-x-1/2 scale-[2] rounded-[50%] opacity-20 sm:h-[256px]",
+          centered,
+        )}
+        style={{
+          backgroundImage:
+            "radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 30%, transparent) 10%, transparent 60%)",
+        }}
+      />
+    </div>
+  );
+}