From 869b67458a270dc5eb802d22550df9302c8be19a Mon Sep 17 00:00:00 2001
From: th <th@skilleven.de>
Date: Mon, 20 Apr 2026 10:35:43 +0200
Subject: [PATCH] 0.4.0: clipart drawer, animation paths, bezier keyframes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Clipart library: new left-edge drawer (5px idle, expands on hover,
  400px when open). User picks a local folder via the File System Access
  API in settings; directory handle is persisted in IndexedDB so the
  library survives reloads. Dragging a thumbnail onto the stage creates
  an image asset + layer at the drop point.
- Animation paths on the stage: selecting a keyframe draws the tween
  path from the previous keyframe to the selected one as a solid
  polyline with per-frame draggable dots. All other segments on the
  same position-track render as dashed ghost lines so the full curve
  progression is visible.
- Path dots grow on hover (2.5 → 6 px), show a grab cursor, and have a
  wider hit area so they're easier to grab.
- Bezier-curved position interpolation: keyframes gain optional
  ctrlX/ctrlY fields. When set, x/y tween along a quadratic bezier
  through the control point instead of a straight line. Dragging a
  path dot solves for the control so the curve passes through the
  drag point at its frame progress. Mirrored across all four render
  pipelines.
- Tests: new suites for polygon actions, freeform drawing lifecycle,
  polygon + stroke rendering (15 new tests). Fixed the mask-render
  tests that relied on a default-transparent canvas background.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .gitignore                          |   3 +
 package.json                        |   2 +-
 server/render.html                  |  10 +-
 src/App.vue                         |  19 +-
 src/components/CanvasStage.vue      | 266 ++++++++++++++++++++++-
 src/components/ClipartDrawer.vue    | 304 ++++++++++++++++++++++++++
 src/components/DocumentSettings.vue | 133 +++++++++++-
 src/devtools/tests.ts               | 319 ++++++++++++++++++++++++++++
 src/i18n/messages.ts                |  18 ++
 src/lib/clipartLibrary.ts           | 129 +++++++++++
 src/lib/exportPlayer.ts             |  10 +-
 src/lib/interpolate.ts              |  11 +-
 src/stores/clipart.ts               | 113 ++++++++++
 src/stores/scene.ts                 |  51 +++++
 src/types/scene.ts                  |   4 +
 src/version.ts                      |   2 +-
 16 files changed, 1379 insertions(+), 15 deletions(-)
 create mode 100644 src/components/ClipartDrawer.vue
 create mode 100644 src/lib/clipartLibrary.ts
 create mode 100644 src/stores/clipart.ts

diff --git a/.gitignore b/.gitignore
index 89f1a15..2c3ce18 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,6 @@ dist-ssr
 
 .DS_Store
 *.log
+
+# Local clipart working folder
+/clipart/
diff --git a/package.json b/package.json
index 216a043..0d394ff 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "animatr",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/server/render.html b/server/render.html
index d62c1c6..7f91efa 100644
--- a/server/render.html
+++ b/server/render.html
@@ -80,7 +80,15 @@
         }
         var raw=(time-a.time)/(b.time-a.time);
         var t=easing(b.easing,raw);
-        return lerpProps(merge(layer.base,a.props), merge(layer.base,b.props), t);
+        var pa=merge(layer.base,a.props);
+        var pb=merge(layer.base,b.props);
+        var outS=lerpProps(pa,pb,t);
+        if(b.ctrlX!=null && b.ctrlY!=null){
+          var om=1-t;
+          outS.x=om*om*pa.x+2*om*t*b.ctrlX+t*t*pb.x;
+          outS.y=om*om*pa.y+2*om*t*b.ctrlY+t*t*pb.y;
+        }
+        return outS;
       }
     }
     return merge(layer.base);
diff --git a/src/App.vue b/src/App.vue
index f839ec2..be8cc26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,6 +18,7 @@ import {
 import AboutDialog from './components/AboutDialog.vue'
 import AssetSidebar from './components/AssetSidebar.vue'
 import CanvasStage from './components/CanvasStage.vue'
+import ClipartDrawer from './components/ClipartDrawer.vue'
 import DocumentSettings from './components/DocumentSettings.vue'
 import ExportDialog from './components/ExportDialog.vue'
 import FullscreenPreview from './components/FullscreenPreview.vue'
@@ -290,7 +291,9 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="app" :style="appStyle">
+  <div class="shell">
+    <ClipartDrawer />
+    <div class="app" :style="appStyle">
     <header class="topbar">
       <div class="brand-area">
         <button class="brand" :title="t('about.openTooltip')" @click="aboutOpen = true">
@@ -404,10 +407,19 @@ onBeforeUnmount(() => {
       <span>{{ loadError }}</span>
     </Toast>
     <Toast :visible="!!savedToast" variant="info" :message="savedToast ?? ''" />
+    </div>
   </div>
 </template>
 
 <style scoped>
+.shell {
+  display: flex;
+  align-items: stretch;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
 .app {
   display: grid;
   grid-template-columns: 260px 1fr 300px;
@@ -416,8 +428,9 @@ onBeforeUnmount(() => {
     'top top top'
     'side stage props'
     'time time time';
-  height: 100vh;
-  width: 100vw;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 100%;
 }
 
 .topbar {
diff --git a/src/components/CanvasStage.vue b/src/components/CanvasStage.vue
index 8be7dbf..08c95d0 100644
--- a/src/components/CanvasStage.vue
+++ b/src/components/CanvasStage.vue
@@ -4,7 +4,8 @@ import type Konva from 'konva'
 import { PhCornersIn, PhCrop, PhMaskHappy, PhPencilSimple } from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
 import { sampleLayer } from '@/lib/interpolate'
-import { loadImage } from '@/lib/fileLoader'
+import { isSvgFile, loadImage, parseSvgDimensions, readAsDataUrl } from '@/lib/fileLoader'
+import { useClipartStore } from '@/stores/clipart'
 import { drawSceneFrame, loadSceneImages } from '@/lib/render'
 import type { AnimatableProps, Asset, Layer } from '@/types/scene'
 import { t } from '@/i18n'
@@ -12,6 +13,7 @@ import { useKfSelection } from '@/composables/useKfSelection'
 import { expandedTrackOrder } from '@/lib/sceneOrder'
 
 const store = useSceneStore()
+const clipart = useClipartStore()
 const { selectedKfs } = useKfSelection()
 
 const container = ref<HTMLDivElement | null>(null)
@@ -821,6 +823,197 @@ function handleTransform(e: Konva.KonvaEventObject<Event>) {
   updateLivePose(node, id)
 }
 
+interface PathFrame {
+  index: number
+  x: number
+  y: number
+  u: number
+}
+
+interface PathSegment {
+  flat: number[]
+}
+
+interface PathOverlay {
+  layerId: string
+  activeKeyframeId: string | null
+  ghostSegments: PathSegment[]
+  activeFrames: PathFrame[]
+}
+
+function sampleSegment(layer: Layer, from: number, to: number, fps: number): number[] {
+  const dt = to - from
+  if (dt <= 0) return []
+  const n = Math.max(2, Math.min(240, Math.round(dt * fps)))
+  const out: number[] = []
+  for (let i = 0; i <= n; i++) {
+    const time = from + (i / n) * dt
+    const s = sampleLayer(layer, time)
+    out.push(s.x, s.y)
+  }
+  return out
+}
+
+const animationPath = computed<PathOverlay | null>(() => {
+  const sel = selectedKfs.value
+  if (sel.length === 0) return null
+  const first = sel[0]
+  if (first.kind === 'rotation') return null
+  const layer = store.activeLayers.find((l) => l.id === first.layerId)
+  if (!layer) return null
+  const arr = first.kind === 'position' ? layer.positionKeyframes : layer.keyframes
+  if (!arr) return null
+  const sorted = [...arr].sort((a, b) => a.time - b.time)
+  const idx = sorted.findIndex((k) => k.id === first.keyframeId)
+  if (idx < 0) return null
+  const fps = store.scene.fps || 60
+
+  const ghostSegments: PathSegment[] = []
+  // All segments between consecutive keyframes become ghost segments,
+  // except the one leading to the selected keyframe which gets interactive dots.
+  let activeFrames: PathFrame[] = []
+  let activeKeyframeId: string | null = null
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const a = sorted[i]
+    const b = sorted[i + 1]
+    const dt = b.time - a.time
+    if (dt <= 0) continue
+    if (b.id === first.keyframeId) {
+      const n = Math.max(2, Math.min(240, Math.round(dt * fps)))
+      const frames: PathFrame[] = []
+      for (let k = 0; k <= n; k++) {
+        const u = k / n
+        const time = a.time + u * dt
+        const s = sampleLayer(layer, time)
+        frames.push({ index: k, x: s.x, y: s.y, u })
+      }
+      activeFrames = frames
+      activeKeyframeId = b.id
+    } else {
+      const flat = sampleSegment(layer, a.time, b.time, fps)
+      if (flat.length >= 4) ghostSegments.push({ flat })
+    }
+  }
+  if (!ghostSegments.length && activeFrames.length === 0) return null
+  return {
+    layerId: layer.id,
+    activeKeyframeId,
+    ghostSegments,
+    activeFrames,
+  }
+})
+
+const animationGhostSegments = computed(() => {
+  const path = animationPath.value
+  if (!path) return []
+  return path.ghostSegments.map((seg, i) => ({
+    key: `gs-${i}`,
+    config: {
+      points: seg.flat,
+      stroke: '#6ea8ff',
+      strokeWidth: 1 / zoom.value,
+      strokeScaleEnabled: false,
+      listening: false,
+      lineCap: 'round',
+      lineJoin: 'round',
+      opacity: 0.35,
+      dash: [4 / zoom.value, 3 / zoom.value],
+    },
+  }))
+})
+
+const animationPathLineConfig = computed(() => {
+  const path = animationPath.value
+  if (!path || path.activeFrames.length < 2) return null
+  const flat: number[] = []
+  for (const f of path.activeFrames) flat.push(f.x, f.y)
+  return {
+    points: flat,
+    stroke: '#6ea8ff',
+    strokeWidth: 1.25 / zoom.value,
+    strokeScaleEnabled: false,
+    listening: false,
+    lineCap: 'round',
+    lineJoin: 'round',
+  }
+})
+
+const animationPathDots = computed(() => {
+  const path = animationPath.value
+  if (!path || !path.activeKeyframeId) return []
+  return path.activeFrames.map((f) => ({
+    key: `pf-${path.activeKeyframeId}-${f.index}`,
+    frameIndex: f.index,
+    x: f.x,
+    y: f.y,
+    isEnd: f.index === 0 || f.index === path.activeFrames.length - 1,
+  }))
+})
+
+const hoveredPathDot = ref<number | null>(null)
+
+function animationDotConfig(d: { x: number; y: number; isEnd: boolean; frameIndex: number }) {
+  const hovered = !d.isEnd && hoveredPathDot.value === d.frameIndex
+  const baseRadius = d.isEnd ? 4 : 2.5
+  const radius = hovered ? 6 : baseRadius
+  return {
+    x: d.x,
+    y: d.y,
+    radius: radius / zoom.value,
+    hitStrokeWidth: 10 / zoom.value,
+    fill: d.isEnd ? '#6ea8ff' : hovered ? '#6ea8ff' : '#ffffff',
+    stroke: '#6ea8ff',
+    strokeWidth: (hovered ? 1.5 : 1) / zoom.value,
+    strokeScaleEnabled: false,
+    draggable: !d.isEnd,
+    name: 'path-frame-dot',
+  }
+}
+
+function onPathDotMouseEnter(frameIndex: number, isEnd: boolean) {
+  if (isEnd) return
+  hoveredPathDot.value = frameIndex
+  const stage = stageRef.value?.getStage()
+  const cont = stage?.container()
+  if (cont) cont.style.cursor = 'grab'
+}
+
+function onPathDotMouseLeave() {
+  hoveredPathDot.value = null
+  const stage = stageRef.value?.getStage()
+  const cont = stage?.container()
+  if (cont) cont.style.cursor = ''
+}
+
+function onPathDotDragMove(e: Konva.KonvaEventObject<DragEvent>, frameIndex: number) {
+  const path = animationPath.value
+  if (!path || !path.activeKeyframeId) return
+  const node = e.target
+  const wx = node.x()
+  const wy = node.y()
+  const total = path.activeFrames.length - 1
+  if (total <= 0) return
+  const uRaw = frameIndex / total
+  if (uRaw <= 0 || uRaw >= 1) return
+  const layer = store.activeLayers.find((l) => l.id === path.layerId)
+  if (!layer) return
+  const arr = selectedKfs.value[0]?.kind === 'position'
+    ? layer.positionKeyframes
+    : layer.keyframes
+  const kf = arr?.find((k) => k.id === path.activeKeyframeId)
+  if (!kf) return
+  const easing = kf.easing
+  const t = applyEasing(uRaw, easing)
+  store.setKeyframeControlFromPoint(path.layerId, path.activeKeyframeId, t, wx, wy)
+}
+
+function applyEasing(t: number, easing: string): number {
+  if (easing === 'easeIn') return t * t
+  if (easing === 'easeOut') return 1 - (1 - t) ** 2
+  if (easing === 'easeInOut') return t < 0.5 ? 2 * t * t : 1 - ((-2 * t + 2) ** 2) / 2
+  return t
+}
+
 const drawingPreview = ref<{ x: number; y: number } | null>(null)
 
 function pointerToWorld(e: Konva.KonvaEventObject<MouseEvent>) {
@@ -873,6 +1066,7 @@ function handleStageMouseDown(e: Konva.KonvaEventObject<MouseEvent>) {
   if (target.findAncestor?.('.pivot-handle')) return
   if (target.findAncestor?.('.rotation-handle')) return
   if (target.name?.() === 'vertex-handle' || target.findAncestor?.('.vertex-handle')) return
+  if (target.name?.() === 'path-frame-dot') return
   if (target === target.getStage()) {
     store.selectLayer(null)
     return
@@ -1252,21 +1446,68 @@ function onContainerPointerUp(e: PointerEvent) {
 
 function onContainerDragOver(e: DragEvent) {
   if (!e.dataTransfer) return
-  if (!e.dataTransfer.types.includes('application/x-animatr-asset')) return
+  const types = e.dataTransfer.types
+  if (
+    !types.includes('application/x-animatr-asset') &&
+    !types.includes('application/x-animatr-clipart')
+  )
+    return
   e.preventDefault()
   e.dataTransfer.dropEffect = 'copy'
 }
 
+async function importClipartAt(file: File, worldX: number, worldY: number) {
+  const dataUrl = await readAsDataUrl(file)
+  let width = 0
+  let height = 0
+  if (isSvgFile(file)) {
+    const text = await file.text()
+    const dims = parseSvgDimensions(text)
+    if (dims) {
+      width = dims.width
+      height = dims.height
+    }
+  }
+  if (!width || !height) {
+    const img = await loadImage(dataUrl)
+    width = img.naturalWidth || 300
+    height = img.naturalHeight || 300
+  }
+  const asset = store.addAsset({
+    kind: 'image',
+    name: file.name,
+    src: dataUrl,
+    width,
+    height,
+  })
+  const layer = store.addLayer(asset.id)
+  if (layer) {
+    store.upsertKeyframe(layer.id, store.playhead, { x: worldX, y: worldY })
+  }
+}
+
 function onContainerDrop(e: DragEvent) {
-  const assetId = e.dataTransfer?.getData('application/x-animatr-asset')
-  if (!assetId) return
-  e.preventDefault()
   const rect = container.value?.getBoundingClientRect()
   if (!rect) return
   const sx = e.clientX - rect.left
   const sy = e.clientY - rect.top
   const worldX = (sx - viewX.value) / zoom.value
   const worldY = (sy - viewY.value) / zoom.value
+
+  const clipartIdx = e.dataTransfer?.getData('application/x-animatr-clipart')
+  if (clipartIdx) {
+    e.preventDefault()
+    const idx = Number.parseInt(clipartIdx, 10)
+    const item = Number.isFinite(idx) ? clipart.items[idx] : null
+    if (item) {
+      void importClipartAt(item.file, worldX, worldY)
+    }
+    return
+  }
+
+  const assetId = e.dataTransfer?.getData('application/x-animatr-asset')
+  if (!assetId) return
+  e.preventDefault()
   const layer = store.addLayer(assetId)
   if (layer) {
     store.upsertKeyframe(layer.id, 0, { x: worldX, y: worldY })
@@ -1495,6 +1736,21 @@ onBeforeUnmount(() => {
             @dragmove="(e: Konva.KonvaEventObject<DragEvent>) => onVertexDragMove(e, h.index)"
             @dragend="(e: Konva.KonvaEventObject<DragEvent>) => onVertexDragEnd(e, h.index)"
           />
+          <v-line
+            v-for="g in animationGhostSegments"
+            :key="g.key"
+            :config="g.config"
+          />
+          <v-line v-if="animationPathLineConfig" :config="animationPathLineConfig" />
+          <v-circle
+            v-for="d in animationPathDots"
+            :key="d.key"
+            :config="animationDotConfig(d)"
+            @mouseenter="onPathDotMouseEnter(d.frameIndex, d.isEnd)"
+            @mouseleave="onPathDotMouseLeave"
+            @dragmove="(e: Konva.KonvaEventObject<DragEvent>) => onPathDotDragMove(e, d.frameIndex)"
+            @dragend="(e: Konva.KonvaEventObject<DragEvent>) => onPathDotDragMove(e, d.frameIndex)"
+          />
           <v-line v-if="drawingPreviewConfig" :config="drawingPreviewConfig" />
           <v-circle
             v-for="d in drawingDotsConfig"
diff --git a/src/components/ClipartDrawer.vue b/src/components/ClipartDrawer.vue
new file mode 100644
index 0000000..8ddc42a
--- /dev/null
+++ b/src/components/ClipartDrawer.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+import { PhArrowClockwise, PhCaretLeft, PhCaretRight, PhImagesSquare } from '@phosphor-icons/vue'
+import { useClipartStore } from '@/stores/clipart'
+import { t } from '@/i18n'
+
+const clipart = useClipartStore()
+
+onMounted(() => {
+  clipart.initialize()
+})
+
+onBeforeUnmount(() => {
+  clipart.disposeItems()
+})
+
+function onItemDragStart(e: DragEvent, index: number) {
+  if (!e.dataTransfer) return
+  const item = clipart.items[index]
+  if (!item) return
+  e.dataTransfer.effectAllowed = 'copy'
+  e.dataTransfer.setData('application/x-animatr-clipart', String(index))
+  e.dataTransfer.setData('text/plain', item.name)
+  // Use the actual image as drag ghost
+  const ghost = document.createElement('img')
+  ghost.src = item.url
+  ghost.style.position = 'absolute'
+  ghost.style.top = '-1000px'
+  ghost.style.left = '-1000px'
+  ghost.style.width = '96px'
+  ghost.style.height = '96px'
+  ghost.style.objectFit = 'contain'
+  document.body.appendChild(ghost)
+  try {
+    e.dataTransfer.setDragImage(ghost, 48, 48)
+  } catch {
+    /* ignore */
+  }
+  setTimeout(() => ghost.remove(), 0)
+}
+</script>
+
+<template>
+  <aside class="clipart-drawer" :class="{ open: clipart.open }">
+    <button
+      class="drawer-tab"
+      :title="clipart.open ? t('clipart.close') : t('clipart.open')"
+      @click="clipart.toggle()"
+    >
+      <component :is="clipart.open ? PhCaretLeft : PhCaretRight" :size="14" />
+    </button>
+    <div v-if="clipart.open" class="drawer-panel">
+      <header class="drawer-header">
+        <PhImagesSquare :size="14" class="title-icon" />
+        <h3>{{ t('clipart.title') }}</h3>
+        <button
+          v-if="clipart.handle"
+          class="refresh-btn"
+          :title="t('clipart.refresh')"
+          :disabled="clipart.loading"
+          @click="clipart.refresh()"
+        >
+          <PhArrowClockwise :size="13" />
+        </button>
+      </header>
+      <div v-if="clipart.folderName" class="folder-row">
+        <span class="folder-name">{{ clipart.folderName }}</span>
+        <span class="count">{{ clipart.items.length }}</span>
+      </div>
+      <p v-if="!clipart.supported" class="empty-state">
+        {{ t('clipart.unsupported') }}
+      </p>
+      <p v-else-if="!clipart.handle" class="empty-state">
+        {{ t('clipart.empty') }}
+      </p>
+      <p v-else-if="clipart.error" class="error-state">{{ clipart.error }}</p>
+      <p v-else-if="clipart.loading" class="empty-state">{{ t('clipart.loading') }}</p>
+      <p v-else-if="clipart.items.length === 0" class="empty-state">
+        {{ t('clipart.noFiles') }}
+      </p>
+      <div v-else class="tile-grid">
+        <div
+          v-for="(item, i) in clipart.items"
+          :key="item.name + i"
+          class="tile"
+          :title="item.name"
+          draggable="true"
+          @dragstart="onItemDragStart($event, i)"
+        >
+          <img :src="item.url" :alt="item.name" />
+          <span class="tile-label">{{ item.name }}</span>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.clipart-drawer {
+  display: flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  height: 100%;
+  width: 5px;
+  transition: width 220ms var(--ease);
+  background: var(--border);
+  border-right: 1px solid var(--border);
+  position: relative;
+}
+
+.clipart-drawer:hover {
+  width: 24px;
+  background: var(--panel);
+}
+
+.clipart-drawer.open {
+  width: 424px;
+  background: var(--panel);
+}
+
+.drawer-tab {
+  flex: 0 0 100%;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  writing-mode: vertical-rl;
+  overflow: hidden;
+  transition: background 140ms var(--ease);
+}
+
+.drawer-tab :deep(svg) {
+  opacity: 0;
+  transition: opacity 140ms var(--ease);
+}
+
+.clipart-drawer:hover .drawer-tab :deep(svg),
+.clipart-drawer.open .drawer-tab :deep(svg) {
+  opacity: 1;
+}
+
+.clipart-drawer:hover .drawer-tab {
+  background: var(--panel-alt);
+  color: var(--text);
+}
+
+.clipart-drawer.open .drawer-tab {
+  flex: 0 0 24px;
+  width: 24px;
+  background: var(--panel);
+}
+
+.drawer-panel {
+  flex: 1;
+  min-width: 0;
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.title-icon {
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.drawer-header h3 {
+  flex: 1;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.refresh-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--border);
+  background: transparent;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.refresh-btn:hover:not(:disabled) {
+  color: var(--text);
+  background: var(--panel-alt);
+}
+
+.refresh-btn:disabled {
+  opacity: 0.5;
+  cursor: wait;
+}
+
+.folder-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 11px;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+  background: var(--panel-alt);
+}
+
+.folder-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.count {
+  font-variant-numeric: tabular-nums;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--border);
+  color: var(--text-dim-strong);
+  font-size: 10px;
+}
+
+.empty-state {
+  margin: 0;
+  padding: 16px 14px;
+  color: var(--text-dim);
+  font-size: 12px;
+  font-style: italic;
+}
+
+.error-state {
+  margin: 0;
+  padding: 16px 14px;
+  color: var(--danger);
+  font-size: 12px;
+}
+
+.tile-grid {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+  gap: 8px;
+  align-content: start;
+}
+
+.tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  cursor: grab;
+  transition: border-color 140ms var(--ease), background 140ms var(--ease);
+}
+
+.tile:hover {
+  border-color: var(--accent);
+  background: var(--panel-alt);
+}
+
+.tile:active {
+  cursor: grabbing;
+}
+
+.tile img {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+}
+
+.tile-label {
+  font-size: 10px;
+  color: var(--text-dim);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/components/DocumentSettings.vue b/src/components/DocumentSettings.vue
index db859b3..a4ae85a 100644
--- a/src/components/DocumentSettings.vue
+++ b/src/components/DocumentSettings.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { PhClock, PhFrameCorners, PhMoon, PhPalette, PhSun } from '@phosphor-icons/vue'
+import {
+  PhClock,
+  PhFolder,
+  PhFrameCorners,
+  PhMoon,
+  PhPalette,
+  PhSun,
+} from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
+import { useClipartStore } from '@/stores/clipart'
 import { useTheme } from '@/composables/useTheme'
 import type { Theme } from '@/composables/useTheme'
 import { Modal } from '@/components/ui'
@@ -11,13 +19,15 @@ defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
 
 const store = useSceneStore()
+const clipart = useClipartStore()
 const { theme, setTheme } = useTheme()
 
-type TabId = 'document' | 'timeline' | 'theme'
+type TabId = 'document' | 'timeline' | 'clipart' | 'theme'
 
 const tabs: { id: TabId; label: string; icon: typeof PhFrameCorners }[] = [
   { id: 'document', label: t('settings.tab.document'), icon: PhFrameCorners },
   { id: 'timeline', label: t('settings.tab.timeline'), icon: PhClock },
+  { id: 'clipart', label: t('settings.tab.clipart'), icon: PhFolder },
   { id: 'theme', label: t('settings.tab.theme'), icon: PhPalette },
 ]
 
@@ -145,6 +155,41 @@ function applyTheme(t: Theme) {
                 </p>
               </section>
 
+              <section v-else-if="activeTab === 'clipart'">
+                <h3>{{ t('settings.tab.clipart') }}</h3>
+                <div class="clipart-row">
+                  <div class="clipart-label">{{ t('clipart.folderLabel') }}</div>
+                  <div class="clipart-value">
+                    <PhFolder :size="13" />
+                    <span v-if="clipart.folderName" class="clipart-folder-name">
+                      {{ clipart.folderName }}
+                    </span>
+                    <span v-else class="clipart-folder-empty">{{ t('clipart.noFolder') }}</span>
+                  </div>
+                </div>
+                <div class="clipart-actions">
+                  <button
+                    class="primary-btn"
+                    :disabled="!clipart.supported"
+                    @click="clipart.pickFolder()"
+                  >
+                    {{ t('clipart.chooseFolder') }}
+                  </button>
+                  <button
+                    v-if="clipart.handle"
+                    class="ghost-btn"
+                    @click="clipart.clearFolder()"
+                  >
+                    {{ t('clipart.clearFolder') }}
+                  </button>
+                </div>
+                <p v-if="!clipart.supported" class="error-line">
+                  {{ t('clipart.unsupported') }}
+                </p>
+                <p v-if="clipart.error" class="error-line">{{ clipart.error }}</p>
+                <p class="hint">{{ t('clipart.settingsHint') }}</p>
+              </section>
+
               <section v-else-if="activeTab === 'theme'">
                 <h3>{{ t('settings.tab.theme') }}</h3>
                 <div class="theme-grid">
@@ -350,6 +395,90 @@ input[type='number'] {
   margin: 0;
 }
 
+.clipart-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.clipart-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-dim);
+}
+
+.clipart-value {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: var(--panel-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 12px;
+}
+
+.clipart-folder-name {
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.clipart-folder-empty {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+.clipart-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.primary-btn {
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--accent-text, #fff);
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.primary-btn:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.primary-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ghost-btn {
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.ghost-btn:hover {
+  background: var(--panel-alt);
+}
+
+.error-line {
+  margin: 0 0 8px;
+  color: var(--danger);
+  font-size: 11px;
+}
+
 .theme-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
diff --git a/src/devtools/tests.ts b/src/devtools/tests.ts
index 045f0af..c849682 100644
--- a/src/devtools/tests.ts
+++ b/src/devtools/tests.ts
@@ -11,6 +11,7 @@ import { ProjectFileError, parseProject, serializeProject } from '@/lib/projectF
 import { createHistory } from '@/composables/useHistory'
 import { useKfSelection, kfSelectionKey } from '@/composables/useKfSelection'
 import { APP_NAME, APP_VERSION } from '@/version'
+import type { PolygonAsset } from '@/types/scene'
 import { drawSceneFrame } from '@/lib/render'
 import { expandedTrackOrder } from '@/lib/sceneOrder'
 import {
@@ -1622,6 +1623,7 @@ export function registerAllTests(): void {
       const s = makeFreshStore()
       s.scene.canvas.width = 100
       s.scene.canvas.height = 100
+      s.scene.canvas.background = 'transparent'
       // Content: full-canvas red rect
       const content = s.addAsset({
         kind: 'rect',
@@ -1801,4 +1803,321 @@ export function registerAllTests(): void {
       expect(kf.props.x).toBe(50)
     })
   })
+
+  suite('polygon — store actions', () => {
+    function makePolygonLayer() {
+      const s = makeFreshStore()
+      const asset = s.addAsset({
+        kind: 'polygon',
+        name: 'Poly',
+        points: [
+          { x: 0, y: -40 },
+          { x: 40, y: 20 },
+          { x: -40, y: 20 },
+        ],
+        fill: '#abc',
+      }) as PolygonAsset
+      const layer = s.addLayer(asset.id)
+      return { s, asset, layer }
+    }
+
+    test('addLayer seeds initial keyframe with points for polygons', () => {
+      const { layer, asset } = makePolygonLayer()
+      const kf0 = layer.keyframes[0]
+      expect(kf0).toBeTruthy()
+      expect(Array.isArray(kf0.props.points)).toBe(true)
+      expect(kf0.props.points!.length).toBe(asset.points.length)
+    })
+
+    test('movePolygonVertex writes a points-array kf at playhead', () => {
+      const { s, layer, asset } = makePolygonLayer()
+      s.setPlayhead(0)
+      s.movePolygonVertex(layer.id, 0, 10, -50)
+      const kf = layer.keyframes.find((k) => Math.abs(k.time) < 1e-3)!
+      expect(kf.props.points![0].x).toBe(10)
+      expect(kf.props.points![0].y).toBe(-50)
+      // Other points remain unchanged
+      expect(kf.props.points![1].x).toBe(asset.points[1].x)
+      expect(kf.props.points![1].y).toBe(asset.points[1].y)
+    })
+
+    test('setPolygonPointCount grows by midpoint insertion and keeps KFs in sync', () => {
+      const { s, layer, asset } = makePolygonLayer()
+      const originalLen = asset.points.length
+      s.setPolygonPointCount(asset.id, originalLen + 2)
+      expect(asset.points.length).toBe(originalLen + 2)
+      for (const kf of layer.keyframes) {
+        if (!kf.props.points) continue
+        expect(kf.props.points.length).toBe(originalLen + 2)
+      }
+    })
+
+    test('setPolygonPointCount shrinks but never below 3', () => {
+      const { s, asset } = makePolygonLayer()
+      s.setPolygonPointCount(asset.id, 1)
+      expect(asset.points.length).toBe(3)
+    })
+
+    test('insertPolygonPointOnEdge inserts at expected index across all keyframes', () => {
+      const { s, layer, asset } = makePolygonLayer()
+      s.insertPolygonPointOnEdge(asset.id, 1, 0.5)
+      expect(asset.points.length).toBe(4)
+      const kf = layer.keyframes[0]
+      expect(kf.props.points!.length).toBe(4)
+      // midpoint between original [0] and [1]
+      const expectedX = (0 + 40) / 2
+      const expectedY = (-40 + 20) / 2
+      expect(asset.points[1].x).toBe(expectedX)
+      expect(asset.points[1].y).toBe(expectedY)
+      expect(kf.props.points![1].x).toBe(expectedX)
+      expect(kf.props.points![1].y).toBe(expectedY)
+    })
+
+    test('reversePolygonPoints reverses asset + keyframe points', () => {
+      const { s, layer, asset } = makePolygonLayer()
+      const firstBefore = { ...asset.points[0] }
+      s.reversePolygonPoints(asset.id)
+      expect(asset.points[asset.points.length - 1].x).toBe(firstBefore.x)
+      expect(asset.points[asset.points.length - 1].y).toBe(firstBefore.y)
+      const kf = layer.keyframes[0]
+      expect(kf.props.points![kf.props.points!.length - 1].x).toBe(firstBefore.x)
+    })
+
+    test('setPolygonClosed toggles the closed flag', () => {
+      const { s, asset } = makePolygonLayer()
+      s.setPolygonClosed(asset.id, false)
+      expect(asset.closed).toBe(false)
+      s.setPolygonClosed(asset.id, true)
+      expect(asset.closed).toBe(true)
+    })
+  })
+
+  suite('freeform drawing — lifecycle', () => {
+    test('startFreeformDrawing creates asset and layer', () => {
+      const s = makeFreshStore()
+      s.startFreeformDrawing()
+      expect(s.drawingMode).toBe('freeform')
+      expect(s.drawingAssetId).toBeTruthy()
+      expect(s.drawingLayerId).toBeTruthy()
+      const asset = s.scene.assets.find((a) => a.id === s.drawingAssetId)!
+      expect(asset.kind).toBe('polygon')
+      expect((asset as PolygonAsset).closed).toBe(false)
+    })
+
+    test('addDrawingPoint appends to asset and to KF points', () => {
+      const s = makeFreshStore()
+      s.startFreeformDrawing()
+      s.addDrawingPoint(10, 20)
+      s.addDrawingPoint(30, 40)
+      const asset = s.scene.assets.find((a) => a.id === s.drawingAssetId) as PolygonAsset
+      expect(asset.points.length).toBe(2)
+      expect(asset.points[1].x).toBe(30)
+      const layer = s.activeLayers.find((l) => l.id === s.drawingLayerId)!
+      expect(layer.keyframes[0].props.points!.length).toBe(2)
+    })
+
+    test('finishDrawing with <2 points drops the in-progress asset', () => {
+      const s = makeFreshStore()
+      s.startFreeformDrawing()
+      const assetId = s.drawingAssetId!
+      const layerId = s.drawingLayerId!
+      s.addDrawingPoint(5, 5) // only 1 point
+      s.finishDrawing()
+      expect(s.drawingMode).toBeNull()
+      expect(s.scene.assets.some((a) => a.id === assetId)).toBe(false)
+      expect(s.activeLayers.some((l) => l.id === layerId)).toBe(false)
+    })
+
+    test('finishDrawing with >=2 points keeps the layer and clears drawing state', () => {
+      const s = makeFreshStore()
+      s.startFreeformDrawing()
+      s.addDrawingPoint(0, 0)
+      s.addDrawingPoint(50, 50)
+      const assetId = s.drawingAssetId!
+      const layerId = s.drawingLayerId!
+      s.finishDrawing()
+      expect(s.drawingMode).toBeNull()
+      expect(s.drawingAssetId).toBeNull()
+      expect(s.drawingLayerId).toBeNull()
+      expect(s.scene.assets.some((a) => a.id === assetId)).toBe(true)
+      expect(s.activeLayers.some((l) => l.id === layerId)).toBe(true)
+    })
+
+    test('cancelDrawing removes the in-progress asset and layer', () => {
+      const s = makeFreshStore()
+      s.startFreeformDrawing()
+      s.addDrawingPoint(0, 0)
+      s.addDrawingPoint(10, 10)
+      const assetId = s.drawingAssetId!
+      const layerId = s.drawingLayerId!
+      s.cancelDrawing()
+      expect(s.drawingMode).toBeNull()
+      expect(s.scene.assets.some((a) => a.id === assetId)).toBe(false)
+      expect(s.activeLayers.some((l) => l.id === layerId)).toBe(false)
+    })
+
+    test('startFreeformDrawing resumes on selected open polygon instead of creating new', () => {
+      const s = makeFreshStore()
+      s.startFreeformDrawing()
+      s.addDrawingPoint(0, 0)
+      s.addDrawingPoint(20, 20)
+      const assetId = s.drawingAssetId!
+      const layerId = s.drawingLayerId!
+      s.finishDrawing()
+      // Layer stays selected; invoke start again
+      s.selectLayer(layerId)
+      s.startFreeformDrawing()
+      expect(s.drawingMode).toBe('freeform')
+      expect(s.drawingAssetId).toBe(assetId)
+      expect(s.drawingLayerId).toBe(layerId)
+    })
+  })
+
+  suite('polygon + stroke — rendering', () => {
+    test('drawSceneFrame renders a filled closed polygon in fill color', () => {
+      const s = makeFreshStore()
+      s.scene.canvas.width = 100
+      s.scene.canvas.height = 100
+      s.scene.canvas.background = 'transparent'
+      const a = s.addAsset({
+        kind: 'polygon',
+        name: 'Tri',
+        points: [
+          { x: 0, y: -30 },
+          { x: 30, y: 20 },
+          { x: -30, y: 20 },
+        ],
+        fill: '#ff0000',
+      })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 0, { x: 50, y: 50 })
+      const canvas = document.createElement('canvas')
+      canvas.width = 100
+      canvas.height = 100
+      const ctx = canvas.getContext('2d')!
+      drawSceneFrame(ctx, s.scene, 0, {})
+      const inside = ctx.getImageData(50, 55, 1, 1).data
+      expect(inside[0] > 200).toBe(true) // red channel
+      expect(inside[3] > 200).toBe(true) // alpha
+    })
+
+    test('open polygon with stroke renders only the stroke path', () => {
+      const s = makeFreshStore()
+      s.scene.canvas.width = 100
+      s.scene.canvas.height = 100
+      s.scene.canvas.background = 'transparent'
+      const a = s.addAsset({
+        kind: 'polygon',
+        name: 'Line',
+        points: [
+          { x: -40, y: 0 },
+          { x: 40, y: 0 },
+        ],
+        fill: 'transparent',
+        closed: false,
+        stroke: '#00ff00',
+        strokeWidth: 4,
+      })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 0, { x: 50, y: 50 })
+      const canvas = document.createElement('canvas')
+      canvas.width = 100
+      canvas.height = 100
+      const ctx = canvas.getContext('2d')!
+      drawSceneFrame(ctx, s.scene, 0, {})
+      const onLine = ctx.getImageData(50, 50, 1, 1).data
+      const offLine = ctx.getImageData(50, 80, 1, 1).data
+      expect(onLine[1] > 200).toBe(true) // green on line
+      expect(onLine[3] > 200).toBe(true)
+      expect(offLine[3]).toBe(0) // transparent elsewhere
+    })
+
+    test('rect with stroke renders the outline', () => {
+      const s = makeFreshStore()
+      s.scene.canvas.width = 100
+      s.scene.canvas.height = 100
+      s.scene.canvas.background = 'transparent'
+      const a = s.addAsset({
+        kind: 'rect',
+        name: 'R',
+        width: 40,
+        height: 40,
+        fill: 'transparent',
+        stroke: '#0000ff',
+        strokeWidth: 4,
+      })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 0, { x: 50, y: 50 })
+      const canvas = document.createElement('canvas')
+      canvas.width = 100
+      canvas.height = 100
+      const ctx = canvas.getContext('2d')!
+      drawSceneFrame(ctx, s.scene, 0, {})
+      // On the top edge of the rect
+      const onEdge = ctx.getImageData(50, 30, 1, 1).data
+      // Interior
+      const inside = ctx.getImageData(50, 50, 1, 1).data
+      expect(onEdge[2] > 200).toBe(true) // blue on edge
+      expect(inside[3]).toBe(0) // transparent interior
+    })
+
+    test('strokeWidth without explicit stroke falls back to black', () => {
+      const s = makeFreshStore()
+      s.scene.canvas.width = 100
+      s.scene.canvas.height = 100
+      s.scene.canvas.background = 'transparent'
+      const a = s.addAsset({
+        kind: 'rect',
+        name: 'R',
+        width: 40,
+        height: 40,
+        fill: 'transparent',
+        strokeWidth: 4,
+      })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 0, { x: 50, y: 50 })
+      const canvas = document.createElement('canvas')
+      canvas.width = 100
+      canvas.height = 100
+      const ctx = canvas.getContext('2d')!
+      drawSceneFrame(ctx, s.scene, 0, {})
+      const onEdge = ctx.getImageData(50, 30, 1, 1).data
+      // Black stroke: RGB all low, alpha high
+      expect(onEdge[0] < 40).toBe(true)
+      expect(onEdge[1] < 40).toBe(true)
+      expect(onEdge[2] < 40).toBe(true)
+      expect(onEdge[3] > 200).toBe(true)
+    })
+
+    test('transparent fill on closed polygon skips fill', () => {
+      const s = makeFreshStore()
+      s.scene.canvas.width = 100
+      s.scene.canvas.height = 100
+      s.scene.canvas.background = 'transparent'
+      const a = s.addAsset({
+        kind: 'polygon',
+        name: 'Hollow',
+        points: [
+          { x: -30, y: -30 },
+          { x: 30, y: -30 },
+          { x: 30, y: 30 },
+          { x: -30, y: 30 },
+        ],
+        fill: 'transparent',
+        closed: true,
+        stroke: '#ff00ff',
+        strokeWidth: 3,
+      })
+      const l = s.addLayer(a.id)
+      s.upsertKeyframe(l.id, 0, { x: 50, y: 50 })
+      const canvas = document.createElement('canvas')
+      canvas.width = 100
+      canvas.height = 100
+      const ctx = canvas.getContext('2d')!
+      drawSceneFrame(ctx, s.scene, 0, {})
+      // Center should be fully transparent (no fill)
+      const center = ctx.getImageData(50, 50, 1, 1).data
+      expect(center[3]).toBe(0)
+    })
+  })
 }
diff --git a/src/i18n/messages.ts b/src/i18n/messages.ts
index d21742f..614fc94 100644
--- a/src/i18n/messages.ts
+++ b/src/i18n/messages.ts
@@ -221,6 +221,7 @@ export const en = {
     tab: {
       document: 'Document',
       timeline: 'Timeline',
+      clipart: 'Clipart',
       theme: 'UI Theme',
     },
     canvas: 'Canvas',
@@ -271,6 +272,23 @@ export const en = {
     failedLabel: '{n} failed',
   },
 
+  clipart: {
+    title: 'Clipart library',
+    open: 'Open clipart library',
+    close: 'Close clipart library',
+    refresh: 'Reload folder',
+    empty: 'Choose a folder in settings to populate the library.',
+    noFiles: 'No image files in this folder.',
+    loading: 'Loading…',
+    unsupported: 'Your browser does not support folder access. Try Chrome or Edge.',
+    chooseFolder: 'Choose folder…',
+    clearFolder: 'Clear',
+    folderLabel: 'Folder',
+    noFolder: 'No folder selected',
+    settingsHint:
+      'Point to a local folder with your SVG/PNG/JPG clipart. The app remembers the folder; permissions may be re-asked after browser restart.',
+  },
+
   dialog: {
     confirm: 'Confirm',
     input: 'Input',
diff --git a/src/lib/clipartLibrary.ts b/src/lib/clipartLibrary.ts
new file mode 100644
index 0000000..44986ce
--- /dev/null
+++ b/src/lib/clipartLibrary.ts
@@ -0,0 +1,129 @@
+declare global {
+  interface Window {
+    showDirectoryPicker?: (options?: {
+      id?: string
+      mode?: 'read' | 'readwrite'
+    }) => Promise<FileSystemDirectoryHandle>
+  }
+}
+
+const DB_NAME = 'animatr-handles'
+const DB_VERSION = 1
+const STORE = 'handles'
+const HANDLE_KEY = 'clipartDir'
+
+const IMAGE_EXT = /\.(svg|png|jpe?g|webp|gif|avif)$/i
+
+export interface ClipartItem {
+  name: string
+  file: File
+  url: string
+}
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION)
+    req.onupgradeneeded = () => {
+      const db = req.result
+      if (!db.objectStoreNames.contains(STORE)) db.createObjectStore(STORE)
+    }
+    req.onsuccess = () => resolve(req.result)
+    req.onerror = () => reject(req.error)
+  })
+}
+
+async function putHandle(handle: FileSystemDirectoryHandle | null): Promise<void> {
+  const db = await openDb()
+  await new Promise<void>((resolve, reject) => {
+    const tx = db.transaction(STORE, 'readwrite')
+    const store = tx.objectStore(STORE)
+    if (handle) store.put(handle, HANDLE_KEY)
+    else store.delete(HANDLE_KEY)
+    tx.oncomplete = () => resolve()
+    tx.onerror = () => reject(tx.error)
+  })
+  db.close()
+}
+
+async function getHandle(): Promise<FileSystemDirectoryHandle | null> {
+  const db = await openDb()
+  const result = await new Promise<FileSystemDirectoryHandle | null>((resolve, reject) => {
+    const tx = db.transaction(STORE, 'readonly')
+    const req = tx.objectStore(STORE).get(HANDLE_KEY)
+    req.onsuccess = () => resolve((req.result as FileSystemDirectoryHandle | undefined) ?? null)
+    req.onerror = () => reject(req.error)
+  })
+  db.close()
+  return result
+}
+
+export function isFileSystemAccessSupported(): boolean {
+  return typeof window !== 'undefined' && typeof window.showDirectoryPicker === 'function'
+}
+
+export async function pickClipartFolder(): Promise<FileSystemDirectoryHandle | null> {
+  if (!isFileSystemAccessSupported()) return null
+  try {
+    const handle = await window.showDirectoryPicker!({ id: 'animatr-clipart', mode: 'read' })
+    await putHandle(handle)
+    return handle
+  } catch (err) {
+    if ((err as Error).name === 'AbortError') return null
+    throw err
+  }
+}
+
+export async function loadStoredClipartFolder(): Promise<FileSystemDirectoryHandle | null> {
+  try {
+    return await getHandle()
+  } catch {
+    return null
+  }
+}
+
+export async function clearStoredClipartFolder(): Promise<void> {
+  await putHandle(null)
+}
+
+async function ensurePermission(
+  handle: FileSystemDirectoryHandle,
+  mode: 'read' | 'readwrite' = 'read',
+): Promise<boolean> {
+  // @ts-expect-error queryPermission is not in DOM lib yet
+  const current: PermissionState = await handle.queryPermission({ mode })
+  if (current === 'granted') return true
+  // @ts-expect-error requestPermission is not in DOM lib yet
+  const next: PermissionState = await handle.requestPermission({ mode })
+  return next === 'granted'
+}
+
+export async function listClipart(
+  handle: FileSystemDirectoryHandle,
+): Promise<ClipartItem[]> {
+  const granted = await ensurePermission(handle)
+  if (!granted) return []
+  const out: ClipartItem[] = []
+  // @ts-expect-error async iterator not in DOM lib
+  for await (const [name, entry] of handle.entries()) {
+    if (entry.kind !== 'file') continue
+    if (!IMAGE_EXT.test(name)) continue
+    try {
+      const file = await (entry as FileSystemFileHandle).getFile()
+      out.push({ name, file, url: URL.createObjectURL(file) })
+    } catch {
+      /* ignore unreadable entries */
+    }
+  }
+  out.sort((a, b) => a.name.localeCompare(b.name))
+  return out
+}
+
+export function disposeClipartItems(items: ClipartItem[]): void {
+  for (const it of items) {
+    try {
+      URL.revokeObjectURL(it.url)
+    } catch {
+      /* noop */
+    }
+  }
+}
diff --git a/src/lib/exportPlayer.ts b/src/lib/exportPlayer.ts
index 489560d..9b0e3f8 100644
--- a/src/lib/exportPlayer.ts
+++ b/src/lib/exportPlayer.ts
@@ -78,7 +78,15 @@ const ENGINE_SOURCE = `(function(){
         }
         var raw=(time-a.time)/(b.time-a.time);
         var t=easing(b.easing,raw);
-        return lerpProps(merge(layer.base,a.props),merge(layer.base,b.props),t);
+        var pa=merge(layer.base,a.props);
+        var pb=merge(layer.base,b.props);
+        var outSample=lerpProps(pa,pb,t);
+        if(b.ctrlX!=null && b.ctrlY!=null){
+          var om=1-t;
+          outSample.x=om*om*pa.x+2*om*t*b.ctrlX+t*t*pb.x;
+          outSample.y=om*om*pa.y+2*om*t*b.ctrlY+t*t*pb.y;
+        }
+        return outSample;
       }
     }
     return merge(layer.base);
diff --git a/src/lib/interpolate.ts b/src/lib/interpolate.ts
index 7d244b9..b98fafb 100644
--- a/src/lib/interpolate.ts
+++ b/src/lib/interpolate.ts
@@ -105,7 +105,16 @@ function sampleKeyframeSet(
       }
       const raw = (time - a.time) / (b.time - a.time)
       const t = easings[b.easing](raw)
-      return lerpProps(merge(base, a.props), merge(base, b.props), t)
+      const pa = merge(base, a.props)
+      const pb = merge(base, b.props)
+      const out = lerpProps(pa, pb, t)
+      // Bezier-curved position: if b defines a quadratic control, override x/y
+      if (b.ctrlX !== undefined && b.ctrlY !== undefined) {
+        const oneMinus = 1 - t
+        out.x = oneMinus * oneMinus * pa.x + 2 * oneMinus * t * b.ctrlX + t * t * pb.x
+        out.y = oneMinus * oneMinus * pa.y + 2 * oneMinus * t * b.ctrlY + t * t * pb.y
+      }
+      return out
     }
   }
   return { ...base }
diff --git a/src/stores/clipart.ts b/src/stores/clipart.ts
new file mode 100644
index 0000000..557b167
--- /dev/null
+++ b/src/stores/clipart.ts
@@ -0,0 +1,113 @@
+import { defineStore } from 'pinia'
+import {
+  clearStoredClipartFolder,
+  disposeClipartItems,
+  isFileSystemAccessSupported,
+  listClipart,
+  loadStoredClipartFolder,
+  pickClipartFolder,
+  type ClipartItem,
+} from '@/lib/clipartLibrary'
+
+interface State {
+  handle: FileSystemDirectoryHandle | null
+  folderName: string | null
+  items: ClipartItem[]
+  open: boolean
+  loading: boolean
+  error: string | null
+  supported: boolean
+  initialized: boolean
+}
+
+const DRAWER_OPEN_KEY = 'animatr:clipartDrawerOpen'
+
+function readDrawerOpen(): boolean {
+  try {
+    return localStorage.getItem(DRAWER_OPEN_KEY) === '1'
+  } catch {
+    return false
+  }
+}
+
+function writeDrawerOpen(open: boolean) {
+  try {
+    localStorage.setItem(DRAWER_OPEN_KEY, open ? '1' : '0')
+  } catch {
+    /* noop */
+  }
+}
+
+export const useClipartStore = defineStore('clipart', {
+  state: (): State => ({
+    handle: null,
+    folderName: null,
+    items: [],
+    open: readDrawerOpen(),
+    loading: false,
+    error: null,
+    supported: isFileSystemAccessSupported(),
+    initialized: false,
+  }),
+  actions: {
+    async initialize() {
+      if (this.initialized) return
+      this.initialized = true
+      if (!this.supported) return
+      const handle = await loadStoredClipartFolder()
+      if (!handle) return
+      this.handle = handle
+      this.folderName = handle.name
+      await this.refresh()
+    },
+    async pickFolder() {
+      this.error = null
+      try {
+        const handle = await pickClipartFolder()
+        if (!handle) return
+        this.setHandle(handle)
+        await this.refresh()
+      } catch (err) {
+        this.error = (err as Error).message ?? 'Failed to pick folder'
+      }
+    },
+    setHandle(handle: FileSystemDirectoryHandle) {
+      this.disposeItems()
+      this.handle = handle
+      this.folderName = handle.name
+      this.items = []
+    },
+    async clearFolder() {
+      this.disposeItems()
+      this.handle = null
+      this.folderName = null
+      this.items = []
+      this.error = null
+      await clearStoredClipartFolder()
+    },
+    async refresh() {
+      if (!this.handle) return
+      this.loading = true
+      this.error = null
+      try {
+        const next = await listClipart(this.handle)
+        this.disposeItems()
+        this.items = next
+      } catch (err) {
+        this.error = (err as Error).message ?? 'Failed to read folder'
+      } finally {
+        this.loading = false
+      }
+    },
+    disposeItems() {
+      disposeClipartItems(this.items)
+    },
+    setOpen(v: boolean) {
+      this.open = v
+      writeDrawerOpen(v)
+    },
+    toggle() {
+      this.setOpen(!this.open)
+    },
+  },
+})
diff --git a/src/stores/scene.ts b/src/stores/scene.ts
index 900403f..9eee604 100644
--- a/src/stores/scene.ts
+++ b/src/stores/scene.ts
@@ -365,6 +365,57 @@ export const useSceneStore = defineStore('scene', {
       const idx = found.arr.indexOf(found.kf)
       if (idx >= 0) found.arr.splice(idx, 1)
     },
+    setKeyframeControl(layerId: string, keyframeId: string, ctrlX: number, ctrlY: number) {
+      const layer = this.activeLayers.find((l) => l.id === layerId)
+      if (!layer) return
+      const found = findKf(layer, keyframeId)
+      if (!found) return
+      found.kf.ctrlX = ctrlX
+      found.kf.ctrlY = ctrlY
+    },
+    clearKeyframeControl(layerId: string, keyframeId: string) {
+      const layer = this.activeLayers.find((l) => l.id === layerId)
+      if (!layer) return
+      const found = findKf(layer, keyframeId)
+      if (!found) return
+      delete found.kf.ctrlX
+      delete found.kf.ctrlY
+    },
+    // Given a target world point that the curve should pass through at
+    // segment progress `u` (0..1), solve for the quadratic bezier control.
+    setKeyframeControlFromPoint(
+      layerId: string,
+      keyframeId: string,
+      u: number,
+      targetX: number,
+      targetY: number,
+    ) {
+      const layer = this.activeLayers.find((l) => l.id === layerId)
+      if (!layer) return
+      const found = findKf(layer, keyframeId)
+      if (!found) return
+      if (u <= 0 || u >= 1) return
+      // Find the previous keyframe in the same arr
+      const arr = [...found.arr].sort((x, y) => x.time - y.time)
+      const idx = arr.findIndex((k) => k.id === keyframeId)
+      if (idx <= 0) return
+      const prev = arr[idx - 1]
+      const samp = sampleLayer(layer, prev.time)
+      const endSamp = sampleLayer(layer, found.kf.time)
+      const p0x = samp.x
+      const p0y = samp.y
+      const p1x = endSamp.x
+      const p1y = endSamp.y
+      const oneMinus = 1 - u
+      // targetX = oneMinus²*p0x + 2·oneMinus·u·C + u²*p1x
+      // => C = (target - oneMinus²·p0 - u²·p1) / (2·oneMinus·u)
+      const denom = 2 * oneMinus * u
+      if (Math.abs(denom) < 1e-6) return
+      const cx = (targetX - oneMinus * oneMinus * p0x - u * u * p1x) / denom
+      const cy = (targetY - oneMinus * oneMinus * p0y - u * u * p1y) / denom
+      found.kf.ctrlX = cx
+      found.kf.ctrlY = cy
+    },
     setKeyframeEasing(layerId: string, keyframeId: string, easing: Easing) {
       const layer = this.activeLayers.find((l) => l.id === layerId)
       if (!layer) return
diff --git a/src/types/scene.ts b/src/types/scene.ts
index 17990cc..4b07bfc 100644
--- a/src/types/scene.ts
+++ b/src/types/scene.ts
@@ -30,6 +30,10 @@ export interface Keyframe {
   props: Partial<AnimatableProps>
   easing: Easing
   hold?: boolean
+  // Quadratic bezier control point for the position arc from the previous
+  // keyframe to this one. When set, x/y are curved along B(u)=(1-u)²P0+2(1-u)u·C+u²P1.
+  ctrlX?: number
+  ctrlY?: number
 }
 
 export type AssetKind = 'image' | 'rect' | 'circle' | 'text' | 'polygon'
diff --git a/src/version.ts b/src/version.ts
index 61da132..23b25e6 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1,2 +1,2 @@
-export const APP_VERSION = '0.3.0'
+export const APP_VERSION = '0.4.0'
 export const APP_NAME = 'Animatr'