@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/apple-watch-ultra-4/measure.json

@@ -0,0 +1,481 @@
+{
+  "url": "https://www.apple.com/apple-watch-ultra-4/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#000000",
+    "ink": "#1d1d1f",
+    "accent": "#e8e8ed",
+    "fontDisplay": "\"SF Pro Display\", \"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": "div",
+      "id": "",
+      "class": "media-hero-wrapper",
+      "top": 44,
+      "height": 936,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "",
+      "class": "section section-media-hero section-media-hero theme-dark headline-uppercase media-layout-inline media-layout-inline-center ribbon-full-width",
+      "top": 44,
+      "height": 936,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "section section-highlights theme-dark background-alt staggered-end",
+      "top": 980,
+      "height": 1080,
+      "animations": [
+        {
+          "target": "a.dotnav-link current",
+          "timeline": "document",
+          "range": null,
+          "duration": 6150
+        }
+      ]
+    },
+    {
+      "index": 3,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 1124,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "",
+      "class": "section section-product-viewer theme-dark background-alt staggered-end",
+      "top": 2060,
+      "height": 1148,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 2204,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "",
+      "class": "section section-health-tracking theme-dark section-subsection",
+      "top": 3208,
+      "height": 1748,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "section",
+      "id": "",
+      "class": "section section-readiness theme-dark preserve-pad-bottom section-subsection",
+      "top": 4956,
+      "height": 996,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "",
+      "class": "section section-heart-rate theme-dark section-subsection",
+      "top": 5952,
+      "height": 1598,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "section",
+      "id": "",
+      "class": "section section-running theme-dark background-alt no-pad-top",
+      "top": 7550,
+      "height": 2291,
+      "animations": [
+        {
+          "target": "button.play-pause-button",
+          "timeline": "document",
+          "range": null,
+          "duration": 850
+        }
+      ]
+    },
+    {
+      "index": 10,
+      "tag": "section",
+      "id": "",
+      "class": "section section-battery theme-dark background-alt no-pad",
+      "top": 9841,
+      "height": 990,
+      "animations": []
+    },
+    {
+      "index": 11,
+      "tag": "section",
+      "id": "",
+      "class": "section section-insights theme-dark background-alt",
+      "top": 10831,
+      "height": 1370,
+      "animations": []
+    },
+    {
+      "index": 12,
+      "tag": "section",
+      "id": "",
+      "class": "section section-health-app theme-dark background-alt",
+      "top": 12201,
+      "height": 1757,
+      "animations": []
+    },
+    {
+      "index": 13,
+      "tag": "section",
+      "id": "",
+      "class": "section section-siri theme-dark no-pad-top type-layout-gradient",
+      "top": 13958,
+      "height": 2101,
+      "animations": []
+    },
+    {
+      "index": 14,
+      "tag": "section",
+      "id": "",
+      "class": "section section-privacy theme-dark background-alt no-pad-top preserve-pad-bottom",
+      "top": 16059,
+      "height": 715,
+      "animations": []
+    },
+    {
+      "index": 15,
+      "tag": "section",
+      "id": "",
+      "class": "section section-more-sports theme-dark background-alt no-pad-top",
+      "top": 16774,
+      "height": 2270,
+      "animations": []
+    },
+    {
+      "index": 16,
+      "tag": "section",
+      "id": "",
+      "class": "section section-adventure theme-dark background-alt no-pad-top",
+      "top": 19044,
+      "height": 2305,
+      "animations": []
+    },
+    {
+      "index": 17,
+      "tag": "section",
+      "id": "",
+      "class": "section section-on-the-go theme-dark preserve-pad-bottom",
+      "top": 21349,
+      "height": 2234,
+      "animations": []
+    },
+    {
+      "index": 18,
+      "tag": "section",
+      "id": "",
+      "class": "section section-upgrade theme-dark",
+      "top": 23583,
+      "height": 1539,
+      "animations": []
+    },
+    {
+      "index": 19,
+      "tag": "section",
+      "id": "",
+      "class": "section section-incentive background-alt staggered-start",
+      "top": 25122,
+      "height": 956,
+      "animations": []
+    },
+    {
+      "index": 20,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 25266,
+      "height": 104,
+      "animations": []
+    },
+    {
+      "index": 21,
+      "tag": "section",
+      "id": "",
+      "class": "section section-contrast background-alt no-pad-top staggered-start",
+      "top": 26078,
+      "height": 2351,
+      "animations": [
+        {
+          "target": "span.icon-copy",
+          "timeline": "document",
+          "range": null,
+          "duration": 380
+        }
+      ]
+    },
+    {
+      "index": 22,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 26078,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 23,
+      "tag": "section",
+      "id": "",
+      "class": "section section-environment background-alt no-pad-top staggered-start",
+      "top": 28429,
+      "height": 547,
+      "animations": []
+    },
+    {
+      "index": 24,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 28429,
+      "height": 93,
+      "animations": []
+    },
+    {
+      "index": 25,
+      "tag": "section",
+      "id": "",
+      "class": "section section-values background-alt no-pad-top staggered-start",
+      "top": 28975,
+      "height": 588,
+      "animations": []
+    },
+    {
+      "index": 26,
+      "tag": "header",
+      "id": "",
+      "class": "section-header row",
+      "top": 28975,
+      "height": 52,
+      "animations": []
+    },
+    {
+      "index": 27,
+      "tag": "section",
+      "id": "",
+      "class": "section section-index staggered-start",
+      "top": 29564,
+      "height": 770,
+      "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-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": "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
+        }
+      ]
+    },
+    {
+      "index": 28,
+      "tag": "header",
+      "id": "",
+      "class": "header-group row",
+      "top": 29708,
+      "height": 100,
+      "animations": []
+    },
+    {
+      "index": 29,
+      "tag": "footer",
+      "id": "ac-globalfooter",
+      "class": "js",
+      "top": 30334,
+      "height": 3590,
+      "animations": []
+    },
+    {
+      "index": 30,
+      "tag": "section",
+      "id": "",
+      "class": "ac-gf-sosumi",
+      "top": 30334,
+      "height": 2966,
+      "animations": []
+    },
+    {
+      "index": 31,
+      "tag": "section",
+      "id": "",
+      "class": "ac-gf-footer",
+      "top": 33798,
+      "height": 126,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/bpco/entry.md

@@ -0,0 +1,81 @@
+---
+slug: bpco
+title: '큰그림컴퍼니: character-led brand landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.bpco.kr/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: frames
+  at: '2026-09-16'
+  tool: wp-design-library@0.4.0
+  captures:
+    - method: frames
+      input: /tmp/bpco-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 13
+      duration_ms: 6500
+    - method: frames
+      input: https://www.bpco.kr/
+      artifacts:
+        - captures/2/strip.webp
+    - method: frames
+      input: /tmp/bpco-screencast-1280.webm
+      artifacts:
+        - captures/3/strip.webp
+      frames: 36
+      duration_ms: 27617
+media:
+  frames: 13
+  duration_ms: 6500
+roles:
+  - hero
+  - explainer
+  - capability
+  - proof
+  - closing
+  - footer
+feel:
+  - light
+  - editorial
+  - brutalist
+  - minimal
+  - cold
+palette:
+  canvas: '#f3f3f1'
+  ink: '#171717'
+  accent: '#dedede'
+type:
+  display: condensed bold grotesk
+  body: compact sans-serif
+motion:
+  devices:
+    - pan
+    - reveal
+    - wipe
+  notes: >-
+    Eyeballed from 13 sampled frames, not measured. The recording pans across a tilted, oversized typographic surface:
+    condensed headlines, Korean labels, stamps, stars, and printed micro-copy move together as one poster-like
+    composition. Input triggers are not visible.
+ported_from: null
+---
+
+## What it does
+
+큰그림컴퍼니 introduces a creative company through a single large-format, print-inspired statement about people, brand, and pleasure.
+
+## Section roster
+
+1. Dense utility header and studio label.
+2. Oversized “People / Brand / Pleasure” typographic statement with project/year markings.
+3. Closing manifesto and supporting micro-copy.
+
+## Why it works
+
+The design treats the browser as a moving poster. Extreme condensed type, worn paper color, and scattered archival marks make a short message feel physical and authored.
+
+## Sources
+
+The Refero MP4 at https://images.refero.design/styles/refero.design/video/98149e4a-2119-4f78-a19f-ec9a54a92a1c.mp4 provides the 6.5-second motion reference. The live source at https://www.bpco.kr/ yielded only a frame strip, so visual and motion notes rely chiefly on the Refero recording.