diff --git a/package.json b/package.json
index 9015591..6f222f0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "svelte-knobs",
 	"description": "Svelte component library for building customizable knob controls.",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"repository": {
 		"url": "https://github.com/eye-wave/svelte-knobs"
 	},
diff --git a/src/lib/ImageKnob.svelte b/src/lib/ImageKnob.svelte
new file mode 100644
index 0000000..4cc0d36
--- /dev/null
+++ b/src/lib/ImageKnob.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { normalize } from './params.js';
+	import { onMount } from 'svelte';
+	import { spring } from 'svelte/motion';
+	import KnobBase from './KnobBase.svelte';
+	import type { SharedKnobProps } from './KnobBase.svelte';
+
+	type Props = {
+		stiffness?: number;
+		class?: string;
+		source: string;
+		numberOfFrames?: number;
+		width?: number;
+		height?: number;
+	} & SharedKnobProps;
+
+	let {
+		style,
+		source,
+		numberOfFrames = $bindable(),
+		class: className,
+		label = '',
+		unit = '',
+		onChange,
+		value = $bindable(),
+		defaultValue,
+		param,
+		stiffness = 0.5,
+		decimalDigits = 0,
+		snapValues = [],
+		snapThreshold = 0.1,
+		width = 80,
+		height = 80,
+		disabled = false,
+		draggable = true,
+		colors = {}
+	}: Props = $props();
+
+	const rotationDegrees = spring(normalize(value, param) * 270 - 135, { stiffness });
+
+	function draw() {
+		if (!ctx) return;
+		if (!numberOfFrames) return;
+		if (!image) return;
+		if (!('width' in image && 'height' in image)) return;
+
+		const normalized = ($rotationDegrees + 135) / 270;
+		const i = Math.floor(normalized * numberOfFrames);
+		const y = image.width * i;
+
+		if (i < 0) return;
+		if (y >= image.height) return;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.drawImage(
+			image,
+			0, // sx
+			y, // sy
+			image.width, // sWidth
+			image.width, // sHeight
+			0, // dx
+			0, // dy
+			canvas.width, // dWidth
+			canvas.height // dHeight
+		);
+	}
+
+	onMount(() => {
+		ctx = canvas.getContext('2d');
+		ctx?.fillText('Loading...', 0, canvas.height / 2);
+	});
+
+	onMount(() => {
+		if (!source) return;
+
+		console.time('load image');
+
+		image = new Image();
+		image.src = source;
+		image.onload = () => {
+			if (!image) throw Error('What');
+			if (numberOfFrames === undefined) {
+				if ('width' in image && 'height' in image) {
+					console.warn('Automatic estimation of numberOfFrames might be inaccurate');
+					numberOfFrames = Math.floor(image.height / image.width);
+				} else {
+					throw Error('Failed to estimate numberOfFrames');
+				}
+			}
+
+			console.timeEnd('load image');
+			isLoading = false;
+		};
+	});
+
+	$effect(() => {
+		if (isLoading) return;
+		draw();
+	});
+
+	let canvas: HTMLCanvasElement;
+	let ctx: CanvasRenderingContext2D | null = null;
+	let isLoading = $state(true);
+	let image: HTMLImageElement | null = null;
+</script>
+
+<KnobBase
+	{colors}
+	{decimalDigits}
+	{defaultValue}
+	{disabled}
+	{draggable}
+	{label}
+	{onChange}
+	{param}
+	{snapThreshold}
+	{snapValues}
+	{style}
+	{unit}
+	bind:value
+	{rotationDegrees}
+>
+	{#snippet ui({ handleTouchStart, handleMouseDown, handleDblClick })}
+		<canvas
+			bind:this={canvas}
+			{width}
+			{height}
+			class={className}
+			onmousedown={handleMouseDown}
+			ontouchstart={handleTouchStart}
+			ondblclick={handleDblClick}
+			oncontextmenu={(e) => e.preventDefault()}
+			draggable={false}
+		>
+		</canvas>
+	{/snippet}
+</KnobBase>
diff --git a/src/lib/Knob.svelte b/src/lib/Knob.svelte
index 59e1eb2..39bdee8 100644
--- a/src/lib/Knob.svelte
+++ b/src/lib/Knob.svelte
@@ -1,31 +1,19 @@
 <script lang="ts">
-	import { normalize, format, unnormalizeToString, unnormalizeToNumber } from './params.js';
+	import { normalize } from './params.js';
 	import { spring } from 'svelte/motion';
-	import type { EnumParam, FloatParam } from './params.js';
-	import { clamp } from './helpers/clamp.js';
+	import KnobBase from './KnobBase.svelte';
+	import type { SharedKnobProps } from './KnobBase.svelte';
 
-	interface Props {
-		style?: string;
-		class?: string;
-		label?: string;
-		unit?: string;
+	type Props = {
 		size?: number;
-		onChange?: (value: number | string) => void;
-		param: FloatParam | EnumParam<readonly string[]>;
-		value: number | string;
-		defaultValue?: number | string;
 		stiffness?: number;
-		decimalDigits?: number;
-		snapValues?: Array<number>;
-		snapThreshold?: number;
-		disabled?: boolean;
-		draggable?: boolean;
+		class?: string;
 		colors?: {
 			arc?: string;
 			bg?: string;
 			disabled?: string;
 		};
-	}
+	} & SharedKnobProps;
 
 	let {
 		style,
@@ -54,129 +42,13 @@
 
 	const arcColor2 = $derived(disabled ? disabledColor : arcColor);
 
+	const rotationDegrees = spring(normalize(value, param) * 270 - 135, { stiffness });
+
 	const center = $derived(size / 2);
 	const arcRadius = $derived(size * 0.4);
 	const circleRadius = $derived(size * 0.32);
 	const lineWidth = $derived(size * 0.04);
 
-	let isDragging = $state(false);
-	let startY: number;
-	let startValue: number;
-
-	// This is needed in case some snap value is very close to the min or max range
-	// preventing the user from selecting that value
-	function completeFixedSnapValues(snapValues: number[]) {
-		if (param.type === 'enum-param') return [];
-		if (snapValues.length < 1) return [];
-
-		const { min: start, max: end } = param.range;
-		const clone = [...snapValues];
-
-		if (!snapValues.includes(start)) clone.push(start);
-		if (!snapValues.includes(end)) clone.push(end);
-
-		return clone;
-	}
-
-	const fixedSnapValues = $derived(completeFixedSnapValues(snapValues));
-	const rotationDegrees = spring(normalize(value, param) * 270 - 135, { stiffness });
-	const normalizedValue = $derived(normalize(value, param));
-
-	const formatted = $derived(isDragging ? format(value, param, decimalDigits) : '');
-
-	function toMobile(handler: ({ clientY }: MouseEvent) => boolean | void) {
-		return (event: TouchEvent) => {
-			const touch = event.touches?.[0];
-			if (touch === undefined) return;
-
-			const clientY = touch.clientY;
-
-			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-			handler({ clientY } as MouseEvent) && event.preventDefault();
-		};
-	}
-
-	function handleMouseDown({ clientY }: MouseEvent) {
-		if (!draggable) return;
-		isDragging = true;
-		startY = clientY;
-		startValue = normalizedValue;
-
-		return true;
-	}
-
-	function handleMouseMove({ clientY }: MouseEvent) {
-		if (!draggable) return;
-		if (disabled) return;
-		if (!isDragging) return;
-		const deltaY = startY - clientY;
-		const deltaValue = deltaY / 200;
-		setValue(clamp(startValue + deltaValue, 0, 1));
-
-		return true;
-	}
-
-	function handleMouseUp() {
-		isDragging = false;
-	}
-
-	function handleDblClick() {
-		const val =
-			defaultValue ??
-			(param as FloatParam)?.range.min ??
-			(param as EnumParam<string[]>).variants?.[0];
-		if (val === undefined) return;
-
-		setValue(clamp(normalize(val, param), 0, 1));
-	}
-
-	const handleTouchStart = toMobile(handleMouseDown);
-	const handleTouchMove = toMobile(handleMouseMove);
-
-	$effect(() => {
-		rotationDegrees.set(normalizedValue * 270 - 135);
-
-		// this was easier in svelte 4 :/
-		window.addEventListener('touchmove', handleTouchMove, { passive: false });
-		return () => window.removeEventListener('touchmove', handleTouchMove);
-	});
-
-	function setValue(newNormalizedValue: number) {
-		if (param.type === 'enum-param') {
-			const newValue = unnormalizeToString(newNormalizedValue, param);
-
-			if (value !== newValue) {
-				value = newValue;
-				onChange?.(value);
-			}
-
-			return;
-		}
-
-		let newValue = unnormalizeToNumber(newNormalizedValue, param);
-
-		if (fixedSnapValues.length > 0) {
-			const nearestSnapValue = fixedSnapValues.reduce((prev, curr) => {
-				const currNormalized = normalize(curr, param);
-				const prevNormalized = normalize(prev, param);
-				return Math.abs(currNormalized - newNormalizedValue) <
-					Math.abs(prevNormalized - newNormalizedValue)
-					? curr
-					: prev;
-			});
-
-			const nearestSnapNormalized = normalize(nearestSnapValue, param);
-			if (Math.abs(nearestSnapNormalized - newNormalizedValue) <= snapThreshold) {
-				newValue = nearestSnapValue;
-			}
-		}
-
-		if (value !== newValue) {
-			value = newValue;
-			onChange?.(value);
-		}
-	}
-
 	function describeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number) {
 		const [sx, sy] = polarToCartesian(x, y, radius, endAngle);
 		const [ex, ey] = polarToCartesian(x, y, radius, startAngle);
@@ -216,91 +88,63 @@
 	}
 </script>
 
-<svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp} ontouchend={handleMouseUp} />
-
-<div class="container" {style}>
-	<svg
-		class={className}
-		role="slider"
-		tabindex="0"
-		aria-valuenow={normalizedValue}
-		width={size}
-		height={size}
-		viewBox="0 0 {size} {size}"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width={lineWidth}
-		onmousedown={handleMouseDown}
-		ontouchstart={handleTouchStart}
-		ondblclick={handleDblClick}
-	>
-		<circle cx={center} cy={center} r={circleRadius} fill={bgColor}></circle>
-		{#if snapValues.length > 0 || param.type === 'enum-param'}
-			<!-- Snap markers -->
-			<path d={drawSnapMarkers()} stroke={bgColor} />
-		{/if}
-		<!-- Arcs -->
-		<path
-			d={describeArc(center, center, arcRadius, $rotationDegrees, 135)}
-			fill="none"
-			stroke={bgColor}
-		/>
-		<path
-			d={describeArc(center, center, arcRadius, -135, $rotationDegrees)}
-			fill="none"
-			stroke={arcColor2}
-		/>
-		<!-- Knob indicator -->
-		<line
-			x1={center}
-			y1={center * 0.7}
-			x2={center}
-			y2={center - circleRadius + 5}
-			stroke="currentColor"
-			transform="rotate({$rotationDegrees}, {center}, {center})"
-		/>
-	</svg>
-	{#if label}
-		<div class="label" style:background={bgColor}>{label}</div>
-	{/if}
-	{#if isDragging}
-		<div style:background={bgColor} class="value">
-			<span>{formatted}</span>
-			{#if unit}
-				<span>{unit}</span>
+<KnobBase
+	{colors}
+	{decimalDigits}
+	{defaultValue}
+	{disabled}
+	{draggable}
+	{label}
+	{onChange}
+	{param}
+	{snapThreshold}
+	{snapValues}
+	{style}
+	{unit}
+	bind:value
+	{rotationDegrees}
+>
+	{#snippet ui({ normalizedValue, handleTouchStart, handleMouseDown, handleDblClick })}
+		<svg
+			class={className}
+			role="slider"
+			tabindex="0"
+			aria-valuenow={normalizedValue}
+			width={size}
+			height={size}
+			viewBox="0 0 {size} {size}"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width={lineWidth}
+			onmousedown={handleMouseDown}
+			ontouchstart={handleTouchStart}
+			ondblclick={handleDblClick}
+		>
+			<circle cx={center} cy={center} r={circleRadius} fill={bgColor}></circle>
+			{#if snapValues.length > 0 || param.type === 'enum-param'}
+				<!-- Snap markers -->
+				<path d={drawSnapMarkers()} stroke={bgColor} />
 			{/if}
-		</div>
-	{/if}
-</div>
-
-<style lang="postcss">
-	span {
-		user-select: none;
-	}
-
-	.container {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		width: fit-content;
-	}
-
-	.label {
-		border-radius: 999px;
-		padding: 0 16px;
-		font-size: 14px;
-		user-select: none;
-	}
-	.value {
-		position: absolute;
-		bottom: 5%;
-		pointer-events: none;
-		user-select: none;
-		text-wrap: nowrap;
-		border: 2px solid currentColor;
-		font-size: 12px;
-		padding: 0 16px;
-		border-radius: 999px;
-	}
-</style>
+			<!-- Arcs -->
+			<path
+				d={describeArc(center, center, arcRadius, $rotationDegrees, 135)}
+				fill="none"
+				stroke={bgColor}
+			/>
+			<path
+				d={describeArc(center, center, arcRadius, -135, $rotationDegrees)}
+				fill="none"
+				stroke={arcColor2}
+			/>
+			<!-- Knob indicator -->
+			<line
+				x1={center}
+				y1={center * 0.7}
+				x2={center}
+				y2={center - circleRadius + 5}
+				stroke="currentColor"
+				transform="rotate({$rotationDegrees}, {center}, {center})"
+			/>
+		</svg>
+	{/snippet}
+</KnobBase>
diff --git a/src/lib/KnobBase.svelte b/src/lib/KnobBase.svelte
new file mode 100644
index 0000000..ab595af
--- /dev/null
+++ b/src/lib/KnobBase.svelte
@@ -0,0 +1,231 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { Spring } from 'svelte/motion';
+
+	export type SnippetProps = {
+		normalizedValue: number;
+		handleTouchStart: (e: TouchEvent) => void;
+		handleMouseDown: ({ clientY }: MouseEvent) => void | boolean;
+		handleDblClick: () => void;
+	};
+
+	export type SharedKnobProps = {
+		style?: string;
+		disabled?: boolean;
+		draggable?: boolean;
+		onChange?: (value: number | string) => void;
+		param: FloatParam | EnumParam<readonly string[]>;
+		value: number | string;
+		defaultValue?: number | string;
+		label?: string;
+		unit?: string;
+		decimalDigits?: number;
+		snapValues?: Array<number>;
+		snapThreshold?: number;
+		colors?: {
+			bg?: string;
+		};
+	};
+</script>
+
+<script lang="ts">
+	import { clamp } from './helpers/clamp.js';
+	import { normalize, format, unnormalizeToString, unnormalizeToNumber } from './params.js';
+	import type { EnumParam, FloatParam } from './params.js';
+
+	type KnobBaseProps = {
+		ui: Snippet<[SnippetProps]>;
+		rotationDegrees: Spring<number>;
+	} & SharedKnobProps;
+
+	let {
+		ui,
+		style,
+		label = '',
+		unit = '',
+		onChange,
+		value = $bindable(),
+		defaultValue,
+		param,
+		rotationDegrees,
+		decimalDigits = 0,
+		snapValues = [],
+		snapThreshold = 0.1,
+		disabled = false,
+		draggable = true,
+		colors = {}
+	}: KnobBaseProps = $props();
+
+	const { bg: bgColor = '#444' } = colors;
+
+	let isDragging = $state(false);
+	let startY: number;
+	let startValue: number;
+
+	// This is needed in case some snap value is very close to the min or max range
+	// preventing the user from selecting that value
+	function completeFixedSnapValues(snapValues: number[]) {
+		if (param.type === 'enum-param') return [];
+		if (snapValues.length < 1) return [];
+
+		const { min: start, max: end } = param.range;
+		const clone = [...snapValues];
+
+		if (!snapValues.includes(start)) clone.push(start);
+		if (!snapValues.includes(end)) clone.push(end);
+
+		return clone;
+	}
+
+	const fixedSnapValues = $derived(completeFixedSnapValues(snapValues));
+	const normalizedValue = $derived(normalize(value, param));
+
+	const formatted = $derived(isDragging ? format(value, param, decimalDigits) : '');
+
+	function toMobile(handler: ({ clientY }: MouseEvent) => void | boolean) {
+		return (event: TouchEvent) => {
+			const touch = event.touches?.[0];
+			if (touch === undefined) return;
+
+			const clientY = touch.clientY;
+
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+			handler({ clientY } as MouseEvent) && event.preventDefault();
+		};
+	}
+
+	function handleMouseDown({ clientY }: MouseEvent) {
+		if (!draggable) return;
+		isDragging = true;
+		startY = clientY;
+		startValue = normalizedValue;
+
+		return true;
+	}
+
+	function handleMouseMove({ clientY }: MouseEvent) {
+		if (!draggable) return;
+		if (disabled) return;
+		if (!isDragging) return;
+		const deltaY = startY - clientY;
+		const deltaValue = deltaY / 200;
+		setValue(clamp(startValue + deltaValue, 0, 1));
+
+		return true;
+	}
+
+	function handleMouseUp() {
+		isDragging = false;
+	}
+
+	function handleDblClick() {
+		const val =
+			defaultValue ??
+			(param as FloatParam)?.range.min ??
+			(param as EnumParam<string[]>).variants?.[0];
+		if (val === undefined) return;
+
+		setValue(clamp(normalize(val, param), 0, 1));
+	}
+
+	const handleTouchStart = toMobile(handleMouseDown);
+	const handleTouchMove = toMobile(handleMouseMove);
+
+	$effect(() => {
+		rotationDegrees.set(normalizedValue * 270 - 135);
+
+		// this was easier in svelte 4 :/
+		window.addEventListener('touchmove', handleTouchMove, { passive: false });
+		return () => window.removeEventListener('touchmove', handleTouchMove);
+	});
+
+	function setValue(newNormalizedValue: number) {
+		if (param.type === 'enum-param') {
+			const newValue = unnormalizeToString(newNormalizedValue, param);
+
+			if (value !== newValue) {
+				value = newValue;
+				onChange?.(value);
+			}
+
+			return;
+		}
+
+		let newValue = unnormalizeToNumber(newNormalizedValue, param);
+
+		if (fixedSnapValues.length > 0) {
+			const nearestSnapValue = fixedSnapValues.reduce((prev, curr) => {
+				const currNormalized = normalize(curr, param);
+				const prevNormalized = normalize(prev, param);
+				return Math.abs(currNormalized - newNormalizedValue) <
+					Math.abs(prevNormalized - newNormalizedValue)
+					? curr
+					: prev;
+			});
+
+			const nearestSnapNormalized = normalize(nearestSnapValue, param);
+			if (Math.abs(nearestSnapNormalized - newNormalizedValue) <= snapThreshold) {
+				newValue = nearestSnapValue;
+			}
+		}
+
+		if (value !== newValue) {
+			value = newValue;
+			onChange?.(value);
+		}
+	}
+</script>
+
+<svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp} ontouchend={handleMouseUp} />
+
+<div class="container" {style}>
+	{@render ui?.({
+		normalizedValue,
+		handleTouchStart,
+		handleMouseDown,
+		handleDblClick
+	})}
+	{#if label}
+		<div class="label" style:background={bgColor}>{label}</div>
+	{/if}
+	{#if isDragging}
+		<div style:background={bgColor} class="value">
+			<span>{formatted}</span>
+			{#if unit}
+				<span>{unit}</span>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style lang="postcss">
+	span {
+		user-select: none;
+	}
+
+	.container {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: fit-content;
+	}
+
+	.label {
+		border-radius: 999px;
+		padding: 0 16px;
+		font-size: 14px;
+		user-select: none;
+	}
+	.value {
+		position: absolute;
+		bottom: 5%;
+		pointer-events: none;
+		user-select: none;
+		text-wrap: nowrap;
+		border: 2px solid currentColor;
+		font-size: 12px;
+		padding: 0 16px;
+		border-radius: 999px;
+	}
+</style>
diff --git a/src/lib/VideoKnob.svelte b/src/lib/VideoKnob.svelte
new file mode 100644
index 0000000..5e2e5df
--- /dev/null
+++ b/src/lib/VideoKnob.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { normalize } from './params.js';
+	import { onMount } from 'svelte';
+	import { spring } from 'svelte/motion';
+	import KnobBase from './KnobBase.svelte';
+	import type { SharedKnobProps } from './KnobBase.svelte';
+
+	type Props = {
+		stiffness?: number;
+		class?: string;
+		source: string;
+		numberOfFrames: number;
+		width?: number;
+		height?: number;
+	} & SharedKnobProps;
+
+	let {
+		style,
+		source,
+		numberOfFrames,
+		class: className,
+		label = '',
+		unit = '',
+		onChange,
+		value = $bindable(),
+		defaultValue,
+		param,
+		stiffness = 0.5,
+		decimalDigits = 0,
+		snapValues = [],
+		snapThreshold = 0.1,
+		width = 80,
+		height = 80,
+		disabled = false,
+		draggable = true,
+		colors = {}
+	}: Props = $props();
+
+	const rotationDegrees = spring(normalize(value, param) * 270 - 135, { stiffness });
+	const frames: Array<HTMLImageElement> = [];
+
+	function draw() {
+		if (!ctx) return;
+
+		const normalized = ($rotationDegrees + 135) / 270;
+		const i = Math.floor(normalized * numberOfFrames);
+		if (i < 0) return;
+
+		const frame = frames.at(i);
+		if (!frame) return;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.drawImage(frame, 0, 0);
+	}
+
+	$effect(() => {
+		if (duration === 0) return;
+		draw();
+	});
+
+	onMount(() => {
+		ctx = canvas.getContext('2d');
+		ctx?.fillText('Loading...', 0, canvas.height / 2);
+	});
+
+	onMount(() => {
+		if (!source) return;
+
+		frames.splice(0);
+
+		const video = document.createElement('video');
+		video.src = source;
+
+		video.onloadeddata = async () => {
+			if (video.duration === 0) throw Error('Video is empty');
+			duration = video.duration;
+
+			const fps = duration / numberOfFrames;
+			const decoderCanvas = document.createElement('canvas');
+			const dctx = decoderCanvas.getContext('2d');
+
+			decoderCanvas.width = width;
+			decoderCanvas.height = height;
+
+			console.time('Decoding video');
+
+			let i = -1;
+
+			async function decodeFrame() {
+				if (!dctx) throw Error('Failed to create canvas context');
+				dctx.clearRect(0, 0, decoderCanvas.width, decoderCanvas.height);
+				dctx.drawImage(video, 0, 0, decoderCanvas.width, decoderCanvas.height);
+
+				return new Promise<void>((resolve, reject) => {
+					decoderCanvas.toBlob((blob) => {
+						if (!blob) return reject('Failed to create canvas blob');
+
+						const url = URL.createObjectURL(blob);
+						const image = new Image();
+
+						image.src = url;
+						image.onerror = reject;
+						image.onload = () => {
+							if (i === 0) {
+								ctx?.clearRect(0, 0, canvas.width, canvas.height);
+								ctx?.drawImage(image, 0, 0);
+							}
+
+							frames.push(image);
+							resolve();
+						};
+					}, 'image/webp');
+				});
+			}
+
+			async function waitForFrame(video: HTMLVideoElement) {
+				return new Promise((resolve) => video.requestVideoFrameCallback(resolve));
+			}
+
+			while (i < numberOfFrames) {
+				video.currentTime = ++i * fps;
+
+				await waitForFrame(video);
+				await decodeFrame();
+			}
+
+			console.timeEnd('Decoding video');
+		};
+
+		return () => {
+			for (const { src } of frames) {
+				URL.revokeObjectURL(src);
+			}
+		};
+	});
+
+	$effect(draw);
+
+	let duration = $state(0);
+	let canvas: HTMLCanvasElement;
+	let ctx: CanvasRenderingContext2D | null = null;
+</script>
+
+<KnobBase
+	{colors}
+	{decimalDigits}
+	{defaultValue}
+	{disabled}
+	{draggable}
+	{label}
+	{onChange}
+	{param}
+	{snapThreshold}
+	{snapValues}
+	{style}
+	{unit}
+	bind:value
+	{rotationDegrees}
+>
+	{#snippet ui({ handleTouchStart, handleMouseDown, handleDblClick })}
+		<canvas
+			bind:this={canvas}
+			{width}
+			{height}
+			class={className}
+			onmousedown={handleMouseDown}
+			ontouchstart={handleTouchStart}
+			ondblclick={handleDblClick}
+			oncontextmenu={(e) => e.preventDefault()}
+			draggable={false}
+		>
+		</canvas>
+	{/snippet}
+</KnobBase>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 1a7acdb..e7ee96a 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,5 +1,7 @@
 // Reexport your entry components here
 export * from './params.js';
 import Knob from './Knob.svelte';
+import VideoKnob from './VideoKnob.svelte';
+import ImageKnob from './ImageKnob.svelte';
 
-export { Knob };
+export { Knob, ImageKnob, VideoKnob };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 478715a..4c52b5d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -99,9 +99,70 @@
 
 		<CopyPaste>%import('./examples/ColoredKnobs.svelte')%</CopyPaste>
 	</div>
+
+	<div class="example">
+		<h2>Image strip</h2>
+
+		<LazyComponent component={() => import('./examples/ImageStrip.svelte')} />
+
+		<p>
+			You can also create interactive knobs with a image slice.<br />
+			There's 2 ways of doing that here.
+			<code>{'<ImageKnob />'}</code> and <code>{'<VideoKnob />'}</code>
+		</p>
+		<p>Both having their own pros and cons. *</p>
+		<table>
+			<thead>
+				<tr>
+					<th></th>
+					<th>video knob</th>
+					<th>image knob</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>file size</td>
+					<td>tiny (20K)</td>
+					<td>small - large (264K - 408K)</td>
+				</tr>
+				<tr>
+					<td>load time</td>
+					<td>slow (~2.8s)</td>
+					<td>fast (~15ms)</td>
+				</tr>
+				<tr>
+					<td>initial responsiveness</td>
+					<td>delayed (only after video processing)</td>
+					<td>immediate</td>
+				</tr>
+			</tbody>
+		</table>
+
+		<i>* Values in parentheses were measured on this example page.</i>
+
+		<p>
+			To compensate for the video knob load time, the first animation frame is drawn as soon as it
+			loads. However, the knob won't be fully responsive until the entire video is processed.
+		</p>
+
+		<p>
+			Also, try to always specify the <code>numberOfFrames</code> property, even though it's not required
+			for image knob. It will help calculate the frames better and avoid flickering.
+		</p>
+
+		<CopyPaste>%import('./examples/ImageStrip.svelte')%</CopyPaste>
+	</div>
 </div>
 
 <style>
+	th,
+	td {
+		padding: 8px;
+		font-size: 0.88rem;
+		font-weight: normal;
+		background: #00000050;
+	}
+
 	:global(body) {
 		margin: 0;
 		padding: 0;
diff --git a/src/routes/LazyComponent.svelte b/src/routes/LazyComponent.svelte
index a96029e..2beb34c 100644
--- a/src/routes/LazyComponent.svelte
+++ b/src/routes/LazyComponent.svelte
@@ -13,7 +13,6 @@
 		style:height="{height}px"
 		use:viewport
 		onenterViewport={() => {
-			console.log('Lazy component is now vissible');
 			componentPromise = component();
 			isShowingComponent = true;
 		}}
diff --git a/src/routes/assets/PurpleKnob2.webm b/src/routes/assets/PurpleKnob2.webm
new file mode 100644
index 0000000..8519e6a
Binary files /dev/null and b/src/routes/assets/PurpleKnob2.webm differ
diff --git a/src/routes/assets/PurpleKnob2.webp b/src/routes/assets/PurpleKnob2.webp
new file mode 100644
index 0000000..79aa4de
Binary files /dev/null and b/src/routes/assets/PurpleKnob2.webp differ
diff --git a/src/routes/examples/ImageStrip.svelte b/src/routes/examples/ImageStrip.svelte
new file mode 100644
index 0000000..8c73235
--- /dev/null
+++ b/src/routes/examples/ImageStrip.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { createFloatParam, VideoKnob, ImageKnob } from '$lib';
+	import videoSource from '../assets/PurpleKnob2.webm';
+	import imageSource from '../assets/PurpleKnob2.webp';
+
+	const basicParam = createFloatParam('lin', 0, 100);
+	let basicValue = 0;
+</script>
+
+<VideoKnob
+	param={basicParam}
+	bind:value={basicValue}
+	label="Volume"
+	unit="%"
+	source={videoSource}
+	numberOfFrames={79}
+/>
+
+<ImageKnob
+	param={basicParam}
+	bind:value={basicValue}
+	label="Volume"
+	unit="%"
+	source={imageSource}
+	numberOfFrames={79}
+/>