@yojahny/wp-design-library 1.1.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +26 -5
  2. package/bin/library.mjs +1 -0
  3. package/entries/aker/entry.md +107 -0
  4. package/entries/amrit-palace/entry.md +105 -0
  5. package/entries/apple-airpods-5/entry.md +110 -0
  6. package/entries/apple-airpods-pro/entry.md +106 -0
  7. package/entries/apple-watch-se-3/entry.md +107 -0
  8. package/entries/apple-watch-series-12/entry.md +108 -0
  9. package/entries/arsenijs-fabrica/entry.md +100 -0
  10. package/entries/augen-pro/entry.md +100 -0
  11. package/entries/auros/entry.md +110 -0
  12. package/entries/awe-network/entry.md +101 -0
  13. package/entries/ayocin/entry.md +101 -0
  14. package/entries/bmw/entry.md +101 -0
  15. package/entries/busuu/entry.md +100 -0
  16. package/entries/caldera/entry.md +106 -0
  17. package/entries/calendly/entry.md +106 -0
  18. package/entries/custo/entry.md +100 -0
  19. package/entries/dayos-ai/entry.md +109 -0
  20. package/entries/dimension/entry.md +106 -0
  21. package/entries/dovetail/entry.md +108 -0
  22. package/entries/ease-health/entry.md +105 -0
  23. package/entries/factory-ai/entry.md +106 -0
  24. package/entries/flighty/entry.md +105 -0
  25. package/entries/frame-io/entry.md +108 -0
  26. package/entries/hungry-tiger/entry.md +106 -0
  27. package/entries/hyer-aviation/entry.md +108 -0
  28. package/entries/impilo/entry.md +108 -0
  29. package/entries/monad/entry.md +108 -0
  30. package/entries/n8n/entry.md +108 -0
  31. package/entries/palais/entry.md +100 -0
  32. package/entries/partiful/entry.md +104 -0
  33. package/entries/phantom/entry.md +105 -0
  34. package/entries/podia/entry.md +102 -0
  35. package/entries/posthog/entry.md +101 -0
  36. package/entries/redbrick-coffee/entry.md +98 -0
  37. package/entries/samara/entry.md +107 -0
  38. package/entries/sauce-labs/entry.md +110 -0
  39. package/entries/seline-analytics/entry.md +106 -0
  40. package/entries/sequel/entry.md +104 -0
  41. package/entries/slash/entry.md +110 -0
  42. package/entries/supabase/entry.md +107 -0
  43. package/entries/t1-energy/entry.md +101 -0
  44. package/entries/vana/entry.md +100 -0
  45. package/entries/veed/entry.md +98 -0
  46. package/entries/webflow/entry.md +108 -0
  47. package/entries/zkpass/entry.md +103 -0
  48. package/package.json +2 -1
  49. package/src/cli/upload.mjs +57 -0
  50. package/src/ingest/save.mjs +28 -6
  51. package/src/ingest/upload.mjs +110 -0
  52. package/src/mcp/http.mjs +21 -0
  53. package/src/mcp/prompts.mjs +71 -10
  54. package/src/mcp/tools.mjs +104 -8
@@ -0,0 +1,108 @@
1
+ ---
2
+ slug: apple-watch-series-12
3
+ title: 'Apple Watch Series 12: cinematic product launch'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.apple.com/apple-watch-series-12
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-22'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: 'https://images.refero.design/styles/refero.design/video/492452fc-62e6-465d-8401-d3a81ca1f916.mp4'
16
+ artifacts:
17
+ - key: entries/apple-watch-series-12/1/strip.webp
18
+ bytes: 167328
19
+ sha256: d752406546b0c6dd3a1048a10850e68ff910f11c565899e09a8fecb9f6767dc8
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 22167
23
+ - method: both
24
+ input: https://www.apple.com/apple-watch-series-12
25
+ artifacts:
26
+ - key: entries/apple-watch-series-12/2/strip.webp
27
+ bytes: 168022
28
+ sha256: de258d28103a9c39aff4e2f454bf449126a909650351613b21fa28c00eaaf790
29
+ uploaded: true
30
+ - key: entries/apple-watch-series-12/2/measure.json
31
+ bytes: 11283
32
+ sha256: 8e33e3cd2b5e639ec1278d6ae0a86554c63cc281ef5e31b844676b2b3800ac6c
33
+ uploaded: true
34
+ - key: entries/apple-watch-series-12/2/screen-1440.png
35
+ bytes: 527127
36
+ sha256: a7299cfbb77a9ff976e247b7c9b4c48d2c0ed0e97025d8967928e5e5f75af77e
37
+ uploaded: true
38
+ - key: entries/apple-watch-series-12/2/screen-390.png
39
+ bytes: 45579
40
+ sha256: ad3fce3b66481c3cd0e9dcd8ce761c36f81b5dcc4db582fe12f67644c98b123b
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 22167
45
+ roles:
46
+ - hero
47
+ - feature
48
+ - explainer
49
+ - proof
50
+ - offer
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - dark
55
+ - premium
56
+ - minimal
57
+ - depth
58
+ - cold
59
+ - editorial
60
+ palette:
61
+ canvas: '#000000'
62
+ ink: '#f5f5f7'
63
+ accent: '#32d74b'
64
+ type:
65
+ display: neutral product sans, bold weight, tight tracking
66
+ body: neutral system sans, regular weight, compact product copy
67
+ motion:
68
+ devices:
69
+ - reveal
70
+ - pin
71
+ - pan
72
+ - wipe
73
+ - parallax
74
+ - spotlight
75
+ - stagger
76
+ notes: >-
77
+ Eyeballed from 36 sampled frames, not measured. The dark hero pins the purchase rail while the watch rotates,
78
+ scales, and wipes between sensor, side-profile, and heart-rate views; a highlights carousel then stages feature
79
+ cards before a closer-look product render advances through controlled pans. Health sections spotlight luminous green
80
+ sensor imagery, large watch faces rise through black space, and copy blocks reveal in sequence before lifestyle and
81
+ offer panels open into a light commerce footer. Exact scrub timing, video playback behavior, and pointer controls
82
+ are not measurable from the sampled frames.
83
+ ported_from: null
84
+ ---
85
+
86
+ ## What it does
87
+
88
+ Apple Watch Series 12 turns health sensing and everyday readiness into a cinematic product narrative, moving from a tightly controlled hero through feature highlights, sensor explanations, watch-face moments, lifestyle benefits, and purchase guidance.
89
+
90
+ ## Section roster
91
+
92
+ 1. Pinned black hero with rotating watch and persistent buy rail.
93
+ 2. Highlights carousel covering health sensing and product features.
94
+ 3. Closer-look product renders and material details.
95
+ 4. Healthcore innovation sensor explanation.
96
+ 5. Readiness and daily-guidance feature story.
97
+ 6. Lifestyle communication and safety features.
98
+ 7. Purchase, upgrade, environmental, and footer information.
99
+
100
+ ## Why it works
101
+
102
+ Black space, controlled green light, and large isolated renders make a small device feel architectural, while pinned commerce controls keep the long narrative connected to conversion. The cost to weigh is the heavy media and scroll choreography, which demands careful performance and reduced-motion behavior.
103
+
104
+ ## Sources
105
+
106
+ - The [Refero style page](https://styles.refero.design/style/375e255f-6e7b-4091-bf73-6df42a094263) and its MP4 supply the complete cinematic sequence, product rotations, pinned transitions, highlight carousel, and sensor choreography.
107
+ - The live capture at https://www.apple.com/apple-watch-series-12 supplies current product content, commerce controls, responsive screenshots, and measured layout.
108
+ - The live scroll-stop capture misses several in-between animation states and shows partially resolved dark sections, so the recording is trusted for motion continuity and the live page for current copy and final assets.
@@ -0,0 +1,100 @@
1
+ ---
2
+ slug: arsenijs-fabrica
3
+ title: 'Arsenijs Fabrica: vivid cosmetics commerce'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.arsenijsfabrica.com/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-24'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/042f6277-12e6-45ad-95e7-82c59b405d42.mp4
16
+ artifacts:
17
+ - key: entries/arsenijs-fabrica/1/strip.webp
18
+ bytes: 138668
19
+ sha256: 6f9d35fa89e8f8b4600443a563eed2821b359dd5fd929e3af7a0bd0c37fb666b
20
+ uploaded: true
21
+ frames: 13
22
+ duration_ms: 6533
23
+ - method: both
24
+ input: https://www.arsenijsfabrica.com/
25
+ artifacts:
26
+ - key: entries/arsenijs-fabrica/2/strip.webp
27
+ bytes: 271430
28
+ sha256: 7e1c7b5ee7029ab431ba52acce50a0f94c03d46d7bc768c1c200624842158ad8
29
+ uploaded: true
30
+ - key: entries/arsenijs-fabrica/2/measure.json
31
+ bytes: 1520
32
+ sha256: 73af929c97a1181a9d4d1683ba750ff3c8271f65706b500794aee3f00c711be5
33
+ uploaded: true
34
+ - key: entries/arsenijs-fabrica/2/screen-1440.png
35
+ bytes: 985038
36
+ sha256: 25ab1c30340c5560f317d808f7938003216e35ef02c93d30e2dd1483201a9a45
37
+ uploaded: true
38
+ - key: entries/arsenijs-fabrica/2/screen-390.png
39
+ bytes: 291859
40
+ sha256: c4c34b1ecebc8329547725a1bf73d8b95f1304923fbba8f5841ea4034285ec59
41
+ uploaded: true
42
+ media:
43
+ frames: 13
44
+ duration_ms: 6533
45
+ roles:
46
+ - hero
47
+ - offer
48
+ - feature
49
+ - proof
50
+ - closing
51
+ - footer
52
+ feel:
53
+ - light
54
+ - playful
55
+ - editorial
56
+ - warm
57
+ - depth
58
+ palette:
59
+ canvas: '#ffffff'
60
+ ink: '#111111'
61
+ accent: '#f0522d'
62
+ type:
63
+ display: bold condensed grotesk, large scale
64
+ body: neutral sans, concise beauty-commerce measure
65
+ motion:
66
+ devices:
67
+ - reveal
68
+ - pan
69
+ - stagger
70
+ - stack
71
+ notes: >-
72
+ Eyeballed from 13 sampled frames, not measured. A vivid cosmetics hero cuts between an expressive face and orange
73
+ product packs. Clean product grids, ingredient imagery, and shop actions reveal in quick succession; the short clip
74
+ ends around the opening catalog rather than the complete live page. Exact carousel control, product hover behavior,
75
+ pointer response, and reduced-motion behavior are not measurable from sampled frames.
76
+ ported_from: null
77
+ ---
78
+
79
+ ## What it does
80
+
81
+ 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.
82
+
83
+ ## Section roster
84
+
85
+ 1. Expressive portrait and brand hero.
86
+ 2. Naturalness and ingredient claim.
87
+ 3. Featured product categories.
88
+ 4. Product cards and shopping actions.
89
+ 5. Studio and brand paths.
90
+ 6. Footer.
91
+
92
+ ## Why it works
93
+
94
+ 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.
95
+
96
+ ## Sources
97
+
98
+ - [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.
99
+ - The live capture at https://www.arsenijsfabrica.com/ supplies current copy, responsive screenshots, and measured layout.
100
+ - The short Refero clip covers the hero and opening catalog. Trust the live site for the later product, studio, and checkout content.
@@ -0,0 +1,100 @@
1
+ ---
2
+ slug: augen-pro
3
+ title: 'Augen Pro: future wearable concept'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://augen.pro/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-24'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/019f3cdc-8f0b-4ddf-b1ab-45feebc606b5.mp4
16
+ artifacts:
17
+ - key: entries/augen-pro/1/strip.webp
18
+ bytes: 77570
19
+ sha256: 01fdae695923f655f0c40c524431fbaf7a7dbe63e725aa551a15b2e00efb497a
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 21300
23
+ - method: both
24
+ input: https://augen.pro/
25
+ artifacts:
26
+ - key: entries/augen-pro/2/strip.webp
27
+ bytes: 51290
28
+ sha256: 776cd092aeb8656ad694d9a5dc0765222c6396dcdd1a491fbfdbec2ab341f8d6
29
+ uploaded: true
30
+ - key: entries/augen-pro/2/measure.json
31
+ bytes: 2018
32
+ sha256: f40d316a994345d18a55701e8e582048c80b76ee9d78f14e7e0d90ccab8ff7c3
33
+ uploaded: true
34
+ - key: entries/augen-pro/2/screen-1440.png
35
+ bytes: 200427
36
+ sha256: df2f95f7329c3d58efe2ea2cd441afaf88a1fee714e2c5b61fe471e9333b8f83
37
+ uploaded: true
38
+ - key: entries/augen-pro/2/screen-390.png
39
+ bytes: 89488
40
+ sha256: 7866dded2b3885090ea4118f538f87ceda2ae33169079874cfcc70842d850494
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 21300
45
+ roles:
46
+ - hero
47
+ - feature
48
+ - capability
49
+ - explainer
50
+ - closing
51
+ - footer
52
+ feel:
53
+ - light
54
+ - dark
55
+ - premium
56
+ - minimal
57
+ - cold
58
+ - depth
59
+ palette:
60
+ canvas: '#f7f8f9'
61
+ ink: '#111820'
62
+ accent: '#1676dd'
63
+ type:
64
+ display: ultra-light technical sans, very large scale
65
+ body: small neutral sans, product-specification measure
66
+ motion:
67
+ devices:
68
+ - reveal
69
+ - pan
70
+ - wipe
71
+ - spotlight
72
+ notes: >-
73
+ Eyeballed from 36 sampled frames, not measured. A soft grey human profile and wearable render hold the opening, then
74
+ blue technical marks and black product panels wipe through eye, sense, and neural program concepts. Abstract
75
+ hardware rotates into isolated white space before a compact product-navigation close. Exact 3D rotation, device
76
+ interaction, pointer response, and reduced-motion behavior are not measurable from sampled frames.
77
+ ported_from: null
78
+ ---
79
+
80
+ ## What it does
81
+
82
+ 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.
83
+
84
+ ## Section roster
85
+
86
+ 1. Human profile and Beyond Humanware hero.
87
+ 2. A1 Sense and B1 Eye product paths.
88
+ 3. Wearable close-ups and technical panels.
89
+ 4. Neural-program concept.
90
+ 5. Updates and footer.
91
+
92
+ ## Why it works
93
+
94
+ 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.
95
+
96
+ ## Sources
97
+
98
+ - [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.
99
+ - The live capture at https://augen.pro/ supplies current copy, responsive screenshots, and measured layout.
100
+ - 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.
@@ -0,0 +1,110 @@
1
+ ---
2
+ slug: auros
3
+ title: 'Auros: fluid digital-markets landing'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://auros.global/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-22'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: 'https://images.refero.design/styles/refero.design/video/ed2c729e-76ce-4ad0-bad8-c57d67247ec7.mp4'
16
+ artifacts:
17
+ - key: entries/auros/1/strip.webp
18
+ bytes: 260616
19
+ sha256: a9e144a534a794dae451a1ca0e2f7913b21d5b8217401b4efa98a56acc2a842f
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 29200
23
+ - method: both
24
+ input: https://auros.global/
25
+ artifacts:
26
+ - key: entries/auros/2/strip.webp
27
+ bytes: 219902
28
+ sha256: 1ab11859cc0aeee02d15f9d0d6cf4b766638e9dd645c7c7086f69ea189555430
29
+ uploaded: true
30
+ - key: entries/auros/2/measure.json
31
+ bytes: 2770
32
+ sha256: 0c0a743281e5e83351e55805cd6931d4aca0aa150fb5199e0247e0cdfab9b695
33
+ uploaded: true
34
+ - key: entries/auros/2/screen-1440.png
35
+ bytes: 163357
36
+ sha256: 5172714d1aeaf20d748aba7bc7f966d35f16b1f68e9dcfc9941d99bb51864864
37
+ uploaded: true
38
+ - key: entries/auros/2/screen-390.png
39
+ bytes: 94814
40
+ sha256: 38d0197335820dddb29199691dd12fcbf83e506431626dd7cc45104a6c23b5c3
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 29200
45
+ roles:
46
+ - hero
47
+ - explainer
48
+ - capability
49
+ - proof
50
+ - feature
51
+ - testimonial
52
+ - closing
53
+ - footer
54
+ feel:
55
+ - dark
56
+ - premium
57
+ - saas
58
+ - depth
59
+ - minimal
60
+ - cold
61
+ palette:
62
+ canvas: '#001b1a'
63
+ ink: '#f3f6f4'
64
+ accent: '#eecff3'
65
+ type:
66
+ display: clean neo-grotesk sans, medium weight, tight tracking
67
+ body: matching neutral sans, regular weight, compact measure
68
+ motion:
69
+ devices:
70
+ - reveal
71
+ - pin
72
+ - pan
73
+ - kinetic
74
+ - parallax
75
+ - count
76
+ - drift
77
+ - stagger
78
+ notes: >-
79
+ Eyeballed from 36 sampled frames, not measured. The hero holds its centered claim while a luminous particle sphere
80
+ drifts upward behind it; oversized liquidity language then pans and crops through the viewport before the page
81
+ reveals an explainer and particle-cluster capability menu. Statistic cards stagger into a modular grid, the
82
+ global-presence panel and trust proof arrive with slower parallax, and article cards hand off to a restrained
83
+ closing field. The recording suggests continuous ambient particle motion, but pointer response and exact easing
84
+ cannot be established from sampled frames.
85
+ ported_from: null
86
+ ---
87
+
88
+ ## What it does
89
+
90
+ 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.
91
+
92
+ ## Section roster
93
+
94
+ 1. Minimal hero with liquidity promise and particle sphere.
95
+ 2. Oversized kinetic statement introducing the firm.
96
+ 3. Capability explorer for proprietary trading, liquidity solutions, and careers.
97
+ 4. Numeric proof grid for trading volume, team size, and venues.
98
+ 5. Global-presence feature and institutional confidence statement.
99
+ 6. Partner testimonials and ecosystem logos.
100
+ 7. Insights feed and contact-led close.
101
+
102
+ ## Why it works
103
+
104
+ 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.
105
+
106
+ ## Sources
107
+
108
+ - 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.
109
+ - The live capture at https://auros.global/ supplies the current copy, teal/pink palette, navigation, responsive screenshots, and measured layout.
110
+ - 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.
@@ -0,0 +1,101 @@
1
+ ---
2
+ slug: awe-network
3
+ title: 'AWE: autonomous-worlds network'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.awenetwork.ai/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-24'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/eea54e18-cd89-4cc0-bba8-faab7389a362.mp4
16
+ artifacts:
17
+ - key: entries/awe-network/1/strip.webp
18
+ bytes: 176374
19
+ sha256: cd41673f6101828c097a9d1c9c17bf8d09cf351f623c69045a8b091eb1c33185
20
+ uploaded: true
21
+ frames: 18
22
+ duration_ms: 9017
23
+ - method: both
24
+ input: https://www.awenetwork.ai/
25
+ artifacts:
26
+ - key: entries/awe-network/2/strip.webp
27
+ bytes: 187108
28
+ sha256: 505ef9d808df3cc715670c7431f2ee666d2a97cb16a84f1a3d33ab1dc42e5cea
29
+ uploaded: true
30
+ - key: entries/awe-network/2/measure.json
31
+ bytes: 2109
32
+ sha256: d805b4d8623e59246e3fd0b4c01ac3e067ee5255cd68d0658086559a6074cbad
33
+ uploaded: true
34
+ - key: entries/awe-network/2/screen-1440.png
35
+ bytes: 1377179
36
+ sha256: 93b307c70932d6d9a43decea1f6a8549886611d8533f3b14312c4923873cfe0e
37
+ uploaded: true
38
+ - key: entries/awe-network/2/screen-390.png
39
+ bytes: 183301
40
+ sha256: caf7e04cb65f66d19c4bf1fabc65ab05ee52ff7f4fdef57b5a4f03b1fb751d73
41
+ uploaded: true
42
+ media:
43
+ frames: 18
44
+ duration_ms: 9017
45
+ roles:
46
+ - hero
47
+ - explainer
48
+ - feature
49
+ - capability
50
+ - proof
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - dark
55
+ - cold
56
+ - premium
57
+ - depth
58
+ - editorial
59
+ palette:
60
+ canvas: '#06080a'
61
+ ink: '#f0f0ee'
62
+ accent: '#4ac6c6'
63
+ type:
64
+ display: editorial serif with technical sans labels
65
+ body: compact neutral sans, speculative-technology measure
66
+ motion:
67
+ devices:
68
+ - reveal
69
+ - pan
70
+ - wipe
71
+ - spotlight
72
+ notes: >-
73
+ Eyeballed from 18 sampled frames, not measured. A tiled science-fiction chamber opens into a luminous circular
74
+ portal and teal particle field. Repeated agent figures and a dark autonomous-world statement lead into interface
75
+ cards, desert-world imagery, ecosystem links, and a topographic footer. Exact portal animation, simulation
76
+ interaction, pointer response, and reduced-motion behavior are not measurable from sampled frames.
77
+ ported_from: null
78
+ ---
79
+
80
+ ## What it does
81
+
82
+ 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.
83
+
84
+ ## Section roster
85
+
86
+ 1. Tiled chamber and portal opening.
87
+ 2. Autonomous-world proposition.
88
+ 3. Agent collaboration explanation.
89
+ 4. Simulation and economic-modeling examples.
90
+ 5. Ecosystem and documentation paths.
91
+ 6. Topographic closing.
92
+
93
+ ## Why it works
94
+
95
+ 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.
96
+
97
+ ## Sources
98
+
99
+ - [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.
100
+ - The live capture at https://www.awenetwork.ai/ supplies current copy, responsive screenshots, and measured layout.
101
+ - 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.
@@ -0,0 +1,101 @@
1
+ ---
2
+ slug: ayocin
3
+ title: 'AYOCIN: atmospheric wellness hardware'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://ayocin.com/
8
+ license: Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
9
+ captured:
10
+ method: both
11
+ at: '2026-09-24'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/fd052466-498a-452e-b8c4-055733c41758.mp4
16
+ artifacts:
17
+ - key: entries/ayocin/1/strip.webp
18
+ bytes: 400672
19
+ sha256: f6ccfd790ea3f07a46af83738e07a4cb7e8ec0a493d4a3c0e6da8bf8f4ad625f
20
+ uploaded: true
21
+ frames: 34
22
+ duration_ms: 16983
23
+ - method: both
24
+ input: https://ayocin.com/
25
+ artifacts:
26
+ - key: entries/ayocin/2/strip.webp
27
+ bytes: 184086
28
+ sha256: 86c715d4f2f95f0c08369dc4992d7b8270df57f0e93d7fba4bbc74c4923946e1
29
+ uploaded: true
30
+ - key: entries/ayocin/2/measure.json
31
+ bytes: 5142
32
+ sha256: b21dc2e4c68de360694bc16b6967b907425adcc46b739a54608d18039ae58fae
33
+ uploaded: true
34
+ - key: entries/ayocin/2/screen-1440.png
35
+ bytes: 437923
36
+ sha256: 666c586f7a1a7dd434a0cb8add097185f03a46c1e756a1359182fbedacd77a9e
37
+ uploaded: true
38
+ - key: entries/ayocin/2/screen-390.png
39
+ bytes: 168421
40
+ sha256: cb8e76004ba282262d5cbd4ad938b9d8c0285bc8c689771e71a82d38588ea679
41
+ uploaded: true
42
+ media:
43
+ frames: 34
44
+ duration_ms: 16983
45
+ roles:
46
+ - hero
47
+ - explainer
48
+ - feature
49
+ - capability
50
+ - proof
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - light
55
+ - dark
56
+ - premium
57
+ - minimal
58
+ - warm
59
+ - depth
60
+ palette:
61
+ canvas: '#c1b1a4'
62
+ ink: '#ffffff'
63
+ accent: '#e9ac63'
64
+ type:
65
+ display: large condensed sans, wide tracking
66
+ body: small neutral sans, calm product measure
67
+ motion:
68
+ devices:
69
+ - reveal
70
+ - pan
71
+ - parallax
72
+ - spotlight
73
+ notes: >-
74
+ Eyeballed from 34 sampled frames, not measured. The glowing ATMOS LAMP remains pinned across a long warm-beige hero.
75
+ A forest film then pans beneath short statements about indoor life and nature, before product-benefit chapters
76
+ explain purification and light therapy. Exact lamp illumination, film playback, pointer response, and reduced-motion
77
+ behavior are not measurable from sampled frames.
78
+ ported_from: null
79
+ ---
80
+
81
+ ## What it does
82
+
83
+ 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.
84
+
85
+ ## Section roster
86
+
87
+ 1. Lamp render and oversized ATMOS name.
88
+ 2. Nature and indoor-life manifesto.
89
+ 3. Air purification explanation.
90
+ 4. Full-spectrum and red-light therapy.
91
+ 5. Product specification and order action.
92
+
93
+ ## Why it works
94
+
95
+ 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.
96
+
97
+ ## Sources
98
+
99
+ - [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.
100
+ - The live capture at https://ayocin.com/ supplies current copy, responsive screenshots, and measured layout.
101
+ - 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.