@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/origin-financial/captures/2/measure.json

@@ -0,0 +1,169 @@
+{
+  "url": "https://www.useorigin.com",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#050505",
+    "ink": "#ffffff",
+    "accent": "#fafafa",
+    "fontDisplay": "\"Lyondisplay App\", Georgia, sans-serif",
+    "fontBody": "Inter, sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "section",
+      "id": "",
+      "class": "hero hero-v2",
+      "top": 0,
+      "height": 1232,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "",
+      "class": "certificate-section",
+      "top": 1248,
+      "height": 497,
+      "animations": [
+        {
+          "target": "div.early_access_hero-bg certificate_hero-bg",
+          "timeline": "document",
+          "range": null,
+          "duration": 24000
+        },
+        {
+          "target": "div.early_access_hero-bg certificate_hero-bg early_access_hero-bg-2 certificate_hero-bg-2",
+          "timeline": "document",
+          "range": null,
+          "duration": 24000
+        }
+      ]
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "",
+      "class": "logo-slider-section",
+      "top": 1746,
+      "height": 172,
+      "animations": []
+    },
+    {
+      "index": 3,
+      "tag": "section",
+      "id": "",
+      "class": "intro financial-slider-section",
+      "top": 1918,
+      "height": 1076,
+      "animations": [
+        {
+          "target": "div.glowing-wrapper-glow",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "div.glowing-wrapper-mask",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "div.glowing-wrapper-borders",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        }
+      ]
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "",
+      "class": "hero",
+      "top": 2994,
+      "height": 900,
+      "animations": [
+        {
+          "target": "div.advice_pulse",
+          "timeline": "document",
+          "range": null,
+          "duration": 1800
+        }
+      ]
+    },
+    {
+      "index": 5,
+      "tag": "section",
+      "id": "",
+      "class": "partner-hero",
+      "top": 5834,
+      "height": 912,
+      "animations": [
+        {
+          "target": "div.glowing-wrapper-glow",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "div.glowing-wrapper-mask",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "div.glowing-wrapper-borders",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        }
+      ]
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "",
+      "class": "finance-section",
+      "top": 6746,
+      "height": 1678,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "section",
+      "id": "",
+      "class": "testimonial-section",
+      "top": 8424,
+      "height": 1085,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "",
+      "class": "footer-hero hero cta-v3",
+      "top": 9509,
+      "height": 608,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "footer",
+      "id": "",
+      "class": "footer",
+      "top": 10118,
+      "height": 791,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/origin-financial/entry.md

@@ -0,0 +1,65 @@
+---
+slug: origin-financial
+title: 'Origin: dark financial-wellness landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.useorigin.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/originfinnacial.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 25050
+    - method: both
+      input: https://www.useorigin.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: 25050
+roles: [hero, explainer, capability, feature, proof, closing, footer]
+feel: [dark, premium, editorial, depth, cold]
+palette:
+  canvas: '#050505'
+  ink: '#ffffff'
+  accent: '#2e8bd0'
+type:
+  display: '"Lyondisplay App", Georgia, sans-serif'
+  body: Inter, sans-serif
+motion:
+  devices: [reveal, pan, wipe, drift, stagger]
+  notes: 'The supplied recording uses soft fades and editorial cuts between a cloud-backed hero, device renders, dark product panels, violet feature cards, and a blue forecast module. Screen content advances in staged groups rather than all at once; the circular testimonial vignette expands from a black field with a pale halo. The live page confirms animated gradient/border treatment around product panels, a pulsing advice indicator, and two long-running background animations in the certificate section. No interaction trigger is claimed from these captures.'
+ported_from: null
+---
+
+## What it does
+
+Origin presents financial tracking, advice, investing, and planning as a calm, premium consumer product. A cinematic cloud-and-phone hero gives way to dark sections that alternate product renders, compact dashboard modules, guided advice, forecasts, reviews, and a download prompt.
+
+## Section roster
+
+1. Cloud-backed hero with a large serif headline, navigation, price offer, and phone render.
+2. Dark device-led tracking introduction and three compact money-management panels.
+3. Advice section with a focused question field and supporting insight cards.
+4. Violet-blue feature modules for instant insights and deeper recaps.
+5. Investment monitoring, allocation, position, and next-step dashboard cards.
+6. Blue forecast module with a timeline chart and a circular, haloed testimonial moment.
+7. News cards, a flower-field download CTA, and an app-focused closing/footer.
+
+## Why it works
+
+The site makes a complicated finance product easier to scan by changing visual scale at every chapter: full-width atmosphere, a single device, a cluster of cards, then a simple graph. Deep black gives the luminous blue and violet sections strong contrast, while the restrained serif/sans pairing keeps the product language editorial rather than dashboard-heavy.
+
+## Sources
+
+The supplied 25.05-second recording provides the broader campaign sequence, including the “Own your wealth” hero, phone renders, feature cards, forecast view, testimonial halo, and flower-field CTA. The live capture at https://www.useorigin.com records the current hero copy (“Meet your productive AI Financial Advisor”), current navigation, measured typography/tokens, the available mobile and desktop views, and documented background, panel, and advice-indicator animations. The hero copy differs between sources; this entry records both as observed campaign states.

package/entries/oryzo-ai/captures/2/measure.json

@@ -0,0 +1,39 @@
+{
+  "url": "https://oryzo.ai/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#100904",
+    "ink": "#ffedd7",
+    "accent": "#382416",
+    "fontDisplay": "halyard-display-variable",
+    "fontBody": ""
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "header",
+      "id": "site-header",
+      "class": "link-header",
+      "top": 24,
+      "height": 0,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "footer",
+      "id": "site-footer",
+      "class": "",
+      "top": 876,
+      "height": 0,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/oryzo-ai/entry.md

@@ -0,0 +1,76 @@
+---
+slug: oryzo-ai
+title: 'ORYZO AI: warm dark fictional-product showcase'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://oryzo.ai/
+  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/oryzo-ai.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 18633
+    - method: both
+      input: https://oryzo.ai/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 18633
+roles: [hero, explainer, feature, capability, proof, closing, footer]
+feel: [dark, premium, editorial, minimal, depth, warm]
+palette:
+  canvas: '#100904'
+  ink: '#ffedd7'
+  accent: '#382416'
+type:
+  display: halyard-display-variable
+  body: 'halyard-display-variable, Arial, sans-serif'
+motion:
+  devices: [reveal, pan, wipe, drift, spotlight]
+  notes: 'The Refero-hosted recording moves from an overhead workbench to isolated 3D coaster turns in a warm void, then reveals “Powered by AI” with a hand-held object and a colored edge-light treatment. It uses staged text reveals, slow object rotation, gentle camera/object movement, and scene-to-scene wipes. The live capture adds vertically paced image, product, sustainability, and historical-vessel chapters. It did not expose CSS animation records, so individual live-page triggers are not asserted.'
+ported_from: null
+agreement:
+  at: '2026-09-16'
+  palette:
+    declared:
+      canvas: '#100904'
+      ink: '#ffedd7'
+      accent: '#382416'
+    observed:
+      - '#221111'
+      - '#111111'
+      - '#332211'
+    from: captures/2/strip.webp
+---
+
+## What it does
+
+ORYZO is a fictional AI coaster used to demonstrate an immersive product-storytelling treatment. The campaign starts with a workshop photograph, then shifts through warm voids, rotating product renders, editorial close-ups, interface-like feature claims, materials, history, and a final reveal that the product itself is a Lusion showcase.
+
+## Section roster
+
+1. Workbench hero with a cork coaster, cutting mat, tools, minimal navigation, and a small studio-credit panel.
+2. Product-reveal sequence: the coaster floats in a dark brown void as its form changes from overhead to angled views.
+3. “Powered by AI” chapter with a hand-held product and a slowly introduced colored light border.
+4. Wearability and capability scenes mixing close-up photography, small product tiles, and feature claims.
+5. Product-in-context scenes, sustainability material, and graphic interface/blueprint compositions.
+6. Legacy-support historical-vessel gallery and a coffee-bean contact close.
+
+## Why it works
+
+The campaign keeps one simple object at the center of every chapter, so the visual experiments remain legible. Warm cream text and cork/brown surfaces make the product feel tactile; the occasional saturated spectrum light marks the technology claim without breaking the restrained palette. The alternation of full-bleed photography and isolated render space gives each claim a distinct pause.
+
+## Sources
+
+The Refero Styles page supplied the 18.63-second MP4 at https://images.refero.design/styles/refero.design/video/90d7739d-fb2e-46a8-9483-6e2f66d7b806.mp4. It captures the workbench hero, 3D coaster sequence, “Powered by AI” reveal, hand-held product, and colored edge-light ending. The live capture at https://oryzo.ai/ provides the current desktop and mobile views, measured warm-dark tokens and type, and the broader feature, sustainability, legacy, and closing chapters. The live site explicitly identifies ORYZO as a non-existent product used to demonstrate Lusion's work; this entry records it as a public-site inspiration reference only.

package/entries/silencio/entry.md

@@ -0,0 +1,114 @@
+---
+slug: silencio
+title: 'Silencio: editorial studio landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://silencio.es/
+  license: >-
+    Captured from a Refero-hosted recording and the live site; description only, no redistribution of the
+    source.
+captured:
+  method: frames
+  at: '2026-09-17'
+  tool: wp-design-library@0.4.0
+  captures:
+    - method: frames
+      input: /tmp/silencio-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 6500
+    - method: frames
+      input: /tmp/silencio-screencast-1280.webm
+      artifacts:
+        - captures/2/strip.webp
+      frames: 36
+      duration_ms: 14517
+media:
+  frames: 36
+  duration_ms: 6500
+roles:
+  - hero
+  - explainer
+  - capability
+  - process
+feel:
+  - light
+  - premium
+  - editorial
+  - minimal
+  - cold
+palette:
+  canvas: '#f5f5f5'
+  ink: '#000000'
+  accent: '#dbdad9'
+type:
+  display: HaasT
+  body: HaasR
+motion:
+  devices:
+    - reveal
+    - pan
+    - drift
+  notes: >-
+    Eyeballed from two 36-frame sampled recordings, not measured. Pale object studies and editorial fragments
+    drift into repeated compositions while the surrounding field stays quiet; the supplied screencast adds the
+    Digital Products and Bold Thinking as a Basis narrative sequence. Neither recording establishes individual
+    interaction triggers.
+  clips:
+    - id: product-story
+      title: Digital Products and Bold Thinking
+      notes: >-
+        The supplied recording moves through pale object studies, Digital Products, and Bold Thinking as a
+        Basis. Viewport movement is visible; individual animation triggers are not instrumented.
+      duration_ms: 14533
+      width: 1280
+      height: 690
+      fps: 30
+      bytes: 1556490
+      sha256: 8569050d84e9797f9264a2a6e6befada931e3ddae0460a798ed6eea8a6d7f1ab
+      key: motion/silencio/product-story-8569050d84e9797f.mp4
+      poster: motion/product-story/frame-0.webp
+      frames:
+        - at_ms: 0
+          image: motion/product-story/frame-0.webp
+        - at_ms: 2061
+          image: motion/product-story/frame-1.webp
+        - at_ms: 4123
+          image: motion/product-story/frame-2.webp
+        - at_ms: 6185
+          image: motion/product-story/frame-3.webp
+        - at_ms: 8247
+          image: motion/product-story/frame-4.webp
+        - at_ms: 10309
+          image: motion/product-story/frame-5.webp
+        - at_ms: 12371
+          image: motion/product-story/frame-6.webp
+        - at_ms: 14433
+          image: motion/product-story/frame-7.webp
+      source:
+        capture: 2
+        filename: Screencast_20260916_215043.webm
+        start_ms: 0
+      url: https://media.yojahny.dev/motion/silencio/product-story-8569050d84e9797f.mp4
+ported_from: null
+---
+
+## What it does
+
+Silencio uses a restrained editorial presentation of pale objects, fragments, and spatial studies.
+
+## Section roster
+
+1. Minimal studio introduction.
+2. Repeated object and material studies.
+3. Editorial process and capability fragments.
+
+## Why it works
+
+The near-white field turns tiny changes in scale and position into the main narrative, giving the work a gallery-like pace. The sparse treatment offers little immediate context for visitors who do not already know the studio.
+
+## Sources
+
+The Refero MP4 supplies the original sampled motion sequence. The supplied screencast adds the product-object, Digital Products, and Bold Thinking as a Basis progression, and is trusted for the fuller page roster. https://silencio.es/ remains the source URL; its live render was blank and was not retained as a capture.

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

@@ -0,0 +1,20 @@
+{
+  "url": "https://steep.app/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "",
+    "ink": "#000000",
+    "accent": "#17191c",
+    "fontDisplay": "",
+    "fontBody": "Sohne, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
+  },
+  "sections": [],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/steep/entry.md

@@ -0,0 +1,63 @@
+---
+slug: steep
+title: 'Steep: AI analytics platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://steep.app/
+  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/steep-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 22633
+    - method: both
+      input: https://steep.app/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 22633
+roles: [hero, feature, proof]
+feel: [light, premium, saas, warm, depth]
+palette:
+  canvas: '#f5f4f0'
+  ink: '#000000'
+  accent: '#17191c'
+type:
+  display: High-contrast editorial serif with italic emphasis
+  body: >-
+    Sohne, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+motion:
+  devices: [reveal, pan]
+  notes: Eyeballed from 36 sampled frames, not measured. The hero holds its warm data-card composition before the cards and dashboard panels reveal into a fuller application view; individual interaction triggers are not visible.
+ported_from: null
+---
+
+## What it does
+
+Steep introduces an AI analytics workspace through a calm editorial hero and a dashboard demonstration.
+
+## Section roster
+
+1. Hero with the product promise, calls to action, and floating metric cards.
+2. Product dashboard reveal.
+3. Metrics and customer proof.
+
+## Why it works
+
+The soft off-white field lets the serif headline feel considered while the compact data cards keep the value concrete. The low-contrast treatment can make secondary detail easy to miss.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. The live capture at https://steep.app/ supplies the current site URL and layout reference.