@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/micro/entry.md

@@ -0,0 +1,61 @@
+---
+slug: micro
+title: 'Micro: all-in-one work platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.micro.so/
+  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/micro-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 19233
+    - method: both
+      input: https://www.micro.so/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 19233
+roles: [hero, feature, capability]
+feel: [light, premium, saas, depth]
+palette:
+  canvas: '#f5f5f5'
+  ink: '#221f1c'
+  accent: '#797267'
+type:
+  display: haffer, "haffer Fallback"
+  body: haffer, "haffer Fallback"
+motion:
+  devices: [reveal, pan]
+  notes: Eyeballed from 36 sampled frames, not measured. The blue-sky hero holds while the work app is introduced along the lower edge, then the recording moves into a denser workspace view; individual input triggers are not visible.
+ported_from: null
+---
+
+## What it does
+
+Micro positions one workspace for email, social messages, CRM, projects, and AI.
+
+## Section roster
+
+1. Hero with navigation, product statement, and two calls to action.
+2. Large application preview over a horizon image.
+3. Expanded workspace capability view.
+
+## Why it works
+
+The wide blue field and pastoral horizon give a conventional work product an optimistic, open feeling before the dense interface arrives. The visual atmosphere competes slightly with the small supporting copy.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. The live capture at https://www.micro.so/ supplies the current site URL and layout reference.

package/entries/monopo-saigon/captures/2/measure.json

@@ -0,0 +1,145 @@
+{
+  "url": "https://monopo.vn/",
+  "at": "2026-09-17",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "",
+    "ink": "#ffffff",
+    "accent": "#000000",
+    "fontDisplay": "",
+    "fontBody": "system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"Segoe UI\", Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\""
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "header",
+      "id": "header",
+      "class": "",
+      "top": 0,
+      "height": 66,
+      "animations": []
+    },
+    {
+      "index": 1,
+      "tag": "div",
+      "id": "home",
+      "class": "",
+      "top": 0,
+      "height": 16267,
+      "animations": [
+        {
+          "target": "div.scroll-logo rotating",
+          "timeline": "document",
+          "range": null,
+          "duration": 10000
+        }
+      ]
+    },
+    {
+      "index": 2,
+      "tag": "section",
+      "id": "works",
+      "class": "",
+      "top": 946,
+      "height": 3052,
+      "animations": []
+    },
+    {
+      "index": 3,
+      "tag": "section",
+      "id": "manifesto",
+      "class": "",
+      "top": 4610,
+      "height": 1403,
+      "animations": []
+    },
+    {
+      "index": 4,
+      "tag": "section",
+      "id": "strengths",
+      "class": "",
+      "top": 6114,
+      "height": 1398,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "section",
+      "id": "",
+      "class": "",
+      "top": 6150,
+      "height": 351,
+      "animations": []
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "",
+      "class": "",
+      "top": 6653,
+      "height": 356,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "section",
+      "id": "",
+      "class": "",
+      "top": 7161,
+      "height": 351,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "",
+      "class": "text-cta",
+      "top": 8905,
+      "height": 553,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "section",
+      "id": "tilesGrid",
+      "class": "tiles tiles--rotated",
+      "top": 9493,
+      "height": 790,
+      "animations": []
+    },
+    {
+      "index": 10,
+      "tag": "section",
+      "id": "team",
+      "class": "",
+      "top": 10380,
+      "height": 4859,
+      "animations": []
+    },
+    {
+      "index": 11,
+      "tag": "footer",
+      "id": "contact",
+      "class": "",
+      "top": 15389,
+      "height": 878,
+      "animations": []
+    },
+    {
+      "index": 12,
+      "tag": "section",
+      "id": "",
+      "class": "container no-margin lg",
+      "top": 15464,
+      "height": 677,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/monopo-saigon/entry.md

@@ -0,0 +1,64 @@
+---
+slug: monopo-saigon
+title: 'monopo saigon: creative agency landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://monopo.vn/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-17'
+  tool: wp-design-library@0.4.0
+  captures:
+    - method: frames
+      input: /tmp/monopo-saigon-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 17100
+    - method: both
+      input: https://monopo.vn/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 17100
+roles: [hero, process, capability, feature, closing]
+feel: [dark, premium, editorial, depth, cold]
+palette:
+  canvas: '#11130f'
+  ink: '#ffffff'
+  accent: '#000000'
+type:
+  display: Editorial geometric sans with generous tracking
+  body: >-
+    system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Segoe UI", Helvetica,
+    Arial, "Apple Color Emoji", "Segoe UI Emoji"
+motion:
+  devices: [reveal, pan, drift, parallax]
+  notes: Eyeballed from 36 sampled frames, not measured. A soft organic field moves behind the centered “United, Unbound” statement, then the recording hands off to dark project and studio views with slow layered drift. Individual triggers are not visible.
+ported_from: null
+---
+
+## What it does
+
+monopo saigon presents a creative agency through an atmospheric studio statement and a sequence of visual project worlds.
+
+## Section roster
+
+1. Atmospheric hero with the agency statement.
+2. Studio and project navigation.
+3. Selected work and capability scenes.
+4. Contact-led close.
+
+## Why it works
+
+The blurred organic field gives the agency a distinct visual signature before the work appears, and the restrained type keeps the mood legible. The slow pacing favors atmosphere over rapid portfolio scanning.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. The live capture at https://monopo.vn/ supplies the current site URL and layout reference.

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

@@ -0,0 +1,338 @@
+{
+  "url": "https://notion.so/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#ffffff",
+    "ink": "#000000",
+    "accent": "#0075de",
+    "fontDisplay": "NotionInter, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, \"Apple Color Emoji\", Arial, sans-serif, \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+    "fontBody": "NotionInter, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, \"Apple Color Emoji\", Arial, sans-serif, \"Segoe UI Emoji\", \"Segoe UI Symbol\""
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "div",
+      "id": "",
+      "class": "homepageHeroTeamsAndAgents-module-scss-module__KlQGRG__heroContainer",
+      "top": 64,
+      "height": 1433,
+      "animations": [
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentMarkEnterWrapper Agent-module-scss-module__7kINlq__agentMarkMobile",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "svg.[object SVGAnimatedString]",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTaskEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTask",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentGraphicEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "span.graphic-module-scss-module__pohIQa__graphic Agent-module-scss-module__7kINlq__agentGraphic graphic-module-scss-module__pohIQa__isFilled",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTaskEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTask",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTask",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentGraphicEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "span.graphic-module-scss-module__pohIQa__graphic Agent-module-scss-module__7kINlq__agentGraphic graphic-module-scss-module__pohIQa__isFilled",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentMarkEnterWrapper Agent-module-scss-module__7kINlq__agentMarkMobile",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "svg.[object SVGAnimatedString]",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTaskEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTask",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentGraphicEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "span.graphic-module-scss-module__pohIQa__graphic Agent-module-scss-module__7kINlq__agentGraphic graphic-module-scss-module__pohIQa__isFilled",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentMarkEnterWrapper Agent-module-scss-module__7kINlq__agentMarkMobile",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "svg.[object SVGAnimatedString]",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTaskEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTask",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentGraphicEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "span.graphic-module-scss-module__pohIQa__graphic Agent-module-scss-module__7kINlq__agentGraphic graphic-module-scss-module__pohIQa__isFilled",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentMarkEnterWrapper Agent-module-scss-module__7kINlq__agentMarkDesktop",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "svg.[object SVGAnimatedString]",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTaskEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTask",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTask",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentGraphicEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "span.graphic-module-scss-module__pohIQa__graphic Agent-module-scss-module__7kINlq__agentGraphic graphic-module-scss-module__pohIQa__isFilled",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTaskEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentTask",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.Agent-module-scss-module__7kINlq__agentGraphicEnterWrapper",
+          "timeline": "document",
+          "range": null,
+          "duration": 600
+        },
+        {
+          "target": "span.graphic-module-scss-module__pohIQa__graphic Agent-module-scss-module__7kINlq__agentGraphic graphic-module-scss-module__pohIQa__isFilled",
+          "timeline": "view",
+          "range": "exit 0% exit 100%",
+          "duration": 1000
+        },
+        {
+          "target": "div.homepageLogoWall-module-scss-module__PDRQGa__logoWallMarqueeWrapper",
+          "timeline": "view",
+          "range": "entry 0px entry 44px",
+          "duration": null
+        }
+      ]
+    },
+    {
+      "index": 1,
+      "tag": "header",
+      "id": "",
+      "class": "homepageHeroTeamsAndAgents-module-scss-module__KlQGRG__contentHeader",
+      "top": 248,
+      "height": 308,
+      "animations": []
+    },
+    {
+      "index": 2,
+      "tag": "div",
+      "id": "",
+      "class": "homepage-module-scss-module__-Qs3Ha__main homepage-module-scss-module__-Qs3Ha__mainLoose",
+      "top": 1497,
+      "height": 1448,
+      "animations": []
+    },
+    {
+      "index": 3,
+      "tag": "header",
+      "id": "",
+      "class": "bento-module-scss-module__xvimDq__bentoHeader bentos-module-scss-module__KqyldW__bentoHeader",
+      "top": 1681,
+      "height": 108,
+      "animations": []
+    },
+    {
+      "index": 4,
+      "tag": "header",
+      "id": "",
+      "class": "bento-module-scss-module__xvimDq__bentoHeader bentos-module-scss-module__KqyldW__bentoHeader",
+      "top": 1681,
+      "height": 108,
+      "animations": []
+    },
+    {
+      "index": 5,
+      "tag": "header",
+      "id": "",
+      "class": "bento-module-scss-module__xvimDq__bentoHeader bentos-module-scss-module__KqyldW__bentoHeader",
+      "top": 2265,
+      "height": 364,
+      "animations": []
+    },
+    {
+      "index": 6,
+      "tag": "section",
+      "id": "_R_1n5abm_",
+      "class": "",
+      "top": 2661,
+      "height": 188,
+      "animations": []
+    },
+    {
+      "index": 7,
+      "tag": "div",
+      "id": "",
+      "class": "homepage-module-scss-module__-Qs3Ha__main homepage-module-scss-module__-Qs3Ha__mainLoose",
+      "top": 2945,
+      "height": 772,
+      "animations": []
+    },
+    {
+      "index": 8,
+      "tag": "section",
+      "id": "",
+      "class": "",
+      "top": 3041,
+      "height": 580,
+      "animations": []
+    },
+    {
+      "index": 9,
+      "tag": "section",
+      "id": "_R_bm_",
+      "class": "",
+      "top": 3729,
+      "height": 486,
+      "animations": [
+        {
+          "target": "div.Marquee-module-scss-module__X75v-G__marquee",
+          "timeline": "document",
+          "range": null,
+          "duration": 60000
+        }
+      ]
+    },
+    {
+      "index": 10,
+      "tag": "footer",
+      "id": "site-footer",
+      "class": "surface surfaceBase surface-module-scss-module__CFFfpW__surfaceBase footer-module-scss-module__U-iC1W__footer footer-module-scss-module__cwVo7a__footer footer-module-scss-module__cwVo7a__hideSeparator",
+      "top": 4215,
+      "height": 407,
+      "animations": []
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/notion/entry.md

@@ -0,0 +1,66 @@
+---
+slug: notion
+title: 'Notion: connected-workspace landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://notion.so/
+  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/notion-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 23500
+    - method: both
+      input: https://notion.so/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 36
+  duration_ms: 23500
+roles: [hero, explainer, capability, feature, proof, offer, closing, footer]
+feel: [light, premium, minimal, saas, cold]
+palette:
+  canvas: '#ffffff'
+  ink: '#000000'
+  accent: '#0075de'
+type:
+  display: >-
+    NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial,
+    sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"
+  body: >-
+    NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial,
+    sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"
+motion:
+  devices: [reveal, pan, stagger, tabs]
+  notes: 'The Refero recording moves through workspace, agent, assistant, connected-work, and testimonial chapters as staged interface compositions. Product cards and conversation panels change as grouped scenes; the live capture confirms the same broad sequence. Individual input triggers are not asserted.'
+ported_from: null
+---
+
+## What it does
+
+Notion presents a connected workspace for teams and AI agents through a broad product narrative: workspaces, automation, assistants, connected knowledge, proof, and a final action.
+
+## Section roster
+
+1. Hero: teams and agents create together.
+2. Workspace/agent automation and Office Q&A examples.
+3. On-demand assistant and connected-work chapters.
+4. Product templates, customer proof, closing action, and footer.
+
+## Why it works
+
+The page makes a large product surface scannable by alternating strong black headlines with familiar workspace snapshots. Small saturated topic colors identify sections without disrupting the calm near-white system.
+
+## Sources
+
+The Refero MP4 at https://images.refero.design/styles/refero.design/video/02d47c42-272f-4414-98ef-f1be10e20efb.mp4 provides the 33.9-second motion sequence. The live capture at https://notion.so/ supplies current desktop/mobile layout and measured tokens. Both show the same connected-workspace direction.