Game da PinePaper Studio

Gina makomar hotunan motsi: a kan burauza, na asalin AI, kuma kowa zai iya samunsa.

Manufarmu

PinePaper Studio yana kawo dimokuradiyya ga ƙirar hotunan motsi. Mun yi imani cewa kayan aiki masu ƙarfi bai kamata su buƙaci lasisi masu tsada ba.

Menene Ya Sa Mu Daban

🤖

Ƙira ta Asalin AI

An gina shi daga ƙasa don yin aiki tare da mataimakan AI. Claude, ChatGPT, da sauran wakilan AI na iya fahimtar lambar mu.

🎬

Fitar MP4 da GIF

Fitar da bidiyon MP4 (H.264 ta WebCodecs) don Instagram, TikTok, YouTube. Motsin GIF don saƙo.

⏱️

Jadawalin Lokaci

Editan jadawalin lokaci na ƙwararru tare da motsi na asalin neno-muhimu.

🌍

Na Duniya ta Tsohuwa

Tallafi don harsuna 59 da duk tsarin rubutu. Ƙirƙira abun ciki don kowane masu sauraro.

🚀

Yancin Burauza

Babu buƙatar shigarwa. Yana aiki a kowane na'ura mai burauza na zamani. Bayananku ba sa barin na'urar ku.

📋

Ɗakin Samfura

Fara ƙirƙira tare da samfuran da aka ƙera. Samfura masu kyau don kafofin sada zumunta, kasuwanci, da ilimi.

🎨

Mahaɗar Biyu

UI mai sauƙi ga masu ƙira da API mai ƙarfi ga wakilan AI. Dukkansu suna raba injin motsi ɗaya.

🖨️

Ƙirar Bugu

Ƙirƙira kayan bugu na ƙwararru tare da A3, A4, A5, Letter, Tabloid. DPI 300-600.

v0.4
🦴

Gina Hali

Motsa mifupa tare da ƙasusuwa, yada FK, da mafita FABRIK IK.

v0.4
🎭

Haɗawa da Tattarawa

Nau'ikan haɗawa na kowane abu da kowane ƙungiya tare da saiti 7.

v0.4
✂️

Hanyoyin Yanke da Rufe

Motsa zanen bugun tare da hanyoyin yanke. Saiti 14 na rufe.

v0.4
🔗

Alaƙoƙin Tsari

Sabbin nau'ikan alaƙa: driven_by, wiggle, time_expression.

v0.4
🌐

Allon Zane Marar Iyaka

Zana ko'ina ba tare da iyaka ba. Yanayin marar iyaka yana cire iyakar girma.

v0.4
🖌️

Kayan Aikin Zane

Kayan aikin zane 6 na ƙwararru: alƙalami, burashi, alama, feshi, haske, da gogewa.

v0.4
🧊

Nuni Fuskantar

Nuna sifofi (mur'aba, kwallon, roba, dunƙule, mazurin) a kan allon zane tare da nau'ikan nuni 5.

v0.5
🎛

Tace Hotunan GPU

Sarrafa hotuna a lokaci ɗaya ta hanyar WebGPU compute shaders.

v0.5

Raba Hoto

Kayan aikin lasso na hannu don zaɓar da fitar da sassan hoto.

v0.5
📐

Injin Lissafi da Kimiyya

Ƙididdiga ta lamba ta math.js — mafita ODE (RK4/RK45), FFT, da kwaikwayon tsarin ƙarfi.

Biyayya da Amana

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Bishiyar samun dama ta inuwa don karanta allon zane. Kewaya ta maɓalli.

🔒

Kan Layin Tsaro

HSTS tare da preload, Manufar Tsaron Abun Ciki, X-Frame-Options.

👁

Sirri ta Ƙira

Sarrafa 100% a ɓangaren abokin ciniki. Babu lodi zuwa sabar, babu kukis, babu sa ido.

Fasaha da Iyawa

Fasahar Tushe

  • Paper.js: Sarrafa da nuna hotunan vector
  • HTML5 Canvas: Motsi a lokaci ɗaya da fitarwa
  • Vanilla JavaScript: Mai sauƙi, mai sauri, ba tare da dogaro ba
  • Timeline Engine: Canjin neno-muhimu tare da ayyukan sauƙaƙe
  • Rigging Engine: Motsin mifupa tare da mafita FK/IK v0.4
  • Design Knowledge Graph: Ontoloji ta ma'ana tare da nau'ikan alaƙa 25+ v0.4
  • Rust/WASM Runtime: Hanzarta WebAssembly na zaɓi — sarrafa alaƙoƙi har sau 10-100x sauri v0.5
  • pp:PinePaper Ontology: Ƙamus na ma'ana na alamu 55 — harshen motsin PinePaper v0.5
  • Sentry: Sa ido kan kuskure da aiki

Nau'ikan Fitarwa

  • WebM Video: Kodeki VP9 - mafi kyawun inganci don motsi
  • MP4 Video: H.264 ta WebCodecs API - mafi kyau don kafofin sada zumunta
  • GIF Animation: Ta gif.js Web Workers - cikakke don saƙo
  • PDF for Print: DPI 300 tare da bleed (3-5mm) da alamomin yanke - bugu na ƙwararru
  • High-DPI PNG: Har zuwa DPI 600 don ingancin bugu na kasuwanci
  • Animated SVG: Motsin SVG na asali tare da SMIL
  • Interactive Widget: HTML mai cin gashin kanta (~8-20KB). Mai hanzarta WASM. Saka ko'ina v0.5
  • Lottie JSON: Tsarin motsi na masana'antu. Yana dafa motsin tsari zuwa neno-muhimu na asali v0.4

Nau'ikan Motsi

Pulse Rotate Bounce Fade Wobble Swing Shake Jelly Na'urar Bugu Custom Paths Keyframe Animation ✨ Trim Paths Spatial Motion Paths Path Morphing 13 Deform Presets 100+ Animation Presets

Tsarin Tasiri

10 Visual Effects Sparkle Blast Fire Smoke Rain Snow Confetti Ripple Glow Electric 14 Mask Presets 19 Blend Presets 12 Blend Modes

On-Device AI EXPERIMENTAL

PinePaper supports client-side LLMs that run entirely in your browser — no account, nothing sent to a server. Chrome's built-in Gemini Nano, or any other in-browser model, can follow this experimental process to let its agent talk to PinePaper's tools directly.

The model emits PinePaper tool calls constrained by a grammar (a JSON schema on Chrome's Prompt API, an EBNF grammar on WebLLM), so the output is always valid and runs straight onto the canvas — a prompt becomes a scene in one step. Find it under AI / Code → Assistant in the editor. Being on-device, it's free and private; quality tracks whatever small model your browser provides, while the Cloud tab and MCP below give you larger models for higher fidelity.

Sabar MCP na PinePaper

Use PinePaper with Claude Desktop and other AI assistants via the @pinepaper.studio/mcp-server npm package. Create animated graphics using natural language:

Pair MCP with the official Claude Skill

The Skill teaches Claude when to reach for PinePaper and how to drive it correctly. Install once and ask in plain English — "animate this logo", "make a pulsing LIVE badge" — and Claude routes through PinePaper instead of generating HTML/CSS.

Skill docs →

Saitin Sauri

1. Shigar da duniya:

npm install -g @pinepaper.studio/mcp-server

2. Ƙara zuwa saitin Claude Desktop:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "pinepaper": {
      "command": "npx",
      "args": ["-y", "@pinepaper.studio/mcp-server"]
    }
  }
}

3. Gwada a Claude Desktop:

"Ƙirƙira rubutun ja mai bugun zuciya wanda ke cewa SANNU" "Ka sa duniya ta yi kewaye rana"

Kayan Aikin da ake samu

  • • Ƙirƙira rubutu, siffofin, hotuna
  • • Ƙara alaƙoƙi (nau'i 25+: orbits, follows, wiggle, da dai sauransu)
  • • Motsi na neno-muhimu da saiti
  • • Gina halaye (ƙasusuwa, IK/FK)
  • • Saiti na haɗawa da canjin yanayi
  • • Zane-zane, taswirori, ƙirƙirar rubutun
  • • Samar da bayan fage na tsari (janareta 14)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Fitar da SVG, bayanan horo

Dandamalin AI da ake tallafawa

  • • Claude Desktop
  • • Kowane abokin ciniki mai jituwa da MCP
  • • Haɗin kai na musamman ta API

Jadawalin Ilimin Ƙira

Unveiled in v0.4, the Design Knowledge Graph is a semantic reasoning layer that maps relationships between visual elements. Unlike traditional tools that only store pixel or vector data, PinePaper understands the intent behind the design—whether an object "orbits" another, "points at" a target, or "follows" a path.

Wannan sabon hanyar yana ba wakilan AI damar tunani game da motsi masu rikitarwa da alaƙoƙin tsari.

Binciken da aka Ambata

Tsarin Jadawalin Ilimin Ƙira ya samo ra'ayoyi daga waɗannan takardun da aka bita:

Ga Masu Gina da Wakilan AI

PinePaper exposes a comprehensive global API (window.PinePaper) that enables programmatic control of the entire application. AI assistants and developers can:

  • Ƙirƙira da sarrafa rubutu, siffofin, da abubuwan SVG
  • Amfani da motsi (saiti 9) da tasirori (sparkle, blast)
  • Ƙirƙira motsi na asalin neno-muhimu tare da sarrafa jadawalin lokaci
  • Fitar da MP4, GIF, SVG, ko PNG ta API
  • Amfani da alaƙoƙin sanarwa (orbits, follows, attached_to)
  • Gina halaye tare da motsin mifupa da neno-muhimu na matsayi v0.4
  • Ƙirƙira abubuwan da aka saka (precomps) tare da jadawalin cikin gida v0.4
  • Gina hanyoyin aiki na atomatik da tsarin sarrafa tari

Misalin Amfani da API:

// Create animated text
const text = app.create('text', {
  content: 'Hello World', x: 400, y: 300, fontSize: 48, color: '#4a9eff'
});

// Apply animation preset
app.animate(text, { animationType: 'pulse' });

// Keyframe animation with easing
app.create('circle', {
  x: 400, y: 300, radius: 50, color: '#ef4444',
  animationType: 'keyframe',
  keyframes: [
    { time: 0, properties: { y: 100, opacity: 0 } },
    { time: 1, properties: { y: 300, opacity: 1 }, easing: 'bounce' }
  ]
});

// Declarative relations
app.addRelation(moonId, earthId, 'orbits', { radius: 100, speed: 0.5 });

Hangen Nesanmu

Muna gina dandamalin hotunan motsi na farko na asalin AI.

Burinmu shine sanya hotunan motsi su zama sauƙi kamar rubuta rubutu.

Menene na Gaba?

v0.5 shipped data-driven charts, vision-puppeteering (webcam → rigged character), the measurement system with rulers + snap, glTF / BVH export, and the Claude Skill + MCP plugin marketplace. Up next: deeper agent integrations, animation state machines as a first-class primitive, and a growing template library across art, education, and motion-design domains.

Al'umma da Ci Gaba na Buɗe

An gina PinePaper Studio a fili tare da al'ummarmu.

Kyauta kuma Buɗaɗɗe

PinePaper Studio is Freeware v1.0 (currently v0.5.3-beta) and free to use for personal and commercial purposes. Create unlimited animations, export unlimited files, and use them in any project without restrictions. We believe powerful creative tools should be accessible to everyone.

59
Harsunan da ake Tallafawa
25+
Nau'ikan Alaƙa
111+
API Methods
7
Nau'ikan Fitarwa

Licensing & Open Source Credits

PinePaper Studio is built on the shoulders of giants. We are grateful to the maintainers of these open-source projects, without which PinePaper would not exist. Each library is bundled under its original license — please refer to the linked source for full terms.

PinePaper Studio itself

  • Application code Proprietary Freeware
    Free to use; source code is not licensed for redistribution, modification, or forking. See LICENSE and Terms of Service.
  • PinePaper Ontology (pp: vocabulary) CC0 1.0 Public Domain
    The semantic vocabulary and Knowledge Graph are dedicated to the public domain. Use pp: triples in your own canvases, exports, training data, or models with no attribution required. See /ontology/.
  • MCP Server MIT
    The Model Context Protocol server is open source and may be forked, modified, and redistributed. See github.com/pinepaper/mcp-server.
  • PineWidget runtime Embeddable
    The standalone widget player ships unobfuscated and is intended for third-party embedding.
Paper.js MIT
Vector graphics rendering foundation
math.js Apache-2.0
Expression evaluation, ODE solvers, numerical analysis
opentype.js MIT
Font glyph parsing for the Font Studio
planck-js MIT
Box2D physics engine for canvas item simulation
d3-geo ISC
Geographic projections for the Map System
d3-geo-projection ISC
Extended map projections (Robinson, Mollweide, Winkel)
topojson-client ISC
TopoJSON-to-GeoJSON converter for map data
gif.js MIT
Animated GIF export via Web Workers
jsPDF MIT
PDF export with bleed and trim marks
@sentry/browser MIT
Error tracking (production build only)
DOMPurify Apache-2.0 OR MPL-2.0
Cure53's XSS sanitizer — runs on every imported SVG before Paper.js sees it, so a malicious file can't smuggle scripts or event handlers into the editor.
@observablehq/plot ISC
Data visualization scales and transforms for the Chart System
@huggingface/transformers Apache-2.0
Vendored browser ESM build + ONNX runtime WebAssembly. Powers PinePaper's on-device object detection (the "Detect objects" / open-vocabulary "Find" features) — inference runs on your GPU (WebGPU) or CPU; the image never leaves your device.
DETR ResNet-50 Apache-2.0
Meta AI's DETR object-detection model (80 COCO classes). Runs in the browser via transformers.js (fp16 on WebGPU, q8 on CPU) behind the "Detect objects" button — finds objects in an image so you can label, relate, or composite onto them.
OWL-ViT (base-patch32) Apache-2.0
Google Research's open-vocabulary detector — finds anything you describe in text, not just fixed classes. Powers the "Find" feature's AI fallback (zero-shot detection inside a photo). Large model (~150 MB), so it's strictly opt-in and downloads once on first use; runs fully on-device.
Qwen2.5-1.5B-Instruct Apache-2.0
Alibaba's Qwen2.5 instruction-tuned LLM. Quantized (q4f16) and run fully on-device via WebGPU to power the PinePaper client AI assistant — prompts never leave your device. A smaller Qwen2.5-0.5B-Instruct (also Apache-2.0) is used as the low-storage fallback.
WebLLM (MLC) Apache-2.0
MLC-AI's in-browser LLM runtime — loads the Qwen2.5 weights and runs inference on WebGPU for the on-device assistant.
LibreTranslate AGPL-3.0 Build-time
Self-hosted machine-translation API used at build time to translate the editor UI, User Guide, and Knowledge Hub into the supported languages. Not bundled or network-served by the app — only its output (the translated text) ships.
Argos Translate MIT Build-time
The open neural translation engine (and open language models) that LibreTranslate runs under the hood for our build-time localization pipeline.

Each linked project's repository carries its own license file. We ship obfuscated production builds so a local node_modules tree isn't in the distribution; we keep this list above and these upstream links current instead. If we have missed attributing a project, please let us know.