@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/apple-home/captures/2/measure.json

@@ -0,0 +1,91 @@
+{
+  "url": "https://www.apple.com/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#ffffff",
+    "ink": "#1d1d1f",
+    "accent": "#333336",
+    "fontDisplay": "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
+    "fontBody": "\"SF Pro Display\", \"SF Pro Icons\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "section",
+      "id": "",
+      "class": "section-ribbon",
+      "top": 44,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "",
+      "class": "section section-hero",
+      "top": 96,
+      "height": 2100,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "section section-promo",
+      "top": 2208,
+      "height": 1764,
+      "animations": []
+    },
+    {
+      "index": 3,
+      "tag": "section",
+      "id": "",
+      "class": "section-endless-entertainment-gallery",
+      "top": 3984,
+      "height": 957,
+      "animations": [
+        {
+          "target": "a.media-gallery-dotnav-link dotnav-link",
+          "timeline": "document",
+          "range": null,
+          "duration": 4160
+        }
+      ]
+    },
+    {
+      "index": 4,
+      "tag": "footer",
+      "id": "ac-globalfooter",
+      "class": "js",
+      "top": 4941,
+      "height": 1111,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "section",
+      "id": "",
+      "class": "ac-gf-sosumi",
+      "top": 4941,
+      "height": 525,
+      "animations": []
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "",
+      "class": "ac-gf-footer",
+      "top": 5926,
+      "height": 126,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/apple-home/entry.md

@@ -0,0 +1,64 @@
+---
+slug: apple-home
+title: 'Apple: product-launch homepage'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.apple.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-16'
+  tool: wp-design-library@0.4.0
+  captures:
+    - method: frames
+      input: /tmp/apple-home-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 31
+      duration_ms: 15317
+    - method: both
+      input: https://www.apple.com/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 31
+  duration_ms: 15317
+roles: [hero, feature, capability, offer, proof, closing, footer]
+feel: [light, premium, editorial, minimal, cold]
+palette:
+  canvas: '#ffffff'
+  ink: '#1d1d1f'
+  accent: '#0071e3'
+type:
+  display: '"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif'
+  body: '"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif'
+motion:
+  devices: [reveal, pan, drift, tabs]
+  notes: 'The Refero recording opens on a glossy, dark WWDC26 Apple mark that changes shape and lighting before cutting into large iPhone launch panels. Product imagery eases into view behind fixed headline and action rows. The live page uses the same product-launch rhythm in a different campaign state, then switches to smaller offer tiles and an entertainment gallery with a documented 4.16-second dot-navigation cycle. No interaction trigger beyond the gallery navigation is asserted.'
+ported_from: null
+---
+
+## What it does
+
+Apple's homepage sequences a small number of flagship launches as large editorial panels, then compresses the wider ecosystem into a tidy product grid and an entertainment gallery. It relies on product renders, almost no explanatory copy, and repeated paired actions to make a broad catalog feel curated.
+
+## Section roster
+
+1. Global navigation and a compact promotional ribbon.
+2. Full-width dark iPhone launch hero.
+3. Light iPhone Duo launch hero.
+4. Dark Watch Series and Watch Ultra launch panels.
+5. Compact product/service grid for AirPods, iCloud, MacBook Air, Upgrade, Card, and Trade In.
+6. Entertainment gallery with carousel-style navigation, legal detail, and global footer.
+
+## Why it works
+
+Each flagship gets the visual authority of a campaign page before the catalog switches to a regular grid. The strict black/white field lets product colors carry the image, and the small blue action pills remain easy to find without competing with the hardware. The cost is that the dense legal/footer area is intentionally separated from the launch story.
+
+## Sources
+
+The Refero Styles page supplied the 15.32-second MP4 at https://images.refero.design/styles/refero.design/video/483a5674-2b16-48aa-bd93-9c57ef728ceb.mp4. It records a WWDC26 and iPhone 17 Pro campaign state with the animated Apple mark. The live capture at https://www.apple.com/ provides the current iPhone 18 Pro, iPhone Duo, Watch Series 12, Watch Ultra 4, offer grid, entertainment gallery, measured tokens, and desktop/mobile layout. Product campaigns differ between sources; the repeated launch-panel structure is consistent.