@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/gsap/entry.md

@@ -0,0 +1,62 @@
+---
+slug: gsap
+title: 'GSAP: web animation platform'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://gsap.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-17'
+  tool: wp-design-library@0.4.0
+  captures:
+    - method: frames
+      input: /tmp/gsap-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 33017
+    - method: both
+      input: https://gsap.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: 33017
+roles: [hero, capability, feature, explainer, proof]
+feel: [dark, premium, brutalist, editorial, depth]
+palette:
+  canvas: '#0e100f'
+  ink: '#fffce1'
+  accent: '#7c7c6f'
+type:
+  display: Mori, sans-serif
+  body: Mori, sans-serif
+motion:
+  devices: [reveal, pan, stagger, tabs, wipe]
+  notes: Eyeballed from 36 sampled frames, not measured. The dark hero cycles through oversized type specimens, color demos, and component examples; sections hand off through quick staged changes and grouped reveals. The recording does not establish whether each transition is scroll- or interaction-triggered.
+ported_from: null
+---
+
+## What it does
+
+GSAP presents a web-animation toolkit through a kinetic catalog of typography, interface components, and code-led examples.
+
+## Section roster
+
+1. Oversized animated type hero.
+2. Animation and component capability examples.
+3. Code and implementation demonstrations.
+4. Community, showcase, and product proof.
+
+## Why it works
+
+The page makes the library’s core promise visible immediately: nearly every section is itself a motion sample. The dense dark presentation is memorable but asks visitors to decode many examples before finding a single linear explanation.
+
+## Sources
+
+The Refero MP4 supplies the sampled motion sequence. The live capture at https://gsap.com/ supplies the current site URL and layout reference.

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

@@ -0,0 +1,20 @@
+{
+  "url": "https://letters.app/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#ffffff",
+    "ink": "#000000",
+    "accent": "#60606c",
+    "fontDisplay": "\"Open Runde\", \"Open Runde Placeholder\", sans-serif",
+    "fontBody": "\"Open Runde\", \"Open Runde Placeholder\", sans-serif"
+  },
+  "sections": [],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/letters/entry.md

@@ -0,0 +1,62 @@
+---
+slug: letters
+title: 'Letters: editorial publishing landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://letters.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/letters-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 22833
+    - method: both
+      input: https://letters.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: 22833
+roles: [hero, explainer, capability, feature, proof, closing, footer]
+feel: [light, premium, minimal, saas, cold]
+palette:
+  canvas: '#ffffff'
+  ink: '#000000'
+  accent: '#60606c'
+type:
+  display: '"Open Runde", "Open Runde Placeholder", sans-serif'
+  body: '"Open Runde", "Open Runde Placeholder", sans-serif'
+motion:
+  devices: [reveal, pan, stagger]
+  notes: 'The Refero recording changes between product cards, app interfaces, transcription examples, patient-practice workflow, proof, and privacy modules in staged groups. Interface panels remain calm while supporting details arrive progressively; input triggers are not established.'
+ported_from: null
+---
+
+## What it does
+
+Letters sells AI-assisted medical correspondence and transcription through a calm, pale-blue product story with practical workflow evidence.
+
+## Section roster
+
+1. Sky-blue hero and sign-up actions.
+2. AI letter-generation and transcription cards.
+3. Product walkthrough and workflow benefits.
+4. Transcription, practice onboarding, clinician proof, privacy, and footer.
+
+## Why it works
+
+Soft blue framing and generous white space make a complex clinical workflow feel approachable, while screenshots and short proof cards keep the promise concrete.
+
+## Sources
+
+The Refero MP4 at https://images.refero.design/styles/refero.design/video/91d91ccf-ff2c-4dd1-b589-4b1eb48de528.mp4 supplies the complete motion sequence. The live capture at https://letters.app/ supplies the current desktop/mobile site and measured tokens.