@yojahny/wp-design-library 0.3.0 → 0.5.1

package/entries/column/entry.md

@@ -0,0 +1,82 @@
+---
+slug: column
+title: 'Column: modern financial-infrastructure landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://column.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/column-refero.mp4
+      artifacts:
+        - strip.webp
+      frames: 36
+      duration_ms: 32417
+    - method: both
+      input: https://column.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: 32417
+roles:
+  - hero
+  - proof
+  - capability
+  - feature
+  - offer
+  - closing
+  - footer
+feel:
+  - light
+  - premium
+  - editorial
+  - minimal
+  - cold
+palette:
+  canvas: '#f7f7f8'
+  ink: '#172357'
+  accent: '#ff6a21'
+type:
+  display: clean geometric sans-serif
+  body: clean geometric sans-serif
+motion:
+  devices:
+    - reveal
+    - pan
+    - drift
+    - stagger
+  notes: >-
+    Eyeballed from the 36 sampled video frames, not measured. The recording moves from a dotted world map and floating
+    account card into layered orange chart panels, code/interface blocks, and a dark system diagram. Each chapter
+    reveals cards in small groups; the contact-sheet capture cannot establish interaction triggers.
+ported_from: null
+---
+
+## What it does
+
+Column presents banking infrastructure as a modular building-block system: global reach, customer proof, developer primitives, and configurable financial products.
+
+## Section roster
+
+1. World-map hero and product promise.
+2. Customer proof and orange metric cards.
+3. Developer/API capability sequence.
+4. Dark modular-system diagram and product blocks.
+5. Industry proof, financial-product matrix, documentation links, and closing/footer.
+
+## Why it works
+
+The soft near-white canvas makes the dark-blue type and rare orange data panels easy to read. It shifts between editorial story sections and structured product surfaces without losing the same precise grid.
+
+## Sources
+
+The Refero MP4 at https://images.refero.design/styles/refero.design/video/3d47cb0a-492f-4fa3-82e6-d59ebb5cf128.mp4 provides the full 32.42-second page sequence. A live Chrome capture of https://column.com/ returned no artifacts, so its URL is retained as the public source but the visual and motion notes rely on the supplied recording.

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

@@ -0,0 +1,251 @@
+{
+  "url": "https://cthdrl.co/",
+  "at": "2026-09-16",
+  "viewport": [
+    1440,
+    390
+  ],
+  "tokens": {
+    "canvas": "#000000",
+    "ink": "#e7ded1",
+    "accent": "",
+    "fontDisplay": "\"NB Akademie\", sans-serif",
+    "fontBody": "\"NB Akademie Mono\", sans-serif"
+  },
+  "sections": [
+    {
+      "index": 0,
+      "tag": "header",
+      "id": "",
+      "class": "site-header",
+      "top": 0,
+      "height": 47,
+      "animations": [
+        {
+          "target": "div.marquee-text-text",
+          "timeline": "document",
+          "range": null,
+          "duration": 15000
+        },
+        {
+          "target": "div.marquee-text-text",
+          "timeline": "document",
+          "range": null,
+          "duration": 15000
+        }
+      ]
+    },
+    {
+      "index": 1,
+      "tag": "section",
+      "id": "",
+      "class": "work-slideshow current-0",
+      "top": 0,
+      "height": 901,
+      "animations": [
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "span.text-slideup-slider",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.text-slideup-slider",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "span.text-slideup-slider",
+          "timeline": "document",
+          "range": null,
+          "duration": 1000
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        },
+        {
+          "target": "circle.[object SVGAnimatedString]",
+          "timeline": "document",
+          "range": null,
+          "duration": 2500
+        }
+      ]
+    }
+  ],
+  "screenshots": {
+    "390": "screen-390.png",
+    "1440": "screen-1440.png"
+  }
+}

package/entries/cthdrl/entry.md

@@ -0,0 +1,86 @@
+---
+slug: cthdrl
+title: 'CTHDRL: dark circular-mask creative-studio landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://cthdrl.co/
+  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/Videos/Screencasts/Screencast_20260916_145447.webm
+      artifacts:
+        - strip.webp
+      frames: 30
+      duration_ms: 14968
+    - method: both
+      input: https://cthdrl.co/
+      artifacts:
+        - captures/2/strip.webp
+        - captures/2/measure.json
+        - captures/2/screen-1440.png
+        - captures/2/screen-390.png
+media:
+  frames: 30
+  duration_ms: 14968
+roles: [hero, feature, proof, footer]
+feel: [dark, premium, editorial, minimal, depth, cold]
+palette:
+  canvas: '#000000'
+  ink: '#e7ded1'
+  accent: '#9d3d2e'
+type:
+  display: '"NB Akademie", sans-serif'
+  body: '"NB Akademie Mono", sans-serif'
+motion:
+  devices: [marquee, wipe, pan, reveal, tabs]
+  notes: >-
+    Eyeballed from 30 sampled recording frames plus a live measurement, not
+    measured frame by frame. A small all-caps line in the header moves
+    continuously as a marquee. The full-screen work sequence is organised by a
+    0/14-style project counter: thin concentric circles sweep and enlarge across
+    the screen as the Terminal project gives way to its interior image, then to
+    Jeen-Yuhs and its film frames. The circle is a mask/wipe rather than a
+    background decoration, revealing a new image and title beneath it. Project
+    labels and "VIEW" cues slide or cut into place, while the media itself pans
+    within its crop; the numbered work states behave as a tabbed/slideshow
+    sequence. The samples do not establish whether wheel input, clicks, or an
+    autoplay timer advances every state.
+ported_from: null
+---
+
+## What it does
+
+CTHDRL frames its work as a compact, full-screen cultural index. An almost-black,
+grainy surface, warm off-white grotesk type and fine circular construction lines
+hold the page together while large project names, film stills and retail imagery
+replace one another inside the same stage. A small 0/14 counter treats the work
+portfolio as a sequence to navigate instead of a feed to browse.
+
+## Section roster
+
+hero ("Navigating cultural currents in a digital world" with header marquee and
+project counter), feature (the full-screen work slideshow: Terminal, Jeen-Yuhs
+and further indexed projects), proof (named work and its image/film evidence),
+footer (CTHDRL/Studio mark, Work and Contact routes, and the closing credits).
+
+## Why it works
+
+The circular mask turns the project switch into the page's signature device:
+each new case study feels uncovered rather than merely replaced. Restrained type
+and a nearly monochrome palette keep the archival imagery legible, and the small
+counter gives the oversized stage a clear navigation model. Cost to weigh: the
+approach puts every project inside one prescribed rhythm, so weaker imagery or
+too many similar transitions can make the sequence feel uniform.
+
+## Sources
+
+- Recording capture (`Screencast_20260916_145447.webm`, 15.0 seconds, 30
+  sampled frames): establishes the circular-mask project hand-offs, media pan
+  and title/counter changes.
+- Live capture (https://cthdrl.co/): confirms the full-screen 14-work structure,
+  the header marquee, and measured canvas, ink and font tokens.

package/entries/dala-craftedbygc/entry.md

@@ -0,0 +1,69 @@
+---
+slug: dala-craftedbygc
+title: 'Dala: dark particle-field AI-search landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://dala.craftedbygc.com/
+  license: Captured from the live site; description only, no redistribution of the source.
+captured:
+  method: frames
+  at: '2026-09-16'
+  tool: wp-design-library@0.3.0
+media:
+  frames: 36
+  duration_ms: 42533
+roles: [hero, explainer, feature, capability, proof, closing, footer]
+feel: [dark, premium, playful, depth, saas, cold]
+palette:
+  canvas: '#000000'
+  ink: '#ffffff'
+  accent: '#9a9a9a'
+type:
+  display: >-
+    PPNeueMontreal, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
+  body: >-
+    PPNeueMontreal, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
+motion:
+  devices: [reveal, pin, parallax, drift, tabs]
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. The hero's dense, colourful
+    particle form remains on the dark stage while the opening copy changes, then
+    enlarges and resolves into a field of scattered outlined symbols; this reads
+    as a pinned hero hand-off with the form and its loose particles moving at
+    different apparent depths. The information field continues behind the
+    problem copy as small triangles and diamonds drift, while the next large
+    form gradually resolves at the right of the "Spark lightbulb moments" story.
+    Copy and the objects enter as separate reveals rather than one full-page
+    fade. The team panel's paired purple pagination dots and previous/next
+    controls indicate tabbed or carousel content. The samples do not establish
+    the exact easing or whether the particle system is mouse-reactive.
+ported_from: null
+---
+
+## What it does
+
+Dala presents a workplace-knowledge product as a field of collective signals.
+Instead of product UI, the page uses one black stage filled with floating,
+outlined geometric marks and a changing point-cloud object in yellow, violet,
+teal and white. Large, spare headlines and a compact purple request-access
+button give the dense particle art room to carry the story.
+
+## Section roster
+
+hero ("Unlock collective wisdom" and the large particle form), explainer
+(decision-making promise and the workplace-information problem), feature
+(scattered knowledge field and the "Spark lightbulb moments" form), capability
+("Build a better world of work" narrative), proof (team profile carousel and
+investor logos), closing (answer-led request-access prompt with the small final
+form), footer (Seedcamp mark, legal links and social navigation).
+
+## Why it works
+
+One visual language turns an abstract idea—knowledge spread across people and
+systems—into something physical: fragments disperse, gather and become useful
+shape. The narrow palette keeps the animated field from reading as decoration,
+and repeated black space makes each text hand-off feel deliberate. Proof appears
+late, after the product story has created the premise for it. Cost to weigh: the
+particle treatment needs strong art direction and careful performance work; a
+cheap or noisy version would overwhelm the concise copy.