swadhin / vidolib public

swadhinbiswas

[email protected]
2026-07-24 22:35:19 +0600 committed NaN years ago
12b7257
commit 12b7257
4 files changed
+373 -69
Showing 4 changed files+373-67
README.mddocs/assets/vido-divider.svgdocs/assets/vido-footer.svgdocs/assets/vido-header.svg
▼README.md
+218-67
@@ -1,20 +1,26 @@
1
1
<div align="center">
2
2
3
-<img src="./docs/logo.png" alt="VidoLib Logo" width="180" style="border-radius: 16px; margin-bottom: 16px;" />
3
+<!-- Media Focus Header SVG -->
4
+<img src="./docs/assets/vido-header.svg" alt="VidoLib - Zero-Dependency Browser Media Engine" width="100%" />
4
5
6
+<br/>
7
+
8
+### The Native, Zero-Dependency Browser Media Engine
5
9
6
-### **The Native, Zero-Dependency Browser Media Engine**
7
-*High-performance hardware-accelerated playback, transcoding, and processing for HLS, DASH, MP4, WebM, MKV, FLV, TS & Subtitles — without 30MB FFmpeg WASM bloat.*
10
+**High-performance hardware-accelerated playback, transcoding, and processing**
11
+*for HLS, DASH, MP4, WebM, MKV, FLV, TS & Subtitles — without 30MB FFmpeg WASM bloat.*
8
12
9
-> 🚧 **Active Development Notice**: VidoLib is currently in pre-release development. Packages are being built locally and are not yet published to npm.
13
+<br/>
10
14
11
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue.svg)](https://www.typescriptlang.org/)
12
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSING.md)
13
-[![Status: Pre--release](https://img.shields.io/badge/Status-Pre--release-orange.svg)](#-building--local-development)
14
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md)
15
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue.svg?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
16
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](./LICENSING.md)
17
+[![Status: Pre-release](https://img.shields.io/badge/Status-Pre--release-orange.svg?style=for-the-badge)](#-building--local-development)
18
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)](./CONTRIBUTING.md)
19
+[![Tests](https://img.shields.io/badge/Tests-118%20passed-brightgreen.svg?style=for-the-badge)](#-testing)
15
20
16
-[Quick Start](#-building--local-development) • [Why No FFmpeg?](#-why-no-ffmpeg-wasm) • [Native Capabilities](#-native-browser-ffmpeg-equivalent-capabilities) • [Architecture](#-architecture-overview) • [Package Ecosystem](#-package-ecosystem) • [Contributing](#-contributing) • [Roadmap](./docs/ROADMAP.md)
21
+<br/>
22
+
23
+[🚀 Quick Start](#-building--local-development) • [⚡ Why No FFmpeg?](#-why-no-ffmpeg-wasm) • [🎥 Capabilities](#-native-browser-ffmpeg-equivalent-capabilities) • [🏗️ Architecture](#-architecture-overview) • [📦 Packages](#-package-ecosystem) • [🤝 Contributing](#-contributing--developer-guide)
17
24
18
25
</div>
19
26
@@ -23,20 +29,24 @@
23
29
## ✨ Why VidoLib?
24
30
25
31
Traditional web media players fall into two traps:
26
-1. **Monolithic & Heavy**: Bundling giant 15MB–40MB FFmpeg WASM binaries that drain mobile battery, stall startup by 3+ seconds, and consume hundreds of megabytes of RAM.
27
-2. **Standard Player Lock-in**: Hardcoding layout, network logic, and UI into rigid single-package players that are difficult to customize or extend.
28
32
29
-`VidoLib` takes a **runtime-first, modular approach**:
30
-- 🚀 **Zero-Copy & Hardware-Accelerated**: Direct integration with browser `WebCodecs API`, `WebAudio/AudioWorklet`, and `WebGL/WebGPU` hardware decoding paths.
31
-- ⚡ **Lightweight Core**: `@vidolib/core` weighs **only 3.4 KB gzipped** with zero bundled decoders.
32
-- 🧩 **100% Plugin-Based**: Every container parser, ABR algorithm, subtitle renderer, and UI component is an independent plugin.
33
-- 🛡️ **Patent Safe**: Hardware decoding for patented codecs (H.264, HEVC, AC-3) eliminates patent pool liabilities for web applications.
33
+| Problem | Description |
34
+|---------|-------------|
35
+| 🐘 **Monolithic & Heavy** | Giant 15MB–40MB FFmpeg WASM binaries that drain mobile battery, stall startup by 3+ seconds, and consume hundreds of MB of RAM |
36
+| 🔒 **Standard Player Lock-in** | Hardcoded layout, network logic, and UI into rigid single-package players that are difficult to customize or extend |
34
37
38
+### VidoLib takes a runtime-first, modular approach:
35
39
36
-## 🛠️ Building & Local Development
40
+| Feature | Description |
41
+|---------|-------------|
42
+| 🚀 **Zero-Copy & Hardware-Accelerated** | Direct integration with browser `WebCodecs API`, `WebAudio/AudioWorklet`, and `WebGL/WebGPU` hardware decoding paths |
43
+| ⚡ **Lightweight Core** | `@vidolib/core` weighs **only 3.4 KB gzipped** with zero bundled decoders |
44
+| 🧩 **100% Plugin-Based** | Every container parser, ABR algorithm, subtitle renderer, and UI component is an independent plugin |
45
+| 🛡️ **Patent Safe** | Hardware decoding for patented codecs (H.264, HEVC, AC-3) eliminates patent pool liabilities |
37
46
38
-Since VidoLib is currently in active development, clone the repository to build and test locally:
47
+---
48
+
49
+## 🚀 Building & Local Development
39
50
40
51
```bash
41
52
# 1. Clone the repository
@@ -46,20 +56,21 @@ cd VidoLib
46
56
# 2. Install development dependencies
47
57
npm install
48
58
49
-# 3. Build all 22 monorepo packages (Go-powered sub-second build)
59
+# 3. Build all 22 monorepo packages
50
60
npm run build
51
61
52
-# 4. Run tests & verification
53
-node scripts/test-runner.js
54
-```
62
+# 4. Run tests
63
+npx vitest run
55
64
56
-### Usage in Local Projects
65
+# 5. Run fuzz testing
66
+node scripts/fuzz-all.js
67
+```
57
68
58
-Import packages from the compiled `dist/` directories or use local workspace linking:
69
+### Quick Usage Example
59
70
60
71
```typescript
61
-import { Player } from './packages/core/dist/index.js';
62
-import { PlayerUI } from './packages/ui/dist/index.js';
72
+import { Player } from '@vidolib/core';
73
+import { PlayerUI } from '@vidolib/ui';
63
74
64
75
// Initialize core VidoLib runtime
65
76
const player = new Player();
@@ -75,67 +86,205 @@ player.play();
75
86
76
87
---
77
88
89
+## ⚡ Why No FFmpeg WASM?
90
+
91
+> *Read our full breakdown: [NO_FFMPEG_MANIFESTO.md](./docs/NO_FFMPEG_MANIFESTO.md)*
92
+
93
+| Metric | 🎯 VidoLib | 🐌 FFmpeg WASM |
94
+|--------|-----------|----------------|
95
+| **Engine Download** | **3.4 KB – 30 KB** | 15 MB – 40 MB |
96
+| **Startup Latency** | **< 110 ms** | 1,500 ms – 4,000 ms |
97
+| **Battery Impact** | **Minimal** (OS Hardware Decoders) | Heavy (CPU-bound WASM) |
98
+| **Memory Footprint** | **< 18 MB RAM** | 150 MB – 400 MB RAM |
99
+| **Mobile Support** | **100% Native** | Often crashes iOS Safari |
100
+
101
+---
102
+
78
103
## 🎥 Native Browser FFmpeg-Equivalent Capabilities
79
104
80
-`VidoLib` implements classic FFmpeg media operations natively inside the browser using modern web standards (`WebCodecs`, `WebGL`, `WebAudio`, `Streams`):
105
+VidoLib implements classic FFmpeg operations natively using modern web standards:
106
+
107
+<table>
108
+<tr>
109
+<td width="50%" valign="top">
110
+
111
+### 🔄 Transcoding
112
+**`@vidolib/transcoder`**
113
+GPU-accelerated client-side video frame encoding to H.264/VP9 via `VideoEncoder`.
114
+
115
+```typescript
116
+const encoder = new HardwareVideoEncoder();
117
+await encoder.init({
118
+ codec: 'avc1.4d401f',
119
+ width: 1920, height: 1080,
120
+ bitrate: 2_000_000
121
+}, onPacket);
122
+```
123
+
124
+</td>
125
+<td width="50%" valign="top">
126
+
127
+### 🎨 Filters
128
+**`@vidolib/filters`**
129
+Real-time GPU Video Filters: Green Screen, Brightness, Contrast, Blur, Watermark.
130
+
131
+```typescript
132
+const processor = new VideoFilterProcessor(canvas);
133
+processor.applyFilters(videoFrame, {
134
+ brightness: 1.1,
135
+ contrast: 1.2,
136
+ chromaKeyGreen: true
137
+});
138
+```
139
+
140
+</td>
141
+</tr>
142
+<tr>
143
+<td width="50%" valign="top">
144
+
145
+### 🔴 Recording
146
+**`@vidolib/recorder`**
147
+Zero-Lag Canvas & Screen Recording to downloadable MP4/WebM files.
81
148
82
-- 🔄 **Hardware Transcoding & Re-encoding (`@vidolib/transcoder`)**: GPU-accelerated client-side video frame encoding to H.264/VP9 via `VideoEncoder`.
83
-- 🎨 **GPU Video & Audio Filters (`@vidolib/filters`)**: Real-time Green Screen Removal (Chroma Keying), Color Balance, Brightness, Contrast, Blur, and Watermarking.
84
-- 🔴 **Zero-Lag Canvas & Screen Recording (`@vidolib/recorder`)**: Capture and export canvas animations, webcams, and streams directly to downloadable MP4/WebM files.
85
-- 📦 **Multi-Container Demuxing (`@vidolib/containers`)**: Isolated parsers for MP4, MKV, WebM, AVI, MOV, FLV, TS, PS, OGG, and ASF formats.
149
+```typescript
150
+const recorder = new MediaRecorderPipeline(stream);
151
+recorder.start();
152
+setTimeout(async () => {
153
+ const blob = await recorder.stop();
154
+ recorder.download('video.webm', blob);
155
+}, 10000);
156
+```
157
+
158
+</td>
159
+<td width="50%" valign="top">
160
+
161
+### 📦 Containers
162
+**`@vidolib/containers`**
163
+Multi-Container Demuxing: MP4, MKV, WebM, AVI, MOV, FLV, TS, PS, OGG, ASF.
86
164
87
-> *Read the full technical mapping: [FFMPEG_CAPABILITIES_ROADMAP.md](./docs/FFMPEG_CAPABILITIES_ROADMAP.md)*
165
+```typescript
166
+const registry = new ContainerRegistry();
167
+const result = registry.autoDemux(u8ArrayBuffer);
168
+console.log('Tracks:', result.tracks);
169
+```
170
+
171
+</td>
172
+</tr>
173
+</table>
88
174
89
175
---
90
176
91
-## ⚡ Why No FFmpeg WASM?
177
+## 🏗️ Architecture Overview
92
178
93
-> *Read our full breakdown: [NO_FFMPEG_MANIFESTO.md](./docs/NO_FFMPEG_MANIFESTO.md)*
179
+```
180
+┌─────────────────────────────────────────────────────────────┐
181
+│ Host Application │
182
+└─────────────────────────────────────────────────────────────┘
183
+ │
184
+┌─────────────────────────────────────────────────────────────┐
185
+│ @vidolib/ui │
186
+│ WCAG 2.1 AA Accessible Controls │
187
+└─────────────────────────────────────────────────────────────┘
188
+ │
189
+┌─────────────────────────────────────────────────────────────┐
190
+│ @vidolib/core │
191
+│ [Player] ←→ [Clock] ←→ [Pipeline] ←→ [Plugin Registry] │
192
+└─────────────────────────────────────────────────────────────┘
193
+ │ │ │
194
+┌─────────────┐ ┌───────────────┐ ┌─────────────────┐
195
+│ stream/ │ │ containers/ │ │ renderer/ │
196
+│ buffer/ │ │ (10 demuxers) │ │ (WebGL/WebGPU) │
197
+└─────────────┘ └───────────────┘ └─────────────────┘
198
+ │ │ │
199
+┌─────────────┐ ┌───────────────┐ ┌─────────────────┐
200
+│ manifest/ │ │ worker/ │ │ subtitle/ │
201
+│ abr/ │ │ (Transfer) │ │ (ASS/SRT/VTT) │
202
+└─────────────┘ └───────────────┘ └─────────────────┘
203
+```
94
204
95
-| Metric | Native VidoLib | FFmpeg WASM Players |
96
-|---|---|---|
97
-| **Engine Download Size** | **3.4 KB – 30 KB** | 15 MB – 40 MB |
98
-| **Startup Latency** | **< 110 ms** | 1,500 ms – 4,000 ms |
99
-| **Battery Impact** | **Minimal (OS Hardware Decoders)** | Heavy (CPU-bound WASM threads) |
100
-| **Memory Footprint** | **< 18 MB RAM** | 150 MB – 400 MB RAM |
101
-| **Mobile Web Compatibility** | **100% Native OS Support** | Often crashes iOS Safari OOM |
205
+---
206
+
207
+## 📦 Package Ecosystem
208
+
209
+| Package | Purpose | Size |
210
+|---------|---------|------|
211
+| [`@vidolib/core`](./packages/core) | Player, Clock, Pipeline, EventBus | **3.44 KB** |
212
+| [`@vidolib/stream`](./packages/stream) | HTTP Range, Blob, File, WebSocket, WebRTC | **2.83 KB** |
213
+| [`@vidolib/containers`](./packages/containers) | MP4, MKV, WebM, AVI, MOV, FLV, TS, PS, OGG, ASF | **14.11 KB** |
214
+| [`@vidolib/manifest`](./packages/manifest) | HLS (`.m3u8`) & DASH (`.mpd`) parsers | **6.99 KB** |
215
+| [`@vidolib/abr`](./packages/abr) | EWMA throughput & buffer-based ABR | **1.75 KB** |
216
+| [`@vidolib/codecs`](./packages/codecs) | WebCodecs / Native / WASM negotiator | **4.63 KB** |
217
+| [`@vidolib/transcoder`](./packages/transcoder) | WebCodecs video/audio encoder | **1.50 KB** |
218
+| [`@vidolib/filters`](./packages/filters) | WebGL Chroma Key, Brightness, Blur, Watermark | **3.34 KB** |
219
+| [`@vidolib/recorder`](./packages/recorder) | Canvas & MediaStream MP4/WebM recorder | **1.62 KB** |
220
+| [`@vidolib/renderer`](./packages/renderer) | Canvas2D, WebGL, WebGPU backends | **5.36 KB** |
221
+| [`@vidolib/subtitle`](./packages/subtitle) | ASS, SRT, VTT subtitle engine | **5.21 KB** |
222
+| [`@vidolib/ui`](./packages/ui) | WCAG 2.1 AA accessible glassmorphic UI | **5.49 KB** |
223
+| [`@vidolib/worker`](./packages/worker) | Web Worker pipeline with error handling | **2.73 KB** |
224
+| [`@vidolib/telemetry`](./packages/telemetry) | Zero-tracking QoE metrics | **1.76 KB** |
225
+| [`@vidolib/security`](./packages/security) | Container parser fuzzing & CSP | **1.83 KB** |
226
+| [`@vidolib/plugins`](./packages/plugins) | Plugin registry & lifecycle | **1.42 KB** |
227
+| [`@vidolib/utils`](./packages/utils) | BitStreamReader, RingBuffer, Logger | **2.90 KB** |
102
228
103
229
---
104
230
105
-## 📦 Package Ecosystem (Under Construction)
106
-
107
-All packages are compiled in the monorepo under `packages/<name>/dist/`:
108
-
109
-| Package | Purpose | Size (gzipped) | Target Global |
110
-|---|---|---|---|
111
-| [`@vidolib/core`](./packages/core) | Player, Clock, Pipeline, EventBus | **3.44 KB** | `VidoLibCore` |
112
-| [`@vidolib/stream`](./packages/stream) | Range HTTP, Blob, File, WS, WebRTC, S3, IPFS | **2.86 KB** | `VidoLibStream` |
113
-| [`@vidolib/containers`](./packages/containers) | MP4, MKV, WebM, AVI, MOV, FLV, TS, PS, OGG, ASF | **5.14 KB** | `VidoLibContainers` |
114
-| [`@vidolib/manifest`](./packages/manifest) | HLS (`.m3u8`) & DASH (`.mpd`) parsers | **3.07 KB** | `VidoLibManifest` |
115
-| [`@vidolib/abr`](./packages/abr) | EWMA throughput & buffer-based ABR | **1.75 KB** | `VidoLibAbr` |
116
-| [`@vidolib/codecs`](./packages/codecs) | WebCodecs / Native / Royalty-free WASM negotiator | **3.01 KB** | `VidoLibCodecs` |
117
-| [`@vidolib/transcoder`](./packages/transcoder) | WebCodecs hardware video/audio re-encoder | **1.50 KB** | `VidoLibTranscoder` |
118
-| [`@vidolib/filters`](./packages/filters) | WebGL Chroma Key, Brightness, Blur, Watermark | **1.84 KB** | `VidoLibFilters` |
119
-| [`@vidolib/recorder`](./packages/recorder) | Canvas & MediaStream zero-lag MP4/WebM recorder | **1.63 KB** | `VidoLibRecorder` |
120
-| [`@vidolib/renderer`](./packages/renderer) | Canvas2D, WebGL, WebGPU backends | **1.85 KB** | `VidoLibRenderer` |
121
-| [`@vidolib/subtitle`](./packages/subtitle) | ASS, SSA, SRT, VTT, PGS GPU engine | **2.45 KB** | `VidoLibSubtitle` |
122
-| [`@vidolib/ui`](./packages/ui) | WCAG 2.1 AA accessible glassmorphic UI controls | **3.53 KB** | `VidoLibUi` |
123
-| [`@vidolib/telemetry`](./packages/telemetry) | Zero-tracking QoE metrics event surface | **1.76 KB** | `VidoLibTelemetry` |
124
-| [`@vidolib/os-integration`](./packages/os-integration) | Media Session API, PiP, Fullscreen, Cast | **1.88 KB** | `VidoLibOsIntegration` |
231
+## 🧪 Testing
232
+
233
+```bash
234
+# Run all unit tests (118 tests)
235
+npx vitest run
236
+
237
+# Run fuzz testing (8000 iterations across all demuxers)
238
+node scripts/fuzz-all.js
239
+
240
+# Run specific package tests
241
+npx vitest run packages/containers/src/index.test.ts
242
+npx vitest run packages/manifest/src/index.test.ts
243
+```
244
+
245
+### Test Coverage
246
+
247
+| Package | Tests | Status |
248
+|---------|-------|--------|
249
+| `@vidolib/containers` | 26 | ✅ |
250
+| `@vidolib/manifest` | 17 | ✅ |
251
+| `@vidolib/codecs` | 15 | ✅ |
252
+| `@vidolib/subtitle` | 15 | ✅ |
253
+| `@vidolib/filters` | 12 | ✅ |
254
+| `@vidolib/worker` | 12 | ✅ |
255
+| `@vidolib/renderer` | 9 | ✅ |
256
+| `@vidolib/core` | 8 | ✅ |
257
+| `@vidolib/utils` | 2 | ✅ |
258
+| `@vidolib/ui` | 1 | ✅ |
125
259
126
260
---
127
261
128
-## 🛠️ Contributing & Developer Guide
262
+## 🤝 Contributing & Developer Guide
129
263
130
264
We welcome contributions from developers worldwide!
131
265
132
-- 📖 **[Contributor Guide (`CONTRIBUTING.md`)](./CONTRIBUTING.md)**: Setup, build system, and PR guidelines.
133
-- 🏗️ **[Architecture Deep-Dive (`docs/ARCHITECTURE.md`)](./docs/ARCHITECTURE.md)**: Core engine flow, Web Worker pipelines, and memory model.
134
-- 🔌 **[Plugin Authoring Guide (`docs/PLUGINS.md`)](./docs/PLUGINS.md)**: Build custom plugins in < 30 lines of code.
135
-- 🗺️ **[Open Contributor Roadmap (`docs/ROADMAP.md`)](./docs/ROADMAP.md)**: Pick up an open feature task!
266
+| Resource | Description |
267
+|----------|-------------|
268
+| 📖 **[Contributor Guide](./CONTRIBUTING.md)** | Setup, build system, and PR guidelines |
269
+| 🏗️ **[Architecture Deep-Dive](./docs/ARCHITECTURE.md)** | Core engine flow, Web Worker pipelines, and memory model |
270
+| 🔌 **[Plugin Authoring Guide](./docs/PLUGINS.md)** | Build custom plugins in < 30 lines of code |
271
+| 🗺️ **[Open Roadmap](./docs/ROADMAP.md)** | Pick up an open feature task! |
136
272
137
273
---
138
274
139
-## 📄 License & Codec Policy
275
+## 📄 License
140
276
141
277
Distributed under the **MIT License**. See [`LICENSING.md`](./LICENSING.md) for full codec licensing guardrails and royalty-free allow-list details.
278
+
279
+<br/>
280
+
281
+<!-- Footer SVG -->
282
+<img src="./docs/assets/vido-divider.svg" alt="divider" width="100%" />
283
+
284
+<div align="center">
285
+
286
+**Built with ❤️ using WebCodecs • WebGL • WebGPU • Web Workers**
287
+
288
+</div>
289
+
290
+<img src="./docs/assets/vido-footer.svg" alt="footer" width="100%" />
142
291
▼docs/assets/vido-divider.svg
+23-0
@@ -0,0 +1,23 @@
1
+<svg width="1200" height="60" xmlns="http://www.w3.org/2000/svg">
2
+ <defs>
3
+ <linearGradient id="dividerGradient" x1="0%" y1="0%" x2="100%" y2="0%">
4
+ <stop offset="0%" style="stop-color:#0F172A;stop-opacity:0" />
5
+ <stop offset="20%" style="stop-color:#38BDF8;stop-opacity:0.5" />
6
+ <stop offset="50%" style="stop-color:#818CF8;stop-opacity:1" />
7
+ <stop offset="80%" style="stop-color:#38BDF8;stop-opacity:0.5" />
8
+ <stop offset="100%" style="stop-color:#0F172A;stop-opacity:0" />
9
+ </linearGradient>
10
+ </defs>
11
+
12
+ <!-- Main line -->
13
+ <line x1="100" y1="30" x2="1100" y2="30" stroke="url(#dividerGradient)" stroke-width="1"/>
14
+
15
+ <!-- Center diamond -->
16
+ <polygon points="600,20 610,30 600,40 590,30" fill="#38BDF8" opacity="0.8"/>
17
+
18
+ <!-- Side dots -->
19
+ <circle cx="550" cy="30" r="2" fill="#818CF8" opacity="0.6"/>
20
+ <circle cx="650" cy="30" r="2" fill="#818CF8" opacity="0.6"/>
21
+ <circle cx="500" cy="30" r="1.5" fill="#38BDF8" opacity="0.4"/>
22
+ <circle cx="700" cy="30" r="1.5" fill="#38BDF8" opacity="0.4"/>
23
+</svg>
0
24
▼docs/assets/vido-footer.svg
+39-0
@@ -0,0 +1,39 @@
1
+<svg width="1200" height="100" xmlns="http://www.w3.org/2000/svg">
2
+ <defs>
3
+ <linearGradient id="footerGradient" x1="0%" y1="0%" x2="0%" y2="100%">
4
+ <stop offset="0%" style="stop-color:#0F172A;stop-opacity:0" />
5
+ <stop offset="100%" style="stop-color:#1E293B;stop-opacity:1" />
6
+ </linearGradient>
7
+ </defs>
8
+
9
+ <!-- Background -->
10
+ <rect width="1200" height="100" fill="url(#footerGradient)"/>
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"/>
27
+ </g>
28
+
29
+ <!-- Footer text -->
30
+ <text x="600" y="50" font-family="'Inter', sans-serif" font-size="12" font-weight="400"
31
+ text-anchor="middle" fill="#64748B" letter-spacing="2">
32
+ BUILT WITH WEBCODECS • WEBGL • WEBGPU • WORKERS
33
+ </text>
34
+
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>
39
+</svg>
0
40
▼docs/assets/vido-header.svg
+93-0
@@ -0,0 +1,93 @@
1
+<svg width="1200" height="300" xmlns="http://www.w3.org/2000/svg">
2
+ <defs>
3
+ <!-- Main gradient -->
4
+ <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
5
+ <stop offset="0%" style="stop-color:#0F172A;stop-opacity:1" />
6
+ <stop offset="50%" style="stop-color:#1E293B;stop-opacity:1" />
7
+ <stop offset="100%" style="stop-color:#0F172A;stop-opacity:1" />
8
+ </linearGradient>
9
+
10
+ <!-- Accent gradient -->
11
+ <linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="0%">
12
+ <stop offset="0%" style="stop-color:#38BDF8;stop-opacity:1" />
13
+ <stop offset="50%" style="stop-color:#818CF8;stop-opacity:1" />
14
+ <stop offset="100%" style="stop-color:#38BDF8;stop-opacity:1" />
15
+ </linearGradient>
16
+
17
+ <!-- Glow effect -->
18
+ <filter id="glow">
19
+ <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
20
+ <feMerge>
21
+ <feMergeNode in="coloredBlur"/>
22
+ <feMergeNode in="SourceGraphic"/>
23
+ </feMerge>
24
+ </filter>
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>
39
+ </defs>
40
+
41
+ <!-- Background -->
42
+ <rect width="1200" height="300" fill="url(#bgGradient)"/>
43
+
44
+ <!-- Film strip decoration (left) -->
45
+ <rect x="0" y="0" width="50" height="300" fill="url(#filmStrip)" opacity="0.3"/>
46
+
47
+ <!-- Film strip decoration (right) -->
48
+ <rect x="1150" y="0" width="50" height="300" fill="url(#filmStrip)" opacity="0.3"/>
49
+
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"/>
55
+
56
+ <!-- Play button icon (center) -->
57
+ <g transform="translate(600, 100)" filter="url(#glow)">
58
+ <circle cx="0" cy="0" r="35" fill="none" stroke="url(#accentGradient)" stroke-width="2"/>
59
+ <polygon points="-12,-18 -12,18 18,0" fill="url(#accentGradient)"/>
60
+ </g>
61
+
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"/>
77
+ </g>
78
+
79
+ <!-- Title: VidoLib -->
80
+ <text x="600" y="230" font-family="'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif"
81
+ font-size="56" font-weight="800" text-anchor="middle" fill="#F8FAFC" letter-spacing="-2">
82
+ VidoLib
83
+ </text>
84
+
85
+ <!-- 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">
88
+ ZERO-DEPENDENCY BROWSER MEDIA ENGINE
89
+ </text>
90
+
91
+ <!-- Accent line -->
92
+ <line x1="450" y1="280" x2="750" y2="280" stroke="url(#accentGradient)" stroke-width="2" opacity="0.6"/>
93
+</svg>
0
94