Changelog

Version 0.4.x

New Features

• 3D Projection Library — Standalone zero-dependency 3D rendering (~18KB min) with 5 projection types, 5 primitives, GPU acceleration (WebGPU/WebGL2/CPU), and orbital camera

  • PinePaper API: createObject3D(), setProjection3D(), setCamera3D(), createGlossySphere()
  • Standalone usage via barrel export js/3d/index.js
  • Render pipeline: Transform → Cull → Shade → Project → Sort
  • GPU auto-fallback with 150-face threshold

• Layer Visibility Panel — Manage 4 canvas layers (Text & Shapes, Background, Drawings, Images) with visibility toggle, lock toggle, and item counts

• Map Draggability — Map groups are draggable with post-drag click suppression to prevent phantom selections

• Connector Undo/Redo — Diagram connectors persist through undo/redo operations via exportConnectorData()/importConnectorData()

• Gesture System — Three-finger pan for touch devices, trackpad horizontal scroll panning, separated pinch-zoom from pan gestures

Fixes

• Blend mode rendering corruption from zero-size items (auto-reset to normal)
• Console spam from cursor updates during animation
• Canvas drawImage errors suppressed with automatic recovery

Version 0.4

New Features

• Character Rigging System - Skeletal animation with bones, FK propagation, and FABRIK IK solver

  • Pose save/load/interpolation with keyframe integration
  • Character rig presets: humanoid, quadruped, spider, simple_arm, snake, chain
  • Visual bone overlay with interactive FK/IK manipulation
  • New relations: bone_attached, ik_target

• Blending System - Per-item and per-group compositing with 7 presets (ghost, neon, shadow, glow, xray, dreamy, vintage)

  • Blend mode transitions with opacity cross-fade
  • Interactive blend modes (hover/click cycling)
  • New relations: blend_reacts_to, blend_transition

• Trim Paths - Animatable trimStart/trimEnd/trimOffset for stroke “line draw” effects

• Cursive Font System - Single-stroke handwriting renderer with 78 glyphs (a-z, A-Z, 0-9, punctuation), Catmull-Rom interpolation, and runtime glyph management

• Mermaid Import/Export - Bidirectional Mermaid syntax interop with zero-dependency parser

  • Flowchart import/export with shape and edge style mapping
  • State diagram support with stereotypes and nested states
  • Chained edges, subgraphs, and label parsing

• New Procedural Relations - driven_by (property linking), wiggle (procedural noise), time_expression (math expressions with sin, cos, clamp, lerp, etc.)

• Masking Enhancements - Mask modes (clip/subtract/intersect), mask stacking, vertex animation, applyCustomMask API

• Precomps / Nested Compositions - Local timeline groups with independent looping and global keyframes

• Internationalization - Full UI localization for 14 languages including CJK, Arabic, Hindi, and European languages

• Infinite Canvas - Unbounded canvas mode (app.setCanvasSize('unbounded')) with no fixed boundaries and free dragging

• Drawing Tools - 6 professional tools: pen, ink brush, marker, spray can, eraser, and fill bucket with custom SVG cursors

  • Fill tool with 3-stage detection: stroke detection, path containment, canvas background fill

• Export Selection SVG - Right-click context menu option to export only selected items as SVG

• Camera Animation - Keyframe-based camera zoom and pan via camera_animates relation

Improvements

• Timeline continues playing when panel is closed (hide no longer pauses)
• Unbounded canvas mode skips item drag boundary constraints
• Cursor management centralized with per-tool SVG cursors and CSS fallbacks
• Drawing mode properly isolates mask/crop interaction handlers

Keyframe Animation Improvements

• Per-property easing overrides (propertyEasings per keyframe)
• Custom cubic bezier easing curves ([x1, y1, x2, y2] arrays)
• Spatial motion paths via spatialHandles for curved position interpolation
• Path morphing via segments keyframes
• Gradient animation (interpolate gradient stops, origin, destination)
• Bone pose keyframes for timeline-driven skeletal animation
• Relation param keyframes (paramKeyframes for animating relation parameters)
• New animatable properties: strokeWidth, shadowBlur, shadowOffsetX, shadowOffsetY

API Additions

// Mermaid Import/Export
app.importMermaid(mermaidText, { autoLayout: true, clearExisting: false });
app.exportMermaid({ direction: 'LR', format: 'stateDiagram' });

// Rigging
app.riggingSystem.createSkeleton(name, position);
app.riggingSystem.addBone(skeletonId, options);
app.riggingSystem.attachItem(skeletonId, boneId, itemId, options);
app.riggingSystem.createIKChain(skeletonId, options);
app.riggingSystem.savePose(skeletonId, name);
app.riggingSystem.interpolatePoses(poseA, poseB, t);

// Blending
app.blendingSystem.applyPreset(itemId, 'neon');
app.blendingSystem.transitionBlendMode(itemId, 'multiply', options);

// Precomps
app.createPrecomp([item1, item2], { duration: 2, loop: true });

// Cursive Text
app.createCursiveText('Hello', { animate: true, duration: 3 });

// Masking
app.maskingSystem.applyCustomMask(item, 'star', keyframes, options);
app.maskingSystem.addMask(masked, 'star', { maskMode: 'subtract' });

// View controls
app.zoomIn();
app.zoomOut();
app.resetZoom();
app.panBy(dx, dy);
app.panTo(x, y);
app.getViewCenter();
app.getZoomLevel();
app.fitContentInView();
app.enablePanMode();
app.disablePanMode();
app.togglePanMode();
app.isPanModeActive();

// Drawing tools
app.setDrawColor(color);
app.getDrawColor();
app.setDrawWidth(width);
app.getDrawWidth();
app.clearDrawings();

// Export
app.exportSelectionSVG({ download: true, filename: 'selection.svg' });
app.exportSVGWithCSS();
app.exportWithFormat(format, options);

// Canvas
app.setCanvasSize('unbounded');
app.clearCanvas();

// Selection & items
app.getSelectedItems();
app.getAllItems();
app.bringToFront();
app.sendToBack();
app.moveUp();
app.moveDown();
app.nudgeSelection(dx, dy);

Version 0.3

New Features

• Agent Mode - Streamlined workflow for AI agents accessing PinePaper

  • window.PinePaperAgent global API
  • URL parameter activation (?agent=1)
  • Smart export format recommendations
  • Platform-specific export presets (16 platforms)
  • Batch workflow support with reset()
  • Browser capability detection

• Performance Optimizations

  • keyframeItems Set for O(1) keyframe lookup
  • animatedItems Set for efficient animation iteration
  • Cached canvas center for pattern rotation
  • Viewport culling for off-screen items
  • Adaptive frame skipping for low-FPS recovery
  • Frame metrics API (app.getFrameMetrics())

• Interactive Components Foundation

  • Trigger system for click/hover/drag events
  • Built-in actions (navigate, show/hide, animate, setState)
  • Quiz presets (multiple choice, drag-and-drop)
  • LMS integration events (SCORM/xAPI ready)

• Collaboration System Foundation

  • Real-time sync architecture
  • Presence API (cursors, selections)
  • RTD adapter interface for custom backends
  • Shared state management

API Additions

// Agent Mode
const agent = window.PinePaperAgent;
await agent.configure({ mode: 'agent' });
await agent.waitForReady();
agent.reset({ canvas: 'instagram-post' });
const rec = agent.getExportRecommendation();
const result = await agent.quickExport({ platform: 'tiktok' });
const caps = agent.getCapabilities();
const presets = agent.getPresets();

// Performance Metrics
const metrics = app.getFrameMetrics();
app.resetFrameMetrics();
app.setFrameSkipConfig({ enabled: true, fpsThreshold: 24 });

Platform Export Presets

Version 0.2

Features

• Scene Manager - Multi-scene presentations with transitions
• Decorative Registry - Track non-interactive background elements
• Image Tools Manager - Multi-image library with cropping and masking
• Filter System - Scene-wide visual effects
• Relation System - Behavior-driven animations
• Worker Pool - Offload heavy computations

Improvements

• Multi-image upload support
• Image library with thumbnails
• Docsify-based documentation
• Enhanced keyframe animation system
• Better canvas resize handling

API Additions

// Image Tools
app.imageTools.uploadImage(file)
app.imageTools.placeImage(id, options)
app.imageTools.getLibrary()

// Relations
app.addRelation(fromId, toId, type, params)
app.removeRelation(fromId, toId, type)
app.getRelations(itemId)

// Filters
app.filterSystem.addFilter('grayscale', { intensity: 1 })
app.filterSystem.removeFilter('grayscale')

// Scene Manager
app.sceneManager.createScene(name)
app.sceneManager.loadScene(id)
app.sceneManager.listScenes()

Version 0.1

Features

• Canvas-based animation editor
• Text and shape creation
• Basic animations (pulse, rotate, bounce, fade, wobble, slide)
• Background generators (sunburst, sunset, grid, waves, circuit)
• Freehand drawing tool
• Arrow system with animated bolts
• Video export (WebM)
• Animated SVG export
• Template system
• Undo/redo history

API

// Core
app.create({ type, ...options })
app.modify(item, options)
app.deleteSelected()  // Remove selected items
app.animate(item, { animationType, animationSpeed })

// Export
app.exportAnimatedSVG()
app.startRecording()
app.stopRecording()

// Generators
app.executeGenerator(name, params)

// Effects
app.applyEffect(item, type, config)