luckiest-co 1.0.13 → 1.0.14

package/skills/luckiest-design-website/references/uniqueness.md

@@ -0,0 +1,480 @@
+# The structure axis
+
+## 1. The template trap
+
+Four sites were built with this skill: a protein coffee brand, a personal brand,
+a landscape design-build firm, and an agent observability product. Four
+industries, four worlds, one light canvas and three dark. The owner looked at
+them side by side and said they felt like a template. He was right, and the
+evidence is in the files.
+
+All four open with a full-bleed `scrub` under a fixed minimal top bar carrying a
+wordmark and one CTA. All four anchor the hero headline in the lead corner with
+a greet cue and kinetic lines. All four run a pinned type act where lines
+crossfade. All four hand off to a flow section, pan a card rail with a
+`data-sc-tilt="6"` on each card, and close on `data-sc-act="pin"` with
+`data-sc-span="1.15"`, `data-sc-spotlight` on the stage and
+`data-sc-magnet="0.26"` on the CTA. All four land between 13.6 and 13.8
+viewport-heights across 6 or 7 acts with exactly one accent colour.
+
+What actually varied was the order of the middle acts and the palette.
+
+The device kit is an **aesthetic** axis. It changes how a page looks. It has no
+opinion on what a page *is*, so every build reached for the same shape, because
+the shape was never a decision anybody made.
+
+> The world changes how a page LOOKS. The grammar changes what a page IS.
+> A build that only changes world is a re-skin.
+
+This file is the structure axis. Read it after the interview and before the
+score table. It has three parts that are not optional: pick a **grammar**,
+invent a **signature move**, and pass the **fingerprint gate**.
+
+---
+
+## 2. Page grammars
+
+A grammar is the page's organising logic: what a section is, what the chrome is
+for, how the visitor knows where they are, and what the ending is. Two pages in
+the same grammar will feel related no matter how far apart their palettes are.
+That is the whole finding above.
+
+Each grammar below names what it **forbids**. The forbids are the point. They
+are what stops a build drifting back to the filmic default halfway through,
+which is what happens when a grammar is a preference instead of a constraint.
+
+Pick one. Do not blend two: a chaptered page with a continuous world underneath
+is a filmic one-shot with extra headings.
+
+---
+
+### 2.1 Filmic one-shot
+
+The original skeleton, and now one choice among eight rather than the house
+style.
+
+**Fits:** a single linear argument with one emotional arc. Consumer products,
+launches, anything where the visitor should feel carried rather than
+navigating.
+
+**The scroll feels like:** a film you are pushing through. Continuous, no seams,
+each act handing off before the last has left.
+
+**Forbids:** visible sequence (chapter numbers, an index, a progress readout);
+hard cuts between grounds; any chrome that implies the page is a tool; more than
+one entry point. If the visitor can jump, it is not one shot.
+
+**Nav, hero, close:** fixed minimal bar, wordmark and one CTA. Full-bleed scrub
+hero, corner-anchored kinetic headline on a greet cue. Pinned close with a
+spotlight and a magnetic CTA.
+
+**Leans on:** `scrub`, `pin`, `drift`, `kinetic`. **Bans:** nothing structural,
+which is exactly why it is the default drift and why four builds landed here.
+
+**Use it when the interview earns it, and say in the report why the other seven
+did not fit.** This grammar now carries a burden of proof the others do not.
+
+---
+
+### 2.2 Chaptered editorial
+
+The page is a printed feature. Chapters are the unit, not acts.
+
+**Fits:** long-form substance. A method, a manifesto, a founder story, a
+research-backed product, anything where the visitor should feel they read
+something rather than watched something.
+
+**The scroll feels like:** turning pages. Full-stop intertitles between
+chapters, then dense asymmetric spreads. Hard cuts, not crossfades. Each chapter
+lands on its own ground and stays there.
+
+**Forbids:** `drift` as a continuous gradient (each chapter is a hard change of
+ground, not an interpolation); the full-bleed scrub hero; pinned crossfade type
+acts; a magnetic CTA; centred hero copy. Media never bleeds under type here, it
+sits in its own column with a caption.
+
+**Nav, hero, close:** no fixed bar. A folio in the margin, chapter number and
+title, updating as chapters pass. The hero is a **title page**: type on the
+paper ground, no media above the fold, the media starts in chapter one. The
+close is a colophon or masthead plate, small type, the CTA set as a line of
+running text rather than a button island.
+
+**Leans on:** `flow` + `in`, `reveal` at chapter boundaries, `parallax` inside a
+media column, `count` for real figures inside prose. **Bans:** `scrub` beyond
+one chapter, `spotlight`, `magnet`.
+
+---
+
+### 2.3 Live surface
+
+The page behaves like the product. Not a screenshot of it, and not a div-built
+fake: the actual surface, running, with scroll driving its state.
+
+**Fits:** software, tools, dashboards, editors, anything where the demo is the
+argument. If the honest pitch is "watch what it does", this is the grammar.
+
+**The scroll feels like:** operating something. Panels populate, a log fills, a
+graph advances, a selection moves. The visitor is inside the thing.
+
+**Forbids:** marketing chrome of any kind. No wordmark-plus-CTA bar, no scrims,
+no full-bleed photography, no kinetic headline stacks, no hero claim laid over
+footage. Copy lives in the surface's own idiom: labels, tooltips, empty states,
+status lines, a help panel. A section heading in 6rem display type breaks this
+grammar instantly.
+
+**Nav, hero, close:** app chrome replaces nav. A sidebar, a tab strip, a status
+bar, a breadcrumb, whatever the real product would have, and it is real enough
+to be the navigation. The hero is the surface already in a state, not a title.
+The close is an **actual input**: a command line, a field, a first-run step,
+something the visitor puts a cursor in. A magnetic button is the wrong ending
+for a page that spent its whole length being a tool.
+
+**Leans on:** `pin` (the surface holds while state advances), `count` on real
+telemetry, pointer devices where the real product would have them, and `--sc-p`
+driven CSS for anything the kit does not cover. **Bans:** `scrub`, `kinetic`,
+`spotlight`, `drift` past two stops.
+
+**The honesty rule.** taste.md forbids fake dashboards and fake terminals, and
+that rule is not suspended here. The surface has to be real markup running real
+logic on real or clearly-labelled sample data. That labelled-sample escape is
+how a concept product can still use this grammar: every panel is operable
+markup computing its state from data arrays in the page, and the page says on
+its face that the scenario is a demo. What stays banned is the painting of a
+surface, an image or dummy divs posing as something that runs. If the panels
+cannot actually compute, the grammar is unavailable. Pick another.
+
+---
+
+### 2.4 Continuous world
+
+One canvas, fixed for the entire scroll, and the page travels through it.
+Waypoints, not sections.
+
+> **This grammar REQUIRES worldflight mode.** `data-sc-mode="worldflight"`, one
+> fixed stage, one spacer, legs that crossfade. See references/worldflight.md.
+>
+> Building it out of pinned acts is not a lesser version of this grammar, it is
+> a different and worse page, and it has already been tried. The owner's verdict
+> on the act-based attempt: "awful... you're literally going from scrolling down
+> to static page and then you start scrolling down again... weird clear page
+> lines scrolling up... very cheap looking." Every one of those is the same
+> defect. A pinned act is a block in the document; a document made of blocks has
+> seams; and a world with seams is not a world. Do not reach for `scrub` acts
+> here, however long you make the spans.
+
+**Fits:** a journey with real geography. A supply chain, a process with physical
+stages, a place, a build, anything where "where you are" is meaningful.
+
+**The scroll feels like:** moving through a single space that never cuts. The
+visitor never leaves the frame.
+
+**Forbids:** section boundaries of any kind. No `sc-section` blocks, no acts at
+all, no second stage, no `drift` steps (one continuous grade across the whole
+travel, authored into the world, not interpolated between legs). Nothing may
+scroll *over* the canvas: copy arrives inside it, at waypoints, in the fixed
+copy layer. The only element in document flow is the spacer.
+
+**Nav, hero, close:** the nav is a **map**. A waypoint list, a depth readout, a
+position marker, and it is clickable, because a world you cannot skip around in
+is a video. The hero is an establishing position inside the world, not a
+separate title stage. The close is arrival at a place in the same canvas, and
+the CTA is an object in that place.
+
+**Leans on:** worldflight legs with `data-sc-linger`, copy windows against the
+whole track, the `sc:waypoint` event driving a rail the page draws itself.
+**Bans:** every act device, `flow`, `pan`, hard cuts, `src` swapping.
+
+**This is the expensive one.** The chain warning in SKILL.md applies: a single
+unbroken flight is the most fragile thing you can build, and the seam law in
+worldflight.md section 6 is not optional. Choose this grammar only when the
+brief is literally about travel through a place, and budget for the reroll.
+
+---
+
+### 2.5 Typographic poster
+
+Type is the imagery. Media is minimal or entirely absent, and scale contrast
+does every job that photography would have done.
+
+**Fits:** a brand whose asset is a sentence. Manifestos, agencies with strong
+verbal identity, launches with one claim, anything where a stock-looking image
+would weaken the page rather than support it. Also the right answer when there
+are no good assets and generating them would produce eight plausible, forgettable
+frames.
+
+**The scroll feels like:** words arriving at wildly different weights. A word at
+40vw, then a paragraph at 16px, then silence. Rhythm comes from scale, not
+motion.
+
+**Forbids:** photographic ground, `scrub`, scrims (nothing to scrim), cards of
+any kind, and decorative motion. If a device is doing the work instead of the
+typography, the grammar has already failed.
+
+**Nav, hero, close:** the wordmark is set as part of the composition, at
+composition scale, not as a 14px bar item. There may be no persistent nav at
+all. The hero is a single word or one line at extreme scale, filling the
+viewport, with a real `<h1>` behind it. The close inverts the whole page: the
+smallest type on the site, the CTA as a plain underlined link, quiet after all
+that volume.
+
+**Leans on:** `kinetic` (this is the one grammar where character splitting can
+be right), `pin` with scale driven from `--sc-p`, `reveal` as a wipe across
+letterforms, `drift` doing heavy lifting because the ground is most of the
+frame. **Bans:** `scrub`, `pan` rails of cards, `tilt`, `parallax` on text.
+
+**The typography floor doubles here.** taste.md caps display at ~6rem outside a
+hero moment. This grammar is one continuous hero moment, so the cap lifts, but
+the tracking, measure and optical-correction rules tighten: at 40vw, default
+tracking is a visible defect and one bad kern is the whole page.
+
+---
+
+### 2.6 Gallery / catalog
+
+Objects in a walkable collection. Museum labels, not marketing copy.
+
+**Fits:** a range. Products with variants, a portfolio, a menu, a materials
+library, case studies, anything where the visitor's real question is "what are
+the options" rather than "should I believe you".
+
+**The scroll feels like:** walking a room. Lateral drift with vertical scroll,
+objects entering and leaving at their own pace, each one labelled with fact
+rather than pitch.
+
+**Forbids:** the argument-shaped pinned type act; a single hero claim; scrim
+copy over media; persuasion in the object labels. A label reads
+`Cedar. Air-dried 18 months. Kiln-finished.` and not `Craftsmanship you can
+feel.` Every object gets the same label schema, no exceptions, because the
+schema is what makes it a collection instead of a grid.
+
+**Nav, hero, close:** the nav is an **index of objects**, and it jumps. The hero
+is object one, already in view, already labelled, with no separate title
+treatment: the collection starts at the top of the page. The close is either the
+last object or an inquiry plate typeset exactly like a label, so the ask reads
+as part of the collection.
+
+**Leans on:** `pan` as the spine rather than as one act, `reveal` per object,
+`tilt` on objects the visitor would pick up, `count` for real specs. **Bans:**
+`kinetic` headlines, `spotlight`, `magnet`, more than one `scrub`.
+
+**The rail copy constraint from devices.md §3 becomes structural here**, not a
+caveat. Labels are read cropped for most of their life, so the schema has to
+survive being half-visible.
+
+---
+
+### 2.7 Split stage
+
+Two columns held in tension for the whole page, resolved by scroll.
+
+**Fits:** any argument with two sides. Before and after, cost and saving, manual
+and automated, what you have and what you would have. The comparison is the
+product.
+
+**The scroll feels like:** watching a balance tip. Both halves are always
+present, both move, and the page is going somewhere specific: the moment one
+side wins.
+
+**Forbids:** full-bleed anything before the resolve; centred copy; the
+corner-anchored hero; a symmetric close. Neither column may be decorative, both
+carry real content the whole way down. The instant one side becomes a caption
+for the other, this collapses into a zigzag layout with extra steps.
+
+**Nav, hero, close:** no bar. The **divider is the chrome**, and it carries the
+labels for both sides plus the progress of the argument. The hero establishes
+the split at 50/50 on the first screen, with both headlines readable at once, so
+the visitor understands the format before they scroll. The close is the
+**collapse**: the divider travels to one edge, one column takes the full width,
+and the CTA lives in the winning column. That collapse is the ending, and it
+should be the single most satisfying moment on the page.
+
+**Leans on:** `pin` with divider position driven from `--sc-p`, `reveal` per
+side, `count` for the comparison figures if they are real. **Bans:** `pan`,
+`spotlight`, `magnet`, more than one `scrub`, `drift` (two grounds, one per
+side, and they hold).
+
+---
+
+### 2.8 Rhythmic cutlist
+
+Short hard-cut acts at speed. No pinning, no dwell, no crossfades.
+
+**Fits:** energy brands. Streetwear, sport, events, music, drinks, youth
+products, anything where the visitor should feel a pulse rather than follow an
+argument.
+
+**The scroll feels like:** a cut every second. Twelve to twenty short sections
+rather than six long ones, each one landing whole and gone. Total page length
+stays inside the 8 to 14 viewport-height budget precisely because nothing is
+held.
+
+**Forbids:** any act over ~1.4 viewport-heights; `data-sc-dwell` above 0.1;
+`pin` entirely; overlapping cue windows; slow easing. This grammar is the exact
+inverse of the filmic one-shot: where that one hides its seams, this one is
+made of them.
+
+**Nav, hero, close:** the bar is loud, not minimal. Full-width, high-contrast,
+possibly a marquee, possibly the CTA at the same weight as the wordmark. The
+hero is one screen that cuts to the next in under a viewport, so there is no
+settling shot and no greet-and-hold. The close is abrupt: the last cut is the
+CTA, at full bleed, no spotlight, no drift-down.
+
+**Leans on:** `flow` + `in` at short stagger, `reveal` on nearly every section,
+`count` if the figures are real, hard `drift` steps between adjacent grounds.
+**Bans:** `pin`, `spotlight`, `magnet`, `dwell`, `parallax`.
+
+**The taste floor still applies at speed.** Fast is not an excuse for a
+1.2 second entrance that the reader outruns. Cue windows here are short *and*
+front-loaded, so a section is fully legible within the first third of its own
+span.
+
+**The peak problem, and how to resolve it.** This grammar bans `pin` and `dwell`
+outright while feel.md insists the peak gets the most scroll room and the
+biggest hold. Those pull in opposite directions, and the quiet failure is a
+build that reaches for `pin` at its peak and still calls itself a cutlist.
+
+**Hold in the fixed chrome layer, and keep every act short and unpinned.** The
+loud bar this grammar already asks for is a persistent element that does not
+belong to any act, so it can unfurl, run a long choreography and hold as long as
+the peak needs while the acts underneath keep cutting at full speed. Drive it
+from page scroll rather than from an act's `--sc-p`, since the whole point is
+that it outlives the act it started in. The airfield build's departures board
+runs its entire peak (unfurl, populate, cascade, reveal, hold, collapse) in
+the chrome, with no pinned act anywhere on the page and nothing over 1.3vh.
+
+The general form: **when a grammar bans the device your peak wants, move the
+peak out of the act stack rather than breaking the grammar.** The bans are on
+what the acts do, not on what the page can do.
+
+---
+
+## 3. The signature move
+
+Every build must invent **one bespoke interaction that exists on that site
+alone**. Not in the device kit, not in any prior build, not a parameter change.
+Coded in the page, with `data-sc-*` attributes of your own naming or plain
+inline JS reading `--sc-p`. The engine stays untouched, always.
+
+This is the thing that makes a page memorable after the visitor closes the tab,
+and it is the only part of a build that cannot be arrived at by following rules.
+
+### What counts
+
+- **Scroll-as-playhead over a persistent trace rail.** A thin horizontal trace
+  fixed at the bottom edge, present the whole page, drawing a real waveform or
+  route or timeline. Scroll position is the playhead. Passing an act stamps a
+  marker on the trace that stays. By the footer the trace is a complete record
+  of what the visitor just went through, and it doubles as navigation.
+- **A wordmark the pointer can pull apart.** The letters follow the cursor with
+  different masses, separate under a drag, and settle back into perfect lockup
+  when released. Only on the hero, only once, and the settle has to be exact.
+- **A line drawing that builds itself.** An SVG technical illustration whose
+  `stroke-dashoffset` is driven from `--sc-p`, so scrolling literally draws the
+  object, then the dimension lines arrive, then the callouts. Pairs with the
+  technical-drawing world in worlds.md.
+- **A running receipt.** A small fixed panel that accumulates a line every time
+  the visitor passes a claim, with real numbers, so the close arrives with a
+  totalled ledger of the argument they just read. Only works with real figures,
+  which is the check on it.
+- **One control that regrades the whole page.** A time-of-day handle, a
+  temperature, a load level: one input, and every image, ground and accent on
+  the page shifts together. It has to affect everything at once or it is a
+  widget.
+
+### What does not count
+
+- A recoloured spotlight. A spotlight at a different radius. Two spotlights.
+- `data-sc-tilt="9"` instead of `6`. Any parameter change to any kit device.
+- A different easing curve on kinetic lines.
+- Five cards in the rail instead of three, or the rail scrolling the other way.
+- A third `scrub` act. More of a device is not a new device.
+- Something the engine already does, given a project-specific class name.
+
+The test: **describe the move to someone who has seen the other builds. If they
+cannot tell it apart from something the kit already does, it is not a signature
+move.** Reaching for a kit parameter here is the same failure as reaching for
+the filmic default in §2, one level down.
+
+---
+
+## 4. The fingerprint gate
+
+The registry lives at `<workspace>/FINGERPRINTS.md`, where `<workspace>` is
+whatever `node <skill>/scripts/workspace.mjs` prints. It is per-user and it
+starts empty: the gate is about not repeating **yourself**, so your first build
+has nothing to clear and every build after it does.
+
+A worked twelve-row registry ships as `EXAMPLES.md` in the luckiest-design-website
+repository. Read it to see what a filled table looks like and which shapes tend
+to collide. It is illustration, not constraint: those are somebody else's
+builds and they do not gate yours.
+
+**Before building:** read it. Every row is a shape that is now taken.
+
+**Before writing markup:** check the planned build against every existing row on
+these six dimensions.
+
+| # | Dimension | What it records |
+|---|---|---|
+| 1 | Grammar | Which of §2, or a named new one |
+| 2 | Nav treatment | What the chrome is and what it is for |
+| 3 | Hero device | What the first screen does |
+| 4 | Act-sequence shape | The device order, act count, total viewport-heights |
+| 5 | Close pattern | How the last screen behaves and what the CTA sits in |
+| 6 | Signature move | The one bespoke interaction, in a phrase |
+
+**The gate: a new build must differ from EVERY existing row on at least 4 of the
+6.** Not 4 of 6 on average across the table. Four against each row, individually.
+
+Dimension 6 is free, because a signature move is unique by definition. So the
+gate really asks for three more out of the remaining five, against each row, and
+a build that changes only grammar and world will fail it.
+
+**If the planned build fails the gate, change the plan, not the log.** Rewriting
+a fingerprint row to make a new build fit is the one thing that makes this file
+worthless. It is a record of what exists, not a description of what you wish
+existed.
+
+**After shipping:** append one row. Fill all six dimensions plus world and port.
+Say plainly what it shares with prior rows, because the shared columns are what
+the next build has to avoid.
+
+---
+
+## 5. Aesthetic range
+
+Premium-minimal is a choice. It is not the costume this skill wears by default,
+and four dark-or-paper pages with one accent each is what happens when nobody
+decides otherwise.
+
+The full range is available when the brand's vibe asks for it:
+
+| Family | Reads as | Earned by |
+|---|---|---|
+| Brutalist | Blunt, structural, unstyled on purpose | Tools, infrastructure, anything anti-marketing |
+| Maximalist | Dense, layered, loud, generous | Culture brands, events, food, anything abundant |
+| Playful | Bouncy, coloured, informal | Kids, games, consumer apps, community |
+| Retro | Specific to a decade, not vaguely nostalgic | Heritage brands, music, anything with a real lineage |
+| Dense | Information-forward, small type, high count | Data products, catalogues, reference, finance |
+| Editorial | Paper, folios, measure, restraint | Long-form substance |
+| Premium-minimal | Quiet, dark, one accent, air | Luxury, and only when asked for |
+
+Go where the interview points. If the human says "loud" and the page comes back
+in charcoal with one accent, the interview was decorative.
+
+**What does not flex:** the taste floor. Spacing scale and rhythm, type metrics
+and measure, contrast ratios measured on the render, motion built from
+`transform` and `opacity`, focus-visible on everything, reduced motion that
+keeps meaning, real copy and real numbers. Every item in taste.md holds in every
+aesthetic family.
+
+A brutalist page still needs 4.5:1 body contrast. A maximalist page still needs a
+spacing scale, and needs it more, because density without rhythm is just noise. A
+playful page still cannot animate `top`. **The floor is what separates a chosen
+aesthetic from a sloppy one**, and it is the reason range is safe to offer at
+all.
+
+Two specific traps stay banned in every family, because they are not aesthetics,
+they are defaults with a look: the cream-and-brass artisan palette
+(taste.md, Colour) and violet-to-blue AI gradients. Both are what a page reaches
+for when nobody chose.