@yojahny/wp-design-library 1.1.1 → 1.3.0

package/README.md

@@ -151,6 +151,20 @@ same as `add`, not first at `save`. Output is one JSON line per file:
 exits 1 if any file was refused. `--inbox` never saves — every draft still
 waits for a tagging session and `library save`.
 
+For a hosted server, stage a local recording through its authenticated upload endpoint:
+
+```bash
+LIBRARY_TOKEN=… node bin/library.mjs upload ~/Desktop/acme.webm \
+  --server https://wp-design-library.example \
+  --source public-site \
+  --url https://acme.example \
+  --license "description only, no redistribution of the source"
+```
+
+The token is read only from the environment. The server writes the recording and an
+optional metadata sidecar into `<data>/inbox`; duplicate filenames are refused. HTTP MCP
+tools may then refer to the returned bare filename. Uploads default to a 512 MiB limit.
+
 ### From a Claude Code session: `/mcp__wp-design-library__add-entry`
 
 With the server registered in a session (the `claude-wp-builder` plugin registers it,
@@ -181,6 +195,11 @@ server's record of what it measured. `get_vocab` returns the controlled terms, a
 interrupted run stopped. Editing `entries/<slug>/entry.md` by hand remains available in
 a local checkout and does the same thing.
 
+For a reviewed batch, use `get_draft` to inspect each unsaved strip, submit judgement
+fields in chunks with `set_fields_batch`, then call `save_batch` once. Invalid entries are
+reported independently, and the search index rebuilds once for all valid slugs. The MCP
+prompt `/mcp__wp-design-library__add-batch` walks an agent through the complete workflow.
+
 What goes where, with the values checked against `vocab.yaml`:
 
 | Field | What to write |
@@ -260,11 +279,12 @@ node bin/library.mjs check         # validate every entry, 1 line per problem
 node bin/library.mjs check --remote  # + confirm every recorded artifact key resolves in R2
 ```
 
-Over MCP, seven tools: `search` (keyword + facet filters, aliases resolved),
-`get_entry` (pass `detail: "summary"` for just the body's first paragraph, instead of
-the default `"full"`), `similar`, `recommend` (turns a brief into a per-role reference
-set in one call), `add` (pass `attach` to add a second capture — a video beside a live
-URL — to an existing entry instead of refusing it), `refresh`, `save_entry`. `search` and `similar` carry
+Over MCP, the read tools are `search` (keyword + facet filters, aliases resolved),
+`get_entry` (pass `detail: "summary"` for the first prose paragraph), `get_draft`,
+`get_motion`, `similar`, `recommend`, and `get_vocab`. Authoring uses `add`, `add_batch`,
+`set_fields`, `set_fields_batch`, `save_entry`, `save_batch`, and `refresh`. Pass `attach`
+to `add` to add a second capture — a video beside a live URL — without replacing the
+existing entry. `search` and `similar` carry
 `arms` (which retrieval arms ran; `["fts"]` in Phase 1); any tool may instead respond
 with `refused` and the reason.
 
@@ -334,6 +354,7 @@ skipped to stderr.
 | `LIBRARY_DATA` | repo root | where `entries/` and the index live (the volume in Docker) |
 | `LIBRARY_SEED` | `<repo>/entries` | entries copied into `LIBRARY_DATA` on start when missing |
 | `LIBRARY_TOKEN` | none | required for `--http`; the server refuses to start without it |
+| `LIBRARY_UPLOAD_MAX_BYTES` | `536870912` | maximum body accepted by authenticated `PUT /inbox/<filename>` |
 | `PORT` | `4180` | HTTP port |
 | `LIBRARY_EMBED` | none (real embedder if models present, else skipped) | `stub` for the offline deterministic embedder, `off` to skip the `vec` arm |
 | `LIBRARY_MODELS` | `<data>/models` | where the `@huggingface/transformers` model files live |

package/bin/library.mjs

@@ -12,6 +12,7 @@ const cmds = {
   save: () => import('../src/cli/save.mjs'),
   export: () => import('../src/cli/export.mjs'),
   ui: () => import('../src/cli/ui.mjs'),
+  upload: () => import('../src/cli/upload.mjs'),
 };
 // Refero discovery is a repository-maintenance tool. The npm package deliberately
 // omits its module, so it is only available from a checkout that contains it.

package/entries/aker/entry.md

@@ -0,0 +1,107 @@
+---
+slug: aker
+title: 'Aker: cinematic residential-investment studio'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.akercompanies.com/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-23'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/fff73d97-64d2-4b95-8cf6-cc4e24af623c.mp4
+      artifacts:
+        - key: entries/aker/1/strip.webp
+          bytes: 223940
+          sha256: 83fc23e6109127f391e7a72f807888f4c16812a809910cf41cedeb4a0fbe253a
+          uploaded: true
+      frames: 36
+      duration_ms: 22467
+    - method: both
+      input: https://www.akercompanies.com/
+      artifacts:
+        - key: entries/aker/2/strip.webp
+          bytes: 214012
+          sha256: 5904f6a762384b65617adc784bbb6db03595146af9ab244844f27ab6c5220f28
+          uploaded: true
+        - key: entries/aker/2/measure.json
+          bytes: 4981
+          sha256: cbba7b1dd33b7880ffa64f471467badfa7c99f9ef1f2107458aeae1920d439dc
+          uploaded: true
+        - key: entries/aker/2/screen-1440.png
+          bytes: 1313749
+          sha256: 15a194bea8ddc2ef5327f6b39816a975c946579403015f8a556d919863c47225
+          uploaded: true
+        - key: entries/aker/2/screen-390.png
+          bytes: 2741
+          sha256: 058b5ae0c275794b25637473cff2e0bbcb1de7cc97a1d95f47606b5ba6b55470
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 22467
+roles:
+  - hero
+  - explainer
+  - capability
+  - feature
+  - proof
+  - closing
+  - footer
+feel:
+  - light
+  - dark
+  - premium
+  - editorial
+  - minimal
+  - warm
+  - depth
+palette:
+  canvas: '#f4f4ef'
+  ink: '#111111'
+  accent: '#b85a2b'
+type:
+  display: oversized neutral sans, medium weight, restrained tracking
+  body: compact neutral sans, regular weight, editorial measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - parallax
+    - stagger
+    - spotlight
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. Cinematic landscape footage crossfades beneath the opening wordmark
+    before a small preview-card rail introduces the portfolio. White editorial chapters reveal the investment thesis, a
+    dark map pans through regional holdings, and modular green, rust, and black criteria panels stagger into view.
+    Circular team crops, work cards, and oversized metrics close the story with controlled changes of scale. Exact film
+    timing, map hover behavior, card interactions, pointer response, and reduced-motion behavior are not measurable from
+    sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A cinematic residential-investment landing page that moves from landscape and place into an evidence-led account of strategy, portfolio, and team. Filmic imagery creates atmosphere while restrained editorial modules explain where Aker invests and how it evaluates opportunities.
+
+## Section roster
+
+1. Minimal navigation and landscape-film hero with oversized Aker wordmark.
+2. Introduction to the company and a compact preview-card rail.
+3. Investment thesis with residential imagery and concise operating principles.
+4. Dark regional map showing where the company invests.
+5. Criteria grid covering supply-constrained markets, transportation access, and urban connections.
+6. Work portfolio with project imagery and circular feature crops.
+7. Platform, team, scale metrics, collaboration prompt, and footer.
+
+## Why it works
+
+The opening film establishes a strong sense of place before the page shifts into quiet, legible investment evidence. Deep green, rust, and black panels turn evaluation criteria into a memorable system, while the regional map and large metrics make scale concrete. The cost is that atmospheric footage and map-led storytelling require careful compression, contrast, and static fallbacks to remain clear on slower connections and small screens.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/4aa6d64c-fa61-4b21-8ad6-3d7130ed5161) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/fff73d97-64d2-4b95-8cf6-cc4e24af623c.mp4) supply the hero film, preview rail, investment chapters, map, criteria panels, portfolio, team, metrics, and closing sequence.
+- The live capture at https://www.akercompanies.com/ supplies the current copy, responsive screenshots, and measured layout.
+- The sources agree closely. Trust the recording for continuous film and transition timing and the live page for current portfolio information.

package/entries/amrit-palace/entry.md

@@ -0,0 +1,105 @@
+---
+slug: amrit-palace
+title: 'Amrit Palace: heritage restaurant landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://amritpalace.com/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-22'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: 'https://images.refero.design/styles/refero.design/video/e03feb1c-a12b-4575-a4a0-bdbd2bc8be65.mp4'
+      artifacts:
+        - key: entries/amrit-palace/1/strip.webp
+          bytes: 316050
+          sha256: ac96ec94df849bc96aa3dbba18c2f56612530e4592eaebc116687a3f6d49dc46
+          uploaded: true
+      frames: 36
+      duration_ms: 29233
+    - method: both
+      input: https://amritpalace.com/
+      artifacts:
+        - key: entries/amrit-palace/2/strip.webp
+          bytes: 314434
+          sha256: 01a1b5abb7843daca9cc0881255b733f36ae5dae0eb311eb6ff6553b533742b2
+          uploaded: true
+        - key: entries/amrit-palace/2/measure.json
+          bytes: 2191
+          sha256: 566f71d57694d3751ff24ee8124c457c879bbe31161613ce53fb6f672c4d3ece
+          uploaded: true
+        - key: entries/amrit-palace/2/screen-1440.png
+          bytes: 1150664
+          sha256: ef9c6064fdeadbad932e98bec06d8ab54975b591faf752ea6d686b4e8bdb01e1
+          uploaded: true
+        - key: entries/amrit-palace/2/screen-390.png
+          bytes: 45432
+          sha256: b426c9d2601ec042a1d8825750bd02b95159fcecc662628ade3143c0f1faa053
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 29233
+roles:
+  - hero
+  - explainer
+  - offer
+  - capability
+  - testimonial
+  - closing
+  - footer
+feel:
+  - warm
+  - premium
+  - editorial
+  - depth
+  - light
+palette:
+  canvas: '#d8cbb8'
+  ink: '#2c241c'
+  accent: '#d99547'
+type:
+  display: high-contrast editorial serif, light weight, generous scale
+  body: compact neutral sans, regular weight, restrained tracking
+motion:
+  devices:
+    - reveal
+    - pan
+    - wipe
+    - parallax
+    - stagger
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. The restaurant hero reveals over a dim dining-room photograph while
+    the review card and reservation controls remain anchored; a food-film panel then pans into a split menu where the
+    saffron list and editorial description wipe past one another. Catering images stagger across a cream field, drink
+    photography slides through narrow crops, gift cards drift over open space, and the rooted-in-experience room
+    photograph leads into testimonial columns and the closing wordmark. Hover, menu-toggle, and reservation
+    microinteractions cannot be determined from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+Amrit Palace presents a long-running Indian restaurant through cinematic dining photography, an editorial menu, catering and drinks stories, gift cards, room atmosphere, guest reviews, and location details.
+
+## Section roster
+
+1. Dining-room hero with heritage claim, review proof, and reservation action.
+2. Food-film explainer introducing the spirit of Indian dining.
+3. Split signature-menu offer with dish descriptions and imagery.
+4. Catering capability and buffet/service proof.
+5. Drinks and experience photography.
+6. Gift-card offer and rooted-in-experience brand story.
+7. Guest testimonials, locations, contact details, and oversized close.
+
+## Why it works
+
+The warm photography and high-contrast serif make heritage feel specific rather than nostalgic, while menu and reservation actions stay practical within the editorial pacing. The cost to weigh is that layered imagery and large whitespace can lengthen the path to basic menu and location information.
+
+## Sources
+
+- The [Refero style page](https://styles.refero.design/style/b753dfda-cbe1-41e4-b341-b98d69c8422f) and its MP4 supply the full editorial scroll, split-menu transitions, food-image pans, and sequence into testimonials and the closing wordmark.
+- The live capture at https://amritpalace.com/ supplies the current menu content, review score, reservation actions, locations, responsive screenshots, and measured layout.
+- The sources agree closely; the live page is trusted for current restaurant information and the recording for continuous image movement between sampled scroll stops.

package/entries/apple-airpods-5/entry.md

@@ -0,0 +1,110 @@
+---
+slug: apple-airpods-5
+title: 'Apple AirPods 5: cinematic product story'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.apple.com/airpods-5/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-22'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: 'https://images.refero.design/styles/refero.design/video/fd83566c-99bc-4b2b-b4bf-830026634d52.mp4'
+      artifacts:
+        - key: entries/apple-airpods-5/1/strip.webp
+          bytes: 192580
+          sha256: e817caf05a151cf522820cafe3727af6c6610d1a80c213c4411b2908405182ef
+          uploaded: true
+      frames: 36
+      duration_ms: 34583
+    - method: both
+      input: https://www.apple.com/airpods-5/
+      artifacts:
+        - key: entries/apple-airpods-5/2/strip.webp
+          bytes: 113348
+          sha256: 09d0ebe4e17ae0b0619598d63850080bcc17c2b886887ff41d95feca699b0393
+          uploaded: true
+        - key: entries/apple-airpods-5/2/measure.json
+          bytes: 4866
+          sha256: 7d53055986c597a7b7dd7d2751910d7e1242480c414688060704c75dc32e9ff1
+          uploaded: true
+        - key: entries/apple-airpods-5/2/screen-1440.png
+          bytes: 291119
+          sha256: f110cf8e2faa47e41e62fc67b7abbaa7bdd34995677842dd8f59b5fe14c8eab5
+          uploaded: true
+        - key: entries/apple-airpods-5/2/screen-390.png
+          bytes: 132146
+          sha256: e3dfd04e89e64bba8297748be26567a5e0e4dc9562139fe1b086c624e4565d9d
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 34583
+roles:
+  - hero
+  - feature
+  - explainer
+  - proof
+  - offer
+  - closing
+  - footer
+feel:
+  - dark
+  - light
+  - premium
+  - minimal
+  - depth
+  - playful
+palette:
+  canvas: '#ffffff'
+  ink: '#111111'
+  accent: '#bf42e9'
+type:
+  display: neutral product sans, bold weight, tight tracking
+  body: neutral system sans, regular weight, compact product copy
+motion:
+  devices:
+    - reveal
+    - pin
+    - pan
+    - wipe
+    - parallax
+    - spotlight
+    - stack
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. A dancer-led hero shifts from amber to violet through full-bleed
+    video before the page opens into a white highlight rail. Product renders rotate and scale on pale stages; deep
+    purple feature chapters use expanding concentric light, silhouettes, horizontal card stacks, and cinematic color
+    wipes. Pink ecosystem and green charging chapters arrive as full-width tonal changes before the page resolves into
+    comparison and commerce. Live automated scrolling captures some pinned transitions as blank or partially resolved
+    frames, so the Refero recording is the more reliable motion source; exact scrub mapping, media playback, controls,
+    and reduced-motion behavior are not measurable.
+ported_from: null
+---
+
+## What it does
+
+A cinematic consumer-product story that makes active noise cancellation feel physical. Dance, light, color, and large-scale product renders carry the emotional claim; concise technical chapters then translate that feeling into audio, connection, charging, and ecosystem benefits.
+
+## Section roster
+
+1. Global navigation and pinned AirPods product rail.
+2. Full-bleed dancer hero moving between amber, blue, and violet light.
+3. Highlight media card and closer-look product stage.
+4. Noise-cancellation chapter with silhouettes and blue motion fields.
+5. Audio-performance chapter with concentric purple light and feature-card stack.
+6. Spatial-audio and seamless-experience chapters in dark violet and pink.
+7. Connection, translation, charging, environmental, comparison, and commerce sections.
+
+## Why it works
+
+The page gives each product benefit a distinct light environment, so abstract audio features become recognizable visual chapters. Minimal copy, aggressive scale, and pinned transitions keep the device central while dancers provide energy and human context. The cost is a media-heavy scroll system that needs robust loading, reduced-motion support, and meaningful fallbacks when pinned scenes do not resolve.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/cfcd001c-e812-4126-9bdf-1f16b68d182e) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/fd83566c-99bc-4b2b-b4bf-830026634d52.mp4) supply the complete dancer hero, color transitions, product stages, feature-card stack, ecosystem chapters, and commerce handoff.
+- The live capture at https://www.apple.com/airpods-5/ supplies current product copy, responsive screenshots, measured layout, and the current hero state.
+- The live scroll-stop capture misses several pinned media states and records blank transition frames. Trust the Refero recording for motion continuity and the live page for current content and final static assets.
+

package/entries/apple-airpods-pro/entry.md

@@ -0,0 +1,106 @@
+---
+slug: apple-airpods-pro
+title: 'Apple AirPods Pro 3: immersive product-story landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.apple.com/airpods-pro
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-24'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/a9f9e89b-57ea-487f-b977-b20dd3010bf2.mp4
+      artifacts:
+        - key: entries/apple-airpods-pro/1/strip.webp
+          bytes: 191538
+          sha256: 59020f541e8ed5753ae511c40d68df536b991e0a0b3220e125dba805b2fe51f0
+          uploaded: true
+      frames: 36
+      duration_ms: 21200
+    - method: both
+      input: https://www.apple.com/airpods-pro
+      artifacts:
+        - key: entries/apple-airpods-pro/2/strip.webp
+          bytes: 135852
+          sha256: 7a8a1000e8da5a2a5586d938260f709ecb0a454c0098be712f0efe85958e0c7b
+          uploaded: true
+        - key: entries/apple-airpods-pro/2/measure.json
+          bytes: 8999
+          sha256: 670e6369b21851363b34e354b83917dc995087ec37d3faee4b6dad6f58b21010
+          uploaded: true
+        - key: entries/apple-airpods-pro/2/screen-1440.png
+          bytes: 198419
+          sha256: fa4fca63ed0d3ad0afe069fa84d9dcaa6ddd67ca3185c0ca9784294bbce68dee
+          uploaded: true
+        - key: entries/apple-airpods-pro/2/screen-390.png
+          bytes: 122713
+          sha256: de917462cdc8a6a6c5c581531d9fa4ecdde4fc69cab4b2d9c7b9ee878e8bc9d4
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 21200
+roles:
+  - hero
+  - feature
+  - explainer
+  - proof
+  - offer
+  - closing
+  - footer
+feel:
+  - light
+  - premium
+  - minimal
+  - depth
+  - cold
+palette:
+  canvas: '#ffffff'
+  ink: '#111111'
+  accent: '#1878d2'
+type:
+  display: large neutral product sans, bold weight, tight tracking
+  body: neutral system sans, concise product measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - pin
+    - wipe
+    - parallax
+    - stack
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. Earbuds and acoustic waveforms fill the white opening; pinned
+    close-ups pan across the shell, ear tips, and internal hardware. Large black silhouettes and rainbow sound trails
+    wipe between noise cancellation, spatial audio, hearing, and fitness chapters before the product returns to a clean
+    commerce view. The live automated scroll shows some blank intermediate pinned states; the recording is more reliable
+    for their order. Exact scrub timing, video playback, pointer response, and reduced-motion behavior are not
+    measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+An immersive AirPods Pro 3 product story that moves from a simple product promise into acoustic, health, and hardware benefits. Precise white product renders and large black silhouette scenes give technical claims clear visual chapters.
+
+## Section roster
+
+1. Product navigation, price, and noise-cancellation hero.
+2. Highlight film and acoustic demonstration.
+3. Earbud close-ups and redesigned fit.
+4. Active Noise Cancellation and spatial-audio chapters.
+5. Heart-rate sensing and hearing-health features.
+6. Battery life, connectivity, and product details.
+7. Comparison, purchase action, and footer.
+
+## Why it works
+
+The restrained white field makes tiny hardware details legible, while dramatic sound trails translate invisible audio effects into a clear visual idea. Large scene changes keep a long feature list understandable. The cost is a media-heavy pinned experience that needs reliable loading and accessible static fallbacks.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/022cf675-42d1-44e7-953a-68facc802117) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/a9f9e89b-57ea-487f-b977-b20dd3010bf2.mp4) supply the product, sound, hearing, and closing motion sequence.
+- The live capture at https://www.apple.com/airpods-pro/ supplies current AirPods Pro 3 details, responsive screenshots, and measured layout.
+- The live scroll capture misses some pinned transition states. Trust the recording for the complete sequence and the live page for current claims and pricing.

package/entries/apple-watch-se-3/entry.md

@@ -0,0 +1,107 @@
+---
+slug: apple-watch-se-3
+title: 'Apple Watch SE 3: playful product story'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.apple.com/apple-watch-se-3/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-22'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: 'https://images.refero.design/styles/refero.design/video/b40d2c44-ce44-4a09-8008-f58c6308935e.mp4'
+      artifacts:
+        - key: entries/apple-watch-se-3/1/strip.webp
+          bytes: 258734
+          sha256: 8dab26009f7fb1587a25a53f405435425c2836fde1c794c8e55639e0b8416eda
+          uploaded: true
+      frames: 36
+      duration_ms: 20183
+    - method: both
+      input: https://www.apple.com/apple-watch-se-3/
+      artifacts:
+        - key: entries/apple-watch-se-3/2/strip.webp
+          bytes: 196504
+          sha256: 4e7bb7e2061dc639262b31c78b21f747ecc6670388184b741d2c50b71d74a63e
+          uploaded: true
+        - key: entries/apple-watch-se-3/2/measure.json
+          bytes: 10191
+          sha256: 298a58b056191f27addd4c5757939d23b71467f300a42f47666e1680864c4fc4
+          uploaded: true
+        - key: entries/apple-watch-se-3/2/screen-1440.png
+          bytes: 303989
+          sha256: 7bd3d84ea9fa20cf53811908d4130bedac8ef5d8cd3943262f1fef5b5910e0d9
+          uploaded: true
+        - key: entries/apple-watch-se-3/2/screen-390.png
+          bytes: 204723
+          sha256: 763216e5229cdf8ffe5e7e798071bcf7dcacace6a1edd922eab54616ab4f24cf
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 20183
+roles:
+  - hero
+  - feature
+  - explainer
+  - proof
+  - offer
+  - closing
+  - footer
+feel:
+  - light
+  - playful
+  - premium
+  - minimal
+  - depth
+palette:
+  canvas: '#ffffff'
+  ink: '#111111'
+  accent: '#86f700'
+type:
+  display: neutral product sans, bold weight, tight tracking
+  body: neutral system sans, regular weight, compact product copy
+motion:
+  devices:
+    - reveal
+    - pin
+    - pan
+    - wipe
+    - parallax
+    - stack
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. Multiple watches and colorful app symbols fan into the white hero,
+    then a highlight rail and closer-look stage isolate large product renders. Scroll-linked watch faces pan and scale
+    through health, safety, and communication chapters while lavender text fields, oversized neon-green activity
+    circles, and stacked fitness cards create strong tonal changes. Live automated scrolling leaves some pinned
+    transitions pale or partially resolved, so the Refero recording is the more reliable motion source; exact scrub
+    mapping, media controls, pointer response, and reduced-motion behavior are not measurable.
+ported_from: null
+---
+
+## What it does
+
+A playful entry-level smartwatch product story built around movement, communication, and approachable health features. Bright bands, app symbols, oversized activity icons, and concise claims make the device feel energetic while the white canvas keeps a broad feature set easy to scan.
+
+## Section roster
+
+1. Global navigation, education promotion, and pinned product rail.
+2. Multi-watch hero with colorful app-symbol orbit and purchase action.
+3. Highlight media rail and closer-look product stage.
+4. Health chapter with watch-face demonstrations and lavender fields.
+5. Safety and communication features with large product renders.
+6. Neon-green fitness chapter and stacked workout examples.
+7. Personalization, comparison, environmental, offer, and commerce footer content.
+
+## Why it works
+
+The white field gives colorful bands, icons, and screens maximum clarity, while each major benefit receives a distinct visual chapter. Large renders and short copy keep technical features accessible to a broad audience. The cost is a media-heavy pinned experience that needs reliable loading, reduced-motion support, and static fallbacks when scroll-linked scenes do not resolve.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/569ba4c0-0431-44fb-92df-0dbea7f3e63d) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/b40d2c44-ce44-4a09-8008-f58c6308935e.mp4) supply the complete hero fan, highlight rail, closer-look stage, health chapters, activity circles, fitness cards, and closing sequence.
+- The live capture at https://www.apple.com/apple-watch-se-3/ supplies current copy, education offer, responsive screenshots, and measured layout.
+- The live scroll-stop capture misses some pinned media states. Trust the Refero recording for motion continuity and the live page for current product information.
+