wave-kit

[
  {
    "slug": "nano-1p5mb",
    "title": "The 1.5 MB capacity cliff",
    "description": "A width-72, four-block transformer with 10.27x fewer parameters.",
    "date": "2026-07-14",
    "metrics": [
      { "label": "12-frame error", "value": "4.98 px" },
      { "label": "64-frame error", "value": "19.10 px" }
    ],
    "meta": { "preset": "nano", "parameters": "357k" }
  }
]

import { ExperimentIndex, ExperimentPage, parseExperiments } from "@jayhack/wave-kit";
import registry from "@/experiments.json";

const experiments = parseExperiments(registry);

// app/experiments/page.tsx — the index
export default function ExperimentsPage() {
  return <ExperimentIndex experiments={experiments} />;
}

// app/experiments/[slug]/page.tsx — one page per record
export default async function Experiment({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const experiment = experiments.find((entry) => entry.slug === slug)!;

  return (
    <ExperimentPage backHref="/experiments" experiment={experiment}>
      {/* Free-form body: figures, rollouts, experiment-specific code */}
      <RolloutViewer slug={experiment.slug} />
    </ExperimentPage>
  );
}

@import "tailwindcss";
@import "@jayhack/wave-kit/styles.css";

import { NavigationIndex, WaveField } from "@jayhack/wave-kit";

const sections = [
  ["overview", "Overview"],
  ["details", "Details"],
] as const;

export function ProjectPage() {
  return (
    <div className="min-h-screen bg-wave-ink text-wave-body">
      <div className="mx-auto w-full max-w-[78rem] px-5 py-10 sm:py-16">
        <div className="min-[72rem]:grid min-[72rem]:grid-cols-[minmax(0,1fr)_minmax(0,42rem)_minmax(0,1fr)] min-[72rem]:gap-8">
          <aside className="hidden min-w-0 min-[72rem]:block">
            <div className="sticky top-1/2 -translate-y-1/2">
              <NavigationIndex items={sections} />
            </div>
          </aside>

          <main className="mx-auto min-w-0 max-w-2xl min-[72rem]:mx-0 min-[72rem]:max-w-none">
            <section id="overview">
              <div className="relative aspect-[16/7] overflow-hidden rounded-lg bg-wave-ink">
                <WaveField className="absolute inset-0 h-full w-full" />
              </div>
            </section>
          </main>

          <div aria-hidden className="hidden min-[72rem]:block" />
        </div>
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Lightbox, ProgressiveImage } from "@jayhack/wave-kit";

const images = [
  { src: "/project-full.png", alt: "Project system diagram" },
];

export function ProjectImage() {
  const [open, setOpen] = useState(false);
  const [previewSrc, setPreviewSrc] = useState<string>();

  return (
    <>
      <button onClick={() => setOpen(true)} type="button">
        <ProgressiveImage
          alt={images[0].alt}
          height={900}
          onLoad={(event) => setPreviewSrc(event.currentTarget.currentSrc)}
          src="/project-1024.webp"
          srcSet="/project-672.webp 672w, /project-1024.webp 1024w"
          width={1024}
        />
      </button>
      {open ? (
        <Lightbox
          items={[{ ...images[0], previewSrc }]}
          onClose={() => setOpen(false)}
          startIndex={0}
        />
      ) : null}
    </>
  );
}

<div className="border border-wave-blue-vivid bg-wave-ink text-wave-paper">
  <span className="text-wave-amber">High energy</span>
</div>

import { CodeBlock } from "@jayhack/wave-kit";

<CodeBlock
  code={'const energy = "wave-orange";'}
  label="Theme token"
  language="tsx"
/>

import numpy as np

def fit(xs, ys):
    # least-squares slope and intercept
    slope = np.cov(xs, ys)[0, 1] / np.var(xs)
    return slope, ys.mean() - slope * xs.mean()