@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.
- package/README.md +26 -5
- package/bin/library.mjs +1 -0
- package/entries/aker/entry.md +107 -0
- package/entries/amrit-palace/entry.md +105 -0
- package/entries/apple-airpods-5/entry.md +110 -0
- package/entries/apple-airpods-pro/entry.md +106 -0
- package/entries/apple-watch-se-3/entry.md +107 -0
- package/entries/apple-watch-series-12/entry.md +108 -0
- package/entries/arsenijs-fabrica/entry.md +100 -0
- package/entries/augen-pro/entry.md +100 -0
- package/entries/auros/entry.md +110 -0
- package/entries/awe-network/entry.md +101 -0
- package/entries/ayocin/entry.md +101 -0
- package/entries/bmw/entry.md +101 -0
- package/entries/busuu/entry.md +100 -0
- package/entries/caldera/entry.md +106 -0
- package/entries/calendly/entry.md +106 -0
- package/entries/custo/entry.md +100 -0
- package/entries/dayos-ai/entry.md +109 -0
- package/entries/dimension/entry.md +106 -0
- package/entries/dovetail/entry.md +108 -0
- package/entries/ease-health/entry.md +105 -0
- package/entries/factory-ai/entry.md +106 -0
- package/entries/flighty/entry.md +105 -0
- package/entries/frame-io/entry.md +108 -0
- package/entries/hungry-tiger/entry.md +106 -0
- package/entries/hyer-aviation/entry.md +108 -0
- package/entries/impilo/entry.md +108 -0
- package/entries/monad/entry.md +108 -0
- package/entries/n8n/entry.md +108 -0
- package/entries/palais/entry.md +100 -0
- package/entries/partiful/entry.md +104 -0
- package/entries/phantom/entry.md +105 -0
- package/entries/podia/entry.md +102 -0
- package/entries/posthog/entry.md +101 -0
- package/entries/redbrick-coffee/entry.md +98 -0
- package/entries/samara/entry.md +107 -0
- package/entries/sauce-labs/entry.md +110 -0
- package/entries/seline-analytics/entry.md +106 -0
- package/entries/sequel/entry.md +104 -0
- package/entries/slash/entry.md +110 -0
- package/entries/supabase/entry.md +107 -0
- package/entries/t1-energy/entry.md +101 -0
- package/entries/vana/entry.md +100 -0
- package/entries/veed/entry.md +98 -0
- package/entries/webflow/entry.md +108 -0
- package/entries/zkpass/entry.md +103 -0
- package/package.json +2 -1
- package/src/cli/upload.mjs +57 -0
- package/src/ingest/save.mjs +28 -6
- package/src/ingest/upload.mjs +110 -0
- package/src/mcp/http.mjs +21 -0
- package/src/mcp/prompts.mjs +71 -10
- 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.
|