@omnimedia/omnitool 1.1.0-1 → 1.1.0-100

package/x/features/transition/parts/fragment.d.ts

@@ -0,0 +1 @@
+export declare const fragment: (glsl: string) => string;

package/x/features/transition/parts/fragment.js

@@ -0,0 +1,25 @@
+export const fragment = (glsl) => `
+	precision highp float;
+	varying vec2 vTextureCoord;
+	varying vec2 _uv;
+	uniform sampler2D from, to;
+	uniform float progress, ratio, _fromR, _toR;
+	uniform float customUniform;
+
+	vec4 getFromColor(vec2 uv){
+		return texture2D(from, .5+(uv-.5)*vec2(max(ratio/_fromR,1.), max(_fromR/ratio,1.)));
+	}
+	vec4 getToColor(vec2 uv){
+		return texture2D(to, .5+(uv-.5)*vec2(max(ratio/_toR,1.), max(_toR/ratio,1.)));
+	}
+
+	// gl-transition code here
+	${glsl}
+	// gl-transition code end
+
+	void main(){
+		vec2 uv = vTextureCoord.xy;
+		gl_FragColor = transition(vTextureCoord);
+	}
+`;
+//# sourceMappingURL=fragment.js.map

package/x/features/transition/parts/fragment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fragment.js","sourceRoot":"","sources":["../../../../s/features/transition/parts/fragment.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC;;;;;;;;;;;;;;;;GAgBvC,IAAI;;;;;;;CAON,CAAA"}

package/x/features/transition/parts/types.d.ts

@@ -0,0 +1,23 @@
+import { Renderer } from "pixi.js";
+import { TransitionName } from "../../../timeline/parts/transitions.js";
+export interface TransitionOptions {
+    name: TransitionName;
+    renderer: Renderer;
+}
+export interface TransitionRendererOptions {
+    from: VideoFrame;
+    to: VideoFrame;
+    progress: number;
+    width: number;
+    height: number;
+}
+export interface GLTransition {
+    author: string;
+    createdAt: string;
+    glsl: string;
+    license: string;
+    name: TransitionName;
+    updatedAt: string;
+    defaultParams: any;
+    paramsTypes: any;
+}

package/x/features/transition/parts/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/x/features/transition/parts/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../s/features/transition/parts/types.ts"],"names":[],"mappings":""}

package/x/features/transition/parts/uniforms.d.ts

@@ -0,0 +1,31 @@
+import { GLTransition } from "./types.js";
+export declare const uniforms: {
+    custom: (transition: GLTransition) => {
+        [k: string]: {
+            value: unknown;
+            type: string;
+        };
+    };
+    basics: {
+        _fromR: {
+            value: number;
+            type: string;
+        };
+        _toR: {
+            value: number;
+            type: string;
+        };
+        ratio: {
+            value: number;
+            type: string;
+        };
+        progress: {
+            value: number;
+            type: string;
+        };
+        customUniform: {
+            value: number;
+            type: string;
+        };
+    };
+};

package/x/features/transition/parts/uniforms.js

@@ -0,0 +1,27 @@
+export const uniforms = {
+    custom: (transition) => Object.fromEntries(Object.entries(transition.defaultParams).map(([name, value]) => [
+        name,
+        {
+            value,
+            type: getUniformType(transition.paramsTypes[name])
+        }
+    ])),
+    basics: {
+        _fromR: { value: 1, type: "f32" },
+        _toR: { value: 1, type: "f32" },
+        ratio: { value: 1, type: "f32" },
+        progress: { value: 0, type: "f32" },
+        customUniform: { value: 0, type: "f32" },
+    }
+};
+const getUniformType = (type) => {
+    if (type === "f32" || type === "i32") {
+        return type;
+    }
+    else if (type === "float") {
+        return "f32";
+    }
+    else
+        return `${type}<f32>`;
+};
+//# sourceMappingURL=uniforms.js.map

package/x/features/transition/parts/uniforms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uniforms.js","sourceRoot":"","sources":["../../../../s/features/transition/parts/uniforms.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACvB,MAAM,EAAE,CAAC,UAAwB,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CACvD,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QAC/D,IAAI;QACJ;YACC,KAAK;YACL,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAClD;KACD,CAAC,CACF;IACD,MAAM,EAAE;QACP,MAAM,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;QAC/B,IAAI,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;QAC7B,KAAK,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;QAC9B,QAAQ,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;QACjC,aAAa,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC;KACtC;CACD,CAAA;AAED,MAAM,cAAc,GAAG,CAAC,IAAY,EAAE,EAAE;IACvC,IAAG,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACrC,OAAO,IAAI,CAAA;IACZ,CAAC;SAAM,IAAG,IAAI,KAAK,OAAO,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAA;IACb,CAAC;;QACI,OAAO,GAAG,IAAI,OAAO,CAAA;AAC3B,CAAC,CAAA"}

package/x/features/transition/parts/vertex.d.ts

@@ -0,0 +1 @@
+export declare const vertex = "\n\tin vec2 aPosition;\n\tvarying vec2 _uv;                          // gl-transition\n\tuniform mat3 projectionMatrix;\n\tuniform vec4 uInputSize;\n\tuniform vec4 uOutputFrame;\n\tout vec2 vTextureCoord;\n\tuniform vec4 uOutputTexture;\n\n\tvec4 filterVertexPosition( void )\n\t{\n\t\t\tvec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n\n\t\t\tposition.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n\t\t\tposition.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n\n\t\t\treturn vec4(position, 0.0, 1.0);\n\t}\n\n\tvec2 filterTextureCoord( void )\n\t{\n\treturn aPosition * (uOutputFrame.zw * uInputSize.zw);\n\t}\n\n\tvoid main(void)\n\t{\n\tgl_Position = filterVertexPosition();\n\tvTextureCoord = filterTextureCoord();\n\t_uv = vec2(0.5, 0.5) * (aPosition +vec2(1.0, 1.0));    // gl-transition\n\t}\n";

package/x/features/transition/parts/vertex.js

@@ -0,0 +1,32 @@
+export const vertex = `
+	in vec2 aPosition;
+	varying vec2 _uv;                          // gl-transition
+	uniform mat3 projectionMatrix;
+	uniform vec4 uInputSize;
+	uniform vec4 uOutputFrame;
+	out vec2 vTextureCoord;
+	uniform vec4 uOutputTexture;
+
+	vec4 filterVertexPosition( void )
+	{
+			vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
+
+			position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
+			position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
+
+			return vec4(position, 0.0, 1.0);
+	}
+
+	vec2 filterTextureCoord( void )
+	{
+	return aPosition * (uOutputFrame.zw * uInputSize.zw);
+	}
+
+	void main(void)
+	{
+	gl_Position = filterVertexPosition();
+	vTextureCoord = filterTextureCoord();
+	_uv = vec2(0.5, 0.5) * (aPosition +vec2(1.0, 1.0));    // gl-transition
+	}
+`;
+//# sourceMappingURL=vertex.js.map

package/x/features/transition/parts/vertex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertex.js","sourceRoot":"","sources":["../../../../s/features/transition/parts/vertex.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrB,CAAA"}

package/x/features/transition/transition.d.ts

@@ -0,0 +1,5 @@
+import { Texture } from "pixi.js";
+import { TransitionOptions, TransitionRendererOptions } from "./parts/types.js";
+export declare function makeTransition({ name, renderer }: TransitionOptions): {
+    render({ width, height, from, to, progress }: TransitionRendererOptions): Texture<import("pixi.js").TextureSource<any>>;
+};

package/x/features/transition/transition.js

@@ -0,0 +1,50 @@
+//@ts-ignore
+import transitions from "gl-transitions";
+import { Filter, GlProgram, Sprite, Texture, ImageSource } from "pixi.js";
+import { vertex } from "./parts/vertex.js";
+import { uniforms } from "./parts/uniforms.js";
+import { fragment } from "./parts/fragment.js";
+export function makeTransition({ name, renderer }) {
+    const transition = transitions.find((t) => t.name === name);
+    const transitionSprite = new Sprite();
+    const transitionTexture = new Texture();
+    const sourceFrom = new ImageSource({});
+    const sourceTo = new ImageSource({});
+    const filter = new Filter({
+        glProgram: new GlProgram({
+            vertex,
+            fragment: fragment(transition.glsl),
+        }),
+        resources: {
+            from: sourceFrom,
+            to: sourceTo,
+            uniforms: {
+                ...uniforms.basics,
+                ...uniforms.custom(transition)
+            }
+        }
+    });
+    transitionSprite.filters = [filter];
+    return {
+        render({ width, height, from, to, progress }) {
+            if (transitionSprite.width !== width || transitionSprite.height !== height) {
+                transitionSprite.setSize({ width, height });
+                transitionTexture.source.resize(width, height);
+            }
+            sourceFrom.resource = from;
+            sourceTo.resource = to;
+            sourceFrom.update();
+            sourceTo.update();
+            filter.resources.uniforms.uniforms.progress = progress;
+            renderer.render({
+                container: transitionSprite,
+                target: transitionTexture,
+                clear: false,
+                width,
+                height
+            });
+            return transitionTexture;
+        }
+    };
+}
+//# sourceMappingURL=transition.js.map

package/x/features/transition/transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.js","sourceRoot":"","sources":["../../../s/features/transition/transition.ts"],"names":[],"mappings":"AAAA,YAAY;AACZ,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AAEvE,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAA;AAG5C,MAAM,UAAU,cAAc,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAoB;IACjE,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAiB,CAAA;IACzF,MAAM,gBAAgB,GAAG,IAAI,MAAM,EAAE,CAAA;IACrC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAAE,CAAA;IACvC,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAA;IACtC,MAAM,QAAQ,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC,CAAA;IAEpC,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC;QACzB,SAAS,EAAE,IAAI,SAAS,CAAC;YACxB,MAAM;YACN,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC;SACnC,CAAC;QACF,SAAS,EAAE;YACV,IAAI,EAAE,UAAU;YAChB,EAAE,EAAE,QAAQ;YACZ,QAAQ,EAAE;gBACT,GAAG,QAAQ,CAAC,MAAM;gBAClB,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC;aAC9B;SACD;KACD,CAAC,CAAA;IAEF,gBAAgB,CAAC,OAAO,GAAG,CAAC,MAAM,CAAC,CAAA;IAEnC,OAAO;QACN,MAAM,CAAC,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAA4B;YACpE,IAAG,gBAAgB,CAAC,KAAK,KAAK,KAAK,IAAI,gBAAgB,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;gBAC3E,gBAAgB,CAAC,OAAO,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAA;gBACzC,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;YAC/C,CAAC;YAED,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAA;YAC1B,QAAQ,CAAC,QAAQ,GAAG,EAAE,CAAA;YACtB,UAAU,CAAC,MAAM,EAAE,CAAA;YACnB,QAAQ,CAAC,MAAM,EAAE,CAAA;YAEjB,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAA;YAEtD,QAAQ,CAAC,MAAM,CAAC;gBACf,SAAS,EAAE,gBAAgB;gBAC3B,MAAM,EAAE,iBAAiB;gBACzB,KAAK,EAAE,KAAK;gBACZ,KAAK;gBACL,MAAM;aACN,CAAC,CAAA;YAEF,OAAO,iBAAiB,CAAA;QACzB,CAAC;KACD,CAAA;AACF,CAAC"}

package/x/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./driver/driver.js";
+export * from "./driver/driver-worker.js";
 export * from "./timeline/index.js";

package/x/index.html

@@ -6,13 +6,18 @@
 					<meta name="darkreader-lock"/>
 					<title>omnitool</title>
 					<style>
-@layer vars, basics, page;
+@layer vars, basics, page, demo;
 
 @layer vars {
 :root {
-	--link: cyan;
-	--color: #fffa;
-	--background: #111;
+	--ink: #f2f4f8;
+	--muted: #9fb0c3;
+	--surface: #0f141c;
+	--panel: #121a26;
+	--accent: #2cffd7;
+	--accent-2: #ff9a3c;
+	--border: color-mix(in oklab, #ffffff 10%, transparent);
+	--shadow: 0 20px 60px #00000066;
 }
 }
 
@@ -27,16 +32,20 @@
 @layer page {
 html {
 	font-size: 10px;
-	color: var(--color);
-	background: var(--background);
+	color: var(--ink);
+	background:
+		radial-gradient(1200px 600px at 10% -10%, #1f314e 0%, transparent 60%),
+		radial-gradient(800px 500px at 90% -20%, #2a1f4e 0%, transparent 55%),
+		linear-gradient(160deg, #0a0f16 0%, #0b1018 45%, #0b0f14 100%);
+	font-family: "Space Grotesk", system-ui, sans-serif;
 }
 
 body {
-	padding: 2em;
+	padding: 3.2em;
 }
 
 .results {
-	margin-top: 1em;
+	margin-top: 2em;
 
 	display: flex;
 	flex-direction: column;
@@ -44,8 +53,10 @@ body {
 
 	> div {
 		font-size: 1.5em;
-		border: 1px solid color-mix(in lch, transparent, var(--color) 20%);
+		border: 1px solid var(--border);
 		padding: 1em;
+		background: var(--panel);
+		box-shadow: var(--shadow);
 	}
 
 	canvas {
@@ -53,14 +64,238 @@ body {
 	}
 }
 
-#filmstrip {
+}
+
+@layer demo {
+.hero {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 2em;
+	margin-bottom: 2.4em;
+}
+
+.hero h1 {
+	font-family: "Share Tech", system-ui, sans-serif;
+	font-size: 3.4em;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+}
+
+.hero h1 small {
+	font-size: 0.5em;
+	color: var(--muted);
+}
+
+.hero p {
+	font-size: 1.4em;
+	color: var(--muted);
+	margin-top: 0.6em;
+	max-width: 60ch;
+}
+
+.demo-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 1.8em;
+	margin-bottom: 2.4em;
+}
+
+.demo-card {
+	background: linear-gradient(160deg, #111a25 0%, #0f1620 60%, #0d121a 100%);
+	border: 1px solid var(--border);
+	border-radius: 16px;
+	padding: 1.6em;
+	box-shadow: var(--shadow);
+	display: grid;
+	gap: 1.2em;
+}
+
+.demo-card h2 {
+	font-size: 1.8em;
+	letter-spacing: 0.03em;
+}
+
+.demo-card p {
+	color: var(--muted);
+	font-size: 1.2em;
+}
+
+.demo-controls {
+	display: grid;
+	gap: 0.8em;
+}
+
+.demo-progress {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: center;
+	gap: 0.8em;
+	font-size: 1.1em;
+	color: var(--muted);
+}
+
+.demo-progress .status {
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	font-size: 0.9em;
+}
+
+progress.progress {
+	width: 100%;
+	height: 10px;
+	border-radius: 999px;
+	overflow: hidden;
+	background: #0b1118;
+	border: 1px solid var(--border);
+}
+
+progress.progress::-webkit-progress-bar {
+	background: #0b1118;
+}
+
+progress.progress::-webkit-progress-value {
+	background: linear-gradient(120deg, var(--accent), #4df1ff);
+}
+
+progress.progress::-moz-progress-bar {
+	background: linear-gradient(120deg, var(--accent), #4df1ff);
+}
+
+.demo-preview {
+	border: 1px solid var(--border);
+	border-radius: 12px;
+	min-height: 160px;
+	background: #0b1118;
+	display: grid;
+	place-items: center;
+	overflow: hidden;
+}
+
+.demo-preview canvas {
+	width: 100%;
+	height: auto;
+}
+
+.filmstrip-controls,
+.waveform-controls {
+	display: grid;
+	gap: 0.6em;
+	font-size: 1.1em;
+	color: var(--muted);
+}
+
+.filmstrip-controls input[type="range"],
+.waveform-controls input[type="range"] {
+	width: 100%;
+}
+
+input[type="file"] {
+	background: #0b111a;
+	color: var(--ink);
+	border: 1px dashed #2b3b52;
+	border-radius: 10px;
+	padding: 0.8em;
+	font-size: 1.2em;
+}
+
+button {
+	background: linear-gradient(120deg, var(--accent), #4df1ff);
+	border: none;
+	color: #0a0f14;
+	font-weight: 600;
+	letter-spacing: 0.03em;
+	border-radius: 10px;
+	padding: 0.8em 1.2em;
+	cursor: pointer;
+	transition: transform 120ms ease, box-shadow 120ms ease;
+	box-shadow: 0 10px 20px #00ffd533;
+}
+
+button[data-action="export"] {
+	background: linear-gradient(120deg, var(--accent-2), #ffd479);
+	box-shadow: 0 10px 20px #ffb35a33;
+}
+
+button:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+	transform: none;
+	box-shadow: none;
+}
+
+button:not(:disabled):hover {
+	transform: translateY(-1px);
+}
+
+.filmstrip {
 	display: flex;
 	overflow-x: scroll;
+	gap: 0.4em;
+	padding: 0.4em 0;
+}
+
+.player {
+	margin-top: 1.2em;
+	display: grid;
+	gap: 0.8em;
+}
+
+.player .timeline {
+	display: grid;
+	gap: 0.6em;
+}
+
+.player .track {
+	position: relative;
+	height: 10px;
+	border-radius: 999px;
+	background:
+		linear-gradient(90deg, #1e1e1e, #1a1a1a),
+		repeating-linear-gradient(90deg, #ffffff14 0 6px, transparent 6px 12px);
+	border: 1px solid #ffffff22;
+	overflow: hidden;
 }
+
+.player .playhead {
+	position: absolute;
+	left: 0%;
+	top: -6px;
+	width: 2px;
+	height: 22px;
+	background: #3cff9c;
+	box-shadow: 0 0 12px #3cff9c99;
+}
+
+.player .scrub {
+	width: 100%;
+}
+
+.player .timecode {
+	font-size: 1.2em;
+	letter-spacing: 0.06em;
+	color: #c7ffe3;
+}
+
+.player .controls {
+	display: flex;
+	gap: 0.8em;
+}
+
+.player-canvas {
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	padding: 0.6em;
+	background: #0b1118;
 }
 
+canvas {
+	width: 100%;
+	height: auto;
+}
+}
 </style>
-					<script type=module src="demo/demo.bundle.min.js?v=c614bb3d17cc"></script>
+					<script type=module src="demo/demo.bundle.min.js?v=69fd35558d54"></script>
 
 
 		<meta name="theme-color" content="#3cff9c">
@@ -74,31 +309,115 @@ body {
 
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=Share+Tech&family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
 
 				</head>
 				<body>
 
 	<section>
-		<h1>Omnitool <small>v1.1.0-1</small></h1>
-		<button class=fetch>fetch</button>
-		<button class="import">import</button>
-		<div class=results></div>
-		<div class=filmstrip-demo>
-			<label for="viewable-range">viewable range:</label>
-			<input type="range" min="0" max="100" step="1" value="10" class="range" id="viewable-range" name="viewable-range">
-			<div class="range-view"></div>
-			<label for="range-size">viewable range size:</label>
-			<input type="range" class="range-size" min="0.1" max="10" step="0.1" value="0.5" id="range-size" name="range-size">
-			<label for="frequency">frequency:</label>
-			<input type="range" class="frequency" min="0.1" max="120" step="0.1" value="10" id="frequency" name="frequency">
-			<div class="frequency-view">10 (fps)</div>
-			<div id=filmstrip></div>
-		</div>
-		<div class=waveform-demo>
-			<label for="width">width:</label>
-			<input class="width" id="width" name="width" type="range" min="100" max="1000000" value="1000" />
+		<header class="hero">
+			<div>
+				<h1>Omnitool <small>v1.1.0-100</small></h1>
+				<p>Developer demos for decoding, preview, waveform, playback, and export.</p>
+			</div>
+		</header>
+
+		<div class="demo-grid">
+			<article class="demo-card" data-demo="transcode">
+				<header>
+					<h2>Transcode Test</h2>
+					<p>Full decode + composite + encode pipeline.</p>
+				</header>
+				<div class="demo-controls">
+					<input type="file" accept="video/*" />
+					<button data-action="run">Run Transcode</button>
+				</div>
+				<div class="demo-progress">
+					<progress class="progress"></progress>
+					<span class="status">idle</span>
+				</div>
+				<div class="demo-preview"></div>
+			</article>
+
+			<article class="demo-card" data-demo="filmstrip">
+				<header>
+					<h2>Filmstrip</h2>
+					<p>Thumbnail sampling across a time range.</p>
+				</header>
+				<div class="demo-controls">
+					<input type="file" accept="video/*" />
+					<button data-action="run">Generate Filmstrip</button>
+				</div>
+				<div class="filmstrip-controls">
+					<label>viewable range</label>
+					<input type="range" min="0" max="100" step="1" value="10" class="range">
+					<div class="range-view"></div>
+					<label>range size</label>
+					<input type="range" class="range-size" min="0.1" max="10" step="0.1" value="0.5">
+					<label>frequency</label>
+					<input type="range" class="frequency" min="0.1" max="120" step="0.1" value="10">
+					<div class="frequency-view">10 (fps)</div>
+				</div>
+				<div class="filmstrip"></div>
+			</article>
+
+			<article class="demo-card" data-demo="waveform">
+				<header>
+					<h2>Waveform</h2>
+					<p>Audio peak rendering with adjustable width.</p>
+				</header>
+				<div class="demo-controls">
+					<input type="file" accept="audio/*,video/*" />
+					<button data-action="run">Build Waveform</button>
+				</div>
+				<div class="waveform-controls">
+					<label>width</label>
+					<input class="width" type="range" min="100" max="1000000" value="1000" step="100" />
+				</div>
+				<div class="waveform-canvas"></div>
+			</article>
+
+			<article class="demo-card" data-demo="playback">
+				<header>
+					<h2>Timeline Playback</h2>
+					<p>Build timeline and run the playback engine.</p>
+				</header>
+				<div class="demo-controls">
+					<input type="file" accept="video/*,audio/*,image/*" />
+				</div>
+				<div class="player-canvas"></div>
+				<div class="player">
+					<div class="timeline">
+						<div class="track">
+							<div class="playhead"></div>
+						</div>
+						<input class="scrub" type="range" min="0" max="0" step="1" value="0">
+					</div>
+					<div class="timecode">0:00.000 / 0:00.000</div>
+					<div class="controls">
+						<button class=play disabled>play</button>
+						<button class=stop disabled>stop</button>
+					</div>
+				</div>
+			</article>
+
+			<article class="demo-card" data-demo="export">
+				<header>
+					<h2>Timeline Export</h2>
+					<p>Build timeline and export a render.</p>
+				</header>
+				<div class="demo-controls">
+					<input type="file" accept="video/*,audio/*,image/*" />
+					<button data-action="export" disabled>Export</button>
+				</div>
+				<div class="demo-progress">
+					<progress class="progress"></progress>
+					<span class="status">idle</span>
+				</div>
+				<div class="demo-preview"></div>
+			</article>
 		</div>
+
 	</section>
 
 				</body>