mirror of
https://github.com/arcodange-org/mediabunny.git
synced 2026-09-27 19:03:46 +02:00
Add quotes, move assets around
This commit is contained in:
Vanilagy
+87
-53
@@ -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>
|
||||
Reference in New Issue
Block a user