"use client"; /** * Marginalia — a quarterly review of essays on ideas, craft, and slow living * Converted from the curation HTML/CSS source * (Marketing/assets/sections/v9-variety-proof/marginalia/marginalia.html) * into React + Tailwind v4 + Motion, per 14_library_conversion_plan.md §4.1. * * Design tokens (mirrors the source's :root custom properties — the strict, * mechanically-derived version lives in the sibling manifest.json's * `designTokens` field; this component itself uses literal Tailwind * arbitrary-value utilities everywhere, deliberately, so it renders * correctly standalone — e.g. side-by-side with other designs in a gallery — * without depending on any host app's `@theme` registration): * * --paper: #f5efe3 font-serif -> Fraunces, Georgia, serif * --paper-mid: #ede5d4 font-sans -> Inter, system-ui, sans-serif * --ink: #1a1a18 * --ink-faint: #5a5650 * --ink-ghost: #9a948c * --accent: #7b2d26 (oxblood — THE one accent) * --rule: #c8bfb0 * * Font-family utilities in this file use Tailwind's arbitrary PROPERTY * syntax (`[font-family:'Fraunces',Georgia,serif]` / * `[font-family:'Inter',system-ui,sans-serif]`) rather than the bare * `font-serif`/`font-sans` NAMED utilities, deliberately: the named * utilities resolve through Tailwind's default theme unless a host app * registers a matching `@theme` override, which this standalone component * cannot assume. The arbitrary-property form is self-contained and renders * identically in any host. * * Font loading: Fraunces + Inter (Google Fonts, OFL) are expected to be * loaded by the host app (e.g. `next/font/google`, or tags in the * document head) — this component does not inject tags itself. * * Reduced motion: scroll-reveal (`.reveal`/`.reveal-stagger` in the source) * and the link/title hover-underline sweeps all honor `useReducedMotion()` / * Tailwind's `motion-reduce:` variant, matching the source's * `@media (prefers-reduced-motion: reduce)` block exactly for those rules. * * DELIBERATE bug-for-bug port (documented, not a mistake): the source's own * reduced-motion block is `.masthead, .masthead-title, .drop-cap { animation: * none; opacity:1; transform:none; }` — but `.masthead` and `.drop-cap` are * DEAD selectors that match nothing in the actual markup (the real elements * are `header[role="banner"]`, `.masthead-subtitle`, and a `::first-letter` * pseudo-element with no `.drop-cap` class anywhere) — only `.masthead-title` * (the h1) is a real match. The true rendered behavior is therefore: the * header's fade-up-in, the subtitle's fade-up-in, and the drop-cap's load * animation ALL keep animating even under `prefers-reduced-motion: reduce`; * only the h1 title's load animation is actually disabled. This file ports * that exact rendered truth (via the scoped

More from the library

Aperture Labs

Thornbury Ash

Amphora And Vine