diff --git a/.github/renovate.json5 b/.github/renovate.json5
index 3409dbdd..3fe482d5 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -47,6 +47,6 @@
 
         // Pinned
         '@vue/devtools-api',
-        "typescript" // https://github.com/vuejs/language-tools/issues/5018
+        'typescript' // https://github.com/vuejs/language-tools/issues/5018
     ]
 }
diff --git a/packages/daguerreo/package.json b/packages/daguerreo/package.json
new file mode 100644
index 00000000..fea6d971
--- /dev/null
+++ b/packages/daguerreo/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@safelight/daguerreo",
+  "version": "1.0.0",
+  "author": "Joery Münninghoff",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Joery-M/Safelight"
+  },
+  "contributors": [],
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts"
+    },
+    "./sources/*": {
+      "import": "./src/sources/*.ts"
+    },
+    "./transformers/*": {
+      "import": "./src/transformers/*.ts"
+    }
+  },
+  "devDependencies": {
+    "type-fest": "^4.30.2"
+  },
+  "dependencies": {
+    "gifuct-js": "^2.1.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13"
+  }
+}
diff --git a/packages/daguerreo/src/assets/cat.avif b/packages/daguerreo/src/assets/cat.avif
new file mode 100644
index 00000000..42ad732d
Binary files /dev/null and b/packages/daguerreo/src/assets/cat.avif differ
diff --git a/packages/daguerreo/src/assets/fish-fish-eating.gif b/packages/daguerreo/src/assets/fish-fish-eating.gif
new file mode 100644
index 00000000..74852496
Binary files /dev/null and b/packages/daguerreo/src/assets/fish-fish-eating.gif differ
diff --git a/packages/daguerreo/src/index.ts b/packages/daguerreo/src/index.ts
new file mode 100644
index 00000000..358cbdc8
--- /dev/null
+++ b/packages/daguerreo/src/index.ts
@@ -0,0 +1,164 @@
+import { computed, shallowReactive, shallowRef } from 'vue';
+import type { DGTransformProperties, DGTransformProperty } from './properties';
+import type { DaguerreoSourceEffect, DaguerreoSourcePayload } from './sourceEffect';
+import type { DaguerreoTransformEffect, DaguerreoTransformPayload } from './transformEffect';
+
+export class Daguerreo {
+    private source = shallowRef<DaguerreoSourceEffect | undefined>(undefined);
+    readonly effects = shallowReactive<DaguerreoTransformEffect[]>([]);
+    private effectsWithSourceInitHooks = computed(() =>
+        this.effects.filter((e) => !!e.sourceInitialized)
+    );
+    private effectsWithTransformHooks = computed(() => this.effects.filter((e) => !!e.transform));
+    private ranLoadFunction = false;
+
+    addEffect(effect: DaguerreoTransformEffect) {
+        this.effects.push(effect);
+    }
+    removeEffect(effect: DaguerreoTransformEffect) {
+        this.effects.slice(this.effects.indexOf(effect) - 1, 1);
+    }
+    setSource(source: DaguerreoSourceEffect) {
+        this.source.value = source;
+        this.ranLoadFunction = false;
+    }
+
+    reset() {
+        this.source.value = undefined;
+        this.ranLoadFunction = false;
+        this.effects.splice(0, this.effects.length);
+    }
+
+    getTransformProps() {
+        const allProps: DGTransformProperties[] = [];
+        for (let i = 0; i < this.effects.length; i++) {
+            const effect = this.effects[i];
+
+            const props: DGTransformProperties = {};
+            if (effect.properties) {
+                for (const key in effect.properties) {
+                    if (key in effect.properties) {
+                        const prop = effect.properties[key] as DGTransformProperty;
+                        props[key] = prop.value();
+                    }
+                }
+            }
+
+            allProps[i] = props;
+        }
+
+        return allProps;
+    }
+
+    async process(
+        config: DaguerreoSourcePayload,
+        transformProps: DGTransformProperties[] = this.getTransformProps()
+    ): Promise<DaguerreoResult> {
+        const effectBase = this.source.value;
+        if (!effectBase) throw new Error('No source effect defined');
+
+        if (!this.ranLoadFunction) {
+            this.ranLoadFunction = true;
+            await effectBase.load?.();
+        }
+
+        const payload: DaguerreoTransformPayload = Object.assign(
+            // Default values
+            {
+                matrix: new DOMMatrix(),
+                compositeOperation: 'source-over',
+                opacity: 1,
+                frame: config.frame,
+                frameDuration: config.frameDuration,
+                width: config.width,
+                height: config.height,
+                maxWidth: config.width,
+                maxHeight: config.height,
+                quality: config.quality
+            },
+            await effectBase.source(config)
+        );
+
+        switch (config.quality) {
+            case 'preview':
+                payload.ctx.imageSmoothingQuality = 'medium';
+                break;
+            case 'rough':
+                payload.ctx.imageSmoothingQuality = 'low';
+                break;
+
+            default:
+                payload.ctx.imageSmoothingQuality = 'high';
+                break;
+        }
+
+        // Run initialize methods
+        const initFunctions = this.effectsWithSourceInitHooks.value.map((e) =>
+            e.sourceInitialized?.({ height: payload.height, width: payload.width })
+        );
+        await Promise.allSettled(initFunctions);
+
+        // Run effects
+        for (let i = 0; i < this.effectsWithTransformHooks.value.length; i++) {
+            const effect = this.effectsWithTransformHooks.value[i];
+
+            const props: DGTransformProperties = transformProps[i] ?? {};
+            if (effect.properties) {
+                for (const key in effect.properties) {
+                    if (key in effect.properties && !(key in props)) {
+                        const prop = effect.properties[key];
+                        props[key] = prop.value();
+                    }
+                }
+            }
+            const result = await effect.transform!({ ...payload, properties: props });
+            // Assign props
+            if (result) Object.assign(payload, result);
+        }
+
+        return {
+            width: payload.width,
+            height: payload.height,
+            frameDuration: config.frameDuration,
+            image: payload.ctx.canvas.transferToImageBitmap(),
+            matrix: payload.matrix,
+            opacity: payload.opacity,
+            compositeOperation: payload.compositeOperation
+        } as DaguerreoResult;
+    }
+}
+
+export type QualitySetting = 'rough' | 'preview' | 'final';
+
+export type DaguerreoEffect = DaguerreoSourceEffect | DaguerreoTransformEffect;
+
+export interface DaguerreoResult {
+    /**
+     * Current frame width
+     */
+    width: number;
+    /**
+     * Current frame height
+     */
+    height: number;
+    /**
+     * Current frame duration
+     */
+    frameDuration: number;
+
+    image: ImageBitmap;
+
+    matrix: DOMMatrix;
+    /**
+     * Number ranging from 0-1 that defines the opacity used for compositing
+     */
+    opacity: number;
+    /**
+     * The blend mode used for compositing
+     */
+    compositeOperation: GlobalCompositeOperation;
+}
+
+export * from './properties';
+export * from './sourceEffect';
+export * from './transformEffect';
diff --git a/packages/daguerreo/src/properties.ts b/packages/daguerreo/src/properties.ts
new file mode 100644
index 00000000..3d16d5f2
--- /dev/null
+++ b/packages/daguerreo/src/properties.ts
@@ -0,0 +1,58 @@
+import type { PartialDeep } from 'type-fest';
+import { ref } from 'vue';
+
+export function dgNumberProperty(
+    value: number,
+    meta?: PartialDeep<NumberPropertyConfig>
+): DGTransformProperty<number, PartialDeep<NumberPropertyConfig>> {
+    const curValue = ref(value);
+    return {
+        type: 'number',
+        value() {
+            return curValue.value;
+        },
+        displayValue() {
+            return meta?.transform?.toDisplay
+                ? meta.transform.toDisplay(curValue.value)
+                : curValue.value;
+        },
+        setValue(value: number) {
+            curValue.value = meta?.transform?.toValue ? meta.transform.toValue(value) : value;
+        },
+        meta
+    };
+}
+
+export interface NumberPropertyConfig {
+    min: number;
+    max: number;
+    step: number;
+    slider: boolean;
+    /**
+     * @default false
+     */
+    integerOnly: boolean;
+    transform: {
+        toDisplay: (value: number) => number;
+        toValue: (display: number) => number;
+    };
+}
+
+export type DGPropertyTypes = 'number';
+
+export type DGTransformProperty<T = any, Meta = Record<string, any>> = {
+    type: DGPropertyTypes;
+    value(): T;
+    displayValue(): T;
+    setValue(v: T): void;
+    meta?: Meta;
+};
+
+export interface DGTransformProperties {
+    [key: string]: DGTransformProperty;
+}
+export type DGComputedProperties<P extends DGTransformProperties | undefined> = P extends undefined
+    ? undefined
+    : {
+          [K in keyof P]: ReturnType<NonNullable<P>[K]['value']>;
+      };
diff --git a/packages/daguerreo/src/sourceEffect.ts b/packages/daguerreo/src/sourceEffect.ts
new file mode 100644
index 00000000..2ad43c2c
--- /dev/null
+++ b/packages/daguerreo/src/sourceEffect.ts
@@ -0,0 +1,41 @@
+import type { Promisable, SetRequired } from 'type-fest';
+import type { DaguerreoTransformPayload } from './transformEffect';
+import type { QualitySetting } from '.';
+
+export interface DaguerreoSourceEffect {
+    name: string;
+    load?: () => Promisable<void>;
+    source: (config: DaguerreoSourcePayload) => Promisable<DaguerreoSourceResult>;
+}
+
+export type DaguerreoSourceResult = SetRequired<Partial<DaguerreoTransformPayload>, 'ctx'>;
+
+export interface DaguerreoSourcePayload {
+    /**
+     * Current frame number
+     */
+    frame: number;
+    /**
+     * Frame duration in milliseconds.
+     */
+    frameDuration: number;
+    /**
+     * Timeline width
+     */
+    width: number;
+    /**
+     * Timeline height
+     */
+    height: number;
+    /**
+     * The desired rendering quality.
+     *
+     * For if your source effect is able to render with different
+     * performance characteristics.
+     */
+    quality: QualitySetting;
+}
+
+export function defineSource(def: DaguerreoSourceEffect) {
+    return def;
+}
diff --git a/packages/daguerreo/src/sources/TestSource.ts b/packages/daguerreo/src/sources/TestSource.ts
new file mode 100644
index 00000000..c2dfbee8
--- /dev/null
+++ b/packages/daguerreo/src/sources/TestSource.ts
@@ -0,0 +1,160 @@
+import { decompressFrames, parseGIF, type ParsedFrame } from 'gifuct-js';
+import type { DaguerreoSourceEffect } from '..';
+
+export function GradientTestSource() {
+    const canvas = new OffscreenCanvas(1280, 720);
+    const ctx = canvas.getContext('2d')!;
+
+    return {
+        name: 'gradient-test-source',
+        source: ({ frame, width, height }) => {
+            if (canvas.width !== width || canvas.height !== height) {
+                canvas.width = width;
+                canvas.height = height;
+            }
+            ctx.reset();
+
+            // Never thought the day would come
+            const diagonal = Math.sqrt(width ** 2 + height ** 2);
+
+            const gradient = ctx.createLinearGradient(0, 0, width, 0);
+
+            gradient.addColorStop(0, `hsl(${frame % 360}, 100%, 50%)`);
+            gradient.addColorStop(0.5, `hsl(${(frame % 360) + 180}, 100%, 50%)`);
+            gradient.addColorStop(1, `hsl(${frame % 360}, 100%, 50%)`);
+
+            ctx.fillStyle = gradient;
+
+            const matrix = ctx
+                .getTransform()
+                .translate(width / 2, height / 2)
+                .rotate(frame % 360)
+                .translate(width / -2, height / -2);
+
+            ctx.setTransform(matrix);
+            // idk man, math shit
+            ctx.fillRect((diagonal - width) / -2, (diagonal - height) / -2, diagonal, diagonal);
+            ctx.resetTransform();
+
+            ctx.fillStyle = 'white';
+            ctx.font = '84px Arial';
+            ctx.fillText(Math.floor((frame / 10) % 100).toString(), 20, 75);
+
+            return {
+                ctx
+            };
+        }
+    } as DaguerreoSourceEffect;
+}
+
+export function CatTestSource() {
+    const canvas = new OffscreenCanvas(1280, 720);
+    const ctx = canvas.getContext('2d')!;
+
+    let catImage: HTMLImageElement;
+
+    return {
+        name: 'cat-test-source',
+        async source() {
+            ctx.reset();
+
+            if (catImage) {
+                ctx.drawImage(catImage, 0, 0);
+            } else {
+                const d = await import('../assets/cat.avif');
+                const img = document.createElement('img');
+                img.src = d.default;
+
+                await new Promise<void>((resolve, reject) => {
+                    img.addEventListener('load', () => {
+                        catImage = img;
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+                        ctx.drawImage(catImage, 0, 0);
+                        resolve();
+                    });
+                    setTimeout(() => {
+                        reject('Timeout');
+                    }, 10_000);
+                });
+            }
+
+            return {
+                ctx,
+                width: catImage.width,
+                height: catImage.height
+            };
+        }
+    } as DaguerreoSourceEffect;
+}
+
+export function GifTestSource() {
+    const canvas = new OffscreenCanvas(1280, 720);
+    const ctx = canvas.getContext('2d')!;
+
+    const frames: ParsedFrame[] = [];
+    let gifLength = 0;
+    let frameTime = 1;
+
+    let frameImageData: ImageData | undefined;
+
+    return {
+        name: 'gif-test-source',
+        async load() {
+            const { default: url } = await import('../assets/fish-fish-eating.gif?url');
+            const arrayBuffer = await fetch(url).then((r) => r.arrayBuffer());
+
+            const gif = parseGIF(arrayBuffer);
+            frames.push(...decompressFrames(gif, true));
+            gifLength = frames.reduce((l, f) => l + f.delay, 0);
+            frameTime = gifLength / frames.length;
+
+            canvas.width = Math.max(...frames.map(({ dims: { width } }) => width));
+            canvas.height = Math.max(...frames.map(({ dims: { height } }) => height));
+        },
+        source: async ({ frame, frameDuration }) => {
+            ctx.reset();
+            const curTime = (frame * frameDuration) % gifLength;
+
+            if (frames.length > 0) {
+                let d = 0;
+                const frame = frames.find((f) => {
+                    d += f.delay;
+                    return d >= curTime;
+                });
+                if (!frame) {
+                    return {
+                        ctx,
+                        width: canvas.width,
+                        height: canvas.height
+                    };
+                }
+
+                const dims = frame.dims;
+
+                if (
+                    !frameImageData ||
+                    dims.width != frameImageData.width ||
+                    dims.height != frameImageData.height
+                ) {
+                    canvas.width = dims.width;
+                    canvas.height = dims.height;
+                    frameImageData = ctx.createImageData(dims.width, dims.height);
+                }
+
+                // set the patch data as an override
+                frameImageData.data.set(frame.patch);
+
+                // draw the patch back over the canvas
+                ctx.putImageData(frameImageData, 0, 0);
+            }
+
+            return {
+                ctx,
+                frameDuration: 1000 / frameTime,
+                width: canvas.width,
+                height: canvas.height
+            };
+        }
+    } as DaguerreoSourceEffect;
+}
diff --git a/packages/daguerreo/src/transformEffect.ts b/packages/daguerreo/src/transformEffect.ts
new file mode 100644
index 00000000..e138a6f3
--- /dev/null
+++ b/packages/daguerreo/src/transformEffect.ts
@@ -0,0 +1,85 @@
+import type { PartialDeep, Promisable } from 'type-fest';
+import type { DGComputedProperties, DGTransformProperties } from './properties';
+import type { QualitySetting } from '.';
+
+export interface DaguerreoTransformEffect<
+    Properties extends DGTransformProperties = DGTransformProperties
+> {
+    name: string;
+    properties?: Properties;
+    load?: () => Promisable<void>;
+    sourceInitialized?: (
+        config: Pick<DaguerreoTransformPayload, 'width' | 'height'>
+    ) => Promisable<void>;
+    transform?: (
+        config: DaguerreoTransformPayload & { properties: DGComputedProperties<Properties> }
+    ) => Promisable<PartialDeep<DaguerreoTransformResult> | void>;
+}
+
+export interface DaguerreoTransformPayload {
+    /**
+     * Current frame number
+     */
+    frame: number;
+    /**
+     * How long the current frame will last for in milliseconds.
+     */
+    frameDuration: number;
+    /**
+     * Source width
+     */
+    width: number;
+    /**
+     * Source height
+     */
+    height: number;
+    /**
+     * Viewport/timeline width
+     */
+    maxWidth: number;
+    /**
+     * Viewport/timeline height
+     */
+    maxHeight: number;
+    /**
+     * Number ranging from 0-1 that defines the opacity used for compositing
+     */
+    opacity: number;
+    /**
+     * The blend mode used for compositing
+     */
+    compositeOperation: GlobalCompositeOperation;
+    /**
+     * The desired rendering quality.
+     *
+     * For if your effect is able to render with different
+     * performance characteristics.
+     */
+    quality: QualitySetting;
+
+    ctx: OffscreenCanvasRenderingContext2D;
+
+    matrix: DOMMatrix;
+}
+
+export interface DaguerreoTransformResult {
+    /**
+     * Number ranging from 0-1 that defines the opacity used for compositing
+     */
+    opacity: number;
+    /**
+     * The blend mode used for compositing
+     */
+    compositeOperation: GlobalCompositeOperation;
+}
+
+export function defineEffect<Properties extends DGTransformProperties = DGTransformProperties>(
+    def: Omit<DaguerreoTransformEffect, 'properties' | 'transform'> & {
+        properties?: Properties;
+        transform?: (
+            config: DaguerreoTransformPayload & { properties: DGComputedProperties<Properties> }
+        ) => Promisable<PartialDeep<DaguerreoTransformResult> | void>;
+    }
+) {
+    return def as DaguerreoTransformEffect;
+}
diff --git a/packages/daguerreo/src/transformers/TranslateTransform.ts b/packages/daguerreo/src/transformers/TranslateTransform.ts
new file mode 100644
index 00000000..a4fa0aec
--- /dev/null
+++ b/packages/daguerreo/src/transformers/TranslateTransform.ts
@@ -0,0 +1,114 @@
+import { defineEffect } from '..';
+import { dgNumberProperty } from '../properties';
+
+export function TranslateTransform() {
+    return defineEffect({
+        name: 'dg-translate-transform',
+        properties: {
+            distance: dgNumberProperty(20),
+            speed: dgNumberProperty(30)
+        },
+        transform: ({ frame, matrix, properties }) => {
+            const distance = properties.distance * 10;
+            matrix.translateSelf(
+                Math.sin(frame / properties.speed) * distance,
+                Math.cos(frame / properties.speed) * distance
+            );
+        }
+    });
+}
+
+export function RotateTransform() {
+    return defineEffect({
+        name: 'dg-rotate-transform',
+        transform: ({ ctx, frame, matrix }) => {
+            matrix.translateSelf(ctx.canvas.width / 2, ctx.canvas.height / 2);
+            matrix.rotateSelf(frame);
+            matrix.translateSelf(ctx.canvas.width / -2, ctx.canvas.height / -2);
+        }
+    });
+}
+
+export function ScaleTransform() {
+    return defineEffect({
+        name: 'dg-scale-transform',
+        transform: ({ ctx, frame, matrix }) => {
+            matrix.translateSelf(ctx.canvas.width / 2, ctx.canvas.height / 2);
+            matrix.scaleSelf(1 - (Math.sin(frame / 30) + 1) / 5);
+            matrix.translateSelf(ctx.canvas.width / -2, ctx.canvas.height / -2);
+        }
+    });
+}
+
+export function FlipTransform() {
+    return defineEffect({
+        name: 'dg-flip-transform',
+        transform: ({ ctx, frame, matrix }) => {
+            matrix.translateSelf(ctx.canvas.width / 2, ctx.canvas.height / 2);
+            const scaleY = Math.sin(frame / 30);
+            matrix.scaleSelf(1, scaleY);
+            if (scaleY < 0) {
+                ctx.fillStyle = '#000000D0';
+                ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            }
+            matrix.translateSelf(ctx.canvas.width / -2, ctx.canvas.height / -2);
+        }
+    });
+}
+
+export function GenericTransform() {
+    return defineEffect({
+        name: 'dg-transform',
+        properties: {
+            x: dgNumberProperty(0),
+            y: dgNumberProperty(0),
+            scaleX: dgNumberProperty(1, {
+                transform: { toDisplay: (v) => v * 100, toValue: (v) => v / 100 }
+            }),
+            scaleY: dgNumberProperty(1, {
+                transform: { toDisplay: (v) => v * 100, toValue: (v) => v / 100 }
+            }),
+            originX: dgNumberProperty(0.5, {
+                transform: { toDisplay: (v) => v * 100, toValue: (v) => v / 100 }
+            }),
+            originY: dgNumberProperty(0.5, {
+                transform: { toDisplay: (v) => v * 100, toValue: (v) => v / 100 }
+            }),
+            rotation: dgNumberProperty(0, {
+                transform: { toValue: (v) => (v < 0 ? v + 360 : v % 360) }
+            }),
+            opacity: dgNumberProperty(1, {
+                integerOnly: true,
+                min: 0,
+                max: 100,
+                slider: true,
+                transform: { toDisplay: (v) => v * 100, toValue: (v) => v / 100 }
+            })
+        },
+        transform({ matrix, properties, width, height, opacity }) {
+            if (properties.x !== 0 || properties.y !== 0) {
+                matrix.translateSelf(properties.x, properties.y);
+            }
+            if (properties.scaleX !== 1 || properties.scaleY !== 1) {
+                matrix.scaleSelf(
+                    properties.scaleX,
+                    properties.scaleY,
+                    1,
+                    width * properties.originX,
+                    height * properties.originY
+                );
+            }
+            if (properties.rotation !== 0) {
+                matrix
+                    .translateSelf(width * properties.originX, height * properties.originY)
+                    .rotateSelf(properties.rotation)
+                    .translateSelf(width * -properties.originX, height * -properties.originY);
+            }
+
+            return {
+                matrix,
+                opacity: opacity * properties.opacity
+            };
+        }
+    });
+}
diff --git a/packages/safelight/buildscripts/generatePackageList.ts b/packages/safelight/buildscripts/generatePackageList.ts
index 3f3e7daf..8a12e9fc 100644
--- a/packages/safelight/buildscripts/generatePackageList.ts
+++ b/packages/safelight/buildscripts/generatePackageList.ts
@@ -4,6 +4,10 @@ import { mkdir, writeFile } from 'fs/promises';
 import { join } from 'path';
 
 const projects = [
+    {
+        projectPath: 'packages/daguerreo',
+        outputFileName: 'packages-daguerreo.json'
+    },
     {
         projectPath: 'packages/darkroom',
         outputFileName: 'packages-darkroom.json'
diff --git a/packages/safelight/package.json b/packages/safelight/package.json
index da625149..5e00b4d0 100644
--- a/packages/safelight/package.json
+++ b/packages/safelight/package.json
@@ -21,6 +21,7 @@
     "@phosphor-icons/vue": "^2.2.1",
     "@phosphor-icons/web": "^2.1.1",
     "@primevue/themes": "^4.2.5",
+    "@safelight/daguerreo": "workspace:^",
     "@safelight/shared": "workspace:*",
     "@safelight/timeline": "workspace:*",
     "@vueuse/core": "^12.1.0",
diff --git a/packages/safelight/src/views/dev/Daguerreo.vue b/packages/safelight/src/views/dev/Daguerreo.vue
new file mode 100644
index 00000000..e6469823
--- /dev/null
+++ b/packages/safelight/src/views/dev/Daguerreo.vue
@@ -0,0 +1,396 @@
+<template>
+    <Card>
+        <template #subtitle>
+            <RouterLink to="/dev">
+                <Button icon="ph ph-house" />
+            </RouterLink>
+        </template>
+        <template #content>
+            <div class="w-full max-w-screen-md">
+                <h3>Source</h3>
+                <Select
+                    v-model="activeSource"
+                    class="w-64"
+                    :options="sources"
+                    option-label="label"
+                />
+                <SelectButton
+                    v-model="quality"
+                    :options="['rough', 'preview', 'final']"
+                    class="mt-4 block"
+                    @value-change="renderIfNeeded()"
+                />
+                <h3>Effects</h3>
+                <div id="effect-list" class="flex h-80 max-w-screen-sm gap-4">
+                    <Listbox
+                        :options="availableTransforms"
+                        data-key="name"
+                        option-label="name"
+                        filter
+                        :filter-fields="['name']"
+                        @update:model-value="(ev) => (transformSelectedFromLibrary = ev)"
+                        @option-dblclick="
+                            (ev) => {
+                                if (ev)
+                                    activeTransforms.push({
+                                        id: uuidv4(),
+                                        transform: markRaw(ev.value.transform())
+                                    });
+                            }
+                        "
+                    />
+                    <div class="flex items-center justify-center">
+                        <Button
+                            icon="ph ph-caret-right"
+                            severity="secondary"
+                            :disabled="!transformSelectedFromLibrary"
+                            @click="
+                                () => {
+                                    if (transformSelectedFromLibrary)
+                                        activeTransforms.push({
+                                            id: uuidv4(),
+                                            transform: markRaw(
+                                                transformSelectedFromLibrary.transform()
+                                            )
+                                        });
+                                }
+                            "
+                        />
+                    </div>
+                    <Listbox
+                        v-model="selectedActiveTransform"
+                        :options="activeTransforms"
+                        data-key="id"
+                        empty-message="No effects added"
+                    >
+                        <template #option="{ option }">
+                            {{ option.transform.name }}
+                        </template>
+                    </Listbox>
+                    <div class="flex flex-col items-center justify-center gap-2">
+                        <Button
+                            icon="ph ph-caret-up"
+                            severity="secondary"
+                            :disabled="!selectedActiveTransform"
+                            @click="
+                                () => {
+                                    if (selectedActiveTransform) {
+                                        const index =
+                                            activeTransforms.indexOf(selectedActiveTransform);
+                                        if (index >= 0) {
+                                            arrayMove(activeTransforms, index, index - 1);
+                                        }
+                                    }
+                                }
+                            "
+                        />
+                        <Button
+                            icon="ph ph-caret-down"
+                            severity="secondary"
+                            :disabled="!selectedActiveTransform"
+                            @click="
+                                () => {
+                                    if (selectedActiveTransform) {
+                                        const index =
+                                            activeTransforms.indexOf(selectedActiveTransform);
+                                        if (index >= 0) {
+                                            arrayMove(activeTransforms, index, index + 1);
+                                        }
+                                    }
+                                }
+                            "
+                        />
+                        <Button
+                            icon="ph ph-trash"
+                            severity="secondary"
+                            :disabled="!selectedActiveTransform"
+                            @click="
+                                () => {
+                                    if (
+                                        selectedActiveTransform &&
+                                        activeTransforms.indexOf(selectedActiveTransform) >= 0
+                                    ) {
+                                        activeTransforms.splice(
+                                            activeTransforms.indexOf(selectedActiveTransform),
+                                            1
+                                        );
+                                        selectedActiveTransform = undefined;
+                                    }
+                                }
+                            "
+                        />
+                    </div>
+                </div>
+                <h3>Effect options</h3>
+                <table v-if="selectedActiveTransform" class="mb-2">
+                    <thead>
+                        <tr>
+                            <th class="w-36">Property</th>
+                            <th>Value</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr
+                            v-for="(opt, key) in selectedActiveTransform.transform.properties"
+                            :key="key"
+                        >
+                            <td>
+                                {{ key }}
+                            </td>
+                            <td v-if="opt.type === 'number'">
+                                <InputNumber
+                                    v-if="!opt.meta?.slider"
+                                    :model-value="opt.displayValue()"
+                                    :max-fraction-digits="opt.meta?.integerOnly ? 0 : 10"
+                                    :min="opt.meta?.min"
+                                    :max="opt.meta?.max"
+                                    :step="opt.meta?.step"
+                                    @value-change="
+                                        opt.setValue($event);
+                                        renderIfNeeded();
+                                    "
+                                />
+                                <Slider
+                                    v-else
+                                    :model-value="opt.displayValue()"
+                                    :min="opt.meta?.min"
+                                    :max="opt.meta?.max"
+                                    :step="opt.meta?.step"
+                                    @value-change="
+                                        opt.setValue($event);
+                                        renderIfNeeded();
+                                    "
+                                />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Playback controls -->
+            <div class="right-4 top-4 size-min xl:absolute">
+                <canvas ref="canvas" class="max-w-2xl"></canvas>
+                <p>P: {{ times.process }}, C: {{ times.composite }}, T: {{ times.total }}</p>
+                <Slider
+                    v-model="frameNum"
+                    class="mb-5 mt-3"
+                    :step="1"
+                    :max="60 * 10"
+                    @value-change="renderIfNeeded()"
+                />
+                <div class="flex justify-center gap-2">
+                    <InputNumber
+                        v-model="frameNum"
+                        :max-fraction-digits="0"
+                        size="small"
+                        @value-change="renderIfNeeded()"
+                    />
+                    <ButtonGroup>
+                        <Button
+                            icon="ph ph-skip-back"
+                            @click="
+                                frameNum--;
+                                renderFrame();
+                            "
+                        />
+                        <Button
+                            :icon="'ph ' + (isPaused ? 'ph-play' : 'ph-pause')"
+                            @click="isPaused = !isPaused"
+                        />
+                        <Button
+                            icon="ph ph-skip-forward"
+                            @click="
+                                frameNum += 1;
+                                renderFrame();
+                            "
+                        />
+                    </ButtonGroup>
+                </div>
+            </div>
+        </template>
+    </Card>
+</template>
+
+<script setup lang="ts">
+import {
+    Daguerreo,
+    type DaguerreoTransformEffect,
+    type QualitySetting
+} from '@safelight/daguerreo';
+import {
+    CatTestSource,
+    GifTestSource,
+    GradientTestSource
+} from '@safelight/daguerreo/sources/TestSource';
+import {
+    FlipTransform,
+    GenericTransform,
+    RotateTransform,
+    ScaleTransform,
+    TranslateTransform
+} from '@safelight/daguerreo/transformers/TranslateTransform';
+import { tryOnMounted, useRafFn, watchImmediate } from '@vueuse/core';
+import Button from 'primevue/button';
+import ButtonGroup from 'primevue/buttongroup';
+import Card from 'primevue/card';
+import InputNumber from 'primevue/inputnumber';
+import Listbox from 'primevue/listbox';
+import Select from 'primevue/select';
+import SelectButton from 'primevue/selectbutton';
+import Slider from 'primevue/slider';
+import { v4 as uuidv4 } from 'uuid';
+import { markRaw, reactive, ref, shallowReactive, shallowRef, useTemplateRef, type Raw } from 'vue';
+
+const availableTransforms = shallowReactive<LibraryTransformEntry[]>([
+    { name: 'dg-translate-transform', transform: () => TranslateTransform() },
+    { name: 'dg-rotate-transform', transform: () => RotateTransform() },
+    { name: 'dg-scale-transform', transform: () => ScaleTransform() },
+    { name: 'dg-flip-transform', transform: () => FlipTransform() },
+    { name: 'dg-transform', transform: () => GenericTransform() }
+]);
+const activeTransforms = reactive<ActiveTransformEntry[]>([]);
+
+let daguerreo = new Daguerreo();
+
+const sources = [
+    { label: 'gradient', name: 'gradient-test-source', value: () => GradientTestSource() },
+    { label: 'cat', name: 'cat-test-source', value: () => CatTestSource() },
+    { label: 'gif', name: 'gif-test-source', value: () => GifTestSource() }
+];
+const activeSource = ref(sources[0]);
+
+const transformSelectedFromLibrary = shallowRef<LibraryTransformEntry>();
+const selectedActiveTransform = shallowRef<ActiveTransformEntry>();
+
+const canvas = useTemplateRef('canvas');
+let ctx: CanvasRenderingContext2D | null = null;
+
+const isPaused = ref(false);
+const frameNum = ref(0);
+const quality = ref<QualitySetting>('final');
+
+const times = reactive({
+    process: '',
+    composite: '',
+    total: ''
+});
+
+tryOnMounted(() => {
+    if (!canvas.value) return;
+
+    ctx = canvas.value.getContext('2d');
+
+    watchImmediate(activeSource, () => {
+        daguerreo.setSource(activeSource.value?.value());
+        frameNum.value = 0;
+        renderFrame();
+    });
+
+    // Render at (at best) 60fps
+    const raf = useRafFn(
+        () => {
+            frameNum.value++;
+            renderFrame();
+        },
+        { fpsLimit: 60 }
+    );
+    watchImmediate(isPaused, () => (isPaused.value ? raf.pause() : raf.resume()));
+
+    // Set transforms
+    watchImmediate(activeTransforms, (transforms) => {
+        while (daguerreo.effects.shift());
+
+        for (const transform of transforms) {
+            daguerreo.addEffect(transform.transform);
+        }
+
+        renderIfNeeded();
+    });
+});
+
+function renderIfNeeded() {
+    if (isPaused.value) {
+        renderFrame();
+    }
+}
+
+async function renderFrame() {
+    if (!ctx) return;
+
+    const start = performance.now();
+    const value = await daguerreo.process({
+        frame: frameNum.value,
+        frameDuration: 1000 / 60,
+        width: 1280,
+        height: 720,
+        quality: quality.value
+    });
+    const endProcess = performance.now();
+
+    // Set preview canvas size
+    if (canvas.value?.width !== value.width || canvas.value.height !== value.height) {
+        canvas.value!.width = value.width;
+        canvas.value!.height = value.height;
+    }
+    ctx.reset();
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    ctx.globalAlpha = value.opacity;
+    ctx.globalCompositeOperation = value.compositeOperation;
+    ctx.setTransform(value.matrix);
+    ctx.drawImage(value.image, 0, 0);
+    value.image.close();
+    const endComposite = performance.now();
+
+    times.process = (endProcess - start).toFixed(2);
+    times.composite = (endComposite - endProcess).toFixed(2);
+    times.total = (endComposite - start).toFixed(2);
+}
+
+/**
+ * Move an element in an array in-place
+ *
+ * @source https://stackoverflow.com/a/5306832
+ */
+function arrayMove(arr: any[], old_index: number, new_index: number) {
+    while (old_index < 0) {
+        old_index += arr.length;
+    }
+    while (new_index < 0) {
+        new_index += arr.length;
+    }
+    while (old_index >= arr.length) {
+        old_index -= arr.length;
+    }
+    while (new_index >= arr.length) {
+        new_index -= arr.length;
+    }
+
+    if (new_index >= arr.length) {
+        var k = new_index - arr.length + 1;
+        while (k--) {
+            arr.push(undefined);
+        }
+    }
+    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+}
+
+interface LibraryTransformEntry {
+    name: string;
+    transform: () => DaguerreoTransformEffect;
+}
+interface ActiveTransformEntry {
+    id: string;
+    transform: Raw<DaguerreoTransformEffect>;
+}
+</script>
+
+<style lang="scss" scoped>
+#effect-list .p-listbox {
+    flex-grow: 1;
+    width: 50%;
+    :deep(.p-listbox-list-container) {
+        max-height: 100% !important;
+    }
+}
+</style>
diff --git a/packages/safelight/src/views/dev/Packages.vue b/packages/safelight/src/views/dev/Packages.vue
index 951f5c09..d912975c 100644
--- a/packages/safelight/src/views/dev/Packages.vue
+++ b/packages/safelight/src/views/dev/Packages.vue
@@ -56,7 +56,10 @@
                                         style="border-width: 1px"
                                     >
                                         <a
-                                            :href="item.homepage"
+                                            :href="
+                                                item.homepage ??
+                                                `https://www.npmjs.com/package/${item.name}`
+                                            "
                                             target="_blank"
                                             class="text-xl font-semibold text-white"
                                             style="
@@ -245,6 +248,14 @@ onMounted(() => {
                 ...convertDepsToDepsWithNames(packages.devDependencies, true)
             ];
         });
+    fetch(new URL('@/generated/packages-daguerreo.json', import.meta.url))
+        .then((r) => r.json())
+        .then((packages: Packages) => {
+            allPackagesPerProject['daguerreo'] = [
+                ...convertDepsToDepsWithNames(packages.dependencies),
+                ...convertDepsToDepsWithNames(packages.devDependencies, true)
+            ];
+        });
 });
 
 function openUrl(link: string) {
diff --git a/packages/shared/src/base/Renderer.ts b/packages/shared/src/base/Renderer.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59db6ab5..30fbb9a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,6 +81,19 @@ importers:
         specifier: 10.0.5
         version: 10.0.5(vue@3.5.13(typescript@5.6.3))
 
+  packages/daguerreo:
+    dependencies:
+      gifuct-js:
+        specifier: ^2.1.2
+        version: 2.1.2
+      vue:
+        specifier: ^3.5.13
+        version: 3.5.13(typescript@5.7.2)
+    devDependencies:
+      type-fest:
+        specifier: ^4.30.2
+        version: 4.30.2
+
   packages/darkroom:
     dependencies:
       '@endo/static-module-record':
@@ -177,6 +190,9 @@ importers:
       '@primevue/themes':
         specifier: ^4.2.5
         version: 4.2.5
+      '@safelight/daguerreo':
+        specifier: workspace:^
+        version: link:../daguerreo
       '@safelight/shared':
         specifier: workspace:*
         version: link:../shared
@@ -2587,6 +2603,9 @@ packages:
   get-tsconfig@4.8.1:
     resolution: {integrity: sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==}
 
+  gifuct-js@2.1.2:
+    resolution: {integrity: sha512-rI2asw77u0mGgwhV3qA+OEgYqaDn5UNqgs+Bx0FGwSpuqfYn+Ir6RQY5ENNQ8SbIiG/m5gVa7CD5RriO4f4Lsg==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -2816,6 +2835,9 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  js-binary-schema-parser@2.0.3:
+    resolution: {integrity: sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==}
+
   js-cookie@3.0.5:
     resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
     engines: {node: '>=14'}
@@ -6536,6 +6558,10 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  gifuct-js@2.1.2:
+    dependencies:
+      js-binary-schema-parser: 2.0.3
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -6758,6 +6784,8 @@ snapshots:
       js-cookie: 3.0.5
       nopt: 7.2.1
 
+  js-binary-schema-parser@2.0.3: {}
+
   js-cookie@3.0.5: {}
 
   js-tokens@4.0.0: {}
diff --git a/tsconfig.json b/tsconfig.json
index dcf69db8..ae70801d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
         "module": "ESNext",
         "moduleResolution": "Bundler",
         "paths": {
+            "@safelight/daguerreo": ["./packages/daguerreo"],
             "@safelight/darkroom": ["./packages/darkroom"],
             "@safelight/plugin-types": ["./packages/plugin-types"],
             "@safelight/safelight": ["./packages/safelight/"],