{"id":"accd56b8-88be-47b6-b966-ce84bcb8d283","entityType":"agent","slug":"clawhub-speaktoarpit-pinepaper","name":"PinePaper","canonicalUrl":"https://www.xpersona.co/agent/clawhub-speaktoarpit-pinepaper","canonicalPath":"/agent/clawhub-speaktoarpit-pinepaper","generatedAt":"2026-10-10T07:53:39.192Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-09T18:26:10.315Z","emptyReason":null},"description":"Create and animate vector-based text, shapes, diagrams, and visualizations on an infinite canvas with resolution-independent export and rich animation and re... Skill: PinePaper Owner: speaktoarpit Summary: Create and animate vector-based text, shapes, diagrams, and visualizations on an infinite canvas with resolution-independent export and rich animation and re... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-03-21T19:25:37.756Z | user PinePaper Studio — AI Agent Skills v1.0.0 https://pinepaper.studio - Initial release of PinePaper skill reference for AI agent integrati","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 2.1K downloads reported by the source. Last updated 10/9/2026.","installCommand":"clawhub skill install s176v9pn3py2ctt79yqc1ept1s84saq0:pinepaper","sourceUrl":"https://clawhub.ai/speaktoarpit/pinepaper","homepage":"https://clawhub.ai/speaktoarpit/skills/pinepaper","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/speaktoarpit/pinepaper","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/speaktoarpit/skills/pinepaper","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":67,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Create and animate vector-based text, shapes, diagrams, and visualizations on an infinite canvas with resolution-independent export and rich animation and re..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-09T18:26:10.315Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T18:26:10.315Z","emptyReason":null},"stars":null,"forks":null,"downloads":2135,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"2.1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T18:26:10.314Z","emptyReason":null},"lastUpdatedAt":"2026-10-09T18:26:10.315Z","lastCrawledAt":"2026-10-09T18:26:10.314Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-10T18:26:10.314Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-03-21T19:25:37.756Z","changelog":"PinePaper Studio — AI Agent Skills v1.0.0 https://pinepaper.studio - Initial release of PinePaper skill reference for AI agent integration. - Documents item creation, vector primitives, animation, relations, keyframing, and more for infinite-canvas design. - Lists supported item types, animation types, relation behaviors, and code usage patterns. - Details parameters for batch operations, color gradients, visual effects, and timeline animation. - Includes API methods for creation, interaction, and advanced property-driven workflows.","fileCount":3,"zipByteSize":11106}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s176v9pn3py2ctt79yqc1ept1s84saq0:pinepaper","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T07:53:39.191Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-speaktoarpit-pinepaper/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-09T18:26:10.315Z","emptyReason":null},"readme":"Skill: PinePaper\n\nOwner: speaktoarpit\n\nSummary: Create and animate vector-based text, shapes, diagrams, and visualizations on an infinite canvas with resolution-independent export and rich animation and re...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-03-21T19:25:37.756Z | user\n\nPinePaper Studio — AI Agent Skills v1.0.0 https://pinepaper.studio \n\n- Initial release of PinePaper skill reference for AI agent integration.\n- Documents item creation, vector primitives, animation, relations, keyframing, and more for infinite-canvas design.\n- Lists supported item types, animation types, relation behaviors, and code usage patterns.\n- Details parameters for batch operations, color gradients, visual effects, and timeline animation.\n- Includes API methods for creation, interaction, and advanced property-driven workflows.\n\nArchive index:\n\nArchive v1.0.0: 3 files, 11106 bytes\n\nFiles: skill-card.md (2151b), skills.md (26444b), _meta.json (128b)\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn731b992fxsz8cq5c2barpazs83atan\",\n  \"slug\": \"pinepaper\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1774121137756\n}\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nPinePaper helps agents create, animate, query, transform, and export vector-based text, shapes, diagrams, maps, and visual effects on an infinite canvas.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[speaktoarpit](https://clawhub.ai/user/speaktoarpit)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and external agents use this skill as a PinePaper API and MCP reference for building animated canvas content, diagrams, visualizations, and exportable graphics.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Destructive canvas actions can clear, reset, or delete selected content.\n\nMitigation: Agents should ask for explicit confirmation before clearing, resetting, or deleting PinePaper canvas content.\n\nRisk: The training-data export tool may expose canvas content without clear scope.\n\nMitigation: Agents should avoid training-data export unless the user explicitly requests it and understands what will be exported.\n\nRisk: Using PinePaper with sensitive or valuable canvas content increases review requirements.\n\nMitigation: Review the skill before installation and limit use to appropriate canvas content and workflows.\n\n## Reference(s):\n\n- [PinePaper Studio](https://pinepaper.studio)\n- [ClawHub PinePaper Skill Page](https://clawhub.ai/speaktoarpit/skills/pinepaper)\n- [PinePaper Studio AI Agent Skills Reference](artifact/skills.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown reference material with JavaScript examples, MCP tool names, and export workflow guidance]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Outputs guide agents toward PinePaper canvas operations, API calls, MCP tools, and export formats.]\n\n## Skill Version(s):\n\n1.0.0 (source: release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v1.0.0:skills.md\n\n# PinePaper Studio — AI Agent Skills Reference\n\n> **What is PinePaper?** A professional web app for creating animated text, graphics, diagrams, and data visualizations on an infinite canvas. Powered by Paper.js vector math — everything is resolution-independent and exportable.\n>\n> **How AI agents use it:** Via MCP tools (`@pinepaper.studio/mcp-server`) or the Agent Mode JS API (`window.PinePaperAgent`).\n\n---\n\n## Table of Contents\n\n- [Item Creation](#item-creation)\n- [Animation](#animation)\n- [Relations (Inter-Item Behaviors)](#relations)\n- [Keyframe Animation](#keyframe-animation)\n- [Text & Typography](#text--typography)\n- [Diagrams & Flowcharts](#diagrams--flowcharts)\n- [Maps & Geospatial](#maps--geospatial)\n- [Masking & Reveal Effects](#masking--reveal-effects)\n- [Visual Effects](#visual-effects)\n- [Image Filters](#image-filters)\n- [Rigging & Skeletal Animation](#rigging--skeletal-animation)\n- [Blending & Compositing](#blending--compositing)\n- [3D Projection](#3d-projection)\n- [Background Generators](#background-generators)\n- [Camera Control](#camera-control)\n- [Export Formats](#export-formats)\n- [Canvas & View Management](#canvas--view-management)\n- [Selection & Queries](#selection--queries)\n- [History](#history)\n- [Agent Mode Quick Start](#agent-mode-quick-start)\n- [MCP Tool Reference](#mcp-tool-reference)\n\n---\n\n## Item Creation\n\nCreate items with `app.create(type, params)`. All items are vector-based and infinitely scalable.\n\n### Item Types\n\n| Type | Key Parameters |\n|------|---------------|\n| `text` | `content`, `fontSize`, `fontFamily`, `fontWeight`, `color`, `x`, `y` |\n| `circle` | `radius`, `fillColor`, `strokeColor`, `x`, `y` |\n| `rectangle` | `width`, `height`, `fillColor`, `cornerRadius`, `x`, `y` |\n| `ellipse` | `radiusX`, `radiusY`, `fillColor`, `x`, `y` |\n| `triangle` | `radius`, `fillColor`, `x`, `y` |\n| `star` | `radius`, `points`, `innerRadius`, `fillColor`, `x`, `y` |\n| `polygon` | `radius`, `sides`, `fillColor`, `x`, `y` |\n| `line` | `from`, `to`, `strokeColor`, `strokeWidth` |\n| `path` | `segments`, `strokeColor`, `closed` |\n| `arc` | `from`, `through`, `to`, `strokeColor` |\n\n### Common Parameters (All Items)\n\n```\nx, y              — Position\nfillColor         — Fill (hex, rgba, or gradient object)\nstrokeColor       — Stroke color\nstrokeWidth       — Stroke width\nopacity           — 0-1\nrotation          — Degrees\nscale / scaleX/Y  — Uniform or axis scale\nshadowColor       — Shadow color\nshadowBlur        — Shadow blur radius\nshadowOffset      — [dx, dy]\nblendMode         — CSS blend mode string\nlabel             — String or { content, position, fontSize, color }\n```\n\n### Gradient Colors\n\n```javascript\nfillColor: {\n  type: 'linear',   // or 'radial'\n  stops: [\n    { color: '#ff0000', offset: 0 },\n    { color: '#0000ff', offset: 1 }\n  ],\n  origin: [100, 100],\n  destination: [500, 500]\n}\n```\n\n### Batch Operations\n\n```javascript\napp.batchCreate([\n  { type: 'text', params: { content: 'Hello', x: 200, y: 200 } },\n  { type: 'circle', params: { radius: 50, x: 400, y: 300 } }\n]);\n```\n\n---\n\n## Animation\n\n### Simple Animations\n\nApply via `app.animate(item, { animationType, animationSpeed })` or inline during creation.\n\n| Type | Effect | Key Params |\n|------|--------|-----------|\n| `pulse` | Scale breathing | `speed`, `intensity` |\n| `rotate` | Continuous spin | `speed` |\n| `bounce` | Vertical bounce | `speed`, `intensity` |\n| `fade` | Opacity pulse | `speed`, `intensity` |\n| `wobble` | Side-to-side rock | `speed`, `intensity` |\n| `shake` | Rapid jitter | `speed`, `intensity` |\n| `swing` | Pendulum swing | `speed`, `intensity` |\n| `jelly` | Elastic squash/stretch | `speed`, `intensity` |\n| `typewriter` | Character-by-character reveal | `speed` |\n\n### Inline Animation\n\n```javascript\napp.create('text', {\n  content: 'Hello World',\n  x: 400, y: 300,\n  animationType: 'bounce',\n  animationSpeed: 1.2,\n  animationIntensity: 0.15\n});\n```\n\n---\n\n## Relations\n\nRelations define persistent inter-item behaviors. Add with `app.addRelation(sourceId, targetId, type, params)`.\n\n### Motion Relations\n\n| Relation | Description | Key Params |\n|----------|-------------|-----------|\n| `orbits` | Circular motion around target | `radius`, `speed`, `direction`, `phase` |\n| `follows` | Move toward target | `offset`, `smoothing`, `delay` |\n| `attached_to` | Move with target | `offset`, `inherit_rotation` |\n| `maintains_distance` | Stay fixed distance | `distance`, `strength` |\n| `points_at` | Rotate to face target | `offset_angle`, `smoothing` |\n| `mirrors` | Mirror position | `axis`, `center` |\n| `parallax` | Depth-based movement | `depth`, `origin` |\n| `bounds_to` | Stay within bounds | `padding`, `bounce` |\n| `spring_follow` | Physics spring motion | `stiffness`, `damping`, `mass`, `maxDisplacement` |\n\n### Animation Relations\n\n| Relation | Description | Key Params |\n|----------|-------------|-----------|\n| `grows_from` | Scale in from zero | `origin`, `duration`, `delay`, `easing` |\n| `staggered_with` | Staggered effect | `index`, `stagger`, `effect` |\n| `indicates` | Highlight pulse | `scale`, `color`, `duration`, `repeat` |\n| `circumscribes` | Draw shape around target | `shape`, `color`, `strokeWidth`, `fadeOut` |\n| `wave_through` | Wave distortion | `amplitude`, `frequency`, `direction` |\n| `morphs_to` | Shape morph | `duration`, `easing`, `morphColor`, `morphSize` |\n\n### Camera Relations\n\n| Relation | Description | Key Params |\n|----------|-------------|-----------|\n| `camera_follows` | View tracks item | `smoothing`, `offset`, `zoom`, `deadzone` |\n| `camera_animates` | Keyframe camera | `keyframes`, `duration`, `loop` |\n\n### Procedural Relations\n\n| Relation | Description | Key Params |\n|----------|-------------|-----------|\n| `wiggle` | Noise-driven motion | `property`, `frequency`, `amplitude`, `seed` |\n| `driven_by` | Property linking | `sourceProperty`, `targetProperty`, `multiplier` |\n| `time_expression` | Math-based motion | `property`, `expression`, `baseValue` |\n\n### Character Relations\n\n| Relation | Description | Key Params |\n|----------|-------------|-----------|\n| `part_of` | Semantic child | `role` (e.g., `eye_left`, `mouth`) |\n| `expresses` | Facial expression | `expression`, `interval`, `duration` |\n\n### Convenience Methods\n\n```javascript\napp.addRelation(sourceId, targetId, type, params);\napp.removeRelation(sourceId, targetId, type);\napp.replaceRelation(sourceId, targetId, type, params);\napp.getRelations(itemId);\napp.hasRelation(sourceId, targetId, type);\napp.addParts(parentId, { eye_left: id1, eye_right: id2 });\n```\n\n### Time-Scoped Relations\n\nAny relation supports `startTime`, `endTime`, and `autoRemove` to limit when it's active during timeline playback.\n\n---\n\n## Keyframe Animation\n\nFull timeline-based animation with per-property easing, spatial paths, and morphing.\n\n```javascript\napp.create('circle', {\n  radius: 40, x: 100, y: 300,\n  animationType: 'keyframe',\n  keyframes: [\n    { time: 0, properties: { x: 100, opacity: 0 }, easing: 'easeOut' },\n    { time: 1, properties: { x: 500, opacity: 1 } },\n    { time: 2, properties: { x: 500, y: 100, scale: 2 }, easing: 'bounce' }\n  ]\n});\n```\n\n### Animatable Properties\n\n`x`, `y`, `position`, `scale`, `scaleX`, `scaleY`, `rotation`, `opacity`, `fillColor`, `strokeColor`, `fontSize`, `strokeWidth`, `shadowBlur`, `shadowOffsetX`, `shadowOffsetY`, `segments` (path morphing), `trimStart`, `trimEnd`, `trimOffset`\n\n### Easing Functions\n\n`linear`, `easeIn`, `easeOut`, `easeInOut`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `bounce`, `elastic`, or custom cubic bezier `[x1, y1, x2, y2]`\n\n### Per-Property Easing\n\n```javascript\n{ time: 1, properties: { x: 500, y: 100 }, propertyEasings: { x: 'bounce', y: 'easeOut' } }\n```\n\n### Spatial Motion Paths\n\n```javascript\n{ time: 0, properties: { x: 100, y: 300 }, spatialHandles: { out: [50, -100] } },\n{ time: 1, properties: { x: 500, y: 300 }, spatialHandles: { in: [-50, -100] } }\n```\n\n### Trim Paths (Line Draw Effect)\n\n```javascript\napp.create('path', {\n  segments: [[100, 300], [700, 300]],\n  strokeColor: '#3b82f6',\n  animationType: 'keyframe',\n  keyframes: [\n    { time: 0, properties: { trimEnd: 0 } },\n    { time: 2, properties: { trimEnd: 1 }, easing: 'easeOut' }\n  ]\n});\n```\n\n### Timeline Playback\n\n```javascript\napp.playKeyframeTimeline(duration, loop);\napp.pauseKeyframeTimeline();\napp.stopKeyframeTimeline();\napp.seekKeyframeTimeline(time);\n```\n\n### Animation Presets Library\n\nImport from `js/templates/_shared/animations.js`:\n\n**Reveal:** `fadeInUp`, `fadeInDown`, `fadeInLeft`, `fadeInRight`, `fadeIn`\n**Scale:** `popIn`, `explosivePop`, `scalePulse`, `breathe`\n**Physics:** `gravityDrop`, `rubberBand`, `swing`, `elasticSnap`\n**Paths:** `spiralIn`, `sineFloat`, `figureEight`, `circularOrbit`\n**Glitch:** `glitchFlicker`, `motionBlurSnap`, `cyberScan`\n**Exit:** `zoomOut`, `fadeOutDown`, `hingeDrop`, `shrinkAway`\n\n---\n\n## Text & Typography\n\n### Letter Collage\n\nBreak text into individually styled/animated letters:\n\n```javascript\nconst collage = app.letterCollage.create('HELLO', {\n  style: 'tile',        // tile, magazine, paperCut, fold, gradient\n  palette: 'neon',       // wordle, scrabble, candy, neon, rainbow, pastel, etc.\n  fontSize: 48,\n  x: 200, y: 150\n});\n```\n\n**Tile Palettes:** `wordle`, `scrabble`, `candy`, `neon`, `rainbow`, `pastel`, `cotton`, `earth`, `ocean`, `forest`, `sunset`, `corporate`, `minimal`, `monochrome`, `christmas`, `halloween`, `valentines`, `magazine`, `ransom`, `newspaper`\n\n**Gradient Palettes:** `rainbow`, `sunset`, `fire`, `gold`, `rose`, `ocean`, `ice`, `forest`, `midnight`, `cyberpunk`, `neonGlow`, `chrome`\n\n### Staggered Letter Animation\n\n```javascript\napp.letterCollage.applyStaggeredAnimation(collageId, {\n  effect: 'fadeSlideUp',   // fadeSlideDown, popIn, typewriter, wave\n  staggerDelay: 0.1,\n  duration: 0.5,\n  sequence: 'linear'       // reverse, random, center, fibonacci, wave\n});\n```\n\n### Cursive Handwriting\n\n```javascript\napp.createCursiveText('Hello World', {\n  x: 200, y: 300, scale: 2,\n  strokeColor: '#f59e0b', strokeWidth: 3,\n  animate: true, duration: 3\n});\n```\n\n### Font Studio\n\nCreate custom fonts from drawn glyphs:\n\n```javascript\napp.fontStudio.createGlyph(char, paperPath);\napp.fontStudio.downloadFont('otf');\napp.fontStudio.loadIntoDocument();\n```\n\n---\n\n## Diagrams & Flowcharts\n\n### Create Diagram Shapes\n\n```javascript\napp.diagramSystem.createShape('process', { position: new Point(x, y), label: 'Step 1' });\napp.diagramSystem.createShape('decision', { position: new Point(x, y), label: 'Yes/No?' });\n```\n\n**Shape Types:** `process`, `decision`, `terminal`, `data`, `document`, `database`, `cloud`, `server`, `uml-class`, `uml-usecase`\n\n**Comment Shapes:** `speech-bubble`, `speech-bubble-square`, `thought-bubble`, `comment-box`, `speech-bubble-pointed`, `double-bubble`, `quote-bubble`, `callout-box`\n\n### Connect & Layout\n\n```javascript\napp.diagramSystem.connect(shape1, shape2);\nawait app.diagramSystem.applyLayout(null, 'hierarchical', { direction: 'TB' });\n```\n\n**Layout Algorithms:** `hierarchical`, `force-directed`, `tree`, `radial`, `grid`\n\n### Mermaid Import/Export\n\n```javascript\n// Import Mermaid syntax\nconst result = app.importMermaid(`\n  graph TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action]\n    B -->|No| D[End]\n`);\n\n// Export current diagram as Mermaid\nconst mermaid = app.exportMermaid({ direction: 'LR' });\n```\n\n### Arrow System\n\n```javascript\napp.arrowSystem.createArrow([point1, point2], {\n  lineColor: '#333', lineWidth: 2,\n  headStyle: 'stealth'   // classic, stealth, sharp, open, none\n});\n```\n\n---\n\n## Maps & Geospatial\n\n### Load a Map\n\n```javascript\nconst map = await app.mapSystem.loadMap('world', {\n  projection: 'naturalEarth',\n  quality: 'standard',\n  interactive: true,\n  showOcean: true\n});\n```\n\n**Available Maps:** `world`, `worldHighRes`, `usa`, `usaCounties`, `canada`, `india`, `europe`\n\n**Projections:** `naturalEarth`, `mercator`, `robinson`, `orthographic`, `equirectangular`, `albers`, `albersUsa`, `conicEqualArea`, `winkelTripel`\n\n### Choropleth & Data Visualization\n\n```javascript\napp.mapSystem.applyDataColors(\n  { 'USA': 90, 'CAN': 75, 'MEX': 60 },\n  { colorScale: ['#f7fbff', '#08519c'], legend: true, legendTitle: 'Score' }\n);\n```\n\n### Region Control\n\n```javascript\napp.mapSystem.highlightRegions(['USA', 'CAN'], { fill: '#ef4444' });\napp.mapSystem.animateReveal('all', { duration: 1, stagger: 0.05, effect: 'fadeIn' });\n```\n\n### Markers & Labels\n\n```javascript\napp.mapSystem.addMarker(-122.4, 37.8, { shape: 'pin', label: 'San Francisco' });\napp.mapSystem.addRegionLabel('USA', { content: 'United States', fontSize: 14 });\n```\n\n### Region Animation\n\n```javascript\napp.animateMapWave({\n  duration: 10, loop: true,\n  colors: ['#ef4444', '#fbbf24', '#22c55e', '#3b82f6'],\n  waveDirection: 'horizontal'\n});\n```\n\n### Import/Export\n\n```javascript\napp.mapSystem.exportSVG();\napp.exportMapGeoJSON({ includeStyles: true });\napp.exportMapRegionDataCSV();\nawait app.importCustomMap(geoJson);\n```\n\n---\n\n## Masking & Reveal Effects\n\n### Static Masks\n\n```javascript\napp.applyMask(item, 'circle', { radius: 100 });\napp.applyMask(item, 'star', { points: 5, radius: 80 });\n```\n\n**Mask Types:** `rectangle`, `circle`, `ellipse`, `star`, `triangle`, `hexagon`, `heart`, `rounded`, `custom`\n\n**Mask Modes:** `clip` (show inside), `subtract` (show outside), `intersect` (overlap only)\n\n### Animated Mask Reveals\n\n```javascript\napp.applyAnimatedMask(item, 'wipeLeft', { duration: 0.8 });\n```\n\n**Preset Animations:** `wipeLeft`, `wipeRight`, `wipeUp`, `wipeDown`, `iris`, `irisOut`, `star`, `heart`, `curtainHorizontal`, `curtainVertical`, `cinematic`, `diagonalWipe`, `revealUp`, `revealDown`\n\n### Mask Stacking\n\n```javascript\napp.maskingSystem.addMask(item, 'circle', { mode: 'clip' });\napp.maskingSystem.addMask(item, 'rectangle', { mode: 'subtract' });\n```\n\n---\n\n## Visual Effects\n\nApply particle/FX effects to items:\n\n```javascript\napp.applyEffect(item, 'sparkle', { color: '#ffd700', speed: 2 });\napp.applyEffect(item, 'confetti', { colors: ['#ff0', '#f0f', '#0ff'], count: 50 });\n```\n\n**Effect Types:**\n\n| Effect | Key Params |\n|--------|-----------|\n| `sparkle` | `color`, `speed`, `size` |\n| `blast` | `color`, `radius`, `count`, `interval` |\n| `fire` | `color`, `size`, `turbulence` |\n| `smoke` | `color`, `size`, `drift` |\n| `rain` | `color`, `count`, `speed`, `angle` |\n| `snow` | `color`, `count`, `speed`, `spread` |\n| `confetti` | `colors[]`, `count`, `gravity` |\n| `ripple` | `color`, `maxRadius`, `ringCount` |\n| `glow` | `color`, `speed`, `intensity` |\n| `electric` | `color`, `boltCount`, `length` |\n\n---\n\n## Image Filters\n\nGPU-accelerated filters for raster images:\n\n```javascript\nawait app.applyImageFilter(raster, 'blur', { radius: 5 });\n\n// Chain multiple filters\nawait app.applyImageFilterChain(raster, [\n  { name: 'brightness', params: { value: 20 } },\n  { name: 'contrast', params: { value: 15 } },\n  { name: 'vignette', params: { intensity: 0.5 } }\n]);\n```\n\n**Filters:** `grayscale`, `sepia`, `brightness`, `contrast`, `saturation`, `invert`, `posterize`, `hsl`, `colorTint`, `vignette`, `edgeDetect`, `blur`\n\n### Cutout Style Presets\n\n```javascript\nawait app.applyCutoutStyle(item, 'sticker');\n```\n\n**Presets:** `papercut`, `postcard`, `sticker`, `poster`, `monochromeCut`, `edgeSketch`, `warmGlow`, `coolTone`\n\n---\n\n## Rigging & Skeletal Animation\n\n### Create a Skeleton\n\n```javascript\nconst skeletonId = app.riggingSystem.createSkeleton('character', { x: 400, y: 500 });\nconst spine = app.riggingSystem.addBone(skeletonId, { name: 'spine', length: 100, angle: -90 });\nconst head = app.riggingSystem.addBone(skeletonId, { name: 'head', length: 40, angle: -90, parentBoneId: spine });\n```\n\n### Rig Presets\n\nApply a full preset skeleton in one call:\n\n```javascript\nconst preset = getRigPreset('humanoid');\nconst { boneMap, chainIds } = applyRigPreset(app.riggingSystem, skeletonId, preset);\n```\n\n**Presets:** `humanoid` (20 bones), `quadruped` (13), `spider` (19), `bird` (15), `fish` (14), `hand` (17), `centaur` (29), `simple_arm` (3), `snake` (10), `chain` (5)\n\n### IK Solvers\n\n```javascript\napp.riggingSystem.createIKChain(skeletonId, {\n  name: 'left_arm', boneIds: [upperArm, lowerArm],\n  solverType: 'two_bone'   // 'fabrik', 'two_bone', 'ccd'\n});\n```\n\n### Poses & Shape Keys\n\n```javascript\n// Save/load poses\nconst poseId = app.riggingSystem.savePose(skeletonId, 'wave');\napp.riggingSystem.loadPose(skeletonId, poseId);\napp.riggingSystem.interpolatePoses(poseA, poseB, 0.5);\n\n// Shape keys (blend shapes)\nconst blinkKey = app.riggingSystem.saveShapeKey(skeletonId, 'blink');\napp.riggingSystem.loadShapeKey(skeletonId, blinkKey, 0.8);  // weight 0-1\n```\n\n### Expressions\n\nBuilt-in facial expressions: `blink`, `smile`, `frown`, `surprise`, `wink`, `talk`\n\n```javascript\napp.addRelation(faceId, null, 'expresses', { expression: 'blink', interval: 3 });\n```\n\n### Path Skinning (2D LBS)\n\n```javascript\napp.riggingSystem.skinPath(skeletonId, itemId, { maxInfluences: 2 });\n```\n\n---\n\n## Blending & Compositing\n\n```javascript\napp.blendingSystem.applyPreset(itemId, 'neon');\napp.blendingSystem.transitionBlendMode(itemId, 'screen', { duration: 0.5 });\napp.blendingSystem.setGroupBlendMode(groupId, 'multiply', { cascadeOpacity: true });\n```\n\n**Presets:** `ghost`, `neon`, `shadow`, `glow`, `xray`, `dreamy`, `vintage`\n\n**Blend Modes:** `normal`, `multiply`, `screen`, `overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`, `hue`, `saturation`, `color`, `luminosity`\n\n### Interactive Blending\n\n```javascript\napp.blendingSystem.addInteractiveBlend(itemId, {\n  event: 'hover',\n  modes: ['normal', 'screen'],\n  opacities: [1.0, 0.8]\n});\n```\n\n---\n\n## 3D Projection\n\nRender 3D primitives onto the 2D canvas:\n\n```javascript\napp.createObject3D('cube', { size: 1.5, color: '#3b82f6', rotationY: 45 });\napp.createObject3D('sphere', { radius: 1, color: '#ef4444' });\napp.createGlossySphere({ x: 400, y: 300, radius: 60, color: '#F97316' });\n\napp.setProjection3D('perspective', { fov: 60 });\napp.setCamera3D({ position: { x: 3, y: 2, z: 5 }, target: { x: 0, y: 0, z: 0 } });\n```\n\n**Primitives:** `cube`, `sphere`, `cylinder`, `torus`, `cone`\n\n**Projections:** `perspective`, `orthographic`, `isometric`, `cabinet`, `cavalier`\n\n---\n\n## Background Generators\n\nProcedural animated backgrounds:\n\n```javascript\napp.executeGenerator('drawBokeh', { circleCount: 30, animated: true });\napp.executeGenerator('drawConstellation', { animated: true });\napp.executeGenerator('drawWaves', { waveCount: 8, fill: true, animated: true });\n```\n\n**Generators:**\n\n| Name | Description |\n|------|------------|\n| `drawBokeh` | Depth-of-field circles |\n| `drawGradientMesh` | Multi-color gradient blobs |\n| `drawOrganicFlow` | Aurora/silk flowing layers |\n| `drawWaves` | Flowing wave lines |\n| `drawStarfield` | Animated starfield |\n| `drawNeonGrid` | Glowing neon grid |\n| `drawCircuit` | Circuit board with pulses |\n| `drawConstellation` | Connected star points |\n| `drawGrid` | Customizable animated grid |\n| `drawSunburst` | Radiating rays |\n| `drawFlowField` | Directional flow particles |\n| `drawNoiseTexture` | Perlin noise texture |\n| `drawKaleidoscope` | Kaleidoscope pattern |\n| `drawTessellation` | Geometric tiling |\n| `drawSunsetScene` | Animated sunset |\n| `drawCosmosSpace` | Space scene |\n| `drawFireflies` | Floating fireflies |\n| `drawFallingPetals` | Falling petals |\n| `drawGeometricAbstract` | Overlapping shapes |\n| `drawMetaballs` | Organic blobs |\n| `drawGoldenSpiral` | Golden ratio spiral |\n| `drawPerspectiveGrid` | 3D perspective grid |\n\n---\n\n## Camera Control\n\n```javascript\napp.camera.zoomIn(2, 0.5);           // Zoom 2x over 0.5s\napp.camera.panTo(200, 200, 0.5);     // Pan to point\napp.camera.moveTo(200, 200, 2, 0.5); // Pan + zoom\napp.camera.reset(0.5);               // Reset view\n\n// Keyframe camera animation\napp.addRelation('camera', null, 'camera_animates', {\n  duration: 6, loop: true,\n  keyframes: [\n    { time: 0, zoom: 1, center: [400, 300] },\n    { time: 3, zoom: 2, center: [600, 300], easing: 'easeInOut' },\n    { time: 6, zoom: 1, center: [400, 300] }\n  ]\n});\n```\n\n---\n\n## Export Formats\n\n| Format | Method | Notes |\n|--------|--------|-------|\n| **WebM** | Export UI | VP9, best for animations |\n| **MP4** | Export UI | H.264 via WebCodecs (Chrome 94+) |\n| **GIF** | Export UI | Via gif.js Web Workers |\n| **Animated SVG** | `app.exportAnimatedSVG()` | SMIL or CSS animations |\n| **PNG** | Export UI | Up to 600 DPI |\n| **PDF** | `app.exportPDF({ dpi })` | 300/600 DPI, bleed, trim marks |\n| **Lottie** | `app.exportLottie({ fps, duration })` | JSON for any Lottie player |\n| **GeoJSON** | `app.exportMapGeoJSON()` | Map data export |\n| **Mermaid** | `app.exportMermaid()` | Diagram text export |\n\n---\n\n## Canvas & View Management\n\n### Canvas Presets\n\n```javascript\napp.setCanvasSize('instagram-post');    // 1080x1080\napp.setCanvasSize('youtube-thumbnail'); // 1280x720\napp.setCanvasSize('tiktok');            // 1080x1920\napp.setCanvasSize({ width: 1920, height: 1080 }); // Custom\n```\n\n**Presets:** `youtube-thumbnail`, `instagram-post`, `instagram-story`, `tiktok`, `a4-portrait`, `letter-portrait`, and more.\n\n### View Control\n\n```javascript\napp.getCanvasSize();  // { width, height, preset }\napp.expandCanvasToIncludeContent(20);  // Fit to content + padding\n```\n\n---\n\n## Selection & Queries\n\n```javascript\napp.select(item);\napp.deselect();\napp.selectAll();\napp.deselectAll();\napp.getSelection();\n\n// Registry\napp.itemRegistry.getAll();\napp.itemRegistry.getByType('text');\napp.itemRegistry.getItem(itemId);\n\n// Relation queries\napp.hasRelation(sourceId, targetId, type);\napp.queryNotRelation(type);        // Items without relation\napp.queryIsolatedItems();          // Items with no relations\napp.queryCompound([...conditions]);\napp.queryRelationChain([...types]);\n```\n\n---\n\n## History\n\n```javascript\napp.undo();\napp.redo();\napp.getHistoryState();  // { canUndo, canRedo, undoCount, redoCount }\napp.clearCanvas();\n```\n\n---\n\n## Agent Mode Quick Start\n\nActivate via URL `?agent=1` or `?mode=agent`:\n\n```javascript\nconst agent = window.PinePaperAgent;\nawait agent.configure({ mode: 'agent' });\nawait agent.waitForReady();\n\n// Create content\nconst text = app.create('text', { content: 'Hello', x: 400, y: 300, fontSize: 48 });\napp.animate(text, { animationType: 'pulse' });\n\n// Export\nconst result = await agent.quickExport();\n\n// Reset for new canvas\nagent.reset({ canvas: 'tiktok' });\n```\n\n### Smart Export\n\n```javascript\nconst rec = agent.getExportRecommendation();\n// { format: 'webm', reason: 'Has animations, WebM gives best quality' }\n```\n\n---\n\n## MCP Tool Reference\n\nThe MCP server (`@pinepaper.studio/mcp-server`) exposes these tools:\n\n### Item Tools\n- `pinepaper_create_item` — Create any item type\n- `pinepaper_modify_item` — Modify item properties\n- `pinepaper_batch_create` — Create multiple items\n\n### Animation Tools\n- `pinepaper_animate` — Apply simple animation\n- `pinepaper_keyframe_animate` — Apply keyframe animation\n\n### Relation Tools\n- `pinepaper_add_relation` — Add relation between items\n- `pinepaper_remove_relation` — Remove relation\n\n### Diagram Tools\n- `pinepaper_create_diagram_shape` — Create flowchart shape\n- `pinepaper_connect` — Connect shapes\n- `pinepaper_auto_layout` — Apply layout algorithm\n\n### Map Tools\n- `pinepaper_load_map` — Load geographic map\n- `pinepaper_highlight_regions` — Highlight regions\n- `pinepaper_apply_data_colors` — Choropleth coloring\n- `pinepaper_add_marker` — Add map marker\n\n### Rigging Tools\n- `pinepaper_create_skeleton` — Create skeleton\n- `pinepaper_add_bone` — Add bone\n- `pinepaper_attach_item_to_bone` — Attach item\n- `pinepaper_apply_rig_preset` — Apply preset\n- `pinepaper_save_pose` / `pinepaper_load_pose` — Pose management\n- `pinepaper_interpolate_poses` — Blend poses\n\n### Blending Tools\n- `pinepaper_apply_blend_preset` — Apply blend preset\n- `pinepaper_transition_blend_mode` — Animated blend transition\n- `pinepaper_add_interactive_blend` — Interactive blending\n- `pinepaper_set_group_blend_mode` — Group blending\n\n### Filter Tools\n- `pinepaper_apply_image_filter` — Single GPU filter\n- `pinepaper_apply_filter_chain` — Multi-filter chain\n\n### Masking Tools\n- `pinepaper_apply_cutout_style` — Apply cutout preset\n- `pinepaper_get_cutout_styles` — List presets\n\n### Lasso Tools\n- `pinepaper_lasso_activate` — Activate lasso on image\n- `pinepaper_lasso_apply` — Extract region\n\n### View Tools\n- `pinepaper_zoom` — Set zoom level\n- `pinepaper_pan` — Pan view\n- `pinepaper_fit_view` — Fit content in view\n- `pinepaper_get_view_state` — Get current view\n\n### Selection Tools\n- `pinepaper_select` — Select item\n- `pinepaper_select_all` — Select all\n- `pinepaper_deselect_all` — Deselect all\n- `pinepaper_get_selection` — Get selection\n- `pinepaper_delete_selected` — Delete selected\n\n### Transform Tools\n- `pinepaper_nudge` — Move items\n- `pinepaper_flip` — Flip items\n- `pinepaper_reorder` — Change z-order\n\n### Background Tools\n- `pinepaper_set_background` — Set background\n- `pinepaper_clear_background` — Clear background\n- `pinepaper_get_background` — Get background\n\n### History Tools\n- `pinepaper_undo` / `pinepaper_redo` — Undo/redo\n- `pinepaper_get_history_state` — Get history state\n- `pinepaper_clear_canvas` — Clear canvas\n\n### Query Tools\n- `pinepaper_query_items` — Query items by criteria\n- `pinepaper_get_item_by_id` — Get specific item\n- `pinepaper_hit_test` — Hit test at point\n- `pinepaper_is_empty` — Check if canvas empty\n\n### Precomp Tools\n- `pinepaper_create_precomp` — Create composition\n- `pinepaper_add_to_precomp` — Add to composition\n- `pinepaper_remove_from_precomp` — Remove from composition\n\n### Playback Tools\n- `pinepaper_play_timeline` — Play keyframe timeline\n- `pinepaper_stop_timeline` — Stop playback\n- `pinepaper_pause_timeline` — Pause playback\n- `pinepaper_seek_timeline` — Seek to time\n\n### Export Tools\n- `pinepaper_export_svg` — Export as SVG\n- `pinepaper_export_training_data` — Export training data\n\n### Generator Tools\n- `pinepaper_execute_generator` — Run background generator\n- `pinepaper_list_generators` — List available generators\n\n### Font Tools\n- `pinepaper_font_create_glyph` — Create font glyph\n- `pinepaper_font_export` — Export font file\n- `pinepaper_font_status` — Get font creation status","readmeExcerpt":"Skill: PinePaper Owner: speaktoarpit Summary: Create and animate vector-based text, shapes, diagrams, and visualizations on an infinite canvas with resolution-independent export and rich animation and re... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-03-21T19:25:37.756Z | user PinePaper Studio — AI Agent Skills v1.0.0 https://pinepaper.studio - Initial release of PinePaper skill reference for AI agent integrati","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"x, y              — Position\nfillColor         — Fill (hex, rgba, or gradient object)\nstrokeColor       — Stroke color\nstrokeWidth       — Stroke width\nopacity           — 0-1\nrotation          — Degrees\nscale / scaleX/Y  — Uniform or axis scale\nshadowColor       — Shadow color\nshadowBlur        — Shadow blur radius\nshadowOffset      — [dx, dy]\nblendMode         — CSS blend mode string\nlabel             — String or { content, position, fontSize, color }"},{"language":"javascript","snippet":"fillColor: {\n  type: 'linear',   // or 'radial'\n  stops: [\n    { color: '#ff0000', offset: 0 },\n    { color: '#0000ff', offset: 1 }\n  ],\n  origin: [100, 100],\n  destination: [500, 500]\n}"},{"language":"javascript","snippet":"app.batchCreate([\n  { type: 'text', params: { content: 'Hello', x: 200, y: 200 } },\n  { type: 'circle', params: { radius: 50, x: 400, y: 300 } }\n]);"},{"language":"javascript","snippet":"app.create('text', {\n  content: 'Hello World',\n  x: 400, y: 300,\n  animationType: 'bounce',\n  animationSpeed: 1.2,\n  animationIntensity: 0.15\n});"},{"language":"javascript","snippet":"app.addRelation(sourceId, targetId, type, params);\napp.removeRelation(sourceId, targetId, type);\napp.replaceRelation(sourceId, targetId, type, params);\napp.getRelations(itemId);\napp.hasRelation(sourceId, targetId, type);\napp.addParts(parentId, { eye_left: id1, eye_right: id2 });"},{"language":"javascript","snippet":"app.create('circle', {\n  radius: 40, x: 100, y: 300,\n  animationType: 'keyframe',\n  keyframes: [\n    { time: 0, properties: { x: 100, opacity: 0 }, easing: 'easeOut' },\n    { time: 1, properties: { x: 500, opacity: 1 } },\n    { time: 2, properties: { x: 500, y: 100, scale: 2 }, easing: 'bounce' }\n  ]\n});"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn731b992fxsz8cq5c2barpazs83atan\",\n  \"slug\": \"pinepaper\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1774121137756\n}"},{"path":"skill-card.md","content":"## Description:\n\nPinePaper helps agents create, animate, query, transform, and export vector-based text, shapes, diagrams, maps, and visual effects on an infinite canvas.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[speaktoarpit](https://clawhub.ai/user/speaktoarpit)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and external agents use this skill as a PinePaper API and MCP reference for building animated canvas content, diagrams, visualizations, and exportable graphics.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Destructive canvas actions can clear, reset, or delete selected content.\n\nMitigation: Agents should ask for explicit confirmation before clearing, resetting, or deleting PinePaper canvas content.\n\nRisk: The training-data export tool may expose canvas content without clear scope.\n\nMitigation: Agents should avoid training-data export unless the user explicitly requests it and understands what will be exported.\n\nRisk: Using PinePaper with sensitive or valuable canvas content increases review requirements.\n\nMitigation: Review the skill before installation and limit use to appropriate canvas content and workflows.\n\n## Reference(s):\n\n- [PinePaper Studio](https://pinepaper.studio)\n- [ClawHub PinePaper Skill Page](https://clawhub.ai/speaktoarpit/skills/pinepaper)\n- [PinePaper Studio AI Agent Skills Reference](artifact/skills.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown reference material with JavaScript examples, MCP tool names, and export workflow guidance]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Outputs guide agents toward PinePaper canvas operations, API calls, MCP tools, and export formats.]\n\n## Skill Version(s):\n\n1.0.0 (source: release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."},{"path":"skills.md","content":"# PinePaper Studio — AI Agent Skills Reference\n\n> **What is PinePaper?** A professional web app for creating animated text, graphics, diagrams, and data visualizations on an infinite canvas. Powered by Paper.js vector math — everything is resolution-independent and exportable.\n>\n> **How AI agents use it:** Via MCP tools (`@pinepaper.studio/mcp-server`) or the Agent Mode JS API (`window.PinePaperAgent`).\n\n---\n\n## Table of Contents\n\n- [Item Creation](#item-creation)\n- [Animation](#animation)\n- [Relations (Inter-Item Behaviors)](#relations)\n- [Keyframe Animation](#keyframe-animation)\n- [Text & Typography](#text--typography)\n- [Diagrams & Flowcharts](#diagrams--flowcharts)\n- [Maps & Geospatial](#maps--geospatial)\n- [Masking & Reveal Effects](#masking--reveal-effects)\n- [Visual Effects](#visual-effects)\n- [Image Filters](#image-filters)\n- [Rigging & Skeletal Animation](#rigging--skeletal-animation)\n- [Blending & Compositing](#blending--compositing)\n- [3D Projection](#3d-projection)\n- [Background Generators](#background-generators)\n- [Camera Control](#camera-control)\n- [Export Formats](#export-formats)\n- [Canvas & View Management](#canvas--view-management)\n- [Selection & Queries](#selection--queries)\n- [History](#history)\n- [Agent Mode Quick Start](#agent-mode-quick-start)\n- [MCP Tool Reference](#mcp-tool-reference)\n\n---\n\n## Item Creation\n\nCreate items with `app.create(type, params)`. All items are vector-based and infinitely scalable.\n\n### Item Types\n\n| Type | Key Parameters |\n|------|---------------|\n| `text` | `content`, `fontSize`, `fontFamily`, `fontWeight`, `color`, `x`, `y` |\n| `circle` | `radius`, `fillColor`, `strokeColor`, `x`, `y` |\n| `rectangle` | `width`, `height`, `fillColor`, `cornerRadius`, `x`, `y` |\n| `ellipse` | `radiusX`, `radiusY`, `fillColor`, `x`, `y` |\n| `triangle` | `radius`, `fillColor`, `x`, `y` |\n| `star` | `radius`, `points`, `innerRadius`, `fillColor`, `x`, `y` |\n| `polygon` | `radius`, `sides`, `fillColor`, `x`, `y` |\n| `line` | `from`, `to`, `strokeColor`, `strokeWidth` |\n| `path` | `segments`, `strokeColor`, `closed` |\n| `arc` | `from`, `through`, `to`, `strokeColor` |\n\n### Common Parameters (All Items)\n\n```\nx, y              — Position\nfillColor         — Fill (hex, rgba, or gradient object)\nstrokeColor       — Stroke color\nstrokeWidth       — Stroke width\nopacity           — 0-1\nrotation          — Degrees\nscale / scaleX/Y  — Uniform or axis scale\nshadowColor       — Shadow color\nshadowBlur        — Shadow blur radius\nshadowOffset      — [dx, dy]\nblendMode         — CSS blend mode string\nlabel             — String or { content, position, fontSize, color }\n```\n\n### Gradient Colors\n\n```javascript\nfillColor: {\n  type: 'linear',   // or 'radial'\n  stops: [\n    { color: '#ff0000', offset: 0 },\n    { color: '#0000ff', offset: 1 }\n  ],\n  origin: [100, 100],\n  destination: [500, 500]\n}\n```\n\n### Batch Operations\n\n```javascript\napp.batchCreate([\n  { type: 'text', params: { content: 'Hello', x: 200, y: 200 } },\n  { type: 'circle"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Create and animate vector-based text, shapes, diagrams, and visualizations on an infinite canvas with resolution-independent export and rich animation and re... Skill: PinePaper Owner: speaktoarpit Summary: Create and animate vector-based text, shapes, diagrams, and visualizations on an infinite canvas with resolution-independent export and rich animation and re... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-03-21T19:25:37.756Z | user PinePaper Studio — AI Agent Skills v1.0.0 https://pinepaper.studio - Initial release of PinePaper skill reference for AI agent integrati","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":903,"uniquenessScore":57,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-09T18:26:10.315Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-09T18:26:10.315Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:53:39.192Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}