01. THE REALITY CHECK
Draw First, Let the Agent Continue — on One Shared Ontology
Pixel-video models like Sora and Veo spend heavy GPU compute to produce flat, uneditable pixels: you can't sketch half a drawing and ask the model to continue it while keeping your strokes as strokes. OpenAI shut Sora down in 2026, with compute cost among the reasons it gave.
Code-only video compilers like Remotion (React/DOM) and HyperFrames (HTML/GSAP) solved structured text, yet they have no artist's canvas—you cannot pick up an ink brush, satin thread tool, or lasso, sketch a scene by hand, and ask an agent to finish it. Their source files also act as a non-relational parts bin that an agent has to re-read before every edit.
PinePaper unites human hand-drawing and AI agents through a single live pp: Design Ontology. Every stroke, artistic medium (ink, watercolor, thread, cut paper), rigged bone, and Wikidata-typed object is serialized by CanvasKnowledgeGraph so both on-device LLMs and Cloud/MCP agents genuinely see your canvas, continue your artwork with small name-addressed edits, and render without a GPU.
One Shared Canvas Ontology
ON-DEVICE · MCP · CLOUDpp: graph nodes · mediums · relations- 1Agents See Your Canvas via Shared
pp:Ontology Start drawing by hand; on-device LLMs (Gemini Nano/Qwen) and Cloud/MCP agents read the same pp: ontology of live nodes, coordinates, and relations to continue your piece. - 2Editable Output, No GPU Required Scenes render from the stored graph on ordinary CPUs, with
-14 LUFSprocedural stereo audio, and every layer, chart, and label stays editable after export. - 3Small Edits, No File Re-Reads Agents change items by name with
patch&modifyPatterninstead of re-reading source files, then export MP4, SVG, or live<pine-widget>embeds.
02. RESEARCH CONTEXT
Following the Science
PinePaper's approach is informed by emerging academic research on LLM capabilities with vector graphics. These papers demonstrate that text-based vector formats provide a natural interface for language models.
Delving into LLMs' Visual Understanding via SVG
Demonstrates that LLMs can perform visual reasoning, image classification, and generation by processing SVG as text. "The textual nature of SVG provides a data modality that LLMs excel at."
VGBench: Evaluating LLMs on Vector Graphics
First comprehensive benchmark for LLM + vector graphics. Tests understanding and generation across SVG, TikZ, and Graphviz formats with 4,279 QA pairs.
LLM4SVG: Empowering LLMs for Complex Vector Graphics
Introduces semantic tokens for SVG understanding. Released SVGX dataset with 580k SVG-instruction pairs for fine-tuning language models on vector generation.
DeepSVG: Hierarchical SVG Generation & Animation
Pioneering work on neural SVG generation. Demonstrates latent space interpolation for creating smooth animations between vector keyframes.
VDLM: Visually Descriptive Language Model
Introduces "Primal Visual Description" (PVD)—an intermediate text representation between SVG and natural language that improves LLM reasoning on graphics.
StarVector: Image & Text to SVG Generation
Multimodal LLM for SVG generation from both images and text prompts. Achieves state-of-the-art on SVG-Bench for icons, logos, and diagrams.
These papers inform our design decisions but PinePaper is an independent project, not affiliated with any research institution.
03. USE CASES
Human + AI Co-Drawing, Data Stories & Live Widgets
Start with a pen stroke, an imported SVG, a photo, or a prompt—and take turns with your agent on the exact same semantic canvas: AI-Assisted Art, Launch Reels & Interactive Widgets.
AI-Assisted Art & Co-Drawing
Sketch freehand in ink, watercolor, charcoal, or satin embroidery thread—then ask an on-device or Cloud agent to complete the scene, rig your character, or animate fireflies around your strokes.
buildCanvasKnowledgeGraph(app) // pp: nodesLaunch Reels, Maps & Infographics
Compose SaaS browser/phone/CLI mockups, KPI cards, conversion funnels, Mermaid diagrams, and choropleth maps layered over procedural backdrops with UI foley and Rhodes scores.
executeGenerator('drawBrowserMockup', {bgColor:'none'})Interactive Widgets & Signals
Ship cursor-reactive micro-interactions, accessible status signals, and rigged characters as <pine-widget> HTML embeds, not just video files.
<pine-widget autoplay interactive>04. SHARED ONTOLOGY ARCHITECTURE
One Canvas Ontology — On-Device, MCP & Cloud
Most AI tools treat the canvas as a black box. PinePaper maintains a live Design Knowledge Graph (pp: ontology) shared identically with on-device browser models, local MCP agents, and PinePaper Cloud—so any agent can look at what you drew and pick up the brush right beside you.
You Sketch, Import, or Start Anywhere
Draw with pen, ink, spray, or satin thread; import multi-part SVGs; or detect objects in photos (anchored to Wikidata QIDs and extendable in your own local ontology).
Agents See the Live Canvas via Ontology
CanvasKnowledgeGraph serializes every stroke's ID, pp: type, coordinates, shader aura, and relation edges—giving on-device and cloud agents the same picture of the canvas.
Ask the Agent to Continue, Animate & Score
Ask the agent to finish your illustration, attach live relations, or compose stereo music—then keep drawing on top of its work and export anywhere.
Same pp: Ontology On-Device & in the Cloud
Run client-side LLMs — Chrome's built-in Gemini Nano or WebLLM — on your device, or hand off bigger compositions to MCP & PinePaper Cloud. Both work from the same pp: ontology, reachable under AI / Code → Assistant & Cloud.
05. FOUNDATION
Standing on the Shoulders of Giants
PinePaper is built on Paper.js—a mature vector graphics framework. Together, they provide the abstraction layer that lets agents understand and operate in vector space.
Paper.js
The Swiss Army Knife of Vector Graphics Scripting
Paper.js is a mature vector graphics scripting framework that evolved from Scriptographer—a scripting environment for Adobe Illustrator. It provides:
- →Vector-First Mathematics — Points, Sizes, and Rectangles as first-class citizens with operator overloading
- →Scene Graph / DOM — Nested layers, groups, paths, symbols—all inspectable and modifiable
- →Bidirectional SVG — Import, transform, animate, and export vector graphics seamlessly
- →Boolean Operations — Unite, intersect, subtract, divide shapes programmatically
Code that reads like geometry — agents can reason about vector space through this syntax
06. CORE PRINCIPLES
Built for the Open Web
Client-Side Core
No installation required. Works entirely in your browser without server roundtrips. Your data stays on your device—privacy by architecture.
AI-Native API
Built from the ground up to be controlled by agents. Exposes a global window.PinePaper API for programmatic generation and manipulation.
Global by Default
Support for 59 languages and all writing systems including Chinese, Arabic, Hindi, Sindhi, Swahili, Amharic, and emoji. Create content for any audience.
We're Testing a Hypothesis
Can humans and AI agents co-create art on one shared semantic canvas? Instead of replacing the artist with a black-box prompt, PinePaper gives you full drawing, stitchcraft, and rigging tools while exposing every stroke through a formal pp: ontology—whether your agent runs on-device or in the cloud.
What we're validating:
- ? How fluently can an agent inspect a human's half-finished sketch via ontology and continue it coherently?
- ? Does sharing one
pp:vocabulary let small on-device models collaborate as reliably as cloud models? - ? Does the live scene & relation graph help agents self-correct spatial and visual errors?
What works today:
- ✓Shared
pp:canvas ontology —CanvasKnowledgeGraph+ Wikidata object detection + userLocalOntologyshared across on-device LLMs, MCP & Cloud - ✓Hand-drawing & tactile mediums — pen, ink, spray, Bezier paths, satin/cross stitchcraft, watercolor, cut paper & charcoal
- ✓Relations engine — 160+ declarative relation types (orbits, follows, springs, wiggle, audio reactivity, event state machines)
- ✓AI-native & agent lane — MIT MCP server (178 tools + an 8-tool agent lane), Cloud
rust-tiny-skia, andwindow.PinePaper - ✓95 procedural & foreground generators — SaaS browser/phone/CLI mockups, narrative infographics, beat captions, plus seeded math & GPU backdrops
- ✓Procedural stereo audio — 23 expressive instruments (Rhodes, supersaw, kalimba, piano, strings), 16 UI/foley SFX, stereo panning, room reverb & -14 LUFS mastering
- ✓Diagrams, maps & charts — flowcharts with Mermaid import/export, choropleth maps, charts from CSV/JSON
- ✓Rigging, physics & 3D — skeletons, IK, poses, bone physics, equirectangular 3D projection
- ✓Accessible & export everywhere — screen reader & keyboard support, MP4/WebM/GIF, PDF/PNG (600 DPI), SVG, Lottie, glTF &
<pine-widget>across Web, iOS & Android
Help us validate this — try the editor and share your experience via our feedback board.
07. FAQ
Frequently Asked Questions
What is PinePaper Studio?
A browser-based tool for creating animated SVG micro-interactions. Built on Paper.js, it exposes a declarative API designed for both AI agents and humans to understand and manipulate vector graphics.
Is PinePaper Studio free?
Yes, it's free. Runs entirely in your browser with no account required. All processing happens client-side—your data stays on your device.
Can AI agents see my drawing and co-create on the canvas?
Yes. Every stroke, shape, SVG part, and detected object is exposed via a live pp: Design Ontology (CanvasKnowledgeGraph) shared across on-device browser LLMs, MCP clients, and PinePaper Cloud—so you can sketch first and ask an agent to finish, rig, or animate your drawing.
What is Paper.js?
A mature open-source vector graphics framework on HTML5 Canvas. It provides a scene graph (DOM) for vector graphics. PinePaper is built as an abstraction layer on top of it.
What export formats are supported?
MP4 (H.264 via WebCodecs, frame-accurate), WebM (VP9, realtime capture), GIF, animated SVG (SMIL), PNG up to 600 DPI, print-ready PDF (bleed + trim marks), Lottie, glTF/GLB, BVH motion capture, PNG sequence, and self-contained interactive HTML widgets. MP4 for high-quality animations and social media; PDF for print.
What animations and generators are available?
95 procedural & foreground generators (UI browser/phone/CLI mockups, narrative infographics, kinetic social captions, math & GPU backdrops), loop animations plus 100+ entrance/exit presets, 19 particle effects, 13 vertex deformations, and 160+ declarative scene relations.
How does PinePaper differ from pixel-video models like Sora or Veo?
Pixel-video models generate every frame on GPUs and output flat pixels that cannot be edited afterwards; OpenAI shut Sora down in 2026, with compute cost among the reasons it gave. PinePaper evaluates a stored declarative scene & audio graph on ordinary CPUs with no GPU—keeping every layer, chart, and label instantly editable.
Does PinePaper generate synchronized music and sound effects?
Yes. PinePaper ships a deterministic procedural audio engine with 23 expressive instruments (Rhodes, supersaw, piano, kalimba, strings, trumpet), 16 UI/foley/cinematic sound effects, 8 multi-genre soundtrack composers, constant-power stereo panning, room reverb, and -14 LUFS mastering.
How does PinePaper compare to Remotion and HyperFrames?
Remotion (React) and HyperFrames (HTML/GSAP) describe a video as source code. PinePaper keeps the scene as a stored, inspectable graph with a drawing canvas on top: you can sketch by hand and have an agent continue on the same canvas. Agents edit items by name without re-reading source files, and scenes come with 160+ live relations, built-in procedural stereo audio, and interactive <pine-widget> HTML embeds.
Does PinePaper work with MCP agents, Cloud, and mobile apps?
Yes. Connect Claude, Cursor, or any MCP client via the open-source MIT MCP server (178 tools plus an 8-tool agent lane), render headlessly on PinePaper Cloud via rust-tiny-skia, or create on the go in the Web, iOS, and Android studio apps.
Ready to experiment?
No account required. Everything runs in your browser.