@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,107 @@
1
+ ---
2
+ slug: aker
3
+ title: 'Aker: cinematic residential-investment studio'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.akercompanies.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-23'
12
+ tool: wp-design-library@1.2.0
13
+ captures:
14
+ - method: frames
15
+ input: https://images.refero.design/styles/refero.design/video/fff73d97-64d2-4b95-8cf6-cc4e24af623c.mp4
16
+ artifacts:
17
+ - key: entries/aker/1/strip.webp
18
+ bytes: 223940
19
+ sha256: 83fc23e6109127f391e7a72f807888f4c16812a809910cf41cedeb4a0fbe253a
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 22467
23
+ - method: both
24
+ input: https://www.akercompanies.com/
25
+ artifacts:
26
+ - key: entries/aker/2/strip.webp
27
+ bytes: 214012
28
+ sha256: 5904f6a762384b65617adc784bbb6db03595146af9ab244844f27ab6c5220f28
29
+ uploaded: true
30
+ - key: entries/aker/2/measure.json
31
+ bytes: 4981
32
+ sha256: cbba7b1dd33b7880ffa64f471467badfa7c99f9ef1f2107458aeae1920d439dc
33
+ uploaded: true
34
+ - key: entries/aker/2/screen-1440.png
35
+ bytes: 1313749
36
+ sha256: 15a194bea8ddc2ef5327f6b39816a975c946579403015f8a556d919863c47225
37
+ uploaded: true
38
+ - key: entries/aker/2/screen-390.png
39
+ bytes: 2741
40
+ sha256: 058b5ae0c275794b25637473cff2e0bbcb1de7cc97a1d95f47606b5ba6b55470
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 22467
45
+ roles:
46
+ - hero
47
+ - explainer
48
+ - capability
49
+ - feature
50
+ - proof
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - light
55
+ - dark
56
+ - premium
57
+ - editorial
58
+ - minimal
59
+ - warm
60
+ - depth
61
+ palette:
62
+ canvas: '#f4f4ef'
63
+ ink: '#111111'
64
+ accent: '#b85a2b'
65
+ type:
66
+ display: oversized neutral sans, medium weight, restrained tracking
67
+ body: compact neutral sans, regular weight, editorial measure
68
+ motion:
69
+ devices:
70
+ - reveal
71
+ - pan
72
+ - parallax
73
+ - stagger
74
+ - spotlight
75
+ notes: >-
76
+ Eyeballed from 36 sampled frames, not measured. Cinematic landscape footage crossfades beneath the opening wordmark
77
+ before a small preview-card rail introduces the portfolio. White editorial chapters reveal the investment thesis, a
78
+ dark map pans through regional holdings, and modular green, rust, and black criteria panels stagger into view.
79
+ Circular team crops, work cards, and oversized metrics close the story with controlled changes of scale. Exact film
80
+ timing, map hover behavior, card interactions, pointer response, and reduced-motion behavior are not measurable from
81
+ sampled frames.
82
+ ported_from: null
83
+ ---
84
+
85
+ ## What it does
86
+
87
+ A cinematic residential-investment landing page that moves from landscape and place into an evidence-led account of strategy, portfolio, and team. Filmic imagery creates atmosphere while restrained editorial modules explain where Aker invests and how it evaluates opportunities.
88
+
89
+ ## Section roster
90
+
91
+ 1. Minimal navigation and landscape-film hero with oversized Aker wordmark.
92
+ 2. Introduction to the company and a compact preview-card rail.
93
+ 3. Investment thesis with residential imagery and concise operating principles.
94
+ 4. Dark regional map showing where the company invests.
95
+ 5. Criteria grid covering supply-constrained markets, transportation access, and urban connections.
96
+ 6. Work portfolio with project imagery and circular feature crops.
97
+ 7. Platform, team, scale metrics, collaboration prompt, and footer.
98
+
99
+ ## Why it works
100
+
101
+ The opening film establishes a strong sense of place before the page shifts into quiet, legible investment evidence. Deep green, rust, and black panels turn evaluation criteria into a memorable system, while the regional map and large metrics make scale concrete. The cost is that atmospheric footage and map-led storytelling require careful compression, contrast, and static fallbacks to remain clear on slower connections and small screens.
102
+
103
+ ## Sources
104
+
105
+ - [Refero style page](https://styles.refero.design/style/4aa6d64c-fa61-4b21-8ad6-3d7130ed5161) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/fff73d97-64d2-4b95-8cf6-cc4e24af623c.mp4) supply the hero film, preview rail, investment chapters, map, criteria panels, portfolio, team, metrics, and closing sequence.
106
+ - The live capture at https://www.akercompanies.com/ supplies the current copy, responsive screenshots, and measured layout.
107
+ - The sources agree closely. Trust the recording for continuous film and transition timing and the live page for current portfolio information.
@@ -0,0 +1,105 @@
1
+ ---
2
+ slug: amrit-palace
3
+ title: 'Amrit Palace: heritage restaurant landing'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://amritpalace.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/e03feb1c-a12b-4575-a4a0-bdbd2bc8be65.mp4'
16
+ artifacts:
17
+ - key: entries/amrit-palace/1/strip.webp
18
+ bytes: 316050
19
+ sha256: ac96ec94df849bc96aa3dbba18c2f56612530e4592eaebc116687a3f6d49dc46
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 29233
23
+ - method: both
24
+ input: https://amritpalace.com/
25
+ artifacts:
26
+ - key: entries/amrit-palace/2/strip.webp
27
+ bytes: 314434
28
+ sha256: 01a1b5abb7843daca9cc0881255b733f36ae5dae0eb311eb6ff6553b533742b2
29
+ uploaded: true
30
+ - key: entries/amrit-palace/2/measure.json
31
+ bytes: 2191
32
+ sha256: 566f71d57694d3751ff24ee8124c457c879bbe31161613ce53fb6f672c4d3ece
33
+ uploaded: true
34
+ - key: entries/amrit-palace/2/screen-1440.png
35
+ bytes: 1150664
36
+ sha256: ef9c6064fdeadbad932e98bec06d8ab54975b591faf752ea6d686b4e8bdb01e1
37
+ uploaded: true
38
+ - key: entries/amrit-palace/2/screen-390.png
39
+ bytes: 45432
40
+ sha256: b426c9d2601ec042a1d8825750bd02b95159fcecc662628ade3143c0f1faa053
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 29233
45
+ roles:
46
+ - hero
47
+ - explainer
48
+ - offer
49
+ - capability
50
+ - testimonial
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - warm
55
+ - premium
56
+ - editorial
57
+ - depth
58
+ - light
59
+ palette:
60
+ canvas: '#d8cbb8'
61
+ ink: '#2c241c'
62
+ accent: '#d99547'
63
+ type:
64
+ display: high-contrast editorial serif, light weight, generous scale
65
+ body: compact neutral sans, regular weight, restrained tracking
66
+ motion:
67
+ devices:
68
+ - reveal
69
+ - pan
70
+ - wipe
71
+ - parallax
72
+ - stagger
73
+ notes: >-
74
+ Eyeballed from 36 sampled frames, not measured. The restaurant hero reveals over a dim dining-room photograph while
75
+ the review card and reservation controls remain anchored; a food-film panel then pans into a split menu where the
76
+ saffron list and editorial description wipe past one another. Catering images stagger across a cream field, drink
77
+ photography slides through narrow crops, gift cards drift over open space, and the rooted-in-experience room
78
+ photograph leads into testimonial columns and the closing wordmark. Hover, menu-toggle, and reservation
79
+ microinteractions cannot be determined from sampled frames.
80
+ ported_from: null
81
+ ---
82
+
83
+ ## What it does
84
+
85
+ Amrit Palace presents a long-running Indian restaurant through cinematic dining photography, an editorial menu, catering and drinks stories, gift cards, room atmosphere, guest reviews, and location details.
86
+
87
+ ## Section roster
88
+
89
+ 1. Dining-room hero with heritage claim, review proof, and reservation action.
90
+ 2. Food-film explainer introducing the spirit of Indian dining.
91
+ 3. Split signature-menu offer with dish descriptions and imagery.
92
+ 4. Catering capability and buffet/service proof.
93
+ 5. Drinks and experience photography.
94
+ 6. Gift-card offer and rooted-in-experience brand story.
95
+ 7. Guest testimonials, locations, contact details, and oversized close.
96
+
97
+ ## Why it works
98
+
99
+ The warm photography and high-contrast serif make heritage feel specific rather than nostalgic, while menu and reservation actions stay practical within the editorial pacing. The cost to weigh is that layered imagery and large whitespace can lengthen the path to basic menu and location information.
100
+
101
+ ## Sources
102
+
103
+ - The [Refero style page](https://styles.refero.design/style/b753dfda-cbe1-41e4-b341-b98d69c8422f) and its MP4 supply the full editorial scroll, split-menu transitions, food-image pans, and sequence into testimonials and the closing wordmark.
104
+ - The live capture at https://amritpalace.com/ supplies the current menu content, review score, reservation actions, locations, responsive screenshots, and measured layout.
105
+ - The sources agree closely; the live page is trusted for current restaurant information and the recording for continuous image movement between sampled scroll stops.
@@ -0,0 +1,110 @@
1
+ ---
2
+ slug: apple-airpods-5
3
+ title: 'Apple AirPods 5: cinematic product story'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.apple.com/airpods-5/
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/fd83566c-99bc-4b2b-b4bf-830026634d52.mp4'
16
+ artifacts:
17
+ - key: entries/apple-airpods-5/1/strip.webp
18
+ bytes: 192580
19
+ sha256: e817caf05a151cf522820cafe3727af6c6610d1a80c213c4411b2908405182ef
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 34583
23
+ - method: both
24
+ input: https://www.apple.com/airpods-5/
25
+ artifacts:
26
+ - key: entries/apple-airpods-5/2/strip.webp
27
+ bytes: 113348
28
+ sha256: 09d0ebe4e17ae0b0619598d63850080bcc17c2b886887ff41d95feca699b0393
29
+ uploaded: true
30
+ - key: entries/apple-airpods-5/2/measure.json
31
+ bytes: 4866
32
+ sha256: 7d53055986c597a7b7dd7d2751910d7e1242480c414688060704c75dc32e9ff1
33
+ uploaded: true
34
+ - key: entries/apple-airpods-5/2/screen-1440.png
35
+ bytes: 291119
36
+ sha256: f110cf8e2faa47e41e62fc67b7abbaa7bdd34995677842dd8f59b5fe14c8eab5
37
+ uploaded: true
38
+ - key: entries/apple-airpods-5/2/screen-390.png
39
+ bytes: 132146
40
+ sha256: e3dfd04e89e64bba8297748be26567a5e0e4dc9562139fe1b086c624e4565d9d
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 34583
45
+ roles:
46
+ - hero
47
+ - feature
48
+ - explainer
49
+ - proof
50
+ - offer
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - dark
55
+ - light
56
+ - premium
57
+ - minimal
58
+ - depth
59
+ - playful
60
+ palette:
61
+ canvas: '#ffffff'
62
+ ink: '#111111'
63
+ accent: '#bf42e9'
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
+ - stack
76
+ notes: >-
77
+ Eyeballed from 36 sampled frames, not measured. A dancer-led hero shifts from amber to violet through full-bleed
78
+ video before the page opens into a white highlight rail. Product renders rotate and scale on pale stages; deep
79
+ purple feature chapters use expanding concentric light, silhouettes, horizontal card stacks, and cinematic color
80
+ wipes. Pink ecosystem and green charging chapters arrive as full-width tonal changes before the page resolves into
81
+ comparison and commerce. Live automated scrolling captures some pinned transitions as blank or partially resolved
82
+ frames, so the Refero recording is the more reliable motion source; exact scrub mapping, media playback, controls,
83
+ and reduced-motion behavior are not measurable.
84
+ ported_from: null
85
+ ---
86
+
87
+ ## What it does
88
+
89
+ A cinematic consumer-product story that makes active noise cancellation feel physical. Dance, light, color, and large-scale product renders carry the emotional claim; concise technical chapters then translate that feeling into audio, connection, charging, and ecosystem benefits.
90
+
91
+ ## Section roster
92
+
93
+ 1. Global navigation and pinned AirPods product rail.
94
+ 2. Full-bleed dancer hero moving between amber, blue, and violet light.
95
+ 3. Highlight media card and closer-look product stage.
96
+ 4. Noise-cancellation chapter with silhouettes and blue motion fields.
97
+ 5. Audio-performance chapter with concentric purple light and feature-card stack.
98
+ 6. Spatial-audio and seamless-experience chapters in dark violet and pink.
99
+ 7. Connection, translation, charging, environmental, comparison, and commerce sections.
100
+
101
+ ## Why it works
102
+
103
+ The page gives each product benefit a distinct light environment, so abstract audio features become recognizable visual chapters. Minimal copy, aggressive scale, and pinned transitions keep the device central while dancers provide energy and human context. The cost is a media-heavy scroll system that needs robust loading, reduced-motion support, and meaningful fallbacks when pinned scenes do not resolve.
104
+
105
+ ## Sources
106
+
107
+ - [Refero style page](https://styles.refero.design/style/cfcd001c-e812-4126-9bdf-1f16b68d182e) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/fd83566c-99bc-4b2b-b4bf-830026634d52.mp4) supply the complete dancer hero, color transitions, product stages, feature-card stack, ecosystem chapters, and commerce handoff.
108
+ - The live capture at https://www.apple.com/airpods-5/ supplies current product copy, responsive screenshots, measured layout, and the current hero state.
109
+ - The live scroll-stop capture misses several pinned media states and records blank transition frames. Trust the Refero recording for motion continuity and the live page for current content and final static assets.
110
+
@@ -0,0 +1,106 @@
1
+ ---
2
+ slug: apple-airpods-pro
3
+ title: 'Apple AirPods Pro 3: immersive product-story landing'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.apple.com/airpods-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/a9f9e89b-57ea-487f-b977-b20dd3010bf2.mp4
16
+ artifacts:
17
+ - key: entries/apple-airpods-pro/1/strip.webp
18
+ bytes: 191538
19
+ sha256: 59020f541e8ed5753ae511c40d68df536b991e0a0b3220e125dba805b2fe51f0
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 21200
23
+ - method: both
24
+ input: https://www.apple.com/airpods-pro
25
+ artifacts:
26
+ - key: entries/apple-airpods-pro/2/strip.webp
27
+ bytes: 135852
28
+ sha256: 7a8a1000e8da5a2a5586d938260f709ecb0a454c0098be712f0efe85958e0c7b
29
+ uploaded: true
30
+ - key: entries/apple-airpods-pro/2/measure.json
31
+ bytes: 8999
32
+ sha256: 670e6369b21851363b34e354b83917dc995087ec37d3faee4b6dad6f58b21010
33
+ uploaded: true
34
+ - key: entries/apple-airpods-pro/2/screen-1440.png
35
+ bytes: 198419
36
+ sha256: fa4fca63ed0d3ad0afe069fa84d9dcaa6ddd67ca3185c0ca9784294bbce68dee
37
+ uploaded: true
38
+ - key: entries/apple-airpods-pro/2/screen-390.png
39
+ bytes: 122713
40
+ sha256: de917462cdc8a6a6c5c581531d9fa4ecdde4fc69cab4b2d9c7b9ee878e8bc9d4
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 21200
45
+ roles:
46
+ - hero
47
+ - feature
48
+ - explainer
49
+ - proof
50
+ - offer
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - light
55
+ - premium
56
+ - minimal
57
+ - depth
58
+ - cold
59
+ palette:
60
+ canvas: '#ffffff'
61
+ ink: '#111111'
62
+ accent: '#1878d2'
63
+ type:
64
+ display: large neutral product sans, bold weight, tight tracking
65
+ body: neutral system sans, concise product measure
66
+ motion:
67
+ devices:
68
+ - reveal
69
+ - pan
70
+ - pin
71
+ - wipe
72
+ - parallax
73
+ - stack
74
+ notes: >-
75
+ Eyeballed from 36 sampled frames, not measured. Earbuds and acoustic waveforms fill the white opening; pinned
76
+ close-ups pan across the shell, ear tips, and internal hardware. Large black silhouettes and rainbow sound trails
77
+ wipe between noise cancellation, spatial audio, hearing, and fitness chapters before the product returns to a clean
78
+ commerce view. The live automated scroll shows some blank intermediate pinned states; the recording is more reliable
79
+ for their order. Exact scrub timing, video playback, pointer response, and reduced-motion behavior are not
80
+ measurable from sampled frames.
81
+ ported_from: null
82
+ ---
83
+
84
+ ## What it does
85
+
86
+ An immersive AirPods Pro 3 product story that moves from a simple product promise into acoustic, health, and hardware benefits. Precise white product renders and large black silhouette scenes give technical claims clear visual chapters.
87
+
88
+ ## Section roster
89
+
90
+ 1. Product navigation, price, and noise-cancellation hero.
91
+ 2. Highlight film and acoustic demonstration.
92
+ 3. Earbud close-ups and redesigned fit.
93
+ 4. Active Noise Cancellation and spatial-audio chapters.
94
+ 5. Heart-rate sensing and hearing-health features.
95
+ 6. Battery life, connectivity, and product details.
96
+ 7. Comparison, purchase action, and footer.
97
+
98
+ ## Why it works
99
+
100
+ The restrained white field makes tiny hardware details legible, while dramatic sound trails translate invisible audio effects into a clear visual idea. Large scene changes keep a long feature list understandable. The cost is a media-heavy pinned experience that needs reliable loading and accessible static fallbacks.
101
+
102
+ ## Sources
103
+
104
+ - [Refero style page](https://styles.refero.design/style/022cf675-42d1-44e7-953a-68facc802117) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/a9f9e89b-57ea-487f-b977-b20dd3010bf2.mp4) supply the product, sound, hearing, and closing motion sequence.
105
+ - The live capture at https://www.apple.com/airpods-pro/ supplies current AirPods Pro 3 details, responsive screenshots, and measured layout.
106
+ - The live scroll capture misses some pinned transition states. Trust the recording for the complete sequence and the live page for current claims and pricing.
@@ -0,0 +1,107 @@
1
+ ---
2
+ slug: apple-watch-se-3
3
+ title: 'Apple Watch SE 3: playful product story'
4
+ tier: inspiration
5
+ source:
6
+ kind: public-site
7
+ url: https://www.apple.com/apple-watch-se-3/
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/b40d2c44-ce44-4a09-8008-f58c6308935e.mp4'
16
+ artifacts:
17
+ - key: entries/apple-watch-se-3/1/strip.webp
18
+ bytes: 258734
19
+ sha256: 8dab26009f7fb1587a25a53f405435425c2836fde1c794c8e55639e0b8416eda
20
+ uploaded: true
21
+ frames: 36
22
+ duration_ms: 20183
23
+ - method: both
24
+ input: https://www.apple.com/apple-watch-se-3/
25
+ artifacts:
26
+ - key: entries/apple-watch-se-3/2/strip.webp
27
+ bytes: 196504
28
+ sha256: 4e7bb7e2061dc639262b31c78b21f747ecc6670388184b741d2c50b71d74a63e
29
+ uploaded: true
30
+ - key: entries/apple-watch-se-3/2/measure.json
31
+ bytes: 10191
32
+ sha256: 298a58b056191f27addd4c5757939d23b71467f300a42f47666e1680864c4fc4
33
+ uploaded: true
34
+ - key: entries/apple-watch-se-3/2/screen-1440.png
35
+ bytes: 303989
36
+ sha256: 7bd3d84ea9fa20cf53811908d4130bedac8ef5d8cd3943262f1fef5b5910e0d9
37
+ uploaded: true
38
+ - key: entries/apple-watch-se-3/2/screen-390.png
39
+ bytes: 204723
40
+ sha256: 763216e5229cdf8ffe5e7e798071bcf7dcacace6a1edd922eab54616ab4f24cf
41
+ uploaded: true
42
+ media:
43
+ frames: 36
44
+ duration_ms: 20183
45
+ roles:
46
+ - hero
47
+ - feature
48
+ - explainer
49
+ - proof
50
+ - offer
51
+ - closing
52
+ - footer
53
+ feel:
54
+ - light
55
+ - playful
56
+ - premium
57
+ - minimal
58
+ - depth
59
+ palette:
60
+ canvas: '#ffffff'
61
+ ink: '#111111'
62
+ accent: '#86f700'
63
+ type:
64
+ display: neutral product sans, bold weight, tight tracking
65
+ body: neutral system sans, regular weight, compact product copy
66
+ motion:
67
+ devices:
68
+ - reveal
69
+ - pin
70
+ - pan
71
+ - wipe
72
+ - parallax
73
+ - stack
74
+ notes: >-
75
+ Eyeballed from 36 sampled frames, not measured. Multiple watches and colorful app symbols fan into the white hero,
76
+ then a highlight rail and closer-look stage isolate large product renders. Scroll-linked watch faces pan and scale
77
+ through health, safety, and communication chapters while lavender text fields, oversized neon-green activity
78
+ circles, and stacked fitness cards create strong tonal changes. Live automated scrolling leaves some pinned
79
+ transitions pale or partially resolved, so the Refero recording is the more reliable motion source; exact scrub
80
+ mapping, media controls, pointer response, and reduced-motion behavior are not measurable.
81
+ ported_from: null
82
+ ---
83
+
84
+ ## What it does
85
+
86
+ A playful entry-level smartwatch product story built around movement, communication, and approachable health features. Bright bands, app symbols, oversized activity icons, and concise claims make the device feel energetic while the white canvas keeps a broad feature set easy to scan.
87
+
88
+ ## Section roster
89
+
90
+ 1. Global navigation, education promotion, and pinned product rail.
91
+ 2. Multi-watch hero with colorful app-symbol orbit and purchase action.
92
+ 3. Highlight media rail and closer-look product stage.
93
+ 4. Health chapter with watch-face demonstrations and lavender fields.
94
+ 5. Safety and communication features with large product renders.
95
+ 6. Neon-green fitness chapter and stacked workout examples.
96
+ 7. Personalization, comparison, environmental, offer, and commerce footer content.
97
+
98
+ ## Why it works
99
+
100
+ The white field gives colorful bands, icons, and screens maximum clarity, while each major benefit receives a distinct visual chapter. Large renders and short copy keep technical features accessible to a broad audience. The cost is a media-heavy pinned experience that needs reliable loading, reduced-motion support, and static fallbacks when scroll-linked scenes do not resolve.
101
+
102
+ ## Sources
103
+
104
+ - [Refero style page](https://styles.refero.design/style/569ba4c0-0431-44fb-92df-0dbea7f3e63d) and its [recorded MP4](https://images.refero.design/styles/refero.design/video/b40d2c44-ce44-4a09-8008-f58c6308935e.mp4) supply the complete hero fan, highlight rail, closer-look stage, health chapters, activity circles, fitness cards, and closing sequence.
105
+ - The live capture at https://www.apple.com/apple-watch-se-3/ supplies current copy, education offer, responsive screenshots, and measured layout.
106
+ - The live scroll-stop capture misses some pinned media states. Trust the Refero recording for motion continuity and the live page for current product information.
107
+
@@ -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.