Knowledge Hub
Research, tutorials, guides & API docs — all in one place
Articles
5 postsHow a Pendulum Teaches You Differential Equations
You don't need a math degree to understand ODE solvers. You need a pendulum, a screen, and 20 minutes. Here's how Euler, RK4, and adaptive methods actually work — with the real code.
Read →What the FFT Actually Shows You
Every sound you hear is a sum of sine waves. The Fast Fourier Transform decomposes that sum. Here's what that means, how it works, and why a 60-year-old algorithm is still everywhere.
Read →How Animated GIFs Actually Work — From Canvas Frames to LZW Compression
The GIF format is 39 years old and still everywhere. Here's what happens between clicking 'Export' and getting a file — frame capture, color quantization, LZW compression, and why your GIF is 4MB.
Read →How We Built Browser-Native MP4 Export — No Server Required
PinePaper exports MP4 video entirely in the browser using WebCodecs. Here's how the H.264 pipeline works — from canvas frames to a playable video file, without uploading anything.
Read →User Guide
39 pagesGIF Export
Export your animations as GIF files for universal compatibility. GIFs are ideal when: - Posting to Twitter/X (auto-plays in feed) - Sharing on Discord or…
Export Overview
Export your creations in multiple formats for different platforms. 1. Click Export in the header, or 2. Press Ctrl/⌘ + E Best for: Instagram Reels, TikTok,…
Print Export (PDF & PNG)
Create professional print-ready designs with high-resolution exports perfect for commercial printing. PinePaper Studio supports creating static print…
Animated SVG Export
Export PinePaper animations as SMIL-animated SVG files for web embedding and scalable graphics. Supports pulse, rotate, bounce, fade, wobble, and keyframe animations with infinite resolution and tiny file sizes.
MP4 Video Export
Export your animations as MP4 video files for maximum compatibility with social media platforms. MP4 export uses the WebCodecs API and requires: - Chrome…
3D Projection
Render 3D primitives on the PinePaper canvas with multiple projection types, GPU acceleration, and interactive drag-and-drop.
Animations
Bring your designs to life with built-in animations. PinePaper includes 8 animation presets: 1. Select an item with the Selection Tool (V) 2. In the…
Arrows & Connectors
Create arrows and connectors in PinePaper Studio to link elements, build flowcharts, and add directional indicators. Choose straight, orthogonal, or smooth paths with custom arrowheads, dash patterns, and animated dash flow.
API Reference
83 pagesGPU-Accelerated 3D Projection
The 3D library includes optional GPU acceleration for vertex projection, with automatic fallback to CPU when GPU is unavailable or the scene is too simple.
3D Projection System
PinePaper includes a standalone 3D projection library for rendering 3D primitives on the 2D canvas. The library is zero-dependency (~18KB minified), outputs…
3D Projections
The 3D library supports five projection types for converting 3D scenes to 2D representations, plus an orbital camera system. Change the active projection…
PinePaper Lottie Compatibility Guide
> Reference for what survives a Bodymovin (After Effects) ↔ PinePaper round-trip, > and what doesn't. Last verified against v0.5.0-beta. PinePaper's Lottie…
PinePaper v0.5.0-beta — Release Test Checklist
> Walkthrough checklist for the v0.5 release session. Every item below maps to a specific > change made during v0.5 development. If any item fails, do not…
PinePaper SVG Compatibility Guide
> Reference for what survives an SVG ↔ PinePaper round-trip. Last verified > against v0.5.0-beta. PinePaper imports SVG via Paper.js (project.importSVG) and…
Animation
PinePaper supports both simple loop animations and complex keyframe-based animations. Apply a predefined animation to an item. Parameters: - item: Item to…
Arrow System
PinePaper's Arrow System creates configurable arrows with animated effects. Convenience wrapper for creating arrows via the PinePaper API. Parameters: -…