@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/apple-macbook-neo/captures/2/measure.json

@@ -0,0 +1,570 @@
+{
+  "url": "https://www.apple.com/macbook-neo",
+  "at": "2026-09-17",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#ffffff",
+    "ink": "#1d1d1f",
+    "accent": "#333336",
+    "fontDisplay": "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+    "fontBody": "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "div",
+      "id": "",
+      "class": "blue-to-white edu-ribbon ribbon ribbon-animate-color ribbon-animate-position ribbon-blue-to-default theme-light",
+      "top": 44,
+      "height": 52,
+      "animations": [
+        {
+          "target": "div.ribbon-drop-wrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 800
+        },
+        {
+          "target": "div.ribbon-content-wrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 800
+        },
+        {
+          "target": "div.ribbon-content row",
+          "timeline": "document",
+          "range": null,
+          "duration": 800
+        },
+        {
+          "target": "a.action-handler icon-wrapper ribbon-link",
+          "timeline": "document",
+          "range": null,
+          "duration": 800
+        }
+      ]
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "",
+      "class": "section section-welcome  no-pad section-welcome-localnav-overlap",
+      "top": 96,
+      "height": 856,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "section section-highlights staggered-end",
+      "top": 952,
+      "height": 1166,
+      "animations": [
+        {
+          "target": "a.dotnav-link current",
+          "timeline": "document",
+          "range": null,
+          "duration": 6150
+        }
+      ]
+    },
+    {
+      "index": 3,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 1096,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "",
+      "class": "section section-design background-alt no-pad-bottom no-pad-top",
+      "top": 2118,
+      "height": 900,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "header",
+      "id": "",
+      "class": "ps-section-header text-large-center",
+      "top": 2437,
+      "height": 261,
+      "animations": []
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "",
+      "class": "section section-product-viewer staggered-end",
+      "top": 3018,
+      "height": 1000,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 3162,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "performance",
+      "class": "section section-performance section-product-stories",
+      "top": 4018,
+      "height": 7447,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "header",
+      "id": "",
+      "class": "ps-section-header text-large-center text-small-start staggered-end",
+      "top": 4162,
+      "height": 343,
+      "animations": []
+    },
+    {
+      "index": 10,
+      "tag": "section",
+      "id": "display",
+      "class": "section section-display section-product-stories",
+      "top": 11465,
+      "height": 4900,
+      "animations": []
+    },
+    {
+      "index": 11,
+      "tag": "header",
+      "id": "",
+      "class": "ps-section-header text-large-center text-small-start headline-container",
+      "top": 10440,
+      "height": 214,
+      "animations": []
+    },
+    {
+      "index": 12,
+      "tag": "section",
+      "id": "",
+      "class": "section section-apple-intelligence section-product-stories",
+      "top": 16370,
+      "height": 2028,
+      "animations": []
+    },
+    {
+      "index": 13,
+      "tag": "header",
+      "id": "",
+      "class": "ps-section-header text-large-center text-small-start staggered-end",
+      "top": 16370,
+      "height": 243,
+      "animations": []
+    },
+    {
+      "index": 14,
+      "tag": "section",
+      "id": "",
+      "class": "section section-macos section-product-stories",
+      "top": 18398,
+      "height": 1726,
+      "animations": []
+    },
+    {
+      "index": 15,
+      "tag": "section",
+      "id": "",
+      "class": "section section-continuity section-product-stories",
+      "top": 20007,
+      "height": 3594,
+      "animations": []
+    },
+    {
+      "index": 16,
+      "tag": "header",
+      "id": "",
+      "class": "ps-section-header text-large-center text-small-start",
+      "top": 20236,
+      "height": 272,
+      "animations": []
+    },
+    {
+      "index": 17,
+      "tag": "section",
+      "id": "",
+      "class": "section section-new-to-mac section-product-stories",
+      "top": 23601,
+      "height": 1980,
+      "animations": []
+    },
+    {
+      "index": 18,
+      "tag": "header",
+      "id": "",
+      "class": "ps-section-header text-large-center text-small-start staggered-start",
+      "top": 23745,
+      "height": 214,
+      "animations": []
+    },
+    {
+      "index": 19,
+      "tag": "section",
+      "id": "",
+      "class": "section section-security section-product-stories",
+      "top": 25551,
+      "height": 1956,
+      "animations": []
+    },
+    {
+      "index": 20,
+      "tag": "header",
+      "id": "",
+      "class": "ps-section-header text-large-center text-small-start staggered-start",
+      "top": 25695,
+      "height": 243,
+      "animations": []
+    },
+    {
+      "index": 21,
+      "tag": "section",
+      "id": "",
+      "class": "section section-incentive background-alt staggered-start",
+      "top": 27507,
+      "height": 938,
+      "animations": []
+    },
+    {
+      "index": 22,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 27651,
+      "height": 104,
+      "animations": []
+    },
+    {
+      "index": 23,
+      "tag": "section",
+      "id": "",
+      "class": "section section-help-me-choose staggered-start",
+      "top": 28445,
+      "height": 864,
+      "animations": []
+    },
+    {
+      "index": 24,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 28589,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 25,
+      "tag": "section",
+      "id": "",
+      "class": "section section-contrast background-alt staggered-start",
+      "top": 29309,
+      "height": 1826,
+      "animations": []
+    },
+    {
+      "index": 26,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 29453,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 27,
+      "tag": "section",
+      "id": "",
+      "class": "section section-environment background-alt no-pad-top staggered-start",
+      "top": 31135,
+      "height": 381,
+      "animations": []
+    },
+    {
+      "index": 28,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 31135,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 29,
+      "tag": "section",
+      "id": "",
+      "class": "section section-values background-alt staggered-start",
+      "top": 31485,
+      "height": 721,
+      "animations": []
+    },
+    {
+      "index": 30,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 31629,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 31,
+      "tag": "div",
+      "id": "",
+      "class": "ribbon ribbon-elevated ribbon-variant-neutral-alt",
+      "top": 32207,
+      "height": 73,
+      "animations": []
+    },
+    {
+      "index": 32,
+      "tag": "section",
+      "id": "",
+      "class": "section section-index staggered-start",
+      "top": 32280,
+      "height": 869,
+      "animations": [
+        {
+          "target": "h3.typography-index-list-title index-list-title",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-elevated index-item-elevated",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-elevated index-item-elevated",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-elevated index-item-elevated",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-elevated index-item-elevated",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-elevated index-item-elevated",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-elevated index-item-elevated",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-elevated index-item-elevated",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-elevated index-item-elevated",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "h3.typography-index-list-title index-list-title",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "h3.typography-index-list-title index-list-title",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        },
+        {
+          "target": "li.index-item typography-index-item-base index-item-base",
+          "timeline": "document",
+          "range": null,
+          "duration": 320
+        }
+      ]
+    },
+    {
+      "index": 33,
+      "tag": "footer",
+      "id": "ac-globalfooter",
+      "class": "js",
+      "top": 33149,
+      "height": 2442,
+      "animations": []
+    },
+    {
+      "index": 34,
+      "tag": "section",
+      "id": "",
+      "class": "ac-gf-sosumi",
+      "top": 33149,
+      "height": 1818,
+      "animations": []
+    },
+    {
+      "index": 35,
+      "tag": "section",
+      "id": "",
+      "class": "ac-gf-footer",
+      "top": 35464,
+      "height": 126,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/apple-macbook-neo/entry.md

@@ -0,0 +1,62 @@
+---
+slug: apple-macbook-neo
+title: 'Apple: MacBook Neo product launch'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.apple.com/macbook-neo
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-17'
+  tool: wp-design-library@0.4.0
+  captures:
+    - method: frames
+      input: /tmp/apple-macbook-neo-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 17433
+    - method: both
+      input: https://www.apple.com/macbook-neo
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 17433
+roles: [hero, feature, explainer, proof, offer]
+feel: [light, premium, minimal, editorial, depth]
+palette:
+  canvas: '#ffffff'
+  ink: '#1d1d1f'
+  accent: '#333336'
+type:
+  display: '"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif'
+  body: '"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif'
+motion:
+  devices: [reveal, pan, drift, stagger]
+  notes: Eyeballed from 36 sampled frames, not measured. Hands and product cards enter around the MacBook Neo hero, then the recording stages exploded views, screens, and accessories in sequential compositions. Individual triggers are not visible.
+ported_from: null
+---
+
+## What it does
+
+Apple introduces MacBook Neo as a tactile product launch, moving from a human hand-held object into its design details and screens.
+
+## Section roster
+
+1. Product hero with the Neo headline and hands-on interaction.
+2. Materials, colors, and hardware detail reveals.
+3. Display and accessory demonstrations.
+4. Product actions and supporting feature copy.
+
+## Why it works
+
+The page treats product photography and motion as one sequence, so each new close-up feels like a continuation of the object story. The polished pacing leaves little room for comparative product information above the fold.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. The live capture at https://www.apple.com/macbook-neo supplies the current site URL and layout reference.

package/entries/apple-watch-ultra-4/entry.md

@@ -0,0 +1,63 @@
+---
+slug: apple-watch-ultra-4
+title: Apple Watch Ultra 4
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.apple.com/apple-watch-ultra-4/
+  license: Measured from Apple's live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-16'
+  tool: wp-design-library@0.3.0
+media: {}
+roles: [hero, feature, capability, explainer, offer, footer]
+feel: [dark, premium, minimal, depth, cold]
+palette:
+  canvas: '#000000'
+  ink: '#1d1d1f'
+  accent: '#e8e8ed'
+type:
+  display: '"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif'
+  body: '"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif'
+motion:
+  devices: [tabs]
+  notes: >-
+    Eyeballed from 12 sampled frames, not measured. The page hands off between
+    large, isolated product stories on a nearly uninterrupted black canvas:
+    the hero places the watch beneath a large headline, later frames move from
+    health metrics to a running display, battery claim and feature cards. The
+    health/product-viewer areas show paired circular arrow controls, indicating
+    an inspectable carousel or tab-like sequence. The static scroll samples do
+    not establish a timed reveal, parallax, pinning, or the exact transition
+    between slides, so those devices are intentionally not claimed.
+ported_from: null
+---
+
+## What it does
+
+A product launch page that makes the watch itself the primary evidence. It holds
+almost every product story against a black field, using white upper-case display
+copy, occasional saturated green health data, and large close renders of the
+hardware. The visual rhythm moves between singular product images, dashboard
+screens and a final grid of smaller capabilities rather than relying on a dense
+comparison table.
+
+## Section roster
+
+hero (headline, availability and large watch render), feature (highlights and
+product viewer), capability (health tracking, readiness and heart-rate stories),
+feature (running metrics and battery claim), explainer (health app and Siri
+stories), capability (sports, adventure and on-the-go/satellite stories), offer
+(trade-in incentive), feature (technical comparison and environmental/value
+sections), footer (legal and Apple-wide navigation).
+
+## Why it works
+
+The black canvas removes visual competition, so the edge-lit watch renders and
+small bright data colours carry the depth. Oversized headlines create pauses
+between technical claims, while the repeated product silhouette makes many
+features feel like parts of one system. The late card grid gives breadth without
+breaking the single-product focus. Cost to weigh: the approach depends on
+exceptional proprietary photography and a recognisable physical object; without
+them, the large empty fields can feel underfilled.