swadhin / vidolib public

swadhinbiswas

[email protected]
2026-07-24 22:49:49 +0600 committed NaN years ago
4b5d423
commit 4b5d423
3 files changed
+264 -68
Showing 3 changed files+264-68
README.mddocs/assets/vido-footer.svgdocs/assets/vido-header.svg
▼README.md
+1-1
@@ -1,6 +1,6 @@
1
1
<div align="center">
2
2
3
-<!-- Media Focus Header SVG -->
3
+<!-- Animated Media Focus Header SVG -->
4
4
<img src="./docs/assets/vido-header.svg" alt="VidoLib - Zero-Dependency Browser Media Engine" width="100%" />
5
5
6
6
<br/>
7
7
▼docs/assets/vido-footer.svg
+94-22
@@ -1,4 +1,4 @@
1
-<svg width="1200" height="100" xmlns="http://www.w3.org/2000/svg">
1
+<svg width="1200" height="120" xmlns="http://www.w3.org/2000/svg">
2
2
<defs>
3
3
<linearGradient id="footerGradient" x1="0%" y1="0%" x2="0%" y2="100%">
4
4
<stop offset="0%" style="stop-color:#0F172A;stop-opacity:0" />
@@ -7,33 +7,105 @@
7
7
</defs>
8
8
9
9
<!-- Background -->
10
- <rect width="1200" height="100" fill="url(#footerGradient)"/>
10
+ <rect width="1200" height="120" fill="url(#footerGradient)"/>
11
11
12
- <!-- Waveform at bottom -->
13
- <g opacity="0.2">
14
- <rect x="100" y="70" width="2" height="15" rx="1" fill="#38BDF8"/>
15
- <rect x="110" y="65" width="2" height="25" rx="1" fill="#38BDF8"/>
16
- <rect x="120" y="72" width="2" height="10" rx="1" fill="#818CF8"/>
17
- <rect x="130" y="60" width="2" height="35" rx="1" fill="#818CF8"/>
18
- <rect x="140" y="68" width="2" height="20" rx="1" fill="#38BDF8"/>
19
- <rect x="150" y="75" width="2" height="8" rx="1" fill="#38BDF8"/>
20
-
21
- <rect x="1050" y="70" width="2" height="15" rx="1" fill="#38BDF8"/>
22
- <rect x="1060" y="65" width="2" height="25" rx="1" fill="#38BDF8"/>
23
- <rect x="1070" y="72" width="2" height="10" rx="1" fill="#818CF8"/>
24
- <rect x="1080" y="60" width="2" height="35" rx="1" fill="#818CF8"/>
25
- <rect x="1090" y="68" width="2" height="20" rx="1" fill="#38BDF8"/>
26
- <rect x="1100" y="75" width="2" height="8" rx="1" fill="#38BDF8"/>
12
+ <!-- Animated waveform (left) -->
13
+ <g opacity="0.3">
14
+ <rect x="100" y="70" width="2" height="15" rx="1" fill="#38BDF8">
15
+ <animate attributeName="height" values="15;30;15" dur="1.5s" repeatCount="indefinite"/>
16
+ <animate attributeName="y" values="70;62;70" dur="1.5s" repeatCount="indefinite"/>
17
+ </rect>
18
+ <rect x="110" y="65" width="2" height="25" rx="1" fill="#38BDF8">
19
+ <animate attributeName="height" values="25;12;25" dur="1.8s" repeatCount="indefinite"/>
20
+ <animate attributeName="y" values="65;71;65" dur="1.8s" repeatCount="indefinite"/>
21
+ </rect>
22
+ <rect x="120" y="72" width="2" height="10" rx="1" fill="#818CF8">
23
+ <animate attributeName="height" values="10;28;10" dur="1.2s" repeatCount="indefinite"/>
24
+ <animate attributeName="y" values="72;63;72" dur="1.2s" repeatCount="indefinite"/>
25
+ </rect>
26
+ <rect x="130" y="60" width="2" height="35" rx="1" fill="#818CF8">
27
+ <animate attributeName="height" values="35;18;35" dur="1.6s" repeatCount="indefinite"/>
28
+ <animate attributeName="y" values="60;68;60" dur="1.6s" repeatCount="indefinite"/>
29
+ </rect>
30
+ <rect x="140" y="68" width="2" height="20" rx="1" fill="#38BDF8">
31
+ <animate attributeName="height" values="20;38;20" dur="1.3s" repeatCount="indefinite"/>
32
+ <animate attributeName="y" values="68;59;68" dur="1.3s" repeatCount="indefinite"/>
33
+ </rect>
34
+ <rect x="150" y="75" width="2" height="8" rx="1" fill="#38BDF8">
35
+ <animate attributeName="height" values="8;22;8" dur="1.7s" repeatCount="indefinite"/>
36
+ <animate attributeName="y" values="75;68;75" dur="1.7s" repeatCount="indefinite"/>
37
+ </rect>
27
38
</g>
28
39
40
+ <!-- Animated waveform (right) -->
41
+ <g opacity="0.3">
42
+ <rect x="1050" y="70" width="2" height="15" rx="1" fill="#38BDF8">
43
+ <animate attributeName="height" values="15;30;15" dur="1.5s" repeatCount="indefinite"/>
44
+ <animate attributeName="y" values="70;62;70" dur="1.5s" repeatCount="indefinite"/>
45
+ </rect>
46
+ <rect x="1060" y="65" width="2" height="25" rx="1" fill="#38BDF8">
47
+ <animate attributeName="height" values="25;12;25" dur="1.8s" repeatCount="indefinite"/>
48
+ <animate attributeName="y" values="65;71;65" dur="1.8s" repeatCount="indefinite"/>
49
+ </rect>
50
+ <rect x="1070" y="72" width="2" height="10" rx="1" fill="#818CF8">
51
+ <animate attributeName="height" values="10;28;10" dur="1.2s" repeatCount="indefinite"/>
52
+ <animate attributeName="y" values="72;63;72" dur="1.2s" repeatCount="indefinite"/>
53
+ </rect>
54
+ <rect x="1080" y="60" width="2" height="35" rx="1" fill="#818CF8">
55
+ <animate attributeName="height" values="35;18;35" dur="1.6s" repeatCount="indefinite"/>
56
+ <animate attributeName="y" values="60;68;60" dur="1.6s" repeatCount="indefinite"/>
57
+ </rect>
58
+ <rect x="1090" y="68" width="2" height="20" rx="1" fill="#38BDF8">
59
+ <animate attributeName="height" values="20;38;20" dur="1.3s" repeatCount="indefinite"/>
60
+ <animate attributeName="y" values="68;59;68" dur="1.3s" repeatCount="indefinite"/>
61
+ </rect>
62
+ <rect x="1100" y="75" width="2" height="8" rx="1" fill="#38BDF8">
63
+ <animate attributeName="height" values="8;22;8" dur="1.7s" repeatCount="indefinite"/>
64
+ <animate attributeName="y" values="75;68;75" dur="1.7s" repeatCount="indefinite"/>
65
+ </rect>
66
+ </g>
67
+
68
+ <!-- Floating particles -->
69
+ <circle cx="300" cy="80" r="2" fill="#38BDF8" opacity="0.4">
70
+ <animate attributeName="cy" values="80;60;80" dur="2s" repeatCount="indefinite"/>
71
+ <animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite"/>
72
+ </circle>
73
+ <circle cx="600" cy="70" r="2" fill="#818CF8" opacity="0.5">
74
+ <animate attributeName="cy" values="70;50;70" dur="2.5s" repeatCount="indefinite"/>
75
+ <animate attributeName="opacity" values="0.5;0.9;0.5" dur="2.5s" repeatCount="indefinite"/>
76
+ </circle>
77
+ <circle cx="900" cy="85" r="2" fill="#38BDF8" opacity="0.4">
78
+ <animate attributeName="cy" values="85;65;85" dur="1.8s" repeatCount="indefinite"/>
79
+ <animate attributeName="opacity" values="0.4;0.8;0.4" dur="1.8s" repeatCount="indefinite"/>
80
+ </circle>
81
+
29
82
<!-- Footer text -->
30
- <text x="600" y="50" font-family="'Inter', sans-serif" font-size="12" font-weight="400"
83
+ <text x="600" y="40" font-family="'Inter', sans-serif" font-size="12" font-weight="400"
31
84
text-anchor="middle" fill="#64748B" letter-spacing="2">
32
85
BUILT WITH WEBCODECS • WEBGL • WEBGPU • WORKERS
33
86
</text>
34
87
35
- <!-- MIT License badge -->
36
- <rect x="540" y="65" width="120" height="20" rx="10" fill="none" stroke="#38BDF8" stroke-width="1" opacity="0.5"/>
37
- <text x="600" y="79" font-family="'Inter', sans-serif" font-size="10" font-weight="500"
38
- text-anchor="middle" fill="#38BDF8" opacity="0.8">MIT LICENSE</text>
88
+ <!-- Animated MIT License badge -->
89
+ <g transform="translate(600, 65)">
90
+ <rect x="-60" y="-12" width="120" height="24" rx="12" fill="none" stroke="#38BDF8" stroke-width="1" opacity="0.5">
91
+ <animate attributeName="opacity" values="0.5;0.8;0.5" dur="2s" repeatCount="indefinite"/>
92
+ </rect>
93
+ <text x="0" y="4" font-family="'Inter', sans-serif" font-size="10" font-weight="500"
94
+ text-anchor="middle" fill="#38BDF8" opacity="0.8">MIT LICENSE</text>
95
+ </g>
96
+
97
+ <!-- Small mascot waving (bottom-left) -->
98
+ <g transform="translate(50, 85) scale(0.2)" opacity="0.5">
99
+ <ellipse cx="0" cy="0" rx="40" ry="35" fill="#5CE1E6"/>
100
+ <ellipse cx="0" cy="-15" rx="35" ry="30" fill="#5CE1E6"/>
101
+ <ellipse cx="-12" cy="-18" rx="8" ry="10" fill="white"/>
102
+ <ellipse cx="12" cy="-18" rx="8" ry="10" fill="white"/>
103
+ <circle cx="-12" cy="-16" r="4" fill="#1E293B"/>
104
+ <circle cx="12" cy="-16" r="4" fill="#1E293B"/>
105
+ <path d="M -6,-3 Q 0,3 6,-3" stroke="#1E293B" stroke-width="1.5" fill="none"/>
106
+ <g>
107
+ <animateTransform attributeName="transform" type="rotate" values="0 -35 0;20 -35 0;0 -35 0" dur="0.8s" repeatCount="indefinite"/>
108
+ <ellipse cx="-35" cy="0" rx="10" ry="7" fill="#5CE1E6"/>
109
+ </g>
110
+ </g>
39
111
</svg>
40
112
▼docs/assets/vido-header.svg
+169-45
@@ -16,78 +16,202 @@
16
16
17
17
<!-- Glow effect -->
18
18
<filter id="glow">
19
- <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
19
+ <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
20
20
<feMerge>
21
21
<feMergeNode in="coloredBlur"/>
22
22
<feMergeNode in="SourceGraphic"/>
23
23
</feMerge>
24
24
</filter>
25
25
26
- <!-- Film strip pattern -->
27
- <pattern id="filmStrip" x="0" y="0" width="40" height="300" patternUnits="userSpaceOnUse">
28
- <rect x="5" y="10" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
29
- <rect x="5" y="40" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
30
- <rect x="5" y="70" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
31
- <rect x="5" y="100" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
32
- <rect x="5" y="130" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
33
- <rect x="5" y="160" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
34
- <rect x="5" y="190" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
35
- <rect x="5" y="220" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
36
- <rect x="5" y="250" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
37
- <rect x="5" y="280" width="30" height="20" rx="2" fill="none" stroke="#334155" stroke-width="1"/>
38
- </pattern>
26
+ <!-- Pulse animation -->
27
+ <filter id="pulse">
28
+ <feGaussianBlur stdDeviation="2" result="blur"/>
29
+ <feMerge>
30
+ <feMergeNode in="blur"/>
31
+ <feMergeNode in="SourceGraphic"/>
32
+ </feMerge>
33
+ </filter>
39
34
</defs>
40
35
41
36
<!-- Background -->
42
37
<rect width="1200" height="300" fill="url(#bgGradient)"/>
43
38
44
- <!-- Film strip decoration (left) -->
45
- <rect x="0" y="0" width="50" height="300" fill="url(#filmStrip)" opacity="0.3"/>
39
+ <!-- Animated particles -->
40
+ <circle cx="100" cy="50" r="3" fill="#38BDF8" opacity="0.6">
41
+ <animate attributeName="cy" from="50" to="250" dur="4s" repeatCount="indefinite"/>
42
+ <animate attributeName="opacity" values="0.6;0.2;0.6" dur="4s" repeatCount="indefinite"/>
43
+ </circle>
44
+ <circle cx="200" cy="80" r="2" fill="#818CF8" opacity="0.5">
45
+ <animate attributeName="cy" from="80" to="280" dur="5s" repeatCount="indefinite"/>
46
+ <animate attributeName="opacity" values="0.5;0.1;0.5" dur="5s" repeatCount="indefinite"/>
47
+ </circle>
48
+ <circle cx="350" cy="30" r="4" fill="#38BDF8" opacity="0.7">
49
+ <animate attributeName="cy" from="30" to="230" dur="3.5s" repeatCount="indefinite"/>
50
+ <animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.5s" repeatCount="indefinite"/>
51
+ </circle>
52
+ <circle cx="500" cy="60" r="2" fill="#818CF8" opacity="0.4">
53
+ <animate attributeName="cy" from="60" to="260" dur="4.5s" repeatCount="indefinite"/>
54
+ <animate attributeName="opacity" values="0.4;0.1;0.4" dur="4.5s" repeatCount="indefinite"/>
55
+ </circle>
56
+ <circle cx="700" cy="40" r="3" fill="#38BDF8" opacity="0.6">
57
+ <animate attributeName="cy" from="40" to="240" dur="3.8s" repeatCount="indefinite"/>
58
+ <animate attributeName="opacity" values="0.6;0.2;0.6" dur="3.8s" repeatCount="indefinite"/>
59
+ </circle>
60
+ <circle cx="850" cy="70" r="2" fill="#818CF8" opacity="0.5">
61
+ <animate attributeName="cy" from="70" to="270" dur="4.2s" repeatCount="indefinite"/>
62
+ <animate attributeName="opacity" values="0.5;0.1;0.5" dur="4.2s" repeatCount="indefinite"/>
63
+ </circle>
64
+ <circle cx="1000" cy="35" r="3" fill="#38BDF8" opacity="0.6">
65
+ <animate attributeName="cy" from="35" to="235" dur="3.6s" repeatCount="indefinite"/>
66
+ <animate attributeName="opacity" values="0.6;0.2;0.6" dur="3.6s" repeatCount="indefinite"/>
67
+ </circle>
68
+ <circle cx="1100" cy="55" r="2" fill="#818CF8" opacity="0.5">
69
+ <animate attributeName="cy" from="55" to="255" dur="4.8s" repeatCount="indefinite"/>
70
+ <animate attributeName="opacity" values="0.5;0.1;0.5" dur="4.8s" repeatCount="indefinite"/>
71
+ </circle>
46
72
47
- <!-- Film strip decoration (right) -->
48
- <rect x="1150" y="0" width="50" height="300" fill="url(#filmStrip)" opacity="0.3"/>
73
+ <!-- Animated waveform (left) -->
74
+ <g opacity="0.4">
75
+ <rect x="80" y="120" width="3" height="20" rx="1" fill="#38BDF8">
76
+ <animate attributeName="height" values="20;40;20" dur="1s" repeatCount="indefinite"/>
77
+ <animate attributeName="y" values="120;110;120" dur="1s" repeatCount="indefinite"/>
78
+ </rect>
79
+ <rect x="90" y="115" width="3" height="30" rx="1" fill="#818CF8">
80
+ <animate attributeName="height" values="30;15;30" dur="1.2s" repeatCount="indefinite"/>
81
+ <animate attributeName="y" values="115;122;115" dur="1.2s" repeatCount="indefinite"/>
82
+ </rect>
83
+ <rect x="100" y="125" width="3" height="15" rx="1" fill="#38BDF8">
84
+ <animate attributeName="height" values="15;35;15" dur="0.8s" repeatCount="indefinite"/>
85
+ <animate attributeName="y" values="125;115;125" dur="0.8s" repeatCount="indefinite"/>
86
+ </rect>
87
+ <rect x="110" y="110" width="3" height="40" rx="1" fill="#818CF8">
88
+ <animate attributeName="height" values="40;20;40" dur="1.1s" repeatCount="indefinite"/>
89
+ <animate attributeName="y" values="110;120;110" dur="1.1s" repeatCount="indefinite"/>
90
+ </rect>
91
+ <rect x="120" y="118" width="3" height="25" rx="1" fill="#38BDF8">
92
+ <animate attributeName="height" values="25;45;25" dur="0.9s" repeatCount="indefinite"/>
93
+ <animate attributeName="y" values="118;108;118" dur="0.9s" repeatCount="indefinite"/>
94
+ </rect>
95
+ </g>
49
96
50
- <!-- Decorative circles (media nodes) -->
51
- <circle cx="100" cy="80" r="40" fill="none" stroke="#38BDF8" stroke-width="1" opacity="0.2"/>
52
- <circle cx="100" cy="80" r="60" fill="none" stroke="#818CF8" stroke-width="1" opacity="0.15"/>
53
- <circle cx="1100" cy="220" r="40" fill="none" stroke="#38BDF8" stroke-width="1" opacity="0.2"/>
54
- <circle cx="1100" cy="220" r="60" fill="none" stroke="#818CF8" stroke-width="1" opacity="0.15"/>
97
+ <!-- Animated waveform (right) -->
98
+ <g opacity="0.4">
99
+ <rect x="1080" y="120" width="3" height="20" rx="1" fill="#38BDF8">
100
+ <animate attributeName="height" values="20;40;20" dur="1s" repeatCount="indefinite"/>
101
+ <animate attributeName="y" values="120;110;120" dur="1s" repeatCount="indefinite"/>
102
+ </rect>
103
+ <rect x="1090" y="115" width="3" height="30" rx="1" fill="#818CF8">
104
+ <animate attributeName="height" values="30;15;30" dur="1.2s" repeatCount="indefinite"/>
105
+ <animate attributeName="y" values="115;122;115" dur="1.2s" repeatCount="indefinite"/>
106
+ </rect>
107
+ <rect x="1100" y="125" width="3" height="15" rx="1" fill="#38BDF8">
108
+ <animate attributeName="height" values="15;35;15" dur="0.8s" repeatCount="indefinite"/>
109
+ <animate attributeName="y" values="125;115;125" dur="0.8s" repeatCount="indefinite"/>
110
+ </rect>
111
+ <rect x="1110" y="110" width="3" height="40" rx="1" fill="#818CF8">
112
+ <animate attributeName="height" values="40;20;40" dur="1.1s" repeatCount="indefinite"/>
113
+ <animate attributeName="y" values="110;120;110" dur="1.1s" repeatCount="indefinite"/>
114
+ </rect>
115
+ <rect x="1120" y="118" width="3" height="25" rx="1" fill="#38BDF8">
116
+ <animate attributeName="height" values="25;45;25" dur="0.9s" repeatCount="indefinite"/>
117
+ <animate attributeName="y" values="118;108;118" dur="0.9s" repeatCount="indefinite"/>
118
+ </rect>
119
+ </g>
55
120
56
- <!-- Play button icon (center) -->
121
+ <!-- Pulsing play button -->
57
122
<g transform="translate(600, 100)" filter="url(#glow)">
58
- <circle cx="0" cy="0" r="35" fill="none" stroke="url(#accentGradient)" stroke-width="2"/>
123
+ <circle cx="0" cy="0" r="40" fill="none" stroke="url(#accentGradient)" stroke-width="2" opacity="0.6">
124
+ <animate attributeName="r" values="40;50;40" dur="2s" repeatCount="indefinite"/>
125
+ <animate attributeName="opacity" values="0.6;0.2;0.6" dur="2s" repeatCount="indefinite"/>
126
+ </circle>
127
+ <circle cx="0" cy="0" r="30" fill="none" stroke="url(#accentGradient)" stroke-width="2"/>
59
128
<polygon points="-12,-18 -12,18 18,0" fill="url(#accentGradient)"/>
60
129
</g>
61
130
62
- <!-- Waveform decoration -->
63
- <g opacity="0.3">
64
- <rect x="350" y="180" width="3" height="20" rx="1" fill="#38BDF8"/>
65
- <rect x="360" y="175" width="3" height="30" rx="1" fill="#38BDF8"/>
66
- <rect x="370" y="182" width="3" height="15" rx="1" fill="#38BDF8"/>
67
- <rect x="380" y="170" width="3" height="40" rx="1" fill="#818CF8"/>
68
- <rect x="390" y="178" width="3" height="25" rx="1" fill="#818CF8"/>
69
- <rect x="400" y="185" width="3" height="10" rx="1" fill="#38BDF8"/>
70
-
71
- <rect x="800" y="180" width="3" height="20" rx="1" fill="#38BDF8"/>
72
- <rect x="810" y="175" width="3" height="30" rx="1" fill="#38BDF8"/>
73
- <rect x="820" y="182" width="3" height="15" rx="1" fill="#38BDF8"/>
74
- <rect x="830" y="170" width="3" height="40" rx="1" fill="#818CF8"/>
75
- <rect x="840" y="178" width="3" height="25" rx="1" fill="#818CF8"/>
76
- <rect x="850" y="185" width="3" height="10" rx="1" fill="#38BDF8"/>
131
+ <!-- Rotating film reel (left) -->
132
+ <g transform="translate(50, 250)" opacity="0.3">
133
+ <circle cx="0" cy="0" r="20" fill="none" stroke="#38BDF8" stroke-width="2">
134
+ <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="8s" repeatCount="indefinite"/>
135
+ </circle>
136
+ <circle cx="0" cy="0" r="5" fill="#38BDF8"/>
137
+ <circle cx="0" cy="-15" r="3" fill="#818CF8"/>
138
+ <circle cx="13" cy="7" r="3" fill="#818CF8"/>
139
+ <circle cx="-13" cy="7" r="3" fill="#818CF8"/>
140
+ </g>
141
+
142
+ <!-- Rotating film reel (right) -->
143
+ <g transform="translate(1150, 250)" opacity="0.3">
144
+ <circle cx="0" cy="0" r="20" fill="none" stroke="#818CF8" stroke-width="2">
145
+ <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="8s" repeatCount="indefinite"/>
146
+ </circle>
147
+ <circle cx="0" cy="0" r="5" fill="#818CF8"/>
148
+ <circle cx="0" cy="-15" r="3" fill="#38BDF8"/>
149
+ <circle cx="13" cy="7" r="3" fill="#38BDF8"/>
150
+ <circle cx="-13" cy="7" r="3" fill="#38BDF8"/>
151
+ </g>
152
+
153
+ <!-- Floating media icons -->
154
+ <g opacity="0.4">
155
+ <!-- Play icon -->
156
+ <g transform="translate(180, 80)">
157
+ <polygon points="0,-8 0,8 10,0" fill="#38BDF8">
158
+ <animate attributeName="opacity" values="0.4;0.8;0.4" dur="3s" repeatCount="indefinite"/>
159
+ <animateTransform attributeName="transform" type="translate" values="0,0;0,-10;0,0" dur="3s" repeatCount="indefinite"/>
160
+ </polygon>
161
+ </g>
162
+ <!-- Pause icon -->
163
+ <g transform="translate(1020, 80)">
164
+ <rect x="-4" y="-8" width="3" height="16" fill="#818CF8">
165
+ <animate attributeName="opacity" values="0.4;0.8;0.4" dur="2.5s" repeatCount="indefinite"/>
166
+ <animateTransform attributeName="transform" type="translate" values="0,0;0,-8;0,0" dur="2.5s" repeatCount="indefinite"/>
167
+ </rect>
168
+ <rect x="1" y="-8" width="3" height="16" fill="#818CF8">
169
+ <animate attributeName="opacity" values="0.4;0.8;0.4" dur="2.5s" repeatCount="indefinite"/>
170
+ <animateTransform attributeName="transform" type="translate" values="0,0;0,-8;0,0" dur="2.5s" repeatCount="indefinite"/>
171
+ </rect>
172
+ </g>
77
173
</g>
78
174
79
175
<!-- Title: VidoLib -->
80
- <text x="600" y="230" font-family="'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif"
176
+ <text x="600" y="210" font-family="'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif"
81
177
font-size="56" font-weight="800" text-anchor="middle" fill="#F8FAFC" letter-spacing="-2">
82
178
VidoLib
179
+ <animate attributeName="opacity" values="0;1" dur="1s" fill="freeze"/>
83
180
</text>
84
181
85
182
<!-- Subtitle -->
86
- <text x="600" y="265" font-family="'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif"
87
- font-size="18" font-weight="400" text-anchor="middle" fill="#94A3B8" letter-spacing="4">
183
+ <text x="600" y="248" font-family="'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif"
184
+ font-size="16" font-weight="400" text-anchor="middle" fill="#94A3B8" letter-spacing="4">
88
185
ZERO-DEPENDENCY BROWSER MEDIA ENGINE
186
+ <animate attributeName="opacity" values="0;1" dur="1s" begin="0.3s" fill="freeze"/>
89
187
</text>
90
188
91
- <!-- Accent line -->
92
- <line x1="450" y1="280" x2="750" y2="280" stroke="url(#accentGradient)" stroke-width="2" opacity="0.6"/>
189
+ <!-- Animated accent line -->
190
+ <line x1="400" y1="265" x2="800" y2="265" stroke="url(#accentGradient)" stroke-width="2" opacity="0.6">
191
+ <animate attributeName="x1" values="600;400;600" dur="3s" repeatCount="indefinite"/>
192
+ <animate attributeName="x2" values="600;800;600" dur="3s" repeatCount="indefinite"/>
193
+ </line>
194
+
195
+ <!-- Corner mascot (bottom-right) -->
196
+ <g transform="translate(1100, 220) scale(0.3)" opacity="0.8">
197
+ <!-- Simple chibi character -->
198
+ <ellipse cx="0" cy="0" rx="60" ry="50" fill="#5CE1E6"/>
199
+ <ellipse cx="0" cy="-20" rx="55" ry="45" fill="#5CE1E6"/>
200
+ <!-- Eyes -->
201
+ <ellipse cx="-20" cy="-25" rx="12" ry="14" fill="white"/>
202
+ <ellipse cx="20" cy="-25" rx="12" ry="14" fill="white"/>
203
+ <circle cx="-20" cy="-22" r="6" fill="#1E293B"/>
204
+ <circle cx="20" cy="-22" r="6" fill="#1E293B"/>
205
+ <!-- Mouth -->
206
+ <path d="M -10,-5 Q 0,5 10,-5" stroke="#1E293B" stroke-width="2" fill="none"/>
207
+ <!-- Arms wave -->
208
+ <g>
209
+ <animateTransform attributeName="transform" type="rotate" values="0 -60 0;15 -60 0;0 -60 0" dur="1s" repeatCount="indefinite"/>
210
+ <ellipse cx="-60" cy="0" rx="15" ry="10" fill="#5CE1E6"/>
211
+ </g>
212
+ <g>
213
+ <animateTransform attributeName="transform" type="rotate" values="0 60 0;-15 60 0;0 60 0" dur="1s" repeatCount="indefinite"/>
214
+ <ellipse cx="60" cy="0" rx="15" ry="10" fill="#5CE1E6"/>
215
+ </g>
216
+ </g>
93
217
</svg>
94
218