@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/elevenlabs/captures/2/measure.json

@@ -0,0 +1,160 @@
+{
+  "url": "https://elevenlabs.io/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#fdfcfc",
+    "ink": "#000000",
+    "accent": "#ffffff",
+    "fontDisplay": "Waldenburg, \"Waldenburg Fallback\"",
+    "fontBody": "Inter, \"Inter Fallback\""
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "script",
+      "id": "page-structured-data-elevenlabs-home-redesign-2026",
+      "class": "",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "style",
+      "id": "",
+      "class": "",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "div",
+      "id": "",
+      "class": "tw-contents",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 3,
+      "tag": "div",
+      "id": "content",
+      "class": "",
+      "top": 64,
+      "height": 9585,
+      "animations": [
+        {
+          "target": "div.tw-fixed tw-top-0 tw-inset-x-0 tw-z-[9998] tw-flex tw-h-16 tw-items-center tw-duration-300 tw-ease-in-out tw-bg-white tw-invisible -tw-translate-y-full",
+          "timeline": "document",
+          "range": null,
+          "duration": 300
+        },
+        {
+          "target": "div.tw-fixed tw-top-0 tw-inset-x-0 tw-z-[9998] tw-flex tw-h-16 tw-items-center tw-duration-300 tw-ease-in-out tw-bg-white tw-invisible -tw-translate-y-full",
+          "timeline": "document",
+          "range": null,
+          "duration": 300
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 300
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 300
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        },
+        {
+          "target": "path.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 250
+        }
+      ]
+    },
+    {
+      "index": 4,
+      "tag": "div",
+      "id": "",
+      "class": "border-y border-overlay-dark mt-0 lg:mt-0",
+      "top": 9649,
+      "height": 190,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "footer",
+      "id": "",
+      "class": "tw-relative tw-pb-32 container tw-mt-16",
+      "top": 9903,
+      "height": 855,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/elevenlabs/entry.md

@@ -0,0 +1,62 @@
+---
+slug: elevenlabs
+title: 'ElevenLabs: voice-AI product landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://elevenlabs.io/
+  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/elevenlabs-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 33900
+    - method: both
+      input: https://elevenlabs.io/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 33900
+roles: [hero, explainer, capability, feature, proof, offer, closing, footer]
+feel: [light, premium, editorial, minimal, cold]
+palette:
+  canvas: '#fdfcfc'
+  ink: '#000000'
+  accent: '#ffffff'
+type:
+  display: Waldenburg, "Waldenburg Fallback"
+  body: Inter, "Inter Fallback"
+motion:
+  devices: [reveal, pan, stagger, wipe]
+  notes: 'The Refero recording presents voice-AI capabilities in staged editorial panels, with interface demos and copy changing one group at a time. The live capture records short 250–300ms navigation and SVG transitions across the current page. It does not establish individual input triggers.'
+ported_from: null
+---
+
+## What it does
+
+ElevenLabs introduces voice AI through a restrained editorial product story: a clear headline, capability demonstrations, product surfaces, proof, and conversion prompts.
+
+## Section roster
+
+1. Product hero and primary action.
+2. Voice-AI capability and demo chapters.
+3. Product, developer, and enterprise pathways.
+4. Proof, offer, closing, and footer.
+
+## Why it works
+
+The quiet palette and oversized type give voice output room to feel considered, while compact interface demonstrations ground the promise in a usable product.
+
+## Sources
+
+The Refero MP4 at https://images.refero.design/styles/refero.design/video/3e8b5dea-0085-4d86-b3ee-1de336f3ac53.mp4 provides the 33.9-second product sequence. The live capture at https://elevenlabs.io/ supplies the current desktop/mobile page, measured Waldenburg and Inter stacks, and navigation/SVG transition evidence. The entry records both public campaign states.

package/entries/flying-papers/captures/2/measure.json

@@ -0,0 +1,291 @@
+{
+  "url": "https://www.flyingpapers.com/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "",
+    "ink": "#000000",
+    "accent": "#f4ed36",
+    "fontDisplay": "",
+    "fontBody": "bergen_monoregular"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "header",
+      "id": "",
+      "class": "sc-74cdb319-4 jMVdhz right-scroll-bar-position",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "",
+      "class": "sc-60f55a6b-0 gxkuVP color",
+      "top": 0,
+      "height": 1127,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "sc-60f55a6b-0 gxkuVP color",
+      "top": 1127,
+      "height": 980,
+      "animations": [
+        {
+          "target": "span.sc-be98d28c-1 kEfRZE",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.sc-be98d28c-1 kEfRZE",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.sc-be98d28c-1 kEfRZE",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.sc-be98d28c-1 kEfRZE",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.sc-be98d28c-1 kEfRZE",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        }
+      ]
+    },
+    {
+      "index": 3,
+      "tag": "section",
+      "id": "",
+      "class": "sc-60f55a6b-0 gxkuVP color",
+      "top": 2107,
+      "height": 3600,
+      "animations": [
+        {
+          "target": "span.sc-be98d28c-1 eecSxh",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        }
+      ]
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "",
+      "class": "sc-a3bfc3c6-7 fFiULG",
+      "top": 2107,
+      "height": 900,
+      "animations": [
+        {
+          "target": "span.sc-be98d28c-1 eecSxh",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        }
+      ]
+    },
+    {
+      "index": 5,
+      "tag": "section",
+      "id": "",
+      "class": "sc-60f55a6b-0 gxkuVP color",
+      "top": 5707,
+      "height": 3600,
+      "animations": [
+        {
+          "target": "span.sc-be98d28c-1 eecSxh",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        }
+      ]
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "",
+      "class": "sc-a3bfc3c6-7 fFiULG",
+      "top": 5707,
+      "height": 900,
+      "animations": [
+        {
+          "target": "span.sc-be98d28c-1 eecSxh",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        }
+      ]
+    },
+    {
+      "index": 7,
+      "tag": "section",
+      "id": "",
+      "class": "sc-60f55a6b-0 gxkuVP color",
+      "top": 9307,
+      "height": 1800,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "",
+      "class": "sc-60f55a6b-0 bkqJPt color",
+      "top": 11107,
+      "height": 850,
+      "animations": [
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        },
+        {
+          "target": "span.sc-f0973367-0 eNIwTb",
+          "timeline": "document",
+          "range": null,
+          "duration": 4000
+        }
+      ]
+    },
+    {
+      "index": 9,
+      "tag": "footer",
+      "id": "",
+      "class": "sc-af26d625-1 iKLuhG",
+      "top": 11957,
+      "height": 496,
+      "animations": []
+    },
+    {
+      "index": 10,
+      "tag": "header",
+      "id": "",
+      "class": "sc-1e9318a7-2 ktyMZo",
+      "top": 11997,
+      "height": 193,
+      "animations": []
+    },
+    {
+      "index": 11,
+      "tag": "section",
+      "id": "",
+      "class": "sc-af26d625-0 cGIgSU",
+      "top": 12343,
+      "height": 50,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/flying-papers/entry.md

@@ -0,0 +1,61 @@
+---
+slug: flying-papers
+title: 'Flying Papers: playful creative landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.flyingpapers.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/flying-papers-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 21283
+    - method: both
+      input: https://www.flyingpapers.com/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 21283
+roles: [hero, explainer]
+feel: [playful, brutalist, warm]
+palette:
+  canvas: '#606799'
+  ink: '#000000'
+  accent: '#f4ed36'
+type:
+  display: Heavy rounded condensed display sans
+  body: bergen_monoregular
+motion:
+  devices: [reveal, pan]
+  notes: Eyeballed from 36 sampled frames, not measured. The oversized question remains fixed while the illustrated character first peeks through the letterforms and then shifts across the headline; no scroll behavior is shown.
+ported_from: null
+---
+
+## What it does
+
+Flying Papers uses a single playful age-gate-style landing scene to introduce its world.
+
+## Section roster
+
+1. Oversized question headline.
+2. Illustrated character interaction inside the letterforms.
+3. Compact primary action and underage exit.
+
+## Why it works
+
+The page commits to one memorable image, so the animated character gives the giant type a reason to exist instead of functioning as decoration. It intentionally withholds explanatory content, which limits its usefulness for a more complex offer.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. The live capture at https://www.flyingpapers.com/ supplies the current site URL and layout reference.

package/entries/gsap/captures/2/measure.json

@@ -0,0 +1,120 @@
+{
+  "url": "https://gsap.com/",
+  "at": "2026-09-17",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#0e100f",
+    "ink": "#fffce1",
+    "accent": "#7c7c6f",
+    "fontDisplay": "Mori, sans-serif",
+    "fontBody": "Mori, sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "header",
+      "id": "header",
+      "class": "header",
+      "top": -50,
+      "height": 127,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "webflow-banner",
+      "class": "banner",
+      "top": -50,
+      "height": 50,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "feed feed--notifications",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 3,
+      "tag": "section",
+      "id": "",
+      "class": "feed feed--messages",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "",
+      "class": "home-hero",
+      "top": 0,
+      "height": 913,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "section",
+      "id": "",
+      "class": "home-intro",
+      "top": 913,
+      "height": 838,
+      "animations": []
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "home-animate",
+      "class": "home-animate",
+      "top": 1751,
+      "height": 3900,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "section",
+      "id": "",
+      "class": "home-tools",
+      "top": 5651,
+      "height": 2006,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "",
+      "class": "brands",
+      "top": 7657,
+      "height": 366,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "section",
+      "id": "",
+      "class": "showcase",
+      "top": 8022,
+      "height": 959,
+      "animations": []
+    },
+    {
+      "index": 10,
+      "tag": "footer",
+      "id": "",
+      "class": "footer",
+      "top": 8981,
+      "height": 787,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}