@yojahny/wp-design-library 1.2.0 → 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 (46) hide show
  1. package/entries/aker/entry.md +107 -0
  2. package/entries/amrit-palace/entry.md +105 -0
  3. package/entries/apple-airpods-5/entry.md +110 -0
  4. package/entries/apple-airpods-pro/entry.md +106 -0
  5. package/entries/apple-watch-se-3/entry.md +107 -0
  6. package/entries/apple-watch-series-12/entry.md +108 -0
  7. package/entries/arsenijs-fabrica/entry.md +100 -0
  8. package/entries/augen-pro/entry.md +100 -0
  9. package/entries/auros/entry.md +110 -0
  10. package/entries/awe-network/entry.md +101 -0
  11. package/entries/ayocin/entry.md +101 -0
  12. package/entries/bmw/entry.md +101 -0
  13. package/entries/busuu/entry.md +100 -0
  14. package/entries/caldera/entry.md +106 -0
  15. package/entries/calendly/entry.md +106 -0
  16. package/entries/custo/entry.md +100 -0
  17. package/entries/dayos-ai/entry.md +109 -0
  18. package/entries/dimension/entry.md +106 -0
  19. package/entries/dovetail/entry.md +108 -0
  20. package/entries/ease-health/entry.md +105 -0
  21. package/entries/factory-ai/entry.md +106 -0
  22. package/entries/flighty/entry.md +105 -0
  23. package/entries/frame-io/entry.md +108 -0
  24. package/entries/hungry-tiger/entry.md +106 -0
  25. package/entries/hyer-aviation/entry.md +108 -0
  26. package/entries/impilo/entry.md +108 -0
  27. package/entries/monad/entry.md +108 -0
  28. package/entries/n8n/entry.md +108 -0
  29. package/entries/palais/entry.md +100 -0
  30. package/entries/partiful/entry.md +104 -0
  31. package/entries/phantom/entry.md +105 -0
  32. package/entries/podia/entry.md +102 -0
  33. package/entries/posthog/entry.md +101 -0
  34. package/entries/redbrick-coffee/entry.md +98 -0
  35. package/entries/samara/entry.md +107 -0
  36. package/entries/sauce-labs/entry.md +110 -0
  37. package/entries/seline-analytics/entry.md +106 -0
  38. package/entries/sequel/entry.md +104 -0
  39. package/entries/slash/entry.md +110 -0
  40. package/entries/supabase/entry.md +107 -0
  41. package/entries/t1-energy/entry.md +101 -0
  42. package/entries/vana/entry.md +100 -0
  43. package/entries/veed/entry.md +98 -0
  44. package/entries/webflow/entry.md +108 -0
  45. package/entries/zkpass/entry.md +103 -0
  46. package/package.json +1 -1
@@ -0,0 +1,106 @@
1
+ ---
2
+ slug: seline-analytics
3
+ title: 'Seline Analytics: illustrated privacy-first analytics landing'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://seline.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-22'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: 'https://images.refero.design/styles/refero.design/video/ac54e960-7d18-45cb-a64b-d31e9991e255.mp4'
16
+ artifacts:
17
+ - key: entries/seline-analytics/1/strip.webp
18
+ bytes: 203852
19
+ sha256: 20488a43c7a9c9a124a43a89d3d6f493a91b5d82d7d3a1064e27481dfa5391fd
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 28817
23
+ - method: both
24
+ input: https://seline.com/
25
+ artifacts:
26
+ - key: entries/seline-analytics/2/strip.webp
27
+ bytes: 240988
28
+ sha256: 4c6213527b0b12559b592db1de5671feed0beaf7af09192f7076691989a22c41
29
+ uploaded: true
30
+ - key: entries/seline-analytics/2/measure.json
31
+ bytes: 3277
32
+ sha256: 04127f8f044918aea4c8f71b018264d5d78a2e9aa7ad2996c0e75a7f62eaa672
33
+ uploaded: true
34
+ - key: entries/seline-analytics/2/screen-1440.png
35
+ bytes: 244752
36
+ sha256: 9fff0459f0960fa5ad2a81bf26a2cf5fe41b871f5473a1b69dc5e4018abaca54
37
+ uploaded: true
38
+ - key: entries/seline-analytics/2/screen-390.png
39
+ bytes: 103378
40
+ sha256: fc97e2478669d715c94a445f92f752a6f29951a7c0b35102c7d32ce5126448f5
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 28817
45
+ roles:
46
+ - hero
47
+ - proof
48
+ - feature
49
+ - capability
50
+ - testimonial
51
+ - faq
52
+ - closing
53
+ - footer
54
+ feel:
55
+ - light
56
+ - saas
57
+ - playful
58
+ - minimal
59
+ - warm
60
+ palette:
61
+ canvas: '#fbfbf8'
62
+ ink: '#171717'
63
+ accent: '#36b8f4'
64
+ type:
65
+ display: friendly neo-grotesk sans, bold weight, compact leading
66
+ body: neutral sans, regular weight, readable product-documentation measure
67
+ motion:
68
+ devices:
69
+ - reveal
70
+ - pan
71
+ - stagger
72
+ - drift
73
+ notes: >-
74
+ Eyeballed from 36 sampled frames, not measured. The analytics dashboard rises beneath a concise hero while
75
+ hand-drawn characters and thin colored trails drift around the page edges. Feature cards reveal in a staggered
76
+ masonry rhythm, customer quotes interrupt the product grid, and later setup, principles, integrations, FAQ, and
77
+ closing panels arrive with restrained vertical reveals. The current live page closely matches the recording after
78
+ redirecting from seline.so to seline.com; exact illustration loops, hover states, and carousel timing are not
79
+ measurable from sampled frames.
80
+ ported_from: null
81
+ ---
82
+
83
+ ## What it does
84
+
85
+ A privacy-first analytics landing page that makes a technical alternative feel small, human, and understandable. Real dashboard views carry the proof while hand-drawn people, highlighted phrases, and conversational testimonials soften the software presentation.
86
+
87
+ ## Section roster
88
+
89
+ 1. Compact navigation and trial action.
90
+ 2. Outcome-led hero with dashboard overview and customer logos.
91
+ 3. Customer quotation pair and live product demonstration.
92
+ 4. Feature grid for visitor monitoring, profiles, funnels, attribution, and filters.
93
+ 5. Founder-led Why Seline explanation and additional product evidence.
94
+ 6. Quick setup scene and purpose-built product principles.
95
+ 7. Integration proof, founder note, FAQ, closing trial panel, and footer.
96
+
97
+ ## Why it works
98
+
99
+ The page shows the actual product early and repeatedly, then uses annotations and illustrations to direct attention without making the interface feel heavy. Blue highlights create a consistent reading path through a mostly white canvas. The cost is that pale borders and small screenshots can lose clarity on compact displays unless responsive crops and contrast are carefully maintained.
100
+
101
+ ## Sources
102
+
103
+ - [Refero style page](https://styles.refero.design/style/7967c6d9-e50c-42b5-b4d1-74003ba41781) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/ac54e960-7d18-45cb-a64b-d31e9991e255.mp4) supply the full dashboard, feature grid, testimonials, setup illustration, principles, integrations, FAQ, and footer sequence.
104
+ - The submitted live URL https://seline.so/ redirects to the current site at https://seline.com/, which supplies current content, responsive screenshots, and measured layout.
105
+ - The sources agree closely. Trust the recording for intermediate illustration and reveal states and the live page for current URLs and copy.
106
+
@@ -0,0 +1,104 @@
1
+ ---
2
+ slug: sequel
3
+ title: 'Sequel: cinematic private-investment collective'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://sequel.co/
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/b4825b5e-44c5-4b86-8e67-b97307cedd93.mp4
16
+ artifacts:
17
+ - key: entries/sequel/1/strip.webp
18
+ bytes: 163370
19
+ sha256: 9319c5872ed54155267caf064e0198f220b29464c29e7e4b7f3fa69f7e37c0d4
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 43100
23
+ - method: both
24
+ input: https://sequel.co/
25
+ artifacts:
26
+ - key: entries/sequel/2/strip.webp
27
+ bytes: 122792
28
+ sha256: ab299039cee275fa23c7e4ac8950a35bfc3e011baf5980844fee00df631cdb43
29
+ uploaded: true
30
+ - key: entries/sequel/2/measure.json
31
+ bytes: 3168
32
+ sha256: 6b3cfbd73db0699819d49062f33581a29b7607ed47e82179b26ab57d83087af1
33
+ uploaded: true
34
+ - key: entries/sequel/2/screen-1440.png
35
+ bytes: 497006
36
+ sha256: 892635006d6e56f8ed46455aaa2c9b972d430937c2e7f15eb8eb9906911a9e3b
37
+ uploaded: true
38
+ - key: entries/sequel/2/screen-390.png
39
+ bytes: 27093
40
+ sha256: 8111065c0c97aae9430d735719c035e63d7f5f6ddc84dd3c72f67848be902490
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 43100
45
+ roles:
46
+ - hero
47
+ - explainer
48
+ - proof
49
+ - capability
50
+ - testimonial
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - dark
55
+ - premium
56
+ - editorial
57
+ - minimal
58
+ - warm
59
+ - depth
60
+ palette:
61
+ canvas: '#080808'
62
+ ink: '#f1efeb'
63
+ accent: '#c9b69a'
64
+ type:
65
+ display: large editorial serif and neutral sans, restrained leading
66
+ body: small neutral sans, regular weight, cinematic measure
67
+ motion:
68
+ devices:
69
+ - reveal
70
+ - pan
71
+ - parallax
72
+ - spotlight
73
+ - stagger
74
+ notes: >-
75
+ Eyeballed from 36 sampled frames, not measured. A dark architectural film transitions into portraits of athletes,
76
+ artists, and founders. Sparse serif statements reveal over dim footage while member stories and investment proof
77
+ move through isolated media windows; counters and partner marks appear late in the sequence. Exact film playback,
78
+ scroll synchronization, portrait hover behavior, and reduced-motion behavior are not measurable from sampled frames.
79
+ ported_from: null
80
+ ---
81
+
82
+ ## What it does
83
+
84
+ A cinematic investment collective landing page connecting founders with athletes, artists, and entrepreneurs. It uses portrait film, architectural light, and spare editorial copy to make network access feel personal and exclusive.
85
+
86
+ ## Section roster
87
+
88
+ 1. Dark architectural hero and film action.
89
+ 2. Digital family office positioning.
90
+ 3. Founder and member paths.
91
+ 4. People stories and selective portrait footage.
92
+ 5. Belief statement and investment thesis.
93
+ 6. Portfolio, network scale, and partner proof.
94
+ 7. Membership or founder closing prompt and footer.
95
+
96
+ ## Why it works
97
+
98
+ The slow visual pace gives each person and claim room to register, while restrained proof grounds an otherwise atmospheric story. The cost is that dim footage and small copy require strong accessibility controls and a readable static state.
99
+
100
+ ## Sources
101
+
102
+ - [Refero style page](https://styles.refero.design/style/1bd3b2ba-9ad9-44ed-9130-03f9d94de821) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/b4825b5e-44c5-4b86-8e67-b97307cedd93.mp4) supply the film, portrait, proof, and closing sequence.
103
+ - The live capture at https://www.sequel.co/ supplies current copy, responsive screenshots, and measured layout; https://sequel.co/ redirects there.
104
+ - The sources use the same cinematic system. Trust the recording for the full motion story and the live site for current membership and founder language.
@@ -0,0 +1,110 @@
1
+ ---
2
+ slug: slash
3
+ title: 'Slash: dark editorial business-banking platform'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.slash.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-22'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: 'https://images.refero.design/styles/refero.design/video/0af8133f-9c6c-42a2-95c7-fd4f62fe9f90.mp4'
16
+ artifacts:
17
+ - key: entries/slash/1/strip.webp
18
+ bytes: 240852
19
+ sha256: 4bf9b1c9f318e8ac83d26265d55ed065dbaba2b71ff074af134ae509e8507616
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 29733
23
+ - method: both
24
+ input: https://www.slash.com/
25
+ artifacts:
26
+ - key: entries/slash/2/strip.webp
27
+ bytes: 266686
28
+ sha256: 619cf5724a05ebe0d6cd5c8e22cda652ec37766df956f1707658c427ffc14340
29
+ uploaded: true
30
+ - key: entries/slash/2/measure.json
31
+ bytes: 6548
32
+ sha256: ed4929e66b3968e4768c1a3a3d08e6cc7c7ed9952a59d8d35228f0858403a5f5
33
+ uploaded: true
34
+ - key: entries/slash/2/screen-1440.png
35
+ bytes: 605022
36
+ sha256: cdff0d4653d05be5c4c527f2e67ab40cb08dce01409f13cc6d90a1e0bd16c6fc
37
+ uploaded: true
38
+ - key: entries/slash/2/screen-390.png
39
+ bytes: 133335
40
+ sha256: 94a547aea228ba003b34402fbf0cfd817cbd6927f85c0014ae99ee003b47a473
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 29733
45
+ roles:
46
+ - hero
47
+ - proof
48
+ - feature
49
+ - capability
50
+ - testimonial
51
+ - offer
52
+ - faq
53
+ - closing
54
+ - footer
55
+ feel:
56
+ - dark
57
+ - premium
58
+ - editorial
59
+ - saas
60
+ - depth
61
+ - minimal
62
+ palette:
63
+ canvas: '#050505'
64
+ ink: '#f2f0ec'
65
+ accent: '#c7a76d'
66
+ type:
67
+ display: high-contrast editorial serif, large scale, tight leading
68
+ body: compact neutral sans, regular weight, restrained measure
69
+ motion:
70
+ devices:
71
+ - reveal
72
+ - pin
73
+ - pan
74
+ - spotlight
75
+ - stagger
76
+ - drift
77
+ notes: >-
78
+ Eyeballed from 36 sampled frames, not measured. The black-on-black product hero uses narrow moving light to reveal
79
+ the card, phone, and stone pedestal while a persistent navigation and announcement rail hold position. Product UI
80
+ panels and customer portraits reveal in measured groups; oversized serif statements arrive between dense capability
81
+ grids, proof metrics, security details, pricing, FAQ, and insight cards. Small interface glows and floating controls
82
+ drift inside panels, but exact pointer tracking, hover response, carousel timing, and reduced-motion behavior are
83
+ not measurable from sampled frames.
84
+ ported_from: null
85
+ ---
86
+
87
+ ## What it does
88
+
89
+ A premium business-banking landing page that treats finance software like a luxury physical product. It combines low-key product photography, editorial serif headlines, and compact interface evidence to position a broad banking platform as controlled, secure, and unusually polished.
90
+
91
+ ## Section roster
92
+
93
+ 1. Funding announcement, compact navigation, sign-in, and start action.
94
+ 2. Dark product hero with email conversion and card-and-phone still life.
95
+ 3. Customer stories and operating metrics.
96
+ 4. Financial-foundation capabilities for treasury and working capital.
97
+ 5. Modern software tools, APIs, virtual accounts, analytics, and transfers.
98
+ 6. Testimonial, aggregate proof, and security architecture.
99
+ 7. Pricing comparison, FAQ, banking insights, closing application prompt, and legal footer.
100
+
101
+ ## Why it works
102
+
103
+ The restrained black field gives every illuminated product fragment authority, while the serif voice differentiates the page from conventional fintech dashboards. Alternating evidence grids and spacious statements keeps a long capability story legible. The cost is a very dark visual system whose product details, focus states, and low-contrast supporting copy need careful accessibility checks.
104
+
105
+ ## Sources
106
+
107
+ - [Refero style page](https://styles.refero.design/style/7c38e84b-aea0-4c8f-b3e9-60b994ee6c6b) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/0af8133f-9c6c-42a2-95c7-fd4f62fe9f90.mp4) supply the complete dark product narrative, capability grids, proof, pricing, FAQ, and closing sequence.
108
+ - The live capture at https://www.slash.com/ supplies the current funding announcement, product positioning, responsive screenshots, and measured layout.
109
+ - The sources agree closely. Trust the recording for intermediate lighting and motion states and the live page for current copy and claims.
110
+
@@ -0,0 +1,107 @@
1
+ ---
2
+ slug: supabase
3
+ title: 'Supabase: dark developer-platform landing'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://supabase.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-22'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: 'https://images.refero.design/styles/refero.design/video/41184fa6-d5a2-44c3-85bf-83d3eccb0c29.mp4'
16
+ artifacts:
17
+ - key: entries/supabase/1/strip.webp
18
+ bytes: 175484
19
+ sha256: 70ee71c9615968c50cfa0d4f40a34bb19223a6c598cfb8b26aa36e60c51d7867
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 18800
23
+ - method: both
24
+ input: https://supabase.com/
25
+ artifacts:
26
+ - key: entries/supabase/2/strip.webp
27
+ bytes: 208636
28
+ sha256: 2e84d50e686c5c9102241af2896ae17dbfbe0641a06a1fc3e8c87a47bfb491e2
29
+ uploaded: true
30
+ - key: entries/supabase/2/measure.json
31
+ bytes: 6924
32
+ sha256: 1327e08dbba9b554f1259f7a0ff3b71a0760433b5dc0cf483b17e3db15a94a36
33
+ uploaded: true
34
+ - key: entries/supabase/2/screen-1440.png
35
+ bytes: 156623
36
+ sha256: 561e65c820539de209782c0efee295f78f918bea0a2674fc6ba8c16891765366
37
+ uploaded: true
38
+ - key: entries/supabase/2/screen-390.png
39
+ bytes: 70318
40
+ sha256: d925ae6a6b39b12b593929875df6dc671ed5cad524fd65688abf142c126694f5
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 18800
45
+ roles:
46
+ - hero
47
+ - capability
48
+ - feature
49
+ - proof
50
+ - testimonial
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - dark
55
+ - cold
56
+ - saas
57
+ - brutalist
58
+ - depth
59
+ - minimal
60
+ palette:
61
+ canvas: '#111111'
62
+ ink: '#ededed'
63
+ accent: '#3ecf8e'
64
+ type:
65
+ display: neutral developer sans, medium weight, compact technical cadence
66
+ body: neutral sans and monospace labels, regular weight, dense product copy
67
+ motion:
68
+ devices:
69
+ - reveal
70
+ - stagger
71
+ - pan
72
+ - tabs
73
+ - stack
74
+ notes: >-
75
+ Eyeballed from 36 sampled frames, not measured. The Refero recording captures an earlier dark homepage where a fixed
76
+ green-accent navigation frames a dense bento grid of database, authentication, storage, realtime, vector, and API
77
+ cards. Cards reveal and brighten in sequence, framework marks pan across a rail, customer logos populate a modular
78
+ proof field, and starter examples stack before a dashboard-led closing chapter. The current live page has shifted to
79
+ a mostly white editorial system with larger product demonstrations and community cards. Exact tab interaction, code
80
+ animation, pointer behavior, and hover response are not measurable from sampled frames.
81
+ ported_from: null
82
+ ---
83
+
84
+ ## What it does
85
+
86
+ A developer-platform landing page that explains a broad backend product through modular capability cards and concrete dashboard evidence. The recorded dark version behaves like an expandable technical map; the current light version keeps the same product breadth but uses larger editorial demonstrations and more open spacing.
87
+
88
+ ## Section roster
89
+
90
+ 1. Event announcement, developer navigation, sign-in, and project action.
91
+ 2. Build-in-a-weekend hero with database-led conversion choices.
92
+ 3. Capability grid for database, authentication, functions, storage, realtime, vectors, and APIs.
93
+ 4. Integrated-platform and framework compatibility proof.
94
+ 5. Dashboard productivity demonstration.
95
+ 6. Production-ready starter templates and industry customer stories.
96
+ 7. Community proof, open-source statement, closing project prompt, and deep footer.
97
+
98
+ ## Why it works
99
+
100
+ The card grid turns a technically broad platform into a system that developers can scan by capability, while code, schema diagrams, and dashboard fragments provide immediate product evidence. The green accent consistently marks action and system state. The cost is high information density: small technical labels and many simultaneous modules require careful hierarchy and responsive simplification.
101
+
102
+ ## Sources
103
+
104
+ - [Refero style page](https://styles.refero.design/style/632249f1-fd78-4c77-9b34-7bae37ff3e9b) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/41184fa6-d5a2-44c3-85bf-83d3eccb0c29.mp4) supply the earlier dark bento system, capability reveals, framework rail, customer grid, starter cards, and dashboard closing.
105
+ - The live capture at https://supabase.com/ supplies the current light redesign, product demonstrations, customer stories, community content, responsive screenshots, and measured layout.
106
+ - The sources represent different visual generations. Trust the live page for current design and content; use the recording as a complete archived reference for the dark modular system.
107
+
@@ -0,0 +1,101 @@
1
+ ---
2
+ slug: t1-energy
3
+ title: 'T1 Energy: industrial solar-manufacturing landing'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://t1energy.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/4004d7ac-01a0-4d61-997c-eace7a73c6da.mp4
16
+ artifacts:
17
+ - key: entries/t1-energy/1/strip.webp
18
+ bytes: 239510
19
+ sha256: 77c2affef2bf720db5b4ba04af9af2b0498220c3fb360d57f45d0bbd9b76d72e
20
+ uploaded: true
21
+ frames: 28
22
+ duration_ms: 13900
23
+ - method: both
24
+ input: https://t1energy.com/
25
+ artifacts:
26
+ - key: entries/t1-energy/2/strip.webp
27
+ bytes: 239052
28
+ sha256: 9269239f0bd86b9e1fa1149e236009ff12357523c9086869f968a1083d2bfa75
29
+ uploaded: true
30
+ - key: entries/t1-energy/2/measure.json
31
+ bytes: 3934
32
+ sha256: 4f9bb0800194671ed97e6daf78a212f0bfdc4b0b63963d99d8ce3cee949b0d3a
33
+ uploaded: true
34
+ - key: entries/t1-energy/2/screen-1440.png
35
+ bytes: 1096127
36
+ sha256: 537b7c6344ee33e8eab0f4579646375183f784c31be750535fcbd51d7c7ab315
37
+ uploaded: true
38
+ - key: entries/t1-energy/2/screen-390.png
39
+ bytes: 266869
40
+ sha256: 451c072166a8b467a82ad4d5860e307e240365f195968cf885f388d9f2f8971c
41
+ uploaded: true
42
+ media:
43
+ frames: 28
44
+ duration_ms: 13900
45
+ roles:
46
+ - hero
47
+ - explainer
48
+ - capability
49
+ - proof
50
+ - feature
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - light
55
+ - minimal
56
+ - editorial
57
+ - cold
58
+ - premium
59
+ palette:
60
+ canvas: '#f5f5f1'
61
+ ink: '#202525'
62
+ accent: '#9ab1b4'
63
+ type:
64
+ display: restrained neutral sans, light weight, generous leading
65
+ body: compact neutral sans, technical editorial measure
66
+ motion:
67
+ devices:
68
+ - reveal
69
+ - pan
70
+ - stagger
71
+ - count
72
+ notes: >-
73
+ Eyeballed from 28 sampled frames, not measured. Factory footage opens the page before white editorial sections
74
+ reveal solar-cell and battery manufacturing details. Product renders pan through a sparse technical grid; large
75
+ financial and capacity figures count into view before project imagery and the footer. Exact video timing, counter
76
+ interpolation, hover response, and reduced-motion behavior are not measurable from sampled frames.
77
+ ported_from: null
78
+ ---
79
+
80
+ ## What it does
81
+
82
+ An industrial energy landing page that grounds a large manufacturing ambition in real facilities, technical products, and measurable capacity. Cool imagery and generous white space make the hardware feel precise rather than abstract.
83
+
84
+ ## Section roster
85
+
86
+ 1. Factory film and Advanced American Solar and Storage hero.
87
+ 2. Manufacturing overview and facility photography.
88
+ 3. Solar-cell and module product chapters.
89
+ 4. Technical renderings and product specifications.
90
+ 5. Investment and production metrics.
91
+ 6. Project imagery, company links, and footer.
92
+
93
+ ## Why it works
94
+
95
+ The factory footage establishes physical credibility immediately, then product renders and metrics explain scale with a calm visual rhythm. The cost is that pale captions and large video assets need careful contrast, compression, and static fallbacks.
96
+
97
+ ## Sources
98
+
99
+ - [Refero style page](https://styles.refero.design/style/e79b761d-f476-4c5d-8943-e31a58664e4d) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/4004d7ac-01a0-4d61-997c-eace7a73c6da.mp4) supply the factory opening, product sequence, metrics, and closing.
100
+ - The live capture at https://t1energy.com/ supplies current positioning, responsive screenshots, and measured layout.
101
+ - The sources agree on the core design; trust the recording for transition continuity and the live page for current announcements and figures.
@@ -0,0 +1,100 @@
1
+ ---
2
+ slug: vana
3
+ title: 'Vana: personal data infrastructure'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.vana.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/a3563017-dcef-4a36-bd07-9f638e3e4fdf.mp4
16
+ artifacts:
17
+ - key: entries/vana/1/strip.webp
18
+ bytes: 129848
19
+ sha256: 3ed79e491c42f46490b0aee20cec99e99b83319c848a2c307b794610e755d7f2
20
+ uploaded: true
21
+ frames: 18
22
+ duration_ms: 8783
23
+ - method: both
24
+ input: https://www.vana.com/
25
+ artifacts:
26
+ - key: entries/vana/2/strip.webp
27
+ bytes: 261970
28
+ sha256: 0a1eb61643cfe6475cb92a903344deb022bb44e30d53b408946a1d14969097d3
29
+ uploaded: true
30
+ - key: entries/vana/2/measure.json
31
+ bytes: 1554
32
+ sha256: ad5962af583cfc2489fee5073cd43acb5a3e6fc3712857381715b0367bc75af2
33
+ uploaded: true
34
+ - key: entries/vana/2/screen-1440.png
35
+ bytes: 509200
36
+ sha256: 35e85bd7c81da6402dc39c9f07100b9174c50ea1c54c38c2b8acbd5f3cf19b12
37
+ uploaded: true
38
+ - key: entries/vana/2/screen-390.png
39
+ bytes: 353891
40
+ sha256: cfda7194da8a0482b9e58a3d40dc06edf62fbe2ed37f9c5bea362c3a8cb004e2
41
+ uploaded: true
42
+ media:
43
+ frames: 18
44
+ duration_ms: 8783
45
+ roles:
46
+ - hero
47
+ - explainer
48
+ - capability
49
+ - feature
50
+ - proof
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - dark
55
+ - cold
56
+ - saas
57
+ - depth
58
+ - premium
59
+ palette:
60
+ canvas: '#090a13'
61
+ ink: '#f1f1fc'
62
+ accent: '#6959ff'
63
+ type:
64
+ display: large neutral sans, tight leading
65
+ body: compact neutral sans, technical data measure
66
+ motion:
67
+ devices:
68
+ - reveal
69
+ - pan
70
+ - stagger
71
+ - spotlight
72
+ notes: >-
73
+ Eyeballed from 18 sampled frames, not measured. The Refero recording opens on a dark globe and purple data points,
74
+ then pans through ownership cards, a developer stack diagram, and a bright protocol chapter. The current site at
75
+ vana.org has a lavender hero and redesigned content grid. Exact map dynamics, card interactions, pointer response,
76
+ and reduced-motion behavior are not measurable from sampled frames.
77
+ ported_from: null
78
+ ---
79
+
80
+ ## What it does
81
+
82
+ An archived data-ownership infrastructure story that argues people should control and reuse the information they create. Dark global imagery and modular cards visualize an otherwise invisible data layer.
83
+
84
+ ## Section roster
85
+
86
+ 1. Dark globe and AI ownership claim.
87
+ 2. Personal data use cases.
88
+ 3. Developer and participation paths.
89
+ 4. Protocol stack diagram.
90
+ 5. Open-data chapter and closing.
91
+
92
+ ## Why it works
93
+
94
+ The globe and layered cards turn a policy-like subject into a spatial system, while a bright final chapter gives the technical story a clear turn. The cost is that abstract imagery and small labels need plain-language support and strong contrast.
95
+
96
+ ## Sources
97
+
98
+ - [Refero style page](https://styles.refero.design/style/2a3cdb2e-effe-406b-932e-37e4dc88ab1d) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/a3563017-dcef-4a36-bd07-9f638e3e4fdf.mp4) supply the sampled motion and section sequence.
99
+ - The live capture at https://vana.org/ supplies current copy, responsive screenshots, and measured layout.
100
+ - The submitted vana.com redirects to vana.org. The live site is a substantial lavender redesign, so trust the recording for this archived dark visual system and vana.org for current positioning.