@palate/cli 0.0.0-stage → 0.0.1

package/kb/moves/sliding-nav-indicator.md

@@ -0,0 +1,58 @@
+---
+id: sliding-nav-indicator
+name: Sliding nav indicator
+kind: navigation
+fits: [crafted, minimal, saas, productivity, developer, calm, tactile, docs]
+avoid: [heritage, retro, playful-kids]
+signature: false
+effort: s
+perf: "one absolutely positioned element moved with transform; measured on change and on resize only"
+a11y: "real links/tabs with aria-current or aria-selected; the indicator is aria-hidden; works with keyboard focus; instant under reduced motion"
+pairs_with: [calm-motion-system, shape-continuity-morph, command-palette-site-nav]
+deps: none
+---
+
+## What it is
+
+One highlight shape (a pill, an underline) that slides and resizes from the current nav item or tab to the one you hover or select, instead of each item lighting up on its own. On hover it follows the pointer between items; on selection it settles under the chosen one.
+
+## Why it works
+
+- Motion shows the relationship: the indicator travelling from A to B says "you moved from here to there" in one glance.
+- It makes a row of plain text links feel like a single built instrument, which reads as craft.
+- It's cheap and contained: one element, one easing, no layout changes.
+
+## When to use / when not
+
+Use on top navs with 3–7 items, segmented controls, tab bars, pricing period toggles (monthly/yearly), and docs sidebars' section switchers.
+
+Not for: long or wrapping navs (the indicator jumps across lines), heritage or print-like brands where a static underline is more fitting, and mobile bottom bars where a simple state change is clearer.
+
+## Recipe
+
+1. **Markup.** A `<nav>` with a relatively positioned list of real `<a>` elements (or a `role="tablist"` with buttons for tabs). The current item gets `aria-current="page"` (or `aria-selected="true"`). Add one `<span aria-hidden class="indicator">` inside the list.
+2. **Server default.** Render the active item with its own static background or underline via `[aria-current]` styles, so without JS the current item is still marked. When JS mounts, set `data-js` on the list and switch those static styles off in favour of the indicator.
+3. **Measure.** On mount, on active change and on `ResizeObserver` of the list: read the target item's `offsetLeft`, `offsetWidth` (and top/height for pills). Write `transform: translateX(x)` and `width: w` (width is OK here: one element, one write per change; or use `scaleX` on a fixed-width bar and accept slightly scaled corners for underlines).
+4. **Motion.** `transition: transform 240ms cubic-bezier(.23,1,.32,1), width 240ms cubic-bezier(.23,1,.32,1)`. Hover-follow: on `pointerenter` of an item, move to it; on `pointerleave` of the whole nav, return to the active item after 80 ms (prevents flicker when crossing gaps). Also follow `:focus-visible` so keyboard users see it.
+5. **First paint.** Don't animate from x=0 on mount: set position with `transition: none`, then enable transitions on the next frame.
+6. **Reduced motion.** Under `prefers-reduced-motion: reduce`, transition-duration 0; the indicator jumps.
+7. **Look.** Pill: item padding 6–8px × 12px, radius 8px, a neutral tint (≈ 6% of the text colour) on hover, brand tint on active. Underline: 2px, brand colour, inset 12px from item edges.
+
+React/Tailwind notes: a `useIndicator(listRef, activeIndex)` hook; with Motion already in the project, a `layoutId="nav-pill"` on the indicator inside the active item does the same.
+
+## Pitfalls
+
+- Animating from the left edge on every page load: looks like a bug.
+- Using the indicator as the only signal of the current page: screen readers need `aria-current`.
+- Re-measuring every frame or on every scroll: unnecessary layout reads.
+- Webfonts loading after measurement: widths change. Re-measure on `document.fonts.ready`.
+
+## How to verify
+
+- `palate animate --check`: hover strip shows the indicator moving between items, no layout shift in the nav; reduced-motion strip shows instant moves.
+- JS off: the current page is still visibly marked.
+- Tab through the nav: the indicator follows focus.
+
+## Examples
+
+- The pattern: a top nav where a soft grey pill glides under whichever link you hover and settles back under the current page when the pointer leaves.

package/kb/moves/sticky-scroll-story.md

@@ -0,0 +1,56 @@
+---
+id: sticky-scroll-story
+name: Sticky scroll storytelling
+kind: layout
+fits: [saas, developer, ai, productivity, b2b, technical, launch, editorial]
+avoid: [low-bandwidth, daily-tool, accessibility-first]
+signature: true
+effort: m
+perf: "position: sticky does the pinning; one IntersectionObserver picks the active step; the visual swaps state, not images per step"
+a11y: "every step is real text in order; the visual has a text equivalent; no scroll-jacking; works as a stacked list without JS"
+pairs_with: [self-playing-product-demo, story-led-long-scroll, scroll-scrubbed-product-film, dark-band-contrast-section]
+deps: none
+---
+
+## What it is
+
+Two columns: on one side a pinned visual (the product, a diagram) stays in place while, on the other, short steps scroll past. As each step reaches the middle of the screen, the visual changes to show exactly that step: the field fills in, the chart updates, the panel opens.
+
+## Why it works
+
+- It pairs every claim with its proof at the moment it's read, so the reader never has to connect a sentence to a screenshot three sections away.
+- The visual stays put, so changes are easy to see; the change *is* the explanation.
+- The reader controls the pace by scrolling, which feels more respectful than an auto-playing video.
+
+## When to use / when not
+
+Use to explain a workflow of 3–6 steps that happen in one place (an editor, a dashboard, a pipeline), or a product with a clear before → after.
+
+Not for: steps that each need a different screen (use separate sections), phones-first audiences without a good stacked fallback, or more than ~6 steps (it becomes a long pinned scroll).
+
+## Recipe
+
+1. **Layout.** `grid md:grid-cols-[5fr_7fr]` (steps / visual). The visual column: `position: sticky; top: calc(50vh - H/2)` or `top: 96px` with a fixed height (`h-[min(70vh,640px)]`). Steps: each `min-h-[70vh]` with the text vertically centred, so one step is active at a time.
+2. **Active step.** One IntersectionObserver with `rootMargin: "-45% 0px -45% 0px"` (a thin band at screen centre) observes the steps; the intersecting one sets `active` (state or a `data-step` attribute on the section).
+3. **The visual is one component with states.** Render the product UI once and drive it from `active`: show/hide parts, move a highlight, change values. Transition with transforms and opacity, 250–400ms, `cubic-bezier(.23,1,.32,1)`. Avoid swapping five large screenshots.
+4. **Show the active step in the text column** too: full opacity for active, 45% for others (and a small progress indicator), so the reader knows what the visual is showing.
+5. **Phones.** No sticky: each step becomes text followed by its own static rendering of the visual in that state (render the component with `step={i}`), stacked.
+6. **Fallbacks.** No JS: the desktop shows all steps at full opacity and the visual in its final state; better, render the stacked phone layout until JS marks the section `data-js`. Reduced motion: states switch instantly (no transition), still in sync.
+7. **Semantics.** Steps as an ordered list with headings; the visual `aria-hidden` if every step's text fully describes the change, otherwise give it a live region that announces the step.
+
+## Pitfalls
+
+- Scroll-jacking or wheel hijacking: let native scroll do it.
+- A sticky visual taller than the viewport: it scrolls away on laptops. Cap height with `min(70vh, …)`.
+- Steps too short: several are "active" in one flick; give each ~70vh.
+- Visual states that differ only subtly: point at the change with a highlight.
+
+## How to verify
+
+- `palate shoot` at 1440 at several scroll positions: each step pairs with its visual state; at 390 the stacked fallback shows every state.
+- JS off: content complete, nothing invisible.
+- `palate animate --check`: the visual changes only by transform/opacity; reduced motion still syncs.
+
+## Examples
+
+- A widely used pattern on developer-tool and SaaS landing pages; no specific site cited.

package/kb/moves/story-led-long-scroll.md

@@ -0,0 +1,56 @@
+---
+id: story-led-long-scroll
+name: Story-led long scroll
+kind: layout
+fits: [editorial, cinematic, nonprofit, sustainability, cultural, launch, media, heritage, crafted]
+avoid: [daily-tool, data-dense-tool, enterprise-compliance, low-bandwidth]
+signature: true
+effort: l
+perf: "images lazy below the fold, sized, AVIF/WebP; scroll effects via IntersectionObserver or CSS scroll timelines, never scroll handlers that touch layout"
+a11y: "the story is readable top to bottom as plain HTML; headings outline the chapters; no scroll-jacking; motion optional"
+pairs_with: [sticky-scroll-story, scroll-progress-chapters, editorial-grid-pull-quotes, museum-painting-backdrop]
+deps: none
+---
+
+## What it is
+
+The page is one narrative told in chapters as you scroll: a problem, a turn, the product as the answer, the proof, the invitation. Each chapter has its own composition (a full-bleed picture, a big line, a quiet paragraph, a product moment), and the transitions between them are designed like page turns.
+
+## Why it works
+
+- A story gives the reader a reason to keep scrolling; a feature list gives them a reason to skim.
+- Varying the composition per chapter avoids the template rhythm (header, grid, header, grid) and lets each idea have the form it needs.
+- People remember stories; they don't remember feature lists.
+
+## When to use / when not
+
+Use for launches, mission and about pages, nonprofits and campaigns, products with a strong "why", annual reports, case studies.
+
+Not for: tools that people come back to daily (they want the login and the docs), pages where visitors arrive with a specific question (pricing, support), or audiences on slow connections if the story leans on large images.
+
+## Recipe
+
+1. **Write the story first.** 5–7 chapters, one sentence each, before any layout. If the sentences don't make a story read aloud, the page won't either.
+2. **One composition per chapter.** Pick from: full-bleed image with a short line on it; a single huge sentence on plain ground; a narrow column of prose; the product working; a number with its sentence; a quote. No two neighbours alike.
+3. **Chapter openers.** A small chapter label (`01 · The problem`) only if the chapters are navigable (see `scroll-progress-chapters`); otherwise let the composition change mark the turn.
+4. **Transitions.** Overlap neighbours (an image rising into the previous chapter by 64–120px), colour changes of the ground between chapters, or a sticky element that hands off (see `sticky-scroll-story`). Never full-screen snap scrolling.
+5. **Reveal, lightly.** Elements fade/rise 12–16px over 400–600ms as they enter (`IntersectionObserver`, threshold 0.2, once), under `prefers-reduced-motion: no-preference` only, and visible by default in CSS (add the hidden starting class only from JS) so no-JS shows everything.
+6. **Exits along the way.** A visible action at the end and a quiet one midway (sticky header button), so a convinced reader doesn't have to finish.
+7. **Performance.** First chapter's image is the LCP: `priority`/`fetchpriority="high"`, sized; all others lazy with explicit dimensions.
+
+## Pitfalls
+
+- Scroll-jacking (hijacking wheel speed or snapping): people leave.
+- Every element animating in: the story drowns in effects; animate chapter openers only.
+- A story with no product in it until the end.
+- 15 chapters. Cut to the ones that move the argument.
+
+## How to verify
+
+- `palate shoot` with JS off: the full story renders, nothing hidden.
+- `palate animate --check`: no hidden content under reduced motion; no layout shift as images load.
+- Read only the headings in order: they tell the story.
+
+## Examples
+
+- palate's own home is a short version of this: the painted hero, the product working, the features each on their own painting, the taste replay, then the invitation.

package/kb/moves/tactile-button.md

@@ -0,0 +1,63 @@
+---
+id: tactile-button
+name: The tactile primary button
+kind: sound-free-feedback
+fits: [crafted, tactile, premium, saas, friendly, calm, consumer, productivity, warm]
+avoid: [minimal, clinical, retro]
+signature: false
+effort: s
+perf: "CSS only: background-image, box-shadow and a scale on :active; transitions on background and scale only"
+a11y: "keep text contrast ≥ 4.5:1 on the darkest part of the fill; a visible focus ring separate from the depth shadows"
+pairs_with: [calm-motion-system, copy-confirmation, gentle-error-nudge]
+deps: none
+---
+
+## What it is
+
+The primary button made to feel like a physical key: a same-hue fill that is a touch lighter at the top, a bright hairline along the top edge, a darker ring, a soft shadow beneath, and a press state where the light leaves and the button sits down (inset shadow, slight scale). Only the primary action gets it.
+
+## Why it works
+
+- Light from above and a shadow below are how the eye reads "raised"; a raised thing invites pressing.
+- The press state confirms the click without sound or animation: the button visibly goes down.
+- Restricting depth to the one primary action makes it the obvious next step on a flat page.
+
+## When to use / when not
+
+Use for the main call to action (signup, buy, run) in crafted, friendly or premium products. One per view.
+
+Not for: secondary buttons, toolbars or dense UI (depth everywhere is noise), strictly flat minimal brands, or skeuomorphic excess (no glossy gels).
+
+## Recipe
+
+1. Pick the brand colour `B` (e.g. `#0b6e4f`), a lighter step `B+` (~8% lighter, same hue: `#17895f`), and a darker ring `B−` (`#075a40`).
+2. Rest:
+   ```css
+   .btn-brand { color: #fff; background-color: B; background-image: linear-gradient(180deg, B+ 0%, B 100%);
+     box-shadow: 0 0 0 1px B−, inset 0 1px 0 rgba(255,255,255,.24), 0 1px 2px rgba(deep,.22), 0 3px 8px -3px rgba(deep,.32);
+     text-shadow: 0 1px 0 rgba(deep,.28); }
+   ```
+   (`deep` = the brand's darkest tone; a tinted shadow, never pure black.)
+3. Hover: both gradient stops a step lighter. No lift, no glow.
+4. Active: gradient flattens to `B → slightly darker B`; shadows become `0 0 0 1px B−, inset 0 1px 2px rgba(deep,.35)` (the top light is gone, it sits in); add `scale(0.96–0.97)` with `transition: scale 200ms ease-out, background-color 200ms ease-out`.
+5. Focus: the site's focus ring (`outline: 2px solid; outline-offset: 2px`) outside the depth, keyboard only (`:focus-visible`).
+6. Tailwind: define it as a component class in `@layer components` so utilities can still set size and radius (`h-11 rounded-[8px] px-5 btn-brand active:scale-[0.97]`).
+7. Reduced motion: the scale is tiny and user-initiated, fine to keep; drop it if your system removes all transforms.
+
+## Pitfalls
+
+- A strong gradient (two different hues, or > 10% lightness change): it looks like 2008 gel.
+- Black shadows on a coloured button: muddy. Tint shadows with the brand's deep tone.
+- Applying it to every button: depth loses meaning.
+- Losing the focus ring under the box-shadow stack: use `outline`, not another shadow.
+- White text that fails contrast on the lighter top: check against the lightest stop.
+
+## How to verify
+
+- `palate details`: the primary button has the ring, top hairline and shadow; secondary buttons are flat.
+- Press and hold: it visibly sinks; release returns in ~200 ms.
+- Contrast check on the lightest gradient stop ≥ 4.5:1. Keyboard Tab shows the ring.
+
+## Examples
+
+- palate's own site: `.btn-brand` in `globals.css`, on "Join the waitlist" and the 404's "Back to palate".

package/kb/moves/technical-drawing-lines.md

@@ -0,0 +1,57 @@
+---
+id: technical-drawing-lines
+name: Technical drawing lines
+kind: texture
+fits: [technical, developer, hardware, scientific, minimal, crafted, ai, saas]
+avoid: [playful-kids, warm, food, fashion, luxury]
+signature: false
+effort: s
+perf: "hairlines are borders and one repeating background; no images, no JS"
+a11y: "decorative lines are CSS only; dimension labels that carry meaning are real text with contrast; nothing depends on them"
+pairs_with: [code-drawn-diagram, isometric-illustration-system, screenshot-detail-crops, one-colour-brand-world]
+deps: none
+---
+
+## What it is
+
+The page is drawn like an engineering sheet: hairline rules that run edge to edge and meet at visible crosshair corners, a faint measured grid, dimension lines with small labels (`48`, `1440`, `0.5 mm`), and callout leaders pointing at parts of the product. Content sits in cells of the drawing instead of floating cards.
+
+## Why it works
+
+- Precision is the message: for dev tools, hardware and infrastructure, a page that looks *measured* borrows the credibility of a blueprint.
+- Lines that continue across sections make the page feel like one constructed object, not a stack of blocks.
+- It replaces cards and shadows with structure, which keeps the page calm and lets real product UI be the only rich thing on it.
+
+## When to use / when not
+
+Use for developer tools, hardware, APIs, design tools, AI infrastructure, anything whose users respect precision. Works in light (ink on white) and dark (pale lines on near-black).
+
+Not for: food, fashion, warm consumer brands or kids (it reads cold), luxury (too busy). Don't use it as decoration on a page whose content is loose and imprecise; the frame makes the mismatch obvious.
+
+## Recipe
+
+1. **One line colour.** `--rule: color-mix(in oklab, currentColor 12%, transparent)` in light, ~16% in dark. All lines use it, 1px, never thicker.
+2. **Frame the page.** A centred container (`max-w-[1224px]`) with `border-x` in `--rule`; each section has `border-t`. Lines run to the viewport edge with an extra full-width `border-t` on the section wrapper, so horizontals cross the vertical frame.
+3. **Crosshairs at the crossings.** At each corner where frame and section lines meet, a 9px plus sign: an absolutely positioned `span` with two pseudo-elements (1px × 9px each), centred on the intersection with `translate(-50%, -50%)`. Use them at major intersections only (4–8 on the page).
+4. **Grid, faint.** Optional background inside one hero cell: two `linear-gradient`s at 1px every 24px in `--rule` at half strength, masked to fade out (`mask-image: radial-gradient(...)`) so it never fills the page.
+5. **Dimensions and callouts.** Around a product screenshot or diagram: a dimension line (1px line with 5px end ticks) and a mono label (`font-mono text-[11px] tabular-nums`). Callouts: a 1px leader to a small numbered marker, explained in a list beside the image. Real values only (the actual width, the actual latency).
+6. **Type.** A neutral grotesk with a mono for labels; labels in uppercase only if short.
+7. **Responsive.** On phones keep the horizontal rules, drop the vertical frame and most crosshairs; dimension labels that would collide are hidden (`max-sm:hidden`), never shrunk below 11px.
+8. **Fallbacks.** Pure CSS; works without JS. If you draw a line in on scroll (scaleX from 0), do it only under `prefers-reduced-motion: no-preference` and with the line visible by default.
+
+## Pitfalls
+
+- Lines at different greys and weights: the drawing looks sloppy. One token.
+- Crosshairs everywhere: they become noise. Mark the structure, not every div.
+- Fake dimensions ("99.9%" on a box): a drawing that lies undermines the precision story.
+- A full-page dotted grid: that's a generated-UI tell; keep the grid local and faded.
+
+## How to verify
+
+- `palate shoot`: horizontals align across sections (zoom: a continuous 1px line), crosshairs sit centred on intersections at both widths.
+- Sample line colours: one value everywhere.
+- Every dimension label is real text and matches the measured element.
+
+## Examples
+
+- palate's own critique overlay and redlines in its demo use the same language: thin emerald measure lines with numeric tags showing before and after values.

package/kb/moves/time-of-day-theming.md

@@ -0,0 +1,56 @@
+---
+id: time-of-day-theming
+name: Time-of-day and seasonal theming
+kind: texture
+fits: [calm, nature, travel, local, food, consumer, warm, crafted, events]
+avoid: [enterprise-compliance, data-dense-tool, finance-trust-first, accessibility-first]
+signature: true
+effort: m
+perf: "computed once on load from the visitor's clock; token swap only; any imagery variant lazy and the same size as the default"
+a11y: "every variant passes contrast; nothing is conveyed only by the change; no animation of the shift under reduced motion"
+pairs_with: [museum-painting-backdrop, real-world-data, designed-dark-mode, footer-live-status]
+deps: none
+---
+
+## What it is
+
+The page quietly changes with the visitor's local time or season: the hero sky warms at dusk, the palette deepens at night, a winter illustration appears in December, the greeting says "Good evening". It's the same page and the same layout; only the atmosphere follows the clock.
+
+## Why it works
+
+- It makes a static site feel alive and personal without asking anything of the visitor.
+- People notice and come back to see the other versions; it's a discovery, not a feature.
+- Tied to the brand (a café, a travel guide, a weather or nature product), it carries meaning: "we know what time it is where you are".
+
+## When to use / when not
+
+Use for travel, food and hospitality, outdoor and nature brands, local businesses, calm consumer apps, studio portfolios, event pages counting down.
+
+Not for: enterprise or finance pages where consistency is trust, tools people screenshot for docs and support (the screenshot won't match), or when it costs readability.
+
+## Recipe
+
+1. **Decide the states, few.** 3–4 time bands (dawn 5–9, day 9–17, dusk 17–20, night 20–5) or 4 seasons (mind the hemisphere: derive from timezone, or don't do seasons). Each band is a set of tokens: sky gradient stops, surface tint, accent, and optionally an image variant.
+2. **Design every state fully.** Each one is a real theme: contrast checked, imagery prepared at the same dimensions (so no layout shift), copy variants written.
+3. **Pick on the client, early.** An inline `<head>` script reads `new Date().getHours()`, sets `document.documentElement.dataset.time = "dusk"` before paint. CSS: `:root[data-time="dusk"] { --sky-1: …; }`. Wrap in try/catch.
+4. **Server default.** The HTML ships the "day" state, which is also the no-JS state. With static generation, never pick on the server (it would use the server's clock and cache it).
+5. **Images.** Swap via CSS custom properties (`background-image: var(--hero-img)`) or render all variants' `<source>` lazily and show one; keep the default as the LCP image so the swap doesn't delay it.
+6. **Transition.** None on load (the state is set before paint). If the band changes while the page is open, check once a minute and crossfade tokens over 1.2s, only under `prefers-reduced-motion: no-preference`.
+7. **Say it, quietly.** A small line ("It's evening in your timezone, so the lights are on") or a tooltip, so the change reads as intentional, plus an optional way to see the other states.
+
+## Pitfalls
+
+- Night state that fails contrast or turns the page into a dark mode nobody designed.
+- Seasons by month for the whole world: December is summer in Sydney.
+- Hydration mismatch in React when the client renders different markup: change tokens via an attribute, not React state, or render the variant only after mount.
+- Too many states; four well-made ones beat twelve thin ones.
+
+## How to verify
+
+- Emulate times (override `Date` in the browser or a `?time=dusk` debug param) and `palate shoot` each state: contrast passes, no layout shift between them.
+- JS off: the day state renders fully.
+- Reload at a fixed time: no flash of the day state.
+
+## Examples
+
+- A long-standing pattern on personal sites and weather or travel apps; no specific site cited.

package/kb/moves/tiny-game-easter-egg.md

@@ -0,0 +1,60 @@
+---
+id: tiny-game-easter-egg
+name: A tiny game hidden in the product
+kind: easter-egg
+fits: [playful, gaming, developer, community, retro, consumer, energetic, experimental]
+avoid: [enterprise-compliance, clinical, finance-trust-first, crisis, government, calm]
+signature: true
+effort: l
+perf: "lazy-loaded chunk under 15 KB gzipped; one canvas, rAF only while playing and visible; pauses on blur"
+a11y: "fully keyboard playable; pause and quit with Esc; no flashing above 3 per second; reduced motion gets a turn-based or slowed version; never in the way of a task"
+pairs_with: [playful-404, konami-secret, console-easter-egg]
+deps: none
+---
+
+## What it is
+
+A small, complete, playable game hidden somewhere natural: on the 404 page, on an offline screen, behind a secret key, or inside the empty state of a product. It uses the brand's own shapes (the logo as the player, product objects as obstacles) and can be finished or high-scored in under a minute.
+
+## Why it works
+
+- Play turns a dead end (a missing page, no connection) into a moment people remember and share.
+- Using the product's own objects makes it a brand story, not a borrowed gimmick.
+- A tiny scope (one mechanic, one minute) means it can be polished, and polish is what makes it delightful.
+
+## When to use / when not
+
+Use for consumer, gaming, developer and community products with a playful voice; best on 404 and offline screens, where the visitor has nothing else to do.
+
+Not for: serious, clinical, financial or crisis contexts; calm brands where it breaks the mood; or any screen where the user is mid-task. Not worth it if you can't afford the polish (a janky game is worse than none).
+
+## Recipe
+
+1. **One mechanic.** Jump, dodge, catch, stack or match. Write it in one sentence ("tap to jump the logo over falling bugs"). Score is visible; a round lasts 20–60 s.
+2. **Brand sprites.** Draw shapes in code (canvas paths or SVG) from your logo and product icons, in brand colours. No borrowed characters or sprite sheets from other games.
+3. **Engine-free.** One `<canvas>` sized with `devicePixelRatio` (capped at 2), a fixed-timestep update (e.g. 60 Hz accumulator) and a render each rAF. Pause when `document.hidden` or the canvas leaves the viewport. Lazy-load the whole thing with dynamic import on "Play".
+4. **Start on intent.** Show a static poster with a "Play" button; never auto-start. Space/Enter/tap to play, Esc to pause, a visible Quit.
+5. **Controls.** Keyboard (Space, arrows) and touch (tap halves of the screen). Large hit areas on phones.
+6. **Accessibility.** A text description of the game beside it; score announced at the end via a polite live region; no flashing over 3 Hz; reduced motion: slow speed and no screen shake, or a turn-based variant.
+7. **High score** in `localStorage` (try/catch), never sent anywhere without consent.
+8. **Exit routes.** The page's real purpose (links home, search) stays above the game, always visible.
+9. **No JS:** the poster and the page's real links; no broken canvas.
+
+## Pitfalls
+
+- Auto-playing or capturing keys the page needs (Space scrolling).
+- A game that loads with the page and costs everyone 200 KB.
+- Copying a famous game's look or characters (trademark and copyright).
+- No pause, no quit, or a canvas that keeps running in a background tab.
+- Hiding the way back behind the game.
+
+## How to verify
+
+- Bundle: the game is a separate lazy chunk; the 404/offline page loads without it.
+- Keyboard only: start, play, pause, quit.
+- Background the tab: CPU drops to idle.
+- `palate shoot` with JS off: poster and links, nothing broken.
+
+## Examples
+
+- A well-known instance is the offline dinosaur runner in Google Chrome (shown on the "no internet" page): one mechanic, the browser's own pixel art, playable with the space bar.

package/kb/moves/type-decode-reveal.md

@@ -0,0 +1,57 @@
+---
+id: type-decode-reveal
+name: Text that decodes into place
+kind: type
+fits: [technical, developer, ai, experimental, retro, launch]
+avoid: [calm, heritage, playful-kids, accessibility-first, serious-news, finance-trust-first]
+signature: false
+effort: s
+perf: "a few dozen characters, one rAF loop or setInterval at ~30 fps, stops when done; monospace so nothing reflows"
+a11y: "final text in the DOM from the start (sr-only or aria-label); scrambled glyphs aria-hidden; no effect under reduced motion"
+pairs_with: [technical-drawing-lines, command-palette-site-nav, console-easter-egg]
+deps: none
+---
+
+## What it is
+
+A short label, number or headline that resolves from random glyphs into its real characters, left to right, like a terminal or a split-flap board settling. Used once, on a short string: a version number, a status, a product name.
+
+## Why it works
+
+- It borrows the language of machines working, so it suits developer, security and AI products without any illustration.
+- The resolve direction draws the eye along the text and makes a small string feel like news.
+- It is cheap and contained: one element, a second of motion.
+
+## When to use / when not
+
+Use for technical brands on one short string per page: a release tag ("v4.0"), a status ("Deployed"), a short product name, a key figure in a dashboard hero.
+
+Not for paragraphs or headlines longer than ~5 words (unreadable while it runs), calm or heritage brands (it feels like a gimmick), or anything people need to read immediately (errors, prices). Never on every heading.
+
+## Recipe
+
+1. **Render the final text** in HTML. That's the no-JS and reduced-motion state.
+2. **Monospace or tabular.** Use a monospace font, or reserve each character's width (`display:inline-block; width:1ch` per char), so scrambling never changes the width.
+3. **Script.** On first view (IntersectionObserver, threshold 0.6), run for 600–900ms total: each character i locks at `t_i = i * (duration / length) * 0.7 + jitter(0–60ms)`; until it locks, every ~33ms it shows a random glyph from a small set that matches the brand (`0-9A-F` for hex, `▖▗▘▙` blocks for a retro board, katakana is a cliché; avoid). Spaces and punctuation lock immediately.
+4. **Accessibility.** Put the real string in `aria-label` on the wrapper (or an sr-only span) and mark the animated spans `aria-hidden`, so readers hear it once.
+5. **Reduced motion.** Check `matchMedia("(prefers-reduced-motion: reduce)")` and skip entirely.
+6. **Once.** Store that it ran (a ref, not storage); don't re-run on every scroll back.
+
+React: a `useDecode(text, { duration })` hook returning the display string; render `<span aria-label={text}><span aria-hidden>{display}</span></span>`.
+
+## Pitfalls
+
+- Proportional fonts: the line jitters and neighbours reflow.
+- Running on long text: the user waits to read.
+- Using the Matrix look (green katakana rain): instantly dated.
+- Re-triggering on hover forever: fun once, irritating by the third time.
+
+## How to verify
+
+- `palate animate --check`: the effect completes within ~1s, no layout shift.
+- JS off / reduced motion: the final text is there from the first frame.
+- Accessibility tree: one clean string, no random characters.
+
+## Examples
+
+- No public example cited; the effect is common on developer-tool launch pages and in film-title sequences.

package/kb/moves/typographic-numeral-hero.md

@@ -0,0 +1,58 @@
+---
+id: typographic-numeral-hero
+name: Huge numeral as the hero
+kind: hero
+fits: [bold, editorial, data-rich, finance, launch, saas, honest, minimal]
+avoid: [playful-kids, crisis, clinical, accessibility-first]
+signature: true
+effort: s
+perf: "text only, no images; one display font weight subset to digits; count-up runs once, transform/text only"
+a11y: "the number is real text with a full sentence next to it; count-up announced once as the final value; static under reduced motion"
+pairs_with: [inline-sparklines-in-copy, dark-band-contrast-section, editorial-grid-pull-quotes]
+deps: none
+---
+
+## What it is
+
+The first screen is built around one number set at architectural size (160–320px on desktop): the result the product delivers ("3 of 3", "41%", "11 min"), with a plain sentence beside or under it that says what the number means. The headline becomes a caption for the figure.
+
+## Why it works
+
+- A number is concrete; people can picture "11 minutes" in a way they can't picture "faster onboarding".
+- Scale creates hierarchy without colour or imagery, so the page stays calm and still has a focal point.
+- A true, specific figure reads as evidence. It signals that the company measures things and is willing to be held to them.
+
+## When to use / when not
+
+Use when the product has one honest, impressive, verifiable figure (time saved, accuracy, money returned, a count of real users) and the brand can carry confidence: finance, analytics, developer tools, launches, annual reports.
+
+Not when the number is vanity or invented (it becomes the first thing people distrust), in crisis or health contexts where a big figure feels cold, or when the product has no single number worth leading with. Never use more than one giant number per page.
+
+## Recipe
+
+1. **Pick the number with the user.** It must be sourced (a footnote or a "how we measured" link). Prefer a ratio or a time over a big round count.
+2. **Set it.** One display face with tabular, lining figures (`font-variant-numeric: tabular-nums lining-nums`). Size with `clamp(96px, 18vw, 300px)`, `line-height: 0.85`, letter-spacing −0.04em to −0.06em, weight either very light (200–300) or very heavy (800–900): not the middle. Subset the font to digits and the few symbols you need.
+3. **Layout.** Desktop: the number left, taking ~55–60% of the width, the explaining sentence right, bottom-aligned to the numeral's baseline, 18–20px, max 32ch. Phone: number on top at ~30vw, sentence under it. The signup or primary action sits under the sentence, not under the number.
+4. **Units smaller.** Set `%`, `×`, `min` at 40–50% of the numeral size, top-aligned or baseline-aligned, so the digits stay the shape.
+5. **Optional count-up (once).** On first view only, count from a nearby value (not from 0: 41% counts up from ~30) over 900–1200ms with an ease-out (`cubic-bezier(0.22, 1, 0.36, 1)`). Write the final value in the HTML so no-JS and reduced-motion see it; JS swaps in the start value before first paint only when motion is allowed. Wrap the visual number in `aria-hidden` and provide the real value in a visually hidden span so screen readers hear it once.
+6. **Source line.** 12–13px under the sentence: "Measured across 214 teams, Jan–Sep 2026."
+
+React/Tailwind: `text-[clamp(96px,18vw,300px)] leading-[0.85] tracking-[-0.05em] tabular-nums`; reserve width with `min-w-[Nch]` so the count-up doesn't reflow.
+
+## Pitfalls
+
+- Counting up from zero on every scroll: gimmicky and it hides the value. Once, from close by.
+- Proportional figures: the number jitters as it counts. Use tabular figures.
+- A number with no sentence: big but meaningless.
+- Three giant stats in a row: that's a stats band, not a hero; one wins.
+- Default system font at 300px looks unfinished; this move depends on a well-drawn face.
+
+## How to verify
+
+- `palate shoot` at 1440 and 390: the numeral is the largest element, nothing overflows horizontally at 320, the sentence is readable next to it.
+- `palate animate --check`: no layout shift during the count; JS off and reduced motion show the final value.
+- Screen reader reads the number and sentence once, not every frame.
+
+## Examples
+
+- palate's own site: the taste section leads with one large "3 of 3" beside the sentence that explains it (the founder's blind picks), the rest of the figures a step smaller.

package/kb/moves/view-transitions-between-pages.md

@@ -0,0 +1,57 @@
+---
+id: view-transitions-between-pages
+name: View transitions between pages
+kind: navigation
+fits: [crafted, editorial, portfolio, premium, publishing, ecommerce, agency, calm]
+avoid: [data-dense-tool, enterprise-compliance, low-bandwidth]
+signature: false
+effort: s
+perf: "browser-native snapshots; a few named elements at most; 200–300 ms; zero JS for MPA cross-document transitions"
+a11y: "progressive enhancement: unsupported browsers navigate normally; reduced motion removes the animation; focus and scroll handled by the router as usual"
+pairs_with: [calm-motion-system, shape-continuity-morph, changelog-as-magazine, editorial-grid-pull-quotes]
+deps: none
+---
+
+## What it is
+
+Moving between pages feels like one continuous place: the thumbnail you clicked grows into the article's lead image, the title slides into the heading position, the rest cross-fades. Built on the browser's View Transitions API, so it's a few lines of CSS rather than an animation framework.
+
+## Why it works
+
+- A hard page cut breaks the reader's attention; a shared element carries it across, so they never lose their place.
+- It makes a static or server-rendered site feel like an app without the weight of one.
+- Because only one or two elements travel, it feels intentional rather than "animated site".
+
+## When to use / when not
+
+Use on portfolios, galleries, product grids → product pages, blog index → post, case-study lists. Anywhere a list item and its page share an image or title.
+
+Not for: dense tools where navigation must be instant, pages where the shared element changes size by 10× (it reads as a zoom), or as a reason to delay navigation.
+
+## Recipe
+
+1. **Cross-document (MPA, Astro, plain Next links with full loads).** In global CSS of both pages: `@view-transition { navigation: auto; }`. That alone cross-fades same-origin navigations (Chromium 126+, Safari 18.2+; others just navigate).
+2. **Name the shared element.** On the list card's image: `style={{ viewTransitionName: \`work-${slug}\` }}`; on the detail page's hero image, the same name. Names must be unique on each page. Do the same for the title if it travels (`work-title-${slug}`).
+3. **Same-document (SPA routers).** Wrap the navigation: `document.startViewTransition(() => navigate(href))` (React Router has `viewTransition` on `<Link>`; for Next App Router, use a small client `Link` wrapper that calls `startViewTransition` around `router.push` and awaits the new route's render, or use the experimental `viewTransition` flag if the project's Next version supports it). Feature-test first.
+4. **Timing.** `::view-transition-group(*) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.23,1,.32,1); }`. Root cross-fade 180 ms. Keep the old page's fade-out shorter than the new page's fade-in.
+5. **Aspect changes.** If the card is 4:3 and the hero 16:9, set `object-fit: cover` on both and style `::view-transition-old/new(work-x) { height: 100%; object-fit: cover; }` so the image doesn't squash mid-flight.
+6. **Reduced motion.** `@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }`.
+7. **No JS / unsupported.** Nothing to do: links are links. Never block navigation waiting for a transition.
+
+## Pitfalls
+
+- Naming every card on the index with the same name: the transition aborts. Names are per item.
+- Transitioning the whole page with a slide: slow and nauseating. Only cross-fade the root; move just the shared element.
+- Slow server responses: the old page sits frozen with nothing happening. Keep the transition for fast routes or show the router's pending state.
+- Fixed headers caught in the root snapshot flicker; give the header its own `view-transition-name: header` so it stays still.
+
+## How to verify
+
+- `palate animate --check` across a list → detail navigation: the shared image moves continuously; no frame where both pages are blank.
+- Firefox / older Safari: navigation works normally, no errors.
+- Reduced motion on: instant navigation.
+- Back button: the element travels back to its card.
+
+## Examples
+
+- The pattern: a grid of case-study thumbnails where the clicked image expands into the case study's full-width lead image, with the title gliding into place and everything else cross-fading.