Motion recipes (paste-ready)

@layer components {
  @media (prefers-reduced-motion: no-preference) {
    .void-accordion { interpolate-size: allow-keywords; }
    .void-accordion::details-content {
      block-size: 0; overflow: clip;
      transition: block-size var(--duration-base) var(--ease-out), content-visibility var(--duration-base) allow-discrete;
    }
    .void-accordion[open]::details-content { block-size: auto; }
  }
  .void-accordion > summary { list-style: none; cursor: pointer; }
  .void-accordion > summary::-webkit-details-marker { display: none; }
  .void-accordion .void-chevron { transition: rotate var(--duration-base) var(--ease-out); }
  .void-accordion[open] .void-chevron { rotate: 180deg; }
}

<details className="void-accordion border-b border-line-subtle py-4" name="faq">
  <summary className="flex items-center justify-between gap-4 text-md text-fg">
    How is usage billed?
    <svg aria-hidden="true" className="void-chevron size-4 text-fg-muted" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="m4 6 4 4 4-4" /></svg>
  </summary>
  <p className="pt-3 text-md text-fg-muted">Per build minute, rounded up, invoiced monthly.</p>
</details>

<div className={cn("grid transition-[grid-template-rows] duration-(--duration-base) ease-out", open ? "grid-rows-[1fr]" : "grid-rows-[0fr]")}>
  <div className="overflow-hidden">{children}</div>
</div>

"use client";
import { useLayoutEffect, useRef, useState } from "react";
import { cn } from "@/lib/cn";

export function Tabs({ tabs }: { tabs: { id: string; label: string }[] }) {
  const [active, setActive] = useState(0);
  const [instant, setInstant] = useState(false);
  const list = useRef<HTMLDivElement>(null);
  const bar = useRef<HTMLSpanElement>(null);

  useLayoutEffect(() => {
    const place = () => {
      const tab = list.current?.querySelectorAll<HTMLElement>('[role="tab"]')[active];
      if (!tab || !bar.current) return;
      bar.current.style.translate = `${tab.offsetLeft}px 0`;
      bar.current.style.scale = `${tab.offsetWidth / 100} 1`;   // bar is 100px wide, origin left
    };
    place();
    const ro = new ResizeObserver(place);
    if (list.current) ro.observe(list.current);
    return () => ro.disconnect();
  }, [active]);

  return (
    <div ref={list} role="tablist" className="relative flex gap-1 border-b border-line-subtle"
      onKeyDown={(e) => {
        if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
        setInstant(true);                                            // keyboard: no animation
        setActive((i) => (i + (e.key === "ArrowRight" ? 1 : tabs.length - 1)) % tabs.length);
      }}>
      {tabs.map((t, i) => (
        <button key={t.id} role="tab" aria-selected={i === active} tabIndex={i === active ? 0 : -1}
          onClick={() => { setInstant(false); setActive(i); }}
          className={cn("px-3 py-2 text-sm transition-colors duration-(--duration-fast)", i === active ? "text-fg" : "text-fg-muted hover:text-fg")}>
          {t.label}
        </button>
      ))}
      <span ref={bar} aria-hidden="true"
        className={cn("absolute bottom-0 left-0 h-0.5 w-[100px] origin-left bg-fg", !instant && "transition-[translate,scale] duration-(--duration-base) ease-in-out")} />
    </div>
  );
}

@layer components {
  @media (prefers-reduced-motion: no-preference) {
    .void-rise   { animation: void-rise var(--duration-slower) var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 60ms); }
    .void-settle { animation: void-settle var(--duration-slower) var(--ease-out-expo) both; }
  }
}
@keyframes void-rise   { from { opacity: 0; translate: 0 0.75rem; } }
@keyframes void-settle { from { translate: 0 0.3em; } }   /* no opacity: the H1 is visible at first paint */

<h1 className="void-settle text-display-lg">…</h1>
<p className="void-rise [--i:1] mt-6 text-lg text-fg-muted">…</p>
<div className="void-rise [--i:2] mt-10 flex gap-6">…</div>

const lines = ["We design memorable", "experiences for brands", "that refuse to blend in."];
<p className="void-lines text-display-sm text-fg">
  {lines.map((line, i) => (
    <span key={i} className="block overflow-clip pb-[0.08em]">
      <span className="void-line block" style={{ "--i": i } as React.CSSProperties}>{line}</span>
    </span>
  ))}
</p>

@layer components {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .void-lines { view-timeline-name: --void-lines; }
      .void-line {
        animation: void-line-rise linear both;
        animation-timeline: --void-lines;
        animation-range: entry calc(10% + var(--i) * 8%) cover calc(30% + var(--i) * 8%);
      }
    }
  }
}
@keyframes void-line-rise { from { translate: 0 105%; } }

// src/app/template.tsx — crossfade content between routes; header/footer stay outside
import { ViewTransition } from "react";   // if your React types lack it: /// <reference types="react/canary" />
export default function Template({ children }: { children: React.ReactNode }) {
  return <ViewTransition default="void-page">{children}</ViewTransition>;
}

::view-transition-old(.void-page) { animation: void-vt-out var(--duration-fast) var(--ease-out) both; }
::view-transition-new(.void-page) { animation: void-vt-in var(--duration-slow) var(--ease-out) both; }
@keyframes void-vt-out { to { opacity: 0; } }
@keyframes void-vt-in  { from { opacity: 0; translate: 0 0.5rem; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}