Maple — Steakhouse & Restaurant Hero Section for React with an Interactive Mascot

A hero section for a premium steakhouse. Maple, a cartoon Hereford cow in a chunky mustard scarf, stands at the right end of the counter and watches the board of steaks:

• she looks down at the cut the guest points at, and follows the pointer along the plates;
• she keeps watching the guest's plate while they work the doneness probe;
• she lifts her head into a big smile when they pick a cut or commit a doneness, or look back up at the headline;
• she has opinions, set like a quotation beside her head with a brass leader to her cheek: "Hi, I'm Maple. Don't worry, I'm the critic, not the special."

Around her: a doneness card with a cross-section lens, a brass probe rail and a kitchen ticket that prints out of a slot; six plates on a walnut counter with a brass rail; a live open/closed pill in New York time; five palettes, light and dark, that cross-fade (the scarf is recoloured live in WebGL).

The restaurant, Copperhorn, is invented. Every brand fact, price, count, address and phone number is marked // PLACEHOLDER — replace with real data in src/components/maple-hero/hero-settings.ts.

Run it

pnpm install
pnpm dev          # http://localhost:6101
pnpm build && pnpm start   # http://localhost:6100

pnpm lint, pnpm typecheck, pnpm test (vitest), pnpm build.

Demo routes: / (Red Banquette, with the palette switcher), /butcher (Butcher Paper, fixed), /auto (follows the system or a .dark class). Debug: ?debug (frame times and state on window.__maple), ?debug=mask (shows the scarf mask), ?gl=0 (Canvas 2D fallback), ?tier=mobile / ?tier=desktop, ?sharp=0.6 and ?rim=0 (to compare the sharpening and the rim light).

Use it

import { MapleHero } from "@/components/maple-hero/MapleHero";
import { SteakhouseJsonLd } from "@/components/maple-hero/SteakhouseJsonLd";
import { heroSettings } from "@/components/maple-hero/hero-settings";

<SteakhouseJsonLd settings={heroSettings} url="https://example.com" />
<MapleHero palette="banquette" units="F" onReserve={({ cut, doneness }) => openBooking(cut, doneness)} />

Prop
palette	"banquette" (default), "butcher", "tribeca", "gramercy", "hudson", or "auto" (dark → Red Banquette, light → Butcher Paper; a .dark / .light class or data-theme on <html> wins over the system setting)
settings	everything it says and shows (hero-settings.ts)
units	"F" or "C" to start with
onReserve	called by "Book a table" and "Reserve this cut"; when given, those links do not navigate

The component is self-contained: plain CSS (maple-hero.css, every name prefixed mh-), its own fonts in fonts/ (Fraunces, Inter Tight, JetBrains Mono, self-hosted), motion for UI animation. Maple's frames and posters live in public/maple/ and are named by the generated maple-manifest.ts.

Re-skin it

All copy, the menu, the doneness table, Maple's lines, the palettes, the gaze calibration and every timing are in hero-settings.ts. Nothing is hard-coded in the components.

• Palettes: each has a background pair, ink, muted ink, accent, card colours, glow, shadow, vignette, focus, a rim light for Maple and a scarf colour (null keeps the native mustard). Colours become --mh-* tokens; registered colour properties make a switch cross-fade over 600 ms. If you add a scarf colour, run pnpm maple:frames so the posters (shown before WebGL starts, and with reduced motion) carry it too.
• Cuts: name, weights, price, aging badge, grade, tasting note, chef's doneness, the ticket's lines, how many are left tonight.
• Hours: per weekday, in brand.timeZone; the status pill says "Open now · last seating 10:30 PM" or "Opens at 5 PM".

How Maple moves

An AI-generated video (1280×720, 24 fps, 361 frames) is turned into keyed, recolourable frames by pnpm maple:frames (scripts/maple-frames/):

1. Extract every frame with ffmpeg-static (decoded with the HD matrix, as browsers do). 1b. Restore (optional, how the shipped frames were made): the video is 720p at 1.9 Mbps, so her fur and the knit came out smeared. scripts/maple-frames/restore.mjs runs Real-ESRGAN on the region around her in every frame the clips use (realesr-general-x4v3 blended half and half with its light-clean-up sibling, 4× up, then Lanczos back to the source size) and pnpm maple:frames -- --frames <that folder> builds from it. Same size, same weight, much crisper; about 45 min on a laptop CPU (Python with torch, spandrel and Pillow; the weights from github.com/xinntao/Real-ESRGAN/releases).
2. Key the flat background (keyer.mjs, unit-tested): a flood fill from the border through clear background, enclosed holes between the legs, the baked contact shadow grown away from the background in the floor zone, a soft edge, colour decontamination that leans on the fur inside and caps the render's baked rim light, speck removal, and a temporal median on still edges.
3. Measure: the union crop, the background colour, the nose track (by hue), the junction frame.
4. Thin each clip by equal motion (cumulative frame difference), so scrubbing feels even.
5. Pack frames coarse to fine into WebP atlases (lossy with alpha) for a desktop and a mobile tier, and bake posters per scarf colour. Write src/components/maple-hero/maple-manifest.ts.

--review writes contact sheets, face sheets (blink check), 400% crops and the scarf mask over every palette to .review/maple-frames/. Keyed frames are cached in the temp folder, keyed by the video and the keyer's source.

Clip	Source frames	Use
lower	31 → 91	neutral → looking down at the board (intro)
axis	150 → 229	the gaze axis, far left → slightly right, scrubbed
rise	229 → 301	lifts the head into the smile; backwards it closes the smile
posters	18, 320	neutral (LCP image), smile (resting and reduced motion)

At runtime (src/components/maple-hero/engine/, framework-free TypeScript):

• frame-store.ts picks the tier, fetches atlases (axis, rise and lower coarse passes first, four at a time, after load and in idle time) and keeps a device-sized budget of them decoded (160 / 96 / 48 MB), releasing those off Maple's route first; until a frame is in, the nearest decoded one stands in. The intro's lowering is let go once it has played (retire).
• controller.ts is the clip graph (idle, looking, smiling, transit). After the intro she lives on one track: the gaze axis and the lift into the smile end to end. One critically damped spring with a top acceleration moves her along it, so a look, a smile and the way back down start and end gently and pass from the turn into the lift without stopping. The intro and approvals (a picked cut, a committed doneness) are scripts; input priority: scripts, then a plate pointed at or focused, then the pointer over the board, then a smile after 450 ms above it.
• gaze.ts maps the angle from her muzzle to the pointer onto the axis through the measured yaw table.
• renderer-gl.ts (WebGL2) blends two exact neighbouring frames (each alone for the first and last quarter of the way, a short crossfade between, so a turn never reads as a double image), sharpens them a little (contrast-adaptive, never on the silhouette; render.sharpness, for screens at 125–150% that draw her larger than she is), recolours the scarf (HSV mask plus a neighbour rule for its edges, keeping the knit's shading) and adds a rim light; renderer-2d.ts is the fallback without the recolour and rim (every palette keeps the native mustard scarf there).
• runtime.ts runs one requestAnimationFrame loop, paused off-screen, in hidden tabs and while she rests (woken by any input), and redraws only when the frame, the blend, the palette or the size changed. It also keeps her speech beside her head, on whichever side has room (or above it on phones), clear of the copy column. No React state changes per frame or per pointer move.

The steak photography

Plates and doneness slices are photographs (see assets/photos/README.md), all twelve in: the plates shot at the board's 45°, the slices cut from a doneness grid and lined up.

node scripts/photos/generate.mjs   # makes the missing ones with the GapGPT tools (plates as edits of a template)
node scripts/photos/prompts.mjs    # or prints the prompts, to make them elsewhere
pnpm photos:build                  # cuts out and exports them; writes photo-manifest.ts

A plate's cut-out is its gold rim: the key finds the plate, a circle is fitted to its outline and then moved onto the gold line as an ellipse (findRim, ellipseFrom in keyer.mjs), because a white plate in shade keys away with a grey background and its soft shadow clings to the rim. Until a photo exists, the hero draws a stand-in in SVG (parts/PlateArt.tsx, parts/SliceArt.tsx).

Accessibility and fallbacks

• A real <h1>; plates are buttons (aria-pressed) in a labelled group, and links to the menu without JavaScript; the probe is a role="slider" with arrows, Home and End and a spoken value ("Medium rare, 135 degrees Fahrenheit"); the ticket is a role="status"; Maple's canvas is hidden from assistive tech, with a hidden line in its place; her lines go to a polite live region only when the guest caused them.
• Focus rings are SVG strokes on pill shapes (parts/PillRing.tsx).
• prefers-reduced-motion: no intro, no scrubbing, no embers; the smile poster, her lines still show (beside the poster's head), short fades.
• Without JavaScript: the neutral poster, the copy, the board as links to the menu, the buttons.
• The phone layout opens the doneness card in a bottom sheet (Esc, the backdrop or a swipe down closes it).

Measured (2026-10-21/22, this laptop: Iris Plus, installed Chrome)

• Frames: desktop 4.2 MB in 12 atlases (468×716 a frame, every one of the axis's 80, restored with Real-ESRGAN), mobile 1.6 MB in 7 atlases; posters 39 KB / 26 KB. Decoded on the GPU after the intro: 142 MB (the intro's frames are let go).
• Fonts: 289 KB for all four (Fraunces and Inter Tight cut to the weights and softness the hero uses, unused OpenType features dropped; scripts/fonts-trim.py); 348 KB before.
• Pacing while sweeping the pointer over the board for 10 s: p50 16.7 ms, p95 17.0 ms, max 17.3 ms, no React commits (an occasional single 33 ms frame, about one run in six, with no part of the page to blame).
• At rest, the loop sleeps: script time 17 ms in 6 s (52 ms when it ran every frame).
• JavaScript: 32.4 KB gzipped eager for the hero (React and Next excluded); motion's animation features (45.8 KB) and the frame engine (10.4 KB) load after first paint.
• LCP on fast 4G (9 Mbps, 150 ms): 1.6–2.0 s on desktop, about 1.1 s on a phone; the poster is the LCP element. CLS under 0.001 (fallback faces matched to the web fonts' metrics).
• axe: 0 violations on every palette and on the open phone sheet; rendered-pixel text contrast ≥ 4.5:1 everywhere.
• UpFork: the site's importer takes registry/ (38 files, 2 demos, 63 assets, 7.1 MB, no warnings) and its builder makes the preview (ok, 596 kB).
• Doneness slices: 22–24 KB each (360 px WebP), loaded lazily with the card.

Decisions that differ from the brief (measured on the real frames)

• Scarf mask. The brief's band (hue 38–56°, S ≥ 0.42) missed most of the knit, which sits at hue 27–45°. The mask runs 26–48°, asks for scarf-level saturation and value below 30–35° (the irises, horns and cream belly live there), and takes in blended edge pixels next to scarf so no mustard outline is left.
• Nose track. The brief's RGB pink test also caught the cream face in warm light, so the nose is found by hue (4–23.5°, S 0.22–0.5, V ≥ 0.72). Neutral muzzle: (623, 190) source px; the axis sweeps it 513 → 701 px. The yaw table is an isotonic fit of that track.
• Flood fill. An unlimited d < 22 flood wandered into shaded white fur; it runs through clear background (d < 10) and only 3 px further through the soft edge.
• Edges. The render has a rim light baked into the fur's outline (invisible on its grey background, a pale halo on dark palettes): edge colours lean on the fur inside and may not be brighter than it by more than 36 levels.
• Shadow zone 95.5% of her height (94% reached the fetlock fur).
• Tribeca accent #F07A45 and Gramercy accent #243B2A, and Medium-well rail #A47A6A, for contrast and for a rail gradient without a lightness plateau.
• Gaze calibration −76° … +14° (the brief's −62°, and −68° once the plates sat on the counter at 45°, left the two leftmost plates on the same frame in a short, wide hero such as 1519×629).
• Plates at 45°, not from above. The brief's top-down plates hid a steak's thickness and floated like medallions; at 45° they sit on a counter top seen in perspective (the deck), Maple stands on it, and hover lifts a plate off it. The photographs are shot at 45° too, and every plate is placed by its rim (photo-manifest.ts).
• Short desktops. Under 880 px of height the doneness card stands beside the headline, at the foot of the column, with the ticket on one line (the brief folded it under 722 px), so her speech has the room above the card; under 800 px "left tonight" shows on the guest's own plate only.
• Her speech is a quotation, not a bubble. A cream bubble over the stage covered her face; her lines are set beside her head like a pull quote (brass quote mark, italic line, her name) with a brass leader drawn from her cheek, never over her. The plates' tasting notes moved from a floating card over the plates (it hid the embers) to the board's caption line.
• Picking a cut makes her lift her head and smile too (the brief smiled only on a doneness), holding the smile while her line types.
• The hooves. The floor-shadow cut grew into a hoof's outer toe, as light a grey as the shadow: it now stops at a hard edge (a shadow fades, a hoof has an outline).