@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/stripe/entry.md

@@ -0,0 +1,61 @@
+---
+slug: stripe
+title: 'Stripe: payments infrastructure landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://stripe.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/stripe-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 42950
+    - method: both
+      input: https://stripe.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: 42950
+roles: [hero, proof, feature]
+feel: [light, premium, saas, depth]
+palette:
+  canvas: '#ffffff'
+  ink: '#000000'
+  accent: '#50617a'
+type:
+  display: sohne-var, "SF Pro Display", sans-serif
+  body: sohne-var, "SF Pro Display", sans-serif
+motion:
+  devices: [reveal, pan]
+  notes: Eyeballed from 36 sampled frames, not measured. A multicolor ribbon frames the Spanish-language hero while the page progresses into flexible-solution copy and product cards; no individual interaction triggers are visible.
+ported_from: null
+---
+
+## What it does
+
+Stripe presents payments and financial infrastructure for businesses in a Spanish-language regional view.
+
+## Section roster
+
+1. Hero with infrastructure statement, actions, and brand proof.
+2. Flexible-solutions introduction.
+3. Payments and billing product cards.
+
+## Why it works
+
+The ribbon creates a bright focal edge without covering the business proposition, while the white field keeps a large amount of information readable. The expressive color is concentrated so heavily in the hero that lower sections feel more utilitarian.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. The live capture at https://stripe.com/ supplies the current site URL and layout reference.

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

@@ -0,0 +1,179 @@
+{
+  "url": "https://superpower.com/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#ffffff",
+    "ink": "#18181b",
+    "accent": "#000000",
+    "fontDisplay": "\"Nb international pro webfont\", Arial, sans-serif",
+    "fontBody": "\"Nb international pro webfont\", Arial, sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "section",
+      "id": "",
+      "class": "section-sp2_intro is-home",
+      "top": 930,
+      "height": 163,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "",
+      "class": "section_sp2-check",
+      "top": 1093,
+      "height": 769,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "howitworks",
+      "top": 1862,
+      "height": 7200,
+      "animations": [
+        {
+          "target": "div.howitworks__bg is-prev",
+          "timeline": "document",
+          "range": null,
+          "duration": 800
+        },
+        {
+          "target": "div.howitworks__bg is-active",
+          "timeline": "document",
+          "range": null,
+          "duration": 800
+        },
+        {
+          "target": "div.howitworks__content",
+          "timeline": "document",
+          "range": null,
+          "duration": 200
+        },
+        {
+          "target": "div.howitworks__content",
+          "timeline": "document",
+          "range": null,
+          "duration": 200
+        },
+        {
+          "target": "div.howitworks__content",
+          "timeline": "document",
+          "range": null,
+          "duration": 200
+        },
+        {
+          "target": "div.howitworks__content is-active",
+          "timeline": "document",
+          "range": null,
+          "duration": 900
+        },
+        {
+          "target": "div.howitworks__faq",
+          "timeline": "document",
+          "range": null,
+          "duration": 200
+        },
+        {
+          "target": "div.howitworks__faq",
+          "timeline": "document",
+          "range": null,
+          "duration": 200
+        },
+        {
+          "target": "div.howitworks__faq",
+          "timeline": "document",
+          "range": null,
+          "duration": 200
+        },
+        {
+          "target": "div.howitworks__faq is-active",
+          "timeline": "document",
+          "range": null,
+          "duration": 900
+        }
+      ]
+    },
+    {
+      "index": 3,
+      "tag": "section",
+      "id": "",
+      "class": "sp2-membership is-armed",
+      "top": 9062,
+      "height": 869,
+      "animations": []
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "",
+      "class": "section_clinicians-1",
+      "top": 9930,
+      "height": 626,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "section",
+      "id": "",
+      "class": "sp2-testimonials2",
+      "top": 10556,
+      "height": 1006,
+      "animations": [
+        {
+          "target": "div.sp2-testimonials2_bullet-fill",
+          "timeline": "document",
+          "range": null,
+          "duration": 8000
+        }
+      ]
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "",
+      "class": "section_social-proof-1",
+      "top": 11562,
+      "height": 771,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "section",
+      "id": "",
+      "class": "section_sp3-membership",
+      "top": 12333,
+      "height": 1353,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "",
+      "class": "section_sp2-cta",
+      "top": 13686,
+      "height": 750,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "footer",
+      "id": "",
+      "class": "section_footer3",
+      "top": 14436,
+      "height": 794,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/superpower/entry.md

@@ -0,0 +1,64 @@
+---
+slug: superpower
+title: 'Superpower: clinical health-membership landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://superpower.com/
+  license: Captured from the supplied recording and 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: /home/yojahny/Desktop/inspiration/superpower.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 20880
+    - method: both
+      input: https://superpower.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: 20880
+roles: [hero, explainer, capability, feature, proof, offer, faq, closing, footer]
+feel: [light, premium, editorial, minimal, warm]
+palette:
+  canvas: '#ffffff'
+  ink: '#18181b'
+  accent: '#df6714'
+type:
+  display: '"Nb international pro webfont", Arial, sans-serif'
+  body: '"Nb international pro webfont", Arial, sans-serif'
+motion:
+  devices: [reveal, wipe, pan, stagger]
+  notes: 'The supplied recording uses a strong edit between a warm portrait-led hero and a clean clinical explainer, then moves through tablet, phone, and lifestyle imagery with progressive overlays. The live capture records a long how-it-works sequence with brief content transitions and roughly 800–900ms background/active-state changes, plus an eight-second testimonial progress fill. The supplied video also shows a protocol-form overlay later in the journey; interaction triggers are not asserted from the captures.'
+ported_from: null
+---
+
+## What it does
+
+Superpower sells a preventive-health membership through an editorial opening image and a practical explanation of testing, results, protocols, and clinician support. It balances aspirational lifestyle photography with screenshots of a health dashboard and short, structured benefit statements.
+
+## Section roster
+
+1. Membership hero with a silhouetted portrait in an orange halo, concise eligibility note, and two actions.
+2. Credibility logos and a four-part “How it works” overview.
+3. Extended testing and biomarker explanation with device/dashboard imagery.
+4. Personalized-results and protocol chapters using phone, tablet, and lifestyle images.
+5. Membership, clinicians, testimonial, and social-proof sections.
+6. Offer, question/answer, and membership call-to-action sections above the footer.
+
+## Why it works
+
+The page introduces a medical subject through a human silhouette and warm light before it shifts into proof. White space, plain sans-serif type, and orderly interface cards make the technical details feel accessible. The orange hero creates a memorable visual signature, while black and white controls keep conversion choices legible.
+
+## Sources
+
+The supplied 20.88-second recording captures an alternate campaign hero (“Get better at being healthy, every year”), the testing explainer, dashboard/device views, and the later protocol-form overlay. The live capture at https://superpower.com/ provides the current “Your new health membership” hero, measured typography/tokens, current desktop and mobile layouts, a free-retest selector, and documented how-it-works/testimonial animation timing. The hero copy and conversion overlay differ between sources; the entry records both observed states.

package/entries/superr/entry.md

@@ -0,0 +1,54 @@
+---
+slug: superr
+title: 'Superr: AI learning notebook'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.superr.ai/
+  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/superr-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 20217
+media:
+  frames: 36
+  duration_ms: 20217
+roles: [hero, explainer, feature]
+feel: [light, playful, warm, premium]
+palette:
+  canvas: '#fdfbf9'
+  ink: '#171717'
+  accent: '#ffffff'
+type:
+  display: gelica, "gelica Fallback", Georgia, serif
+  body: gelica, "gelica Fallback", Georgia, serif
+motion:
+  devices: [reveal, pan]
+  notes: Eyeballed from 36 sampled frames, not measured. A large notebook dominates the hero, then reveals handwritten labels, stickers, and an opened-book application scene. No scroll behavior or individual triggers are visible.
+ported_from: null
+---
+
+## What it does
+
+Superr introduces an AI notebook designed to make learning feel tactile and playful.
+
+## Section roster
+
+1. Hero with oversized physical notebook and pre-order action.
+2. Brief notebook explainer.
+3. Open-book product feature scene.
+
+## Why it works
+
+The modeled notebook makes an abstract AI product instantly legible as an object for learning, and the warm paper palette supports that metaphor. The product is deliberately narrow, so the playful framing carries more weight than detailed feature explanation.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. https://www.superr.ai/ remains the source URL; its incomplete live render was not retained as a capture.

package/entries/svz-weare/captures/2/measure.json

@@ -0,0 +1,129 @@
+{
+  "url": "https://www.svz.io/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#080808",
+    "ink": "#fcfcfc",
+    "accent": "#ffffff",
+    "fontDisplay": "\"Kmr Waldenburg\", Arial, sans-serif",
+    "fontBody": "\"Kmr Waldenburg\", Arial, sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "section",
+      "id": "",
+      "class": "banner1_component",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "",
+      "class": "section_introduction_hero",
+      "top": 0,
+      "height": 900,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "section_introduction is-mobile",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 3,
+      "tag": "section",
+      "id": "",
+      "class": "section_agency-hub",
+      "top": 6376,
+      "height": 1934,
+      "animations": []
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "",
+      "class": "agency-hub_logo-banner",
+      "top": 6515,
+      "height": 123,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "section",
+      "id": "vc-section",
+      "class": "mwg_effect018",
+      "top": 8310,
+      "height": 5001,
+      "animations": []
+    },
+    {
+      "index": 6,
+      "tag": "header",
+      "id": "",
+      "class": "section_header109",
+      "top": 13311,
+      "height": 2700,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "section",
+      "id": "",
+      "class": "section_call-out radius-large",
+      "top": 15979,
+      "height": 1203,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "faq-about",
+      "class": "section_faq-content is-home",
+      "top": 17166,
+      "height": 836,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "section",
+      "id": "",
+      "class": "wall-of-fame-mobile",
+      "top": 0,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 10,
+      "tag": "footer",
+      "id": "",
+      "class": "footer_component",
+      "top": 18878,
+      "height": 1080,
+      "animations": []
+    },
+    {
+      "index": 11,
+      "tag": "section",
+      "id": "",
+      "class": "mwg_effect002",
+      "top": 18878,
+      "height": 1080,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/svz-weare/entry.md

@@ -0,0 +1,147 @@
+---
+slug: svz-weare
+title: 'SVZ: dark, motion-led digital-studio landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.svz.io/
+  license: Captured from 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: /home/yojahny/Desktop/inspiration/weare.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 21900
+    - method: both
+      input: https://www.svz.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: 21900
+roles:
+  - hero
+  - explainer
+  - capability
+  - feature
+  - proof
+  - faq
+  - closing
+  - footer
+feel:
+  - dark
+  - premium
+  - editorial
+  - brutalist
+  - depth
+  - cold
+palette:
+  canvas: '#080808'
+  ink: '#fcfcfc'
+  accent: '#ff4f68'
+type:
+  display: '"Kmr Waldenburg", Arial, sans-serif'
+  body: '"Kmr Waldenburg", Arial, sans-serif'
+motion:
+  devices:
+    - reveal
+    - pin
+    - pan
+    - wipe
+    - drift
+    - stagger
+  notes: >-
+    Eyeballed from 36 sampled recording frames plus a live pointer pass, not measured. The hero holds a large
+    field of charcoal geometric letterforms while the headline and a coral custom cursor move over it; the
+    cursor is a lagging circular follower, visibly trailing the actual pointer and blooming into a soft blur
+    during the hand-off into the grey "WE ARE" scene. It does not snap to the Discovery Call button in the
+    observed header pass, so this is not recorded as magnet behaviour. The hero's oversized shapes pan under
+    the copy, then a wipe/blur transition reveals the wordmark scene. Long manifesto copy stays in a fixed
+    reading position while individual red terms enter in sequence; later the service words and portfolio/card
+    areas repeat staggered reveals against the black ground. Exact easing and click outcomes were not
+    established.
+  clips:
+    - id: hero-transition
+      title: Hero and WE ARE transition
+      notes: >-
+        The coral pointer moves across the dark hero and becomes a soft glow during the grey WE ARE
+        transition. Scrolling then reveals manifesto copy with coral words and service labels. These are
+        observed recording changes; exact easing and trigger thresholds are not measured.
+      duration_ms: 15000
+      width: 1152
+      height: 720
+      fps: 30
+      bytes: 918019
+      sha256: 9e1fa5ba1c0e6a310070432afb13ad734bcad7801c38a0d13d456a06c5502a13
+      key: motion/svz-weare/hero-transition-9e1fa5ba1c0e6a31.mp4
+      poster: motion/hero-transition/frame-0.webp
+      frames:
+        - at_ms: 0
+          image: motion/hero-transition/frame-0.webp
+        - at_ms: 2128
+          image: motion/hero-transition/frame-1.webp
+        - at_ms: 4257
+          image: motion/hero-transition/frame-2.webp
+        - at_ms: 6385
+          image: motion/hero-transition/frame-3.webp
+        - at_ms: 8514
+          image: motion/hero-transition/frame-4.webp
+        - at_ms: 10642
+          image: motion/hero-transition/frame-5.webp
+        - at_ms: 12771
+          image: motion/hero-transition/frame-6.webp
+        - at_ms: 14900
+          image: motion/hero-transition/frame-7.webp
+      source:
+        capture: 1
+        filename: weare.mp4
+        start_ms: 0
+      url: https://media.yojahny.dev/motion/svz-weare/hero-transition-9e1fa5ba1c0e6a31.mp4
+ported_from: null
+---
+
+## What it does
+
+SVZ presents a digital studio as a sequence of editorial set pieces rather than
+a conventional agency overview. A nearly black canvas, white type, charcoal
+geometric forms and sparse coral-red emphasis establish the world; oversized
+type, service words, project previews, client proof and a large closing statement
+arrive as scenes within that system.
+
+## Section roster
+
+hero ("Digital worlds for the brands of tomorrow" and geometric letterforms),
+explainer (the blurred "WE ARE" wordmark and studio manifesto), capability
+(strategy, brand, design, development, production and growth), feature (portfolio
+and project-preview grid), proof (venture-backed client and investor stories),
+faq (three red-accented question cards), closing ("Bridging the gap between
+technology and artistry"), footer (studio navigation and links).
+
+## Why it works
+
+The page makes the studio's motion craft its clearest proof: every shift preserves
+the same limited visual language, so the bold transitions feel composed instead
+of decorative. The slow, trailing coral cursor makes ordinary pointer movement
+part of the art direction, while held text stages give dense copy time to land.
+The editorial type and hard-edged grids prevent the atmospheric blur from becoming
+soft or generic. Cost to weigh: the experience needs a full motion system and
+careful cursor accessibility work; without both, its identity collapses into
+static black-and-red styling.
+
+## Sources
+
+- Recording capture (`weare.mp4`, 21.9 seconds, 36 sampled frames): the source
+  for the scroll hand-offs, pinned reading stages, and the coral trailing cursor
+  with its blurred bloom.
+- Live capture (https://www.svz.io/): confirms the page roster and measured
+  canvas/ink/font tokens. Its computed accent token is white, while the recording
+  makes coral the useful declared visual accent because it carries the pointer
+  and emphasis words.