Add quotes, move assets around

assets/mediabunny-logo.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 481.829 481.829" xml:space="preserve">
-<g>
-	<path d="M256.621,180.247c0-41.355-33.645-75-75-75s-75,33.645-75,75s33.645,75,75,75S256.621,221.603,256.621,180.247z
-		 M181.62,225.247c-24.813,0-45-20.187-45-45s20.187-45,45-45s45,20.187,45,45S206.434,225.247,181.62,225.247z"/>
-	<path d="M481.829,459.765l-71.348-71.349c12.528-16.886,19.949-37.777,19.949-60.37c0-46.31-31.166-85.477-73.624-97.632
-		c4.269-15.558,6.435-31.617,6.435-47.945C363.24,82.324,281.765,0.85,181.62,0.85S0,82.324,0,182.469
-		c0,41.232,13.525,80.127,39.139,112.514L181.62,474.122l66.901-84.114c18.584,24.051,47.7,39.571,80.376,39.571
-		c22.594,0,43.485-7.421,60.371-19.95l71.348,71.349L481.829,459.765z M181.62,425.928L62.643,276.342
-		C41.288,249.339,30,216.879,30,182.469C30,98.866,98.016,30.85,181.62,30.85s151.62,68.016,151.62,151.619
-		c0,15.058-2.197,29.837-6.536,44.072c-54.976,1.171-99.34,46.253-99.34,101.505c0,11.661,1.982,22.867,5.617,33.306L181.62,425.928
-		z M328.897,399.579c-39.443,0-71.533-32.09-71.533-71.533s32.09-71.533,71.533-71.533s71.532,32.09,71.532,71.533
-		S368.34,399.579,328.897,399.579z"/>
-</g>
-</svg>

docs/.vitepress/theme/theme.css

@@ -47,6 +47,6 @@
 	color: hsl(345, 100%, 85%);
 }
 
-body {
-	overflow-x: hidden;
+html, body {
+	overflow-x: hidden !important;
 }

docs/guide/packets-and-samples.md

@@ -409,7 +409,7 @@ The following audio sample formats are supported:
 
 Planar formats store each channel's data contiguously, while interleaved formats store the channels' data interleaved together:
 
-![Planar vs. interleaved formats](./planar_interleaved.svg)
+![Planar vs. interleaved formats](../assets/planar_interleaved.svg)
 
 ### Inspecting audio samples
 

docs/index.md

@@ -17,9 +17,90 @@ hero:
     - theme: alt
       text: Examples
       link: /examples
+    - theme: alt
+      text: Sponsors
+      link: "#sponsors"
 ---
 
-<div class="space-y-16 mt-8">
+<script setup>
+import AvatarKonstantin from './assets/avatar-konstantin.png';
+import AvatarYonatan from './assets/avatar-yonatan.jpeg';
+
+const quotes = [
+	{
+		quote: 'The missing part in the JS ecosystem for building web-first media apps.',
+		author: 'Yonatan, Gling AI',
+		image: AvatarYonatan,
+		url: 'https://www.gling.ai/',
+	},
+	{
+		quote: 'Mediabunny gives you low-level control with high-level ease. It’s fast, lightweight, and finally feels like media processing built for the web, not ported to it.',
+		author: 'Konstantin, Diffusion Studio',
+		image: AvatarKonstantin,
+		url: 'https://github.com/k9p5',
+	}
+];
+
+const benchmarks = [
+	{
+		name: 'Extract metadata',
+		unit: 'ops/s',
+		results: [
+			{ name: 'Mediabunny', value: 1000/1.16 },
+			{ name: '@remotion/media-parser', value: 1000/4.28 },
+			{ name: 'web-demuxer', value: 1000/12.4 },
+			{ name: 'mp4box.js', value: 1000/23 },
+			{ name: 'ffmpeg.wasm', value: 1000/547 },
+		]
+	},
+	{
+		name: 'Iterate over all video packets',
+		unit: 'packets/s',
+		results: [
+			{ name: 'Mediabunny', value: 10800 },
+			{ name: 'web-demuxer', value: 2390 },
+			{ name: '@remotion/media-parser', value: 842 },
+		]
+	},
+	{
+		name: 'Convert to .webm & resize to 320x180',
+		unit: 'frames/s',
+		results: [
+			{ name: 'Mediabunny', value: 804 },
+			{ name: '@remotion/webcodecs', value: 324 },
+			{ name: 'ffmpeg.wasm', value: 12 },
+		]
+	}
+];
+
+const bundleSizes = [
+	{ name: 'Reading .wav files', size: 5.1 },
+	{ name: 'Writing .wav files', size: 5.79 },
+	{ name: 'Writing .webm files', size: 11.36 },
+	{ name: 'Reading .webm files', size: 15.2 },
+	{ name: 'Reading .mp4 files', size: 16.03 },
+	{ name: 'Writing .mp4 files', size: 17.28 },
+	{ name: 'Reading all formats', size: 30.02 },
+	{ name: 'mp4box.js', size: 37.3, isThirdParty: true },
+	{ name: 'All features', size: 69.62 },
+	{ name: '@remotion/webcodecs', size: 87.2 + 20.8, isThirdParty: true },
+];
+</script>
+
+<div class="flex gap-4 flex-wrap justify-center items-center">
+	<div v-for="quote in quotes" class="bg-(--vp-c-bg-soft) w-80 p-4 rounded-2xl flex shrink-0 flex-col relative">
+		<svg class="size-8 absolute -top-3 left-2.5 text-(--vp-c-gray-1)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388q0-.527.062-1.054q.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992a4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 9 7.558V11a1 1 0 0 0 1 1zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612q0-.527.062-1.054q.094-.558.31-.992q.217-.434.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992a4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 3 7.558V11a1 1 0 0 0 1 1z"/></svg>
+		<p class="!my-0 flex-1 text-sm !leading-6">{{ quote.quote }}</p>
+		<div class="shrink-0 flex gap-2 items-center mt-1.5">
+			<a :href="quote.url" target="_blank">
+				<img :src="quote.image" class="size-8 rounded-full shrink-0" alt="Author image">
+			</a>
+			<p class="!my-0 flex-1 text-xs font-medium">{{ quote.author }}</p>
+		</div>
+	</div>
+</div>
+
+<div class="space-y-16 mt-18">
 <div class="flex flex-col lg:flex-row lg:gap-20 lg:items-center">
 <div class="flex-1 min-w-0">
 <h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Read any media file, efficiently</h1>
@@ -139,7 +220,7 @@ await conversion.execute();
 <div class="flex flex-col-reverse lg:flex-row gap-4 lg:gap-20 lg:items-center">
 <div class="relative flex-1 min-w-0">
 <div class="absolute size-70 rounded-full bg-[#ff45ac]/0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-[200px]" />
-<img class="relative" src="./inspiring-io.svg">
+<img class="relative" src="./assets/inspiring-io.svg">
 </div>
 <div class="flex-1 min-w-0">
 <h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Universal I/O</h1>
@@ -158,64 +239,17 @@ await conversion.execute();
 </div>
 <div class="grid place-items-center relative flex-1 min-w-0">
 <div class="absolute size-70 rounded-full bg-[#ff45ac]/0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-[200px]" />
-<img class="relative" src="./codec-soup.svg">
+<img class="relative" src="./assets/codec-soup.svg">
 </div>
 </div>
 
-<script setup>
-const benchmarks = [
-	{
-		name: 'Extract metadata',
-		unit: 'ops/s',
-		results: [
-			{ name: 'Mediabunny', value: 1000/1.16 },
-			{ name: '@remotion/media-parser', value: 1000/4.28 },
-			{ name: 'web-demuxer', value: 1000/12.4 },
-			{ name: 'mp4box.js', value: 1000/23 },
-			{ name: 'ffmpeg.wasm', value: 1000/547 },
-		]
-	},
-	{
-		name: 'Iterate over all video packets',
-		unit: 'packets/s',
-		results: [
-			{ name: 'Mediabunny', value: 10800 },
-			{ name: 'web-demuxer', value: 2390 },
-			{ name: '@remotion/media-parser', value: 842 },
-		]
-	},
-	{
-		name: 'Convert to .webm & resize to 320x180',
-		unit: 'frames/s',
-		results: [
-			{ name: 'Mediabunny', value: 804 },
-			{ name: '@remotion/webcodecs', value: 324 },
-			{ name: 'ffmpeg.wasm', value: 12 },
-		]
-	}
-];
-
-const bundleSizes = [
-	{ name: 'Reading .wav files', size: 5.1 },
-	{ name: 'Writing .wav files', size: 5.79 },
-	{ name: 'Writing .webm files', size: 11.36 },
-	{ name: 'Reading .webm files', size: 15.2 },
-	{ name: 'Reading .mp4 files', size: 16.03 },
-	{ name: 'Writing .mp4 files', size: 17.28 },
-	{ name: 'Reading all formats', size: 30.02 },
-	{ name: 'mp4box.js', size: 37.3, isThirdParty: true },
-	{ name: 'All features', size: 69.62 },
-	{ name: '@remotion/webcodecs', size: 87.2 + 20.8, isThirdParty: true },
-];
-</script>
-
 <div class="flex flex-col-reverse lg:flex-row gap-4 lg:gap-20 lg:items-center">
 <div class="space-y-8 flex-1 min-w-0">
 	<div v-for="benchmark in benchmarks" class="space-y-2">
 		<p class="text-center font-medium text-sm !mt-0 !mb-2">{{ benchmark.name }}</p>
 		<div v-for="result, i in benchmark.results" class="flex items-center gap-2">
 			<p :class="{ '!text-[#ff78c2]': i === 0 }" class="!my-0 shrink-0 font-medium w-40 text-xs whitespace-nowrap text-right">{{ result.name }}</p>
-			<div class="h-8 bg-[var(--vp-c-gray-2)] rounded-md" :style="{ width: `calc(${result.value / Math.max(...benchmark.results.map(x => x.value))}*(100% - 7.5rem - 10rem))`, background: i === 0 ? '-webkit-linear-gradient(-30deg, #ff45ac, #ff78c2)' : undefined }" />
+			<div class="h-8 bg-(--vp-c-gray-2) rounded-md" :style="{ width: `calc(${result.value / Math.max(...benchmark.results.map(x => x.value))}*(100% - 7.5rem - 10rem))`, background: i === 0 ? '-webkit-linear-gradient(-30deg, #ff45ac, #ff78c2)' : undefined }" />
 			<p :class="{ '!text-[#ff78c2]': i === 0, 'opacity-50': i > 0 }" class="!my-0 text-xs w-30">{{ result.value < 100 ? result.value.toPrecision(3) : Math.floor(result.value) }} {{ benchmark.unit }}</p>
 		</div>
 	</div>
@@ -236,7 +270,7 @@ const bundleSizes = [
 	<p class="text-center font-medium text-sm !mt-0 !mb-2">Bundle size, minified + gzipped</p>
 	<div v-for="result in bundleSizes" class="flex items-center gap-2">
 		<p :class="{ '!text-[#ff78c2]': !result.isThirdParty }" class="!my-0 shrink-0 font-medium w-40 text-xs whitespace-nowrap text-right">{{ result.name }}</p>
-		<div class="h-8 bg-[var(--vp-c-gray-2)] rounded-md" :style="{ width: `calc(${result.size / Math.max(...bundleSizes.map(x => x.size))}*(100% - 7.5rem - 10rem))`, background: !result.isThirdParty ? '-webkit-linear-gradient(-30deg, #ff45ac, #ff78c2)' : undefined }" />
+		<div class="h-8 bg-(--vp-c-gray-2) rounded-md" :style="{ width: `calc(${result.size / Math.max(...bundleSizes.map(x => x.size))}*(100% - 7.5rem - 10rem))`, background: !result.isThirdParty ? '-webkit-linear-gradient(-30deg, #ff45ac, #ff78c2)' : undefined }" />
 		<p :class="{ '!text-[#ff78c2]': !result.isThirdParty, 'opacity-50': result.isThirdParty }" class="!my-0 text-xs w-30">{{ result.size < 100 ? result.size.toPrecision(3) : Math.floor(result.size) }} kB</p>
 	</div>
 	<div class="flex items-center gap-2">
@@ -249,4 +283,4 @@ const bundleSizes = [
 </div>
 </div>
 
-</div>
+</div>

examples/file-compression/file-compression.ts

@@ -9,7 +9,7 @@ import {
 	QUALITY_VERY_LOW,
 } from 'mediabunny';
 
-import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
+import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4';
 (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
 
 const selectMediaButton = document.querySelector('button') as HTMLButtonElement;

examples/file-compression/index.html

@@ -21,7 +21,7 @@
 			</button>
 
 			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
-				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
+				<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>
 		<p class="text-xs opacity-60 mt-2" id="file-name"></p>
@@ -48,7 +48,7 @@
 			target="_blank"
 			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
 		>
-			<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
+			<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
 			<p>View source code</p>
 		</a>
 	</body>

examples/live-recording/index.html

@@ -49,7 +49,7 @@
 			target="_blank"
 			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
 		>
-			<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
+			<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
 			<p>View source code</p>
 		</a>
 	</body>

examples/media-player/index.html

@@ -21,7 +21,7 @@
 			</button>
 
 			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
-				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
+				<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>
 		<p class="text-xs opacity-60 mt-2" id="file-name"></p>
@@ -35,18 +35,18 @@
 			<div class="bg-zinc-900/50 absolute left-0 right-0 bottom-0 h-10 items-center flex m-2 rounded-lg text-white transition-opacity" id="controls" style="opacity: 0;">
 				<button class="p-2 group outline-none" id="play-button">
 					<div class="size-6 invert group-hover:scale-110">
-						<img src="../../assets/play-icon.svg" class="size-full" id="play-icon">
-						<img src="../../assets/pause-icon.svg" class="size-full" id="pause-icon" style="display: none;">
+						<img src="../../docs/assets/play-icon.svg" class="size-full" id="play-icon">
+						<img src="../../docs/assets/pause-icon.svg" class="size-full" id="pause-icon" style="display: none;">
 					</div>
 				</button>
 
 				<button class="p-2 ml-4 mr-1" id="volume-button">
 					<div class="size-6 invert group-hover:scale-110" id="volume-icon-wrapper">
-						<img src="../../assets/volume-off-icon.svg" class="size-full">
-						<img src="../../assets/volume-x-icon.svg" class="size-full">
-						<img src="../../assets/volume-0-icon.svg" class="size-full">
-						<img src="../../assets/volume-1-icon.svg" class="size-full">
-						<img src="../../assets/volume-2-icon.svg" class="size-full">
+						<img src="../../docs/assets/volume-off-icon.svg" class="size-full">
+						<img src="../../docs/assets/volume-x-icon.svg" class="size-full">
+						<img src="../../docs/assets/volume-0-icon.svg" class="size-full">
+						<img src="../../docs/assets/volume-1-icon.svg" class="size-full">
+						<img src="../../docs/assets/volume-2-icon.svg" class="size-full">
 					</div>
 				</button>
 
@@ -68,7 +68,7 @@
 
 				<button class="p-2 group outline-none" id="fullscreen-button">
 					<div class="size-6 invert group-hover:scale-110">
-						<img src="../../assets/fullscreen-icon.svg" class="size-full">
+						<img src="../../docs/assets/fullscreen-icon.svg" class="size-full">
 					</div>
 				</button>
 			</div>
@@ -84,7 +84,7 @@
 			target="_blank"
 			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
 		>
-			<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
+			<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
 			<p>View source code</p>
 		</a>
 	</body>

examples/media-player/media-player.ts

@@ -8,7 +8,7 @@ import {
 	WrappedCanvas,
 } from 'mediabunny';
 
-import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
+import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4';
 (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
 
 const selectMediaButton = document.querySelector('button') as HTMLButtonElement;

examples/metadata-extraction/index.html

@@ -21,7 +21,7 @@
 			</button>
 
 			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
-				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
+				<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>
 		<p class="text-xs opacity-60 mt-2" id="file-name"></p>
@@ -41,7 +41,7 @@
 			target="_blank"
 			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
 		>
-			<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
+			<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
 			<p>View source code</p>
 		</a>
 	</body>

examples/metadata-extraction/metadata-extraction.ts

@@ -1,6 +1,6 @@
 import { Input, ALL_FORMATS, BlobSource } from 'mediabunny';
 
-import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
+import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4';
 (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
 
 const selectMediaButton = document.querySelector('button') as HTMLButtonElement;

examples/procedural-generation/index.html

@@ -55,7 +55,7 @@
 			target="_blank"
 			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
 		>
-			<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
+			<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
 			<p>View source code</p>
 		</a>
 	</body>

examples/thumbnail-generation/index.html

@@ -21,7 +21,7 @@
 			</button>
 
 			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
-				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
+				<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>
 		<p class="text-xs opacity-60 mt-2" id="file-name"></p>
@@ -41,7 +41,7 @@
 			target="_blank"
 			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-bl-xl"
 		>
-			<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
+			<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
 			<p>View source code</p>
 		</a>
 	</body>

examples/thumbnail-generation/thumbnail-generation.ts

@@ -1,6 +1,6 @@
 import { Input, ALL_FORMATS, BlobSource, CanvasSink } from 'mediabunny';
 
-import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
+import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4';
 (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
 
 const selectMediaButton = document.querySelector('button') as HTMLButtonElement;