CREATE SOMETHING

1. Knowledge Graph Visualizer

Force-directed graph using Barnes-Hut approximation for O(n log n) performance. Supports 1000+ nodes with smooth interactions. Pan, zoom, and drag nodes.

50 nodes

<KnowledgeGraphCanvas
  nodes={graphNodes}
  edges={graphEdges}
  width={800}
  height={500}
  onNodeClick={(node) => console.log(node)}
/>

2. Animation Timeline Editor

Canvas-based keyframe editor for motion-studio integration. Double-click to add keyframes, drag to move, Delete key to remove. Arrow keys navigate frames.

Preview (frame 0):

<TimelineEditor
  tracks={tracks}
  totalFrames={120}
  fps={30}
  currentFrame={currentFrame}
  onFrameChange={(f) => currentFrame = f}
  onKeyframeAdd={handleAdd}
/>

3. Interactive Canvas Diagram

Create and export diagrams with shapes, arrows, and text. Supports PNG/SVG export and clipboard copy. Drag shapes to reposition.

<CanvasDiagram
  shapes={[
    { id: 'rect', type: 'rect', x: 150, y: 150, width: 120, height: 80, fill: 'blue' },
    { id: 'circle', type: 'circle', x: 350, y: 150, radius: 50, fill: 'green' },
    { id: 'arrow', type: 'arrow', x: 210, y: 150, x2: 300, y2: 150 }
  ]}
  width={700}
  height={350}
  showGrid={true}
  snapToGrid={true}
/>

Why Canvas for These Components?

Performance

Canvas renders directly to pixels, bypassing DOM overhead. Essential for 60fps animations and large datasets.

Fine-grained Control

Direct pixel manipulation enables custom hit-testing, spatial algorithms (quadtrees), and complex visual effects.

Svelte 5 Reactivity

$state and $effect provide precise control over when canvas redraws happen—no stale closures or dependency arrays.

Export Capabilities

Canvas toDataURL() and toBlob() enable PNG export, clipboard copy, and server-side rendering with node-canvas.