Mind site design system

import Link from "next/link";
import type { ReactNode } from "react";
import styles from "./Button.module.css";

/**
 * Button — borrowed from the sibling site (anujaharsha.com) so the two feel
 * related: the glass-pill, mono-caps, wide-tracking "whispering intensity"
 * recipe. Re-skinned to the mind's extracted tokens. Color is the only thing
 * that differs between variants.
 *
 * Polymorphic: next/link for internal href, <a target=_blank> for external,
 * <button> otherwise.
 */
type Variant = "primary" | "secondary" | "ghost";

type Common = {
  variant?: Variant;
  icon?: ReactNode;
  className?: string;
  children?: ReactNode;
  "aria-label"?: string;
};

type Props =
  | (Common & { href: string; external?: boolean })
  | (Common & { href?: undefined; onClick?: () => void });

export default function Button(props: Props) {
  const { variant = "primary", icon, className = "", children } = props;
  const cls = `${styles.pill} ${styles[variant]} ${className}`.trim();
  const inner = (
    <span className={styles.inner}>
      {icon}
      {children}
    </span>
  );

  if ("href" in props && props.href) {
    if (props.external) {
      return (
        <a
          href={props.href}
          target="_blank"
          rel="noopener noreferrer"
          className={cls}
          aria-label={props["aria-label"]}
        >
          {inner}
        </a>
      );
    }
    return (
      <Link href={props.href} className={cls} aria-label={props["aria-label"]}>
        {inner}
      </Link>
    );
  }

  return (
    <button
      type="button"
      onClick={(props as { onClick?: () => void }).onClick}
      className={cls}
      aria-label={props["aria-label"]}
    >
      {inner}
    </button>
  );
}

/* The shared glass pill — mirrors the sibling site's Button surface, re-skinned
   to mind tokens. Mono caps, wide tracking, rounded-full, subtle blur, press. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.72rem 1.35rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  line-height: 1;
  background: color-mix(in srgb, var(--space) 55%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 44px -14px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--edge);
  color: var(--ink-quiet);
  cursor: pointer;
  transition: color var(--dur-quick) var(--ease-enter),
    border-color var(--dur-quick) var(--ease-enter),
    background-color var(--dur-quick) var(--ease-enter),
    transform var(--dur-quick) var(--ease-enter);
}
.pill:active {
  transform: scale(0.97);
}
.pill:focus-visible {
  outline: 2px solid var(--synapse);
  outline-offset: 2px;
}

.inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* secondary — silver border + slate text (the default). */
.secondary {
  border-color: color-mix(in srgb, var(--silver) 16%, transparent);
  color: var(--slate);
}
.secondary:hover {
  border-color: color-mix(in srgb, var(--silver) 30%, transparent);
  background: color-mix(in srgb, var(--space) 72%, transparent);
  color: var(--silver);
}

/* primary — synapse-teal border + teal text (the forward action). */
.primary {
  border-color: color-mix(in srgb, var(--synapse) 40%, transparent);
  color: var(--synapse);
}
.primary:hover {
  border-color: color-mix(in srgb, var(--synapse) 65%, transparent);
  background: color-mix(in srgb, var(--space) 72%, transparent);
  color: var(--silver);
}

/* ghost — bare mono-caps text link for tertiary actions. */
.ghost {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: none;
  padding: 0.25rem 0;
  color: var(--slate);
}
.ghost:hover {
  color: var(--silver);
}

import Button from "@/components/ui/Button";

<Button variant="primary" href="/art">Enter</Button>
<Button variant="secondary" onClick={replay}>Run it again</Button>
<Button variant="ghost" href="https://anujaharsha.com" external>Meet Anuja</Button>

import styles from "./Gear.module.css";

/**
 * A clean vector gear — the site's recurring motif, carried from the brain into
 * every wing. Turns slowly on its own axis (CSS, reduced-motion aware). Purely
 * decorative unless labelled.
 */
export default function Gear({
  size = 44,
  teeth = 12,
  spin = "cw",
  className,
}: {
  size?: number;
  teeth?: number;
  spin?: "cw" | "ccw";
  className?: string;
}) {
  const cx = 50;
  const cy = 50;
  const rOuter = 46;
  const rInner = 37;
  const rBody = 33;
  const rHub = 12;
  const half = 360 / teeth / 2;

  // Build the toothed outline as a single path around the gear.
  const pt = (r: number, deg: number) => {
    const a = (deg * Math.PI) / 180;
    return `${(cx + r * Math.cos(a)).toFixed(2)},${(cy + r * Math.sin(a)).toFixed(2)}`;
  };
  let d = "";
  for (let i = 0; i < teeth; i++) {
    const a = (360 / teeth) * i;
    d += `${i === 0 ? "M" : "L"}${pt(rInner, a - half)} L${pt(rOuter, a - half * 0.55)} L${pt(
      rOuter,
      a + half * 0.55
    )} L${pt(rInner, a + half)} `;
  }
  d += "Z";

  return (
    <svg
      className={`${styles.gear} ${className ?? ""}`}
      data-spin={spin}
      width={size}
      height={size}
      viewBox="0 0 100 100"
      aria-hidden="true"
      focusable="false"
    >
      <path d={d} className={styles.teeth} />
      <circle cx={cx} cy={cy} r={rBody} className={styles.body} />
      <circle cx={cx} cy={cy} r={rHub} className={styles.hub} />
    </svg>
  );
}

.gear {
  display: block;
  transform-origin: center;
  animation: gearTurn 26s linear infinite;
}
.gear[data-spin="ccw"] {
  animation-direction: reverse;
}

.teeth {
  fill: var(--steel);
}
.body {
  fill: none;
  stroke: var(--slate);
  stroke-width: 3;
  opacity: 0.7;
}
.hub {
  fill: var(--slate);
  opacity: 0.55;
}

@keyframes gearTurn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gear {
    animation: none;
  }
}

import Gear from "@/components/Gear";

<Gear />                      // 44px, 12 teeth, clockwise
<Gear size={72} teeth={16} spin="ccw" />

function SpotCtaLink({ cta }: { cta: NonNullable<RoomData["spots"][number]["cta"]> }) {
  const isMail = cta.href.startsWith("mailto:");
  // mailto + external open outside the router (plain anchor); ↗ only for the web
  if (isMail || cta.external) {
    return (
      <a
        className={styles.cta}
        href={cta.href}
        {...(isMail ? {} : { target: "_blank", rel: "noopener noreferrer" })}
      >
        {cta.label}
        {isMail ? "" : " ↗"}
      </a>
    );
  }
  return (
    <Link className={styles.cta} href={cta.href}>
      {cta.label}
    </Link>
  );
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-lg);
  padding: 0.55em 1.2em;
  border: 1px solid color-mix(in srgb, var(--synapse) 45%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  color: var(--ink);
  transition: border-color 220ms var(--ease-enter), background 220ms var(--ease-enter);
}

.cta:hover,
.cta:focus-visible {
  border-color: var(--synapse);
  background: color-mix(in srgb, var(--synapse) 12%, transparent);
}

// in a room's data file, on any spotlight
{
  kind: "single",
  title: "A placard title",
  sub: "One or two lines beneath it.",
  cta: { label: "Live demo", href: "https://example.com", external: true },
}

<div className={styles.langSwitch} role="group" aria-label="Poem language">
  {opts.map((o) => (
    <button
      key={o.key}
      type="button"
      className={styles.langChip}
      data-active={cur === o.key ? "" : undefined}
      aria-pressed={cur === o.key}
      lang={o.htmlLang}
      onClick={() => setLangBy((m) => ({ ...m, [i]: o.key }))}
    >
      {o.label}
    </button>
  ))}
</div>

.langSwitch {
  display: inline-flex;
  gap: 6px;
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.langChip {
  min-width: 2.4em;
  padding: 0.4em 0.75em;
  background: none;
  border: 1px solid color-mix(in srgb, var(--slate) 30%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  cursor: pointer;
  transition: border-color 200ms var(--ease-enter), color 200ms var(--ease-enter),
    background 200ms var(--ease-enter);
}

.langChip:hover,
.langChip:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--synapse) 45%, transparent);
}

.langChip[data-active] {
  color: var(--white);
  border-color: color-mix(in srgb, var(--synapse) 60%, transparent);
  background: color-mix(in srgb, var(--synapse) 12%, transparent);
}

// rendered by RoomShell for any poem spotlight with a translation
{ kind: "text", variant: "poem", lang: "hi", lines, english, korean, title }

<button
  type="button"
  className={styles.storyToggle}
  aria-expanded={on}
  onClick={() => setStoryOpen((m) => ({ ...m, [ei]: !m[ei] }))}
>
  {on ? "Hide the story" : "Read the story"}{" "}
  <span aria-hidden="true">{on ? "↑" : "↓"}</span>
</button>

.storyToggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.7em 1.4em;
  background: none;
  border: 1px solid color-mix(in srgb, var(--slate) 40%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.74rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 220ms var(--ease-enter), color 220ms var(--ease-enter);
}

.storyToggle:hover,
.storyToggle:focus-visible {
  border-color: var(--teal-link, #078b9c);
  color: var(--teal-link, #078b9c);
}

// RoomShell renders it under a film spotlight when the next spotlight is an essay
{ kind: "film", src, alt, title },
{ kind: "text", variant: "essay", lines, title }

"use client";

import type { CSSProperties } from "react";
import type { HandGlyphs } from "@/data/hero-handwriting";
import styles from "./Handwrite.module.css";

/**
 * Handwrite — draws a word one glyph at a time, as if written by hand. Each
 * glyph's outline is traced (stroke-dashoffset) then inked in (fill), staggered
 * left→right. Paths are pre-generated in font-em units (baseline y=0), so the
 * SVG is sized in `em` and matches the surrounding font-size exactly. Under
 * reduced-motion it shows solid immediately (see the CSS).
 */
export default function Handwrite({
  data,
  start,
  ariaLabel,
  lang,
  baseDelay = 0,
  stagger = 70,
  duration = 900,
}: {
  data: HandGlyphs;
  start: boolean;
  ariaLabel: string;
  lang?: string;
  baseDelay?: number;
  stagger?: number;
  duration?: number;
}) {
  const { em, width, ascent, descent, glyphs } = data;
  const vbH = ascent - descent;
  const style = {
    width: `${width / em}em`,
    height: `${vbH / em}em`,
    "--hw-base": `${baseDelay}ms`,
    "--hw-stagger": `${stagger}ms`,
    "--hw-dur": `${duration}ms`,
  } as CSSProperties;

  return (
    <svg
      className={styles.svg}
      viewBox={`0 ${-ascent} ${width} ${vbH}`}
      style={style}
      role="img"
      aria-label={ariaLabel}
      lang={lang}
      data-draw={start ? "" : undefined}
    >
      {glyphs.map((d, i) => (
        <path
          key={i}
          d={d}
          pathLength={1}
          className={styles.stroke}
          style={{ "--hw-i": i } as CSSProperties}
        />
      ))}
    </svg>
  );
}

.svg {
  display: block;
  overflow: visible;
}

/* each glyph: a filled letter whose outline traces in (stroke draw), then inks
   (fill fades up). Stroke + fill are both currentColor, so there's no seam. */
.stroke {
  fill: currentColor;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 26; /* font-em units ≈ ~0.9px at the hero size */
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1; /* pathLength normalised to 1 */
  stroke-dashoffset: 1;
}

/* only animate once the portrait is ready (data-draw set by the parent) */
.svg[data-draw] .stroke {
  animation: handwrite var(--hw-dur, 900ms) var(--ease-enter, ease) forwards;
  animation-delay: calc(var(--hw-base, 0ms) + var(--hw-i, 0) * var(--hw-stagger, 70ms));
}

@keyframes handwrite {
  0% {
    stroke-dashoffset: 1;
    fill-opacity: 0;
  }
  58% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

/* reduced-motion: no drawing — the word is simply present and solid */
@media (prefers-reduced-motion: reduce) {
  .stroke {
    fill-opacity: 1;
    stroke-width: 0;
    stroke-dashoffset: 0;
    animation: none;
  }
}

import Handwrite from "@/components/rooms/Handwrite";
import { HERO_NAME_EN } from "@/data/hero-handwriting";

<Handwrite data={HERO_NAME_EN} start={ready} ariaLabel="Ji Chang-wook" />