@yojahny/wp-design-library 1.2.0 → 1.3.0

package/entries/arsenijs-fabrica/entry.md

@@ -0,0 +1,100 @@
+---
+slug: arsenijs-fabrica
+title: 'Arsenijs Fabrica: vivid cosmetics commerce'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.arsenijsfabrica.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-24'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/042f6277-12e6-45ad-95e7-82c59b405d42.mp4
+      artifacts:
+        - key: entries/arsenijs-fabrica/1/strip.webp
+          bytes: 138668
+          sha256: 6f9d35fa89e8f8b4600443a563eed2821b359dd5fd929e3af7a0bd0c37fb666b
+          uploaded: true
+      frames: 13
+      duration_ms: 6533
+    - method: both
+      input: https://www.arsenijsfabrica.com/
+      artifacts:
+        - key: entries/arsenijs-fabrica/2/strip.webp
+          bytes: 271430
+          sha256: 7e1c7b5ee7029ab431ba52acce50a0f94c03d46d7bc768c1c200624842158ad8
+          uploaded: true
+        - key: entries/arsenijs-fabrica/2/measure.json
+          bytes: 1520
+          sha256: 73af929c97a1181a9d4d1683ba750ff3c8271f65706b500794aee3f00c711be5
+          uploaded: true
+        - key: entries/arsenijs-fabrica/2/screen-1440.png
+          bytes: 985038
+          sha256: 25ab1c30340c5560f317d808f7938003216e35ef02c93d30e2dd1483201a9a45
+          uploaded: true
+        - key: entries/arsenijs-fabrica/2/screen-390.png
+          bytes: 291859
+          sha256: c4c34b1ecebc8329547725a1bf73d8b95f1304923fbba8f5841ea4034285ec59
+          uploaded: true
+media:
+  frames: 13
+  duration_ms: 6533
+roles:
+  - hero
+  - offer
+  - feature
+  - proof
+  - closing
+  - footer
+feel:
+  - light
+  - playful
+  - editorial
+  - warm
+  - depth
+palette:
+  canvas: '#ffffff'
+  ink: '#111111'
+  accent: '#f0522d'
+type:
+  display: bold condensed grotesk, large scale
+  body: neutral sans, concise beauty-commerce measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - stagger
+    - stack
+  notes: >-
+    Eyeballed from 13 sampled frames, not measured. A vivid cosmetics hero cuts between an expressive face and orange
+    product packs. Clean product grids, ingredient imagery, and shop actions reveal in quick succession; the short clip
+    ends around the opening catalog rather than the complete live page. Exact carousel control, product hover behavior,
+    pointer response, and reduced-motion behavior are not measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A cosmetics commerce landing page built around bright packaging, expressive portraiture, and natural-ingredient claims. Editorial imagery creates character while direct product cards keep shopping close.
+
+## Section roster
+
+1. Expressive portrait and brand hero.
+2. Naturalness and ingredient claim.
+3. Featured product categories.
+4. Product cards and shopping actions.
+5. Studio and brand paths.
+6. Footer.
+
+## Why it works
+
+The unusual portrait and saturated orange packs distinguish the brand quickly, and the early product grid supports purchase intent. The cost is that rapid visual shifts and tightly packed cards need clear focus states and readable pricing.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/eb3bf6c1-a18f-4d72-801e-50c2cdbbaa21) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/042f6277-12e6-45ad-95e7-82c59b405d42.mp4) supply the sampled motion and section sequence.
+- The live capture at https://www.arsenijsfabrica.com/ supplies current copy, responsive screenshots, and measured layout.
+- The short Refero clip covers the hero and opening catalog. Trust the live site for the later product, studio, and checkout content.

package/entries/augen-pro/entry.md

@@ -0,0 +1,100 @@
+---
+slug: augen-pro
+title: 'Augen Pro: future wearable concept'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://augen.pro/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-24'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/019f3cdc-8f0b-4ddf-b1ab-45feebc606b5.mp4
+      artifacts:
+        - key: entries/augen-pro/1/strip.webp
+          bytes: 77570
+          sha256: 01fdae695923f655f0c40c524431fbaf7a7dbe63e725aa551a15b2e00efb497a
+          uploaded: true
+      frames: 36
+      duration_ms: 21300
+    - method: both
+      input: https://augen.pro/
+      artifacts:
+        - key: entries/augen-pro/2/strip.webp
+          bytes: 51290
+          sha256: 776cd092aeb8656ad694d9a5dc0765222c6396dcdd1a491fbfdbec2ab341f8d6
+          uploaded: true
+        - key: entries/augen-pro/2/measure.json
+          bytes: 2018
+          sha256: f40d316a994345d18a55701e8e582048c80b76ee9d78f14e7e0d90ccab8ff7c3
+          uploaded: true
+        - key: entries/augen-pro/2/screen-1440.png
+          bytes: 200427
+          sha256: df2f95f7329c3d58efe2ea2cd441afaf88a1fee714e2c5b61fe471e9333b8f83
+          uploaded: true
+        - key: entries/augen-pro/2/screen-390.png
+          bytes: 89488
+          sha256: 7866dded2b3885090ea4118f538f87ceda2ae33169079874cfcc70842d850494
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 21300
+roles:
+  - hero
+  - feature
+  - capability
+  - explainer
+  - closing
+  - footer
+feel:
+  - light
+  - dark
+  - premium
+  - minimal
+  - cold
+  - depth
+palette:
+  canvas: '#f7f8f9'
+  ink: '#111820'
+  accent: '#1676dd'
+type:
+  display: ultra-light technical sans, very large scale
+  body: small neutral sans, product-specification measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - wipe
+    - spotlight
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. A soft grey human profile and wearable render hold the opening, then
+    blue technical marks and black product panels wipe through eye, sense, and neural program concepts. Abstract
+    hardware rotates into isolated white space before a compact product-navigation close. Exact 3D rotation, device
+    interaction, pointer response, and reduced-motion behavior are not measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A speculative wearable-technology landing page that presents sensing, vision, and neural programs as a unified hardware world. Minimal product imagery and blue technical labels give the concept a precise future-facing tone.
+
+## Section roster
+
+1. Human profile and Beyond Humanware hero.
+2. A1 Sense and B1 Eye product paths.
+3. Wearable close-ups and technical panels.
+4. Neural-program concept.
+5. Updates and footer.
+
+## Why it works
+
+The sparse human silhouette makes complex hardware feel personal, while isolated renders let the form be inspected. The cost is that minimal copy and dramatic white space can obscure practical capabilities without accessible explanatory text.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/019f3cdc-8f0b-4ddf-b1ab-45feebc606b5.mp4) supply the sampled motion and section sequence.
+- The live capture at https://augen.pro/ supplies current copy, responsive screenshots, and measured layout.
+- The live site currently shows a sparse product index; the Refero recording contains the fuller sequence. Trust the recording for the historical motion narrative and the live page for current navigation.

package/entries/auros/entry.md

@@ -0,0 +1,110 @@
+---
+slug: auros
+title: 'Auros: fluid digital-markets landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://auros.global/
+  license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
+captured:
+  method: both
+  at: '2026-09-22'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: 'https://images.refero.design/styles/refero.design/video/ed2c729e-76ce-4ad0-bad8-c57d67247ec7.mp4'
+      artifacts:
+        - key: entries/auros/1/strip.webp
+          bytes: 260616
+          sha256: a9e144a534a794dae451a1ca0e2f7913b21d5b8217401b4efa98a56acc2a842f
+          uploaded: true
+      frames: 36
+      duration_ms: 29200
+    - method: both
+      input: https://auros.global/
+      artifacts:
+        - key: entries/auros/2/strip.webp
+          bytes: 219902
+          sha256: 1ab11859cc0aeee02d15f9d0d6cf4b766638e9dd645c7c7086f69ea189555430
+          uploaded: true
+        - key: entries/auros/2/measure.json
+          bytes: 2770
+          sha256: 0c0a743281e5e83351e55805cd6931d4aca0aa150fb5199e0247e0cdfab9b695
+          uploaded: true
+        - key: entries/auros/2/screen-1440.png
+          bytes: 163357
+          sha256: 5172714d1aeaf20d748aba7bc7f966d35f16b1f68e9dcfc9941d99bb51864864
+          uploaded: true
+        - key: entries/auros/2/screen-390.png
+          bytes: 94814
+          sha256: 38d0197335820dddb29199691dd12fcbf83e506431626dd7cc45104a6c23b5c3
+          uploaded: true
+media:
+  frames: 36
+  duration_ms: 29200
+roles:
+  - hero
+  - explainer
+  - capability
+  - proof
+  - feature
+  - testimonial
+  - closing
+  - footer
+feel:
+  - dark
+  - premium
+  - saas
+  - depth
+  - minimal
+  - cold
+palette:
+  canvas: '#001b1a'
+  ink: '#f3f6f4'
+  accent: '#eecff3'
+type:
+  display: clean neo-grotesk sans, medium weight, tight tracking
+  body: matching neutral sans, regular weight, compact measure
+motion:
+  devices:
+    - reveal
+    - pin
+    - pan
+    - kinetic
+    - parallax
+    - count
+    - drift
+    - stagger
+  notes: >-
+    Eyeballed from 36 sampled frames, not measured. The hero holds its centered claim while a luminous particle sphere
+    drifts upward behind it; oversized liquidity language then pans and crops through the viewport before the page
+    reveals an explainer and particle-cluster capability menu. Statistic cards stagger into a modular grid, the
+    global-presence panel and trust proof arrive with slower parallax, and article cards hand off to a restrained
+    closing field. The recording suggests continuous ambient particle motion, but pointer response and exact easing
+    cannot be established from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+Auros frames institutional digital-market infrastructure as a precise but atmospheric product story, using a deep teal field, fluid particles, oversized language, operational capabilities, scale metrics, network reach, and partner proof.
+
+## Section roster
+
+1. Minimal hero with liquidity promise and particle sphere.
+2. Oversized kinetic statement introducing the firm.
+3. Capability explorer for proprietary trading, liquidity solutions, and careers.
+4. Numeric proof grid for trading volume, team size, and venues.
+5. Global-presence feature and institutional confidence statement.
+6. Partner testimonials and ecosystem logos.
+7. Insights feed and contact-led close.
+
+## Why it works
+
+The particle system gives an abstract financial service a memorable physical behavior, while the stable navigation, disciplined grid, and short claims preserve institutional credibility. The cost to weigh is that the dark atmosphere and oversized transitions can delay access to detailed service information.
+
+## Sources
+
+- The [Refero style page](https://styles.refero.design/style/21cfe0c1-778d-4613-9f47-a5718eb929b3) and its MP4 supply the complete scroll sequence, particle-field progression, oversized type transitions, and section handoffs.
+- The live capture at https://auros.global/ supplies the current copy, teal/pink palette, navigation, responsive screenshots, and measured layout.
+- The two sources agree on the page structure; the live capture is trusted for current content, while the recording is trusted for motion that static scroll stops cannot resolve.

package/entries/awe-network/entry.md

@@ -0,0 +1,101 @@
+---
+slug: awe-network
+title: 'AWE: autonomous-worlds network'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://www.awenetwork.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-24'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/eea54e18-cd89-4cc0-bba8-faab7389a362.mp4
+      artifacts:
+        - key: entries/awe-network/1/strip.webp
+          bytes: 176374
+          sha256: cd41673f6101828c097a9d1c9c17bf8d09cf351f623c69045a8b091eb1c33185
+          uploaded: true
+      frames: 18
+      duration_ms: 9017
+    - method: both
+      input: https://www.awenetwork.ai/
+      artifacts:
+        - key: entries/awe-network/2/strip.webp
+          bytes: 187108
+          sha256: 505ef9d808df3cc715670c7431f2ee666d2a97cb16a84f1a3d33ab1dc42e5cea
+          uploaded: true
+        - key: entries/awe-network/2/measure.json
+          bytes: 2109
+          sha256: d805b4d8623e59246e3fd0b4c01ac3e067ee5255cd68d0658086559a6074cbad
+          uploaded: true
+        - key: entries/awe-network/2/screen-1440.png
+          bytes: 1377179
+          sha256: 93b307c70932d6d9a43decea1f6a8549886611d8533f3b14312c4923873cfe0e
+          uploaded: true
+        - key: entries/awe-network/2/screen-390.png
+          bytes: 183301
+          sha256: caf7e04cb65f66d19c4bf1fabc65ab05ee52ff7f4fdef57b5a4f03b1fb751d73
+          uploaded: true
+media:
+  frames: 18
+  duration_ms: 9017
+roles:
+  - hero
+  - explainer
+  - feature
+  - capability
+  - proof
+  - closing
+  - footer
+feel:
+  - dark
+  - cold
+  - premium
+  - depth
+  - editorial
+palette:
+  canvas: '#06080a'
+  ink: '#f0f0ee'
+  accent: '#4ac6c6'
+type:
+  display: editorial serif with technical sans labels
+  body: compact neutral sans, speculative-technology measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - wipe
+    - spotlight
+  notes: >-
+    Eyeballed from 18 sampled frames, not measured. A tiled science-fiction chamber opens into a luminous circular
+    portal and teal particle field. Repeated agent figures and a dark autonomous-world statement lead into interface
+    cards, desert-world imagery, ecosystem links, and a topographic footer. Exact portal animation, simulation
+    interaction, pointer response, and reduced-motion behavior are not measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A speculative AI-network landing page that visualizes autonomous worlds through portals, simulations, and agent imagery. The design gives an abstract multi-agent platform a coherent spatial metaphor.
+
+## Section roster
+
+1. Tiled chamber and portal opening.
+2. Autonomous-world proposition.
+3. Agent collaboration explanation.
+4. Simulation and economic-modeling examples.
+5. Ecosystem and documentation paths.
+6. Topographic closing.
+
+## Why it works
+
+The portal motif makes the platform's premise easy to remember and creates clear transitions between technical concepts. The cost is that cinematic effects and small interface panels need strong performance and accessible static descriptions.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/2d78835a-fffe-4416-8e3d-ac37207fbd6b) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/eea54e18-cd89-4cc0-bba8-faab7389a362.mp4) supply the sampled motion and section sequence.
+- The live capture at https://www.awenetwork.ai/ supplies current copy, responsive screenshots, and measured layout.
+- The live site is a related but updated autonomous-world presentation. Trust the recording for the portal sequence and the live page for current product paths.

package/entries/ayocin/entry.md

@@ -0,0 +1,101 @@
+---
+slug: ayocin
+title: 'AYOCIN: atmospheric wellness hardware'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://ayocin.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-24'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/fd052466-498a-452e-b8c4-055733c41758.mp4
+      artifacts:
+        - key: entries/ayocin/1/strip.webp
+          bytes: 400672
+          sha256: f6ccfd790ea3f07a46af83738e07a4cb7e8ec0a493d4a3c0e6da8bf8f4ad625f
+          uploaded: true
+      frames: 34
+      duration_ms: 16983
+    - method: both
+      input: https://ayocin.com/
+      artifacts:
+        - key: entries/ayocin/2/strip.webp
+          bytes: 184086
+          sha256: 86c715d4f2f95f0c08369dc4992d7b8270df57f0e93d7fba4bbc74c4923946e1
+          uploaded: true
+        - key: entries/ayocin/2/measure.json
+          bytes: 5142
+          sha256: b21dc2e4c68de360694bc16b6967b907425adcc46b739a54608d18039ae58fae
+          uploaded: true
+        - key: entries/ayocin/2/screen-1440.png
+          bytes: 437923
+          sha256: 666c586f7a1a7dd434a0cb8add097185f03a46c1e756a1359182fbedacd77a9e
+          uploaded: true
+        - key: entries/ayocin/2/screen-390.png
+          bytes: 168421
+          sha256: cb8e76004ba282262d5cbd4ad938b9d8c0285bc8c689771e71a82d38588ea679
+          uploaded: true
+media:
+  frames: 34
+  duration_ms: 16983
+roles:
+  - hero
+  - explainer
+  - feature
+  - capability
+  - proof
+  - closing
+  - footer
+feel:
+  - light
+  - dark
+  - premium
+  - minimal
+  - warm
+  - depth
+palette:
+  canvas: '#c1b1a4'
+  ink: '#ffffff'
+  accent: '#e9ac63'
+type:
+  display: large condensed sans, wide tracking
+  body: small neutral sans, calm product measure
+motion:
+  devices:
+    - reveal
+    - pan
+    - parallax
+    - spotlight
+  notes: >-
+    Eyeballed from 34 sampled frames, not measured. The glowing ATMOS LAMP remains pinned across a long warm-beige hero.
+    A forest film then pans beneath short statements about indoor life and nature, before product-benefit chapters
+    explain purification and light therapy. Exact lamp illumination, film playback, pointer response, and reduced-motion
+    behavior are not measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+A wellness hardware story that frames one lamp as a way to bring natural light and clean air indoors. Long atmospheric holds and forest footage place the physical product within a larger health narrative.
+
+## Section roster
+
+1. Lamp render and oversized ATMOS name.
+2. Nature and indoor-life manifesto.
+3. Air purification explanation.
+4. Full-spectrum and red-light therapy.
+5. Product specification and order action.
+
+## Why it works
+
+The product gets a clear silhouette and a memorable light signature before the copy turns to benefits. The cost is a deliberately slow, media-heavy opening that needs fast static loading and readable text over film.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/46d6be77-af40-4ddc-aad5-665bc98c35a3) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/fd052466-498a-452e-b8c4-055733c41758.mp4) supply the sampled motion and section sequence.
+- The live capture at https://ayocin.com/ supplies current copy, responsive screenshots, and measured layout.
+- The live page matches the recorded warm product story. Trust the recording for lamp and forest transitions and the live page for current health language.

package/entries/bmw/entry.md

@@ -0,0 +1,101 @@
+---
+slug: bmw
+title: 'BMW: editorial automotive storytelling landing'
+tier: inspiration
+source:
+  kind: public-site
+  url: https://bmw.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-24'
+  tool: wp-design-library@1.2.0
+  captures:
+    - method: frames
+      input: https://images.refero.design/styles/refero.design/video/9f33f45c-f2c4-4528-9d36-a11adc9ccfce.mp4
+      artifacts:
+        - key: entries/bmw/1/strip.webp
+          bytes: 203272
+          sha256: 9b86555c489318ef1e0a33ce2c2a9b99257366e833bd6aa56fde72c377827350
+          uploaded: true
+      frames: 21
+      duration_ms: 10267
+    - method: both
+      input: https://bmw.com/
+      artifacts:
+        - key: entries/bmw/2/strip.webp
+          bytes: 414714
+          sha256: 39c811b0e6daff71f4d953902366c666227e7905e59d8bbcb629c6f35b0e66f9
+          uploaded: true
+        - key: entries/bmw/2/measure.json
+          bytes: 1831
+          sha256: f524e1c0ef7c13ebc74089a7c0c38a20b1012519babe27f23f6beffa1a24b665
+          uploaded: true
+        - key: entries/bmw/2/screen-1440.png
+          bytes: 989720
+          sha256: 6a318692149d2f7f29190842069955198ad94a908bf7b44f89661075620ad3d4
+          uploaded: true
+        - key: entries/bmw/2/screen-390.png
+          bytes: 128220
+          sha256: 614eeb0b81c685bec74f0abac6a2e3a4783633b1d30c1600a334e86b5584239d
+          uploaded: true
+media:
+  frames: 21
+  duration_ms: 10267
+roles:
+  - hero
+  - offer
+  - feature
+  - proof
+  - closing
+  - footer
+feel:
+  - dark
+  - light
+  - premium
+  - editorial
+  - depth
+palette:
+  canvas: '#ffffff'
+  ink: '#111111'
+  accent: '#1266b0'
+type:
+  display: bold automotive sans, wide measure
+  body: neutral sans, concise product and commerce measure
+motion:
+  devices:
+    - pan
+    - reveal
+    - wipe
+    - parallax
+  notes: >-
+    Eyeballed from 21 sampled frames, not measured. Driving footage opens the Refero recording, then a model selector
+    and offer cards pan through multiple vehicles. Full-bleed road photography and vehicle close-ups alternate with
+    white commerce panels before feature content and footer links. The live destination is BMW USA with current lease
+    offers, so recording and live content differ. Exact media playback, model-selector interactions, hover behavior, and
+    reduced-motion behavior are not measurable from sampled frames.
+ported_from: null
+---
+
+## What it does
+
+An automotive home page that alternates emotive driving imagery with a practical model and offer browsing path. Full-width media builds aspiration while commerce cards help visitors move from interest to a specific vehicle.
+
+## Section roster
+
+1. Driving-footage hero with product action.
+2. Model navigation and vehicle selector.
+3. Offer cards for featured vehicles.
+4. New-model editorial feature.
+5. Design and performance image chapters.
+6. Shopping, ownership, and footer links.
+
+## Why it works
+
+The shift from cinematic motion to explicit offers serves both exploration and purchase intent. Strong vehicle photography carries the brand while consistent blue buttons mark practical next steps. The cost is that large video, changing offers, and regional content demand current data and accessible static alternatives.
+
+## Sources
+
+- [Refero style page](https://styles.refero.design/style/b8899cbd-e2ca-4069-83cf-d8f8b0d71100) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/9f33f45c-f2c4-4528-9d36-a11adc9ccfce.mp4) supply the recorded driving, model, and feature sequence.
+- The submitted https://bmw.com/ redirects to https://www.bmwusa.com/, which supplies the current responsive screenshots and measured layout.
+- Regional models and offers differ. Trust the recording for the sampled visual sequence and the live destination for current US commerce content.