Skip to content

Commit 2b35153

Browse files
LeadcodeDevLeadcodeDev
authored
docs: add 15s dynamic glassmorphism example (#98)
A 15.0s scenario exercising the wave-3 dynamic-video features: glass cards (backdrop blur + noise grain + gradient-border), hinge 3D flips via transform-origin, spring presets, camera focal zoom, and multi-plane parallax.
1 parent 0d3bb96 commit 2b35153

1 file changed

Lines changed: 294 additions & 0 deletions

File tree

‎examples/dynamic-glass.json‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
{
2+
"version": "1.0",
3+
"video": { "width": 1920, "height": 1080, "fps": 30, "background": "#0a0e1f" },
4+
"backgrounds": {
5+
"deep": { "preset": "concentric_circles", "colors": ["#0a0e1f", "#141b3a", "#0a0e1f"], "speed": 10, "element_size": 1.5, "count": 5, "gradient_type": "radial" }
6+
},
7+
"scenes": [
8+
{
9+
"duration": 5.0,
10+
"background": { "$ref": "deep" },
11+
"effects": [{ "type": "vignette", "intensity": 0.35, "radius": 0.72 }],
12+
"camera": {
13+
"keyframes": [
14+
{ "property": "zoom", "values": [{ "time": 0.0, "value": 1.0 }, { "time": 4.6, "value": 1.14 }], "easing": "ease_in_out" },
15+
{ "property": "origin.x", "values": [{ "time": 0.0, "value": 960 }, { "time": 4.6, "value": 820 }], "easing": "ease_in_out" },
16+
{ "property": "origin.y", "values": [{ "time": 0.0, "value": 540 }, { "time": 4.6, "value": 470 }], "easing": "ease_in_out" }
17+
]
18+
},
19+
"children": [
20+
{
21+
"type": "div",
22+
"position": "absolute", "x": 0, "y": 0,
23+
"style": { "width": 1920, "height": 1080, "depth": 0.25 },
24+
"children": [
25+
{
26+
"type": "particle",
27+
"particle_type": "halo",
28+
"count": 9,
29+
"colors": ["#22d3ee", "#8b5cf6"],
30+
"size_range": { "min": 60, "max": 140 },
31+
"seed": 11,
32+
"position": "absolute", "x": 0, "y": 0
33+
}
34+
]
35+
},
36+
{
37+
"type": "div",
38+
"position": "absolute", "x": 0, "y": 0,
39+
"style": {
40+
"width": 1920, "height": 1080, "depth": 1.0,
41+
"align-items": "center", "justify-content": "center"
42+
},
43+
"children": [
44+
{
45+
"type": "card",
46+
"style": {
47+
"width": 900, "height": 380,
48+
"background": "#FFFFFF0d",
49+
"border-radius": 28,
50+
"backdrop-filter": [
51+
{ "fn": "blur", "radius": 16 },
52+
{ "fn": "noise", "intensity": 0.10, "seed": 7 }
53+
],
54+
"gradient-border": { "colors": ["#22d3ee", "#8b5cf6", "#22d3ee"], "width": 1.5, "angle": 120 },
55+
"flex-direction": "column", "align-items": "center", "justify-content": "center", "gap": 22,
56+
"animation": [{ "name": "fade_in_up", "duration": 0.9, "spring": { "damping": 10, "stiffness": 110 } }]
57+
},
58+
"children": [
59+
{
60+
"type": "gradient_text",
61+
"content": "Depth is real",
62+
"colors": ["#67e8f9", "#a78bfa"],
63+
"angle": 100,
64+
"style": { "font-size": 96, "font-weight": "bold" }
65+
},
66+
{
67+
"type": "text",
68+
"content": "Glass, grain, springs and a camera that looks where you point.",
69+
"style": {
70+
"font-size": 34, "color": "#94a3b8", "text-align": "center",
71+
"animation": [{ "name": "fade_in_up", "delay": 0.35, "duration": 0.7, "spring": { "damping": 12, "stiffness": 100 } }]
72+
}
73+
}
74+
]
75+
}
76+
]
77+
},
78+
{
79+
"type": "div",
80+
"position": "absolute", "x": 0, "y": 0,
81+
"style": { "width": 1920, "height": 1080, "depth": 1.6 },
82+
"children": [
83+
{
84+
"type": "shape",
85+
"shape": "circle",
86+
"fill": "#22d3ee",
87+
"position": "absolute", "x": 320, "y": 210,
88+
"style": {
89+
"width": 26, "height": 26, "opacity": 0.85,
90+
"animation": [
91+
{ "name": "fade_in", "delay": 0.6, "duration": 0.5 },
92+
{ "name": "wiggle", "property": "translate_x", "amplitude": 14, "frequency": 0.45, "seed": 3 },
93+
{ "name": "wiggle", "property": "translate_y", "amplitude": 10, "frequency": 0.45, "seed": 3 }
94+
]
95+
}
96+
},
97+
{
98+
"type": "shape",
99+
"shape": "circle",
100+
"fill": "#a78bfa",
101+
"position": "absolute", "x": 1540, "y": 780,
102+
"style": {
103+
"width": 36, "height": 36, "opacity": 0.8,
104+
"animation": [
105+
{ "name": "fade_in", "delay": 0.8, "duration": 0.5 },
106+
{ "name": "wiggle", "property": "translate_x", "amplitude": 18, "frequency": 0.4, "seed": 21 },
107+
{ "name": "wiggle", "property": "translate_y", "amplitude": 12, "frequency": 0.4, "seed": 21 }
108+
]
109+
}
110+
}
111+
]
112+
}
113+
]
114+
},
115+
{
116+
"duration": 5.6,
117+
"transition": { "type": "dissolve", "duration": 0.6 },
118+
"background": { "$ref": "deep" },
119+
"camera": {
120+
"keyframes": [
121+
{ "property": "zoom", "values": [{ "time": 1.8, "value": 1.0 }, { "time": 5.1, "value": 1.18 }], "easing": "ease_in_out" },
122+
{ "property": "origin.x", "values": [{ "time": 1.8, "value": 960 }, { "time": 5.1, "value": 1300 }], "easing": "ease_in_out" },
123+
{ "property": "origin.y", "values": [{ "time": 0.0, "value": 540 }] }
124+
]
125+
},
126+
"layout": { "align_items": "center", "justify_content": "center", "gap": 40, "direction": "row" },
127+
"children": [
128+
{
129+
"type": "shape",
130+
"shape": "circle",
131+
"fill": "#22d3ee",
132+
"position": "absolute", "x": 420, "y": 300,
133+
"style": { "width": 380, "height": 380, "opacity": 0.22, "filter": [{ "fn": "blur", "radius": 90 }] }
134+
},
135+
{
136+
"type": "shape",
137+
"shape": "circle",
138+
"fill": "#8b5cf6",
139+
"position": "absolute", "x": 1150, "y": 480,
140+
"style": { "width": 420, "height": 420, "opacity": 0.22, "filter": [{ "fn": "blur", "radius": 90 }] }
141+
},
142+
{
143+
"type": "card",
144+
"style": {
145+
"width": 560, "height": 460,
146+
"background": "#FFFFFF0a",
147+
"border-radius": 24,
148+
"backdrop-filter": [{ "fn": "blur", "radius": 12 }, { "fn": "noise", "intensity": 0.08, "seed": 13 }],
149+
"gradient-border": { "colors": ["#22d3ee", "#0e7490"], "width": 1.5, "angle": 90 },
150+
"transform-origin": { "x": "0%", "y": "50%" },
151+
"perspective": 900,
152+
"flex-direction": "column", "align-items": "center", "justify-content": "center", "gap": 18,
153+
"animation": [{ "name": "flip_in_y", "duration": 1.1, "spring": { "damping": 9, "stiffness": 85 } }]
154+
},
155+
"children": [
156+
{ "type": "icon", "icon": "lucide:door-open", "style": { "width": 72, "height": 72, "color": "#67e8f9" } },
157+
{ "type": "text", "content": "Hinge from the left", "style": { "font-size": 44, "color": "#F8FAFC", "font-weight": "bold", "text-align": "center" } },
158+
{ "type": "text", "content": "transform-origin: 0% 50%", "style": { "font-size": 26, "color": "#64748b", "font-family": "JetBrains Mono", "text-align": "center" } }
159+
]
160+
},
161+
{
162+
"type": "card",
163+
"style": {
164+
"width": 560, "height": 460,
165+
"background": "#FFFFFF0a",
166+
"border-radius": 24,
167+
"backdrop-filter": [{ "fn": "blur", "radius": 12 }, { "fn": "noise", "intensity": 0.08, "seed": 29 }],
168+
"gradient-border": { "colors": ["#a78bfa", "#6d28d9"], "width": 1.5, "angle": 90 },
169+
"transform-origin": { "x": "100%", "y": "50%" },
170+
"perspective": 900,
171+
"flex-direction": "column", "align-items": "center", "justify-content": "center", "gap": 18,
172+
"animation": [{ "name": "flip_in_y", "delay": 0.25, "duration": 1.1, "spring": { "damping": 9, "stiffness": 85 } }]
173+
},
174+
"children": [
175+
{ "type": "icon", "icon": "lucide:door-closed", "style": { "width": 72, "height": 72, "color": "#c4b5fd" } },
176+
{ "type": "text", "content": "Hinge from the right", "style": { "font-size": 44, "color": "#F8FAFC", "font-weight": "bold", "text-align": "center" } },
177+
{ "type": "text", "content": "transform-origin: 100% 50%", "style": { "font-size": 26, "color": "#64748b", "font-family": "JetBrains Mono", "text-align": "center" } }
178+
]
179+
}
180+
]
181+
},
182+
{
183+
"duration": 5.5,
184+
"transition": { "type": "fade", "duration": 0.5 },
185+
"background": { "$ref": "deep" },
186+
"effects": [
187+
{ "type": "grain", "intensity": 0.05 },
188+
{ "type": "vignette", "intensity": 0.4, "radius": 0.7 }
189+
],
190+
"camera": {
191+
"keyframes": [
192+
{ "property": "x", "values": [{ "time": 0.0, "value": -50 }, { "time": 5.1, "value": 50 }], "easing": "ease_in_out" },
193+
{ "property": "zoom", "values": [{ "time": 0.0, "value": 1.1 }, { "time": 5.1, "value": 1.0 }], "easing": "ease_out" },
194+
{ "property": "origin.x", "values": [{ "time": 0.0, "value": 760 }, { "time": 5.1, "value": 1160 }], "easing": "ease_in_out" }
195+
]
196+
},
197+
"children": [
198+
{
199+
"type": "div",
200+
"position": "absolute", "x": 0, "y": 0,
201+
"style": {
202+
"width": 1920, "height": 1080, "depth": 0.3,
203+
"align-items": "center", "justify-content": "center"
204+
},
205+
"children": [
206+
{
207+
"type": "text",
208+
"content": "DYNAMIC",
209+
"style": {
210+
"font-size": 300, "font-weight": "bold", "color": "#182349",
211+
"letter-spacing": 24, "text-align": "center",
212+
"animation": [{ "name": "fade_in", "duration": 1.0 }]
213+
}
214+
}
215+
]
216+
},
217+
{
218+
"type": "div",
219+
"position": "absolute", "x": 0, "y": 0,
220+
"style": {
221+
"width": 1920, "height": 1080, "depth": 1.0,
222+
"flex-direction": "row", "align-items": "center", "justify-content": "center", "gap": 48
223+
},
224+
"children": [
225+
{
226+
"type": "card",
227+
"style": {
228+
"width": 400, "height": 240,
229+
"background": "#FFFFFF0d", "border-radius": 22,
230+
"backdrop-filter": [{ "fn": "blur", "radius": 14 }, { "fn": "noise", "intensity": 0.09, "seed": 5 }],
231+
"gradient-border": { "colors": ["#22d3ee", "#8b5cf6"], "width": 1.5, "angle": 135 },
232+
"flex-direction": "column", "align-items": "center", "justify-content": "center", "gap": 12,
233+
"animation": [{ "name": "scale_in", "delay": 0.4, "duration": 0.8, "spring": { "damping": 8, "stiffness": 130 } }]
234+
},
235+
"children": [
236+
{ "type": "text", "content": "Parallax", "style": { "font-size": 52, "color": "#F8FAFC", "font-weight": "bold" } },
237+
{ "type": "text", "content": "planes follow the camera", "style": { "font-size": 26, "color": "#94a3b8" } }
238+
]
239+
},
240+
{
241+
"type": "card",
242+
"style": {
243+
"width": 400, "height": 240,
244+
"background": "#FFFFFF0d", "border-radius": 22,
245+
"backdrop-filter": [{ "fn": "blur", "radius": 14 }, { "fn": "noise", "intensity": 0.09, "seed": 17 }],
246+
"gradient-border": { "colors": ["#a78bfa", "#22d3ee"], "width": 1.5, "angle": 45 },
247+
"flex-direction": "column", "align-items": "center", "justify-content": "center", "gap": 12,
248+
"animation": [{ "name": "scale_in", "delay": 0.6, "duration": 0.8, "spring": { "damping": 8, "stiffness": 130 } }]
249+
},
250+
"children": [
251+
{ "type": "text", "content": "15 seconds", "style": { "font-size": 52, "color": "#F8FAFC", "font-weight": "bold" } },
252+
{ "type": "text", "content": "pure Rust, no browser", "style": { "font-size": 26, "color": "#94a3b8" } }
253+
]
254+
}
255+
]
256+
},
257+
{
258+
"type": "div",
259+
"position": "absolute", "x": 0, "y": 0,
260+
"style": { "width": 1920, "height": 1080, "depth": 1.8 },
261+
"children": [
262+
{
263+
"type": "shape",
264+
"shape": "rounded_rect",
265+
"fill": { "type": "linear", "colors": ["#22d3ee", "#8b5cf6"], "angle": 135 },
266+
"position": "absolute", "x": 250, "y": 840,
267+
"style": {
268+
"width": 70, "height": 70, "border-radius": 18, "opacity": 0.9,
269+
"animation": [
270+
{ "name": "fade_in", "delay": 1.0, "duration": 0.5 },
271+
{ "name": "wiggle", "property": "translate_y", "amplitude": 12, "frequency": 0.5, "seed": 8 }
272+
]
273+
}
274+
},
275+
{
276+
"type": "shape",
277+
"shape": "circle",
278+
"fill": "#67e8f9",
279+
"position": "absolute", "x": 1620, "y": 190,
280+
"style": {
281+
"width": 30, "height": 30, "opacity": 0.85,
282+
"animation": [
283+
{ "name": "fade_in", "delay": 1.2, "duration": 0.5 },
284+
{ "name": "wiggle", "property": "translate_x", "amplitude": 16, "frequency": 0.45, "seed": 31 },
285+
{ "name": "wiggle", "property": "translate_y", "amplitude": 10, "frequency": 0.45, "seed": 31 }
286+
]
287+
}
288+
}
289+
]
290+
}
291+
]
292+
}
293+
]
294+
}

0 commit comments

Comments
 (0)