Loading…
Paint Forge ships 95 interactive demos across the docs surface. Each one is a hands-on canvas — drag, click, slide a control — that teaches a concept in seconds where prose would take paragraphs. Demos are pure Canvas 2D + React; they approximate engine behavior rather than re-importing the production rendering pipeline, so they stay fast and self-contained.
Demos lazy-load only when scrolled into view, so opening a docs page packed with them stays cheap. Click any link below to jump directly to a demo on its parent page.
How layers stack, mask, and combine.
Same heart shape rendered as raster vs vector at 1×–16× zoom — raster pixelates while vector stays crisp.
/docs/layers#demo-vector-raster-zoom
Two stacked shapes blended with the selected globalCompositeOperation. 16 modes via dropdown.
/docs/layers#demo-blend-mode
Per-pixel formula visualized — multiply / screen / overlay / difference applied to two grayscale gradient bars.
/docs/layers#demo-blend-mode-math
Three colored rectangles with up / down / front / back buttons reorder the stack.
/docs/layers#demo-layer-z-order
Click-drag to paint white (reveal) or black (hide) on a mask attached to a procedural plasma image.
/docs/layers#demo-layer-mask
Toggle alpha lock — paint stays inside the existing alpha silhouette via snapshot+restore.
/docs/layers#demo-alpha-lock
Base shape + texture above. Toggle clipping to constrain the texture to the base alpha.
/docs/layers#demo-clipping-mask
Independent X/Y scale and skew sliders applied as a layer-level affine. Reference rectangle vs transformed F letter shows the result.
/docs/layers#demo-layer-scale-skew
Hard-edged ellipse mask with feather (Gaussian blur on the mask) and density (alpha multiplier) sliders. Checkerboard reveals partial alpha.
/docs/layers#demo-mask-feather-density
Three toggleable adjustment layers (brightness / hue / contrast) — order changes the result.
/docs/layers#demo-adjustment-layer-stack
Toggle clipping on an Invert adjustment over a 2-layer stack. Shows how clipped adjustments scope locally vs hitting everything below.
/docs/layers#demo-adjustment-clip
Tonal, color, and effect filters with live sliders.
The classic linear adjustment — out = src · c + (128(1−c) + b).
/docs/filters#demo-brightness-contrast
160×160 curve editor with draggable control points; LUT built via monotone cubic Hermite spline.
/docs/filters#demo-curves
Input black / white / gamma + output black / white sliders driving a 256-entry LUT.
/docs/filters#demo-levels
RGB histogram of the plasma source. Brightness slider redistributes the bins live.
/docs/filters#demo-histogram
RGB → HSL → RGB round-trip with hue rotation and saturation scale.
/docs/filters#demo-hue-saturation
Simplified Viénot 1999 LMS-space simulations: protanopia / deuteranopia / tritanopia / achromatopsia.
/docs/filters#demo-color-blindness
Per-pixel luminance maps to a 256-entry gradient LUT. Three preset gradients + strength blend.
/docs/filters#demo-gradient-map
Cheap separable box blur (horizontal + vertical pass) with a 0..15 px radius.
/docs/filters#demo-blur
Radial smoothstep darkening with strength + inner-radius sliders.
/docs/filters#demo-vignette
Sharp + blurred copies blended per-pixel from a configurable focus band.
/docs/filters#demo-tilt-shift
Two-mode tonal collapse: threshold to 1-bit B/W or posterize each channel to N levels.
/docs/filters#demo-threshold-posterize
Three modes — luminance-proportional dots, variable-thickness lines, or 4×4 Bayer ordered dither.
/docs/filters#demo-halftone
Shifts the red and blue channels apart — green stays fixed.
/docs/filters#demo-chromatic-aberration
Each pixel outputs the mean color of its most-uniform 4-quadrant region.
/docs/filters#demo-kuwahara-oil
Extract pixels above a luminance threshold, blur them, additively composite back.
/docs/filters#demo-bloom
Synchronized Levels controls (input black / white / gamma) and a live RGB histogram showing how the LUT redistributes counts.
/docs/filters#demo-levels-histogram-split
4×4×4 LUT applied via trilinear interpolation, with a per-channel response strip below the image. 4 presets (identity, cool, warm, high contrast).
/docs/filters#demo-lut-preview
Drag the dial to set a blur direction; slider sets distance. Each pixel averages along the direction vector.
/docs/filters#demo-motion-blur-direction
3×3 grid with editable cells + 6 presets: Identity / Sharpen / Blur / Edge / Emboss / Outline.
/docs/filters#demo-convolution-kernel
Brush dynamics, retouching, and color tools.
Drag corner handles to define the crop. Toggle Show Original to confirm the image data outside the crop is dimmed but never deleted.
/docs/tools#demo-image-crop
Pick a category and click a glyph to insert it into the preview. Custom code-point input accepts U+XXXX, raw hex, or 0xXXXX.
/docs/tools#demo-glyph-palette
Slider grid driving a CSS font-variation-settings string — Weight, Width, Slant, Optical Size, Italic, Grade — over an Inter fallback.
/docs/tools#demo-font-variation-axes
Draw freehand; raw input renders as gray, smoothed output as orange — slider controls strength.
/docs/tools#demo-stroke-smoothing
Stroke renders as discrete soft stamps along the path; spacing controls the gap.
/docs/tools#demo-brush-stamp-spacing
Four named curves (linear / soft / firm / S) graphed alongside a tapered preview stroke.
/docs/tools#demo-pressure-curve
Drag fast vs slow — width shrinks proportionally to drag velocity.
/docs/tools#demo-velocity-size
Click to add stops, drag to move, click to color — live gradient preview above.
/docs/tools#demo-gradient-stops
Editable cubic bezier with per-character placement via arc-length parameterization.
/docs/tools#demo-text-on-path
Click to place anchors, drag for handles, click first to close. Backspace removes last.
/docs/tools#demo-pen-tool
Push / bloat / pucker / twirl modes warp the image with cosine-bell falloff.
/docs/tools#demo-liquify
Drag to carry pixels along the drag direction with cosine-bell falloff.
/docs/tools#demo-smudge
Alt+click to set source, drag to clone with constant offset. Aligned vs unaligned modes.
/docs/tools#demo-clone-stamp
Hover the canvas; sampled color shown in 1×1 / 3×3 / 5×5 modes simultaneously.
/docs/tools#demo-eyedropper
Two color swatches blended additively (RGB light) or subtractively (CMY ink).
/docs/tools#demo-color-mixing
Base color + 5 harmony rules (complementary, analogous, triadic, tetradic, split-complementary).
/docs/tools#demo-color-harmony
4×4 grid of draggable handles deforms a colorful texture via per-triangle affine transforms.
/docs/tools#demo-mesh-warp
Pick mode (none / vertical / horizontal / both / radial-8); paint and see mirrored strokes.
/docs/tools#demo-symmetry-painting
Drag control points on a 0..2 multiplier curve; the lower ribbon re-tessellates with the new per-vertex half-width.
/docs/tools#demo-width-profile-editor
Click to add control points, drag to remap raw pen pressure 0..1 → effective 0..1; right-click removes.
/docs/tools#demo-pressure-curve-custom
Drag-to-draw with a flat nib; width modulated by |sin(moveAngle − nibAngle)|. Slider sets the nib orientation.
/docs/tools#demo-calligraphy-nib-angle
Same gestural input processed two ways — weighted ring buffer (stabilizer) vs cursor-leash (streamline) — overlaid on the raw cursor path.
/docs/tools#demo-streamline-vs-stabilizer
Selects a dash pattern (or types a custom one) and renders the stroke split by SVG-style stroke-dasharray semantics.
/docs/tools#demo-dashed-stroke
Per-segment HSL jitter with master amount + per-axis Hue / Sat / Lum weights and a seed re-roll. Mirrors the engine BrushStrokeObject color-jitter pipeline.
/docs/tools#demo-color-jitter
Drag anchors with corner (straight segments) or smooth (Catmull-Rom curves) modes. Demonstrates path anchor type basics.
/docs/tools#demo-anchor-point-types
5 pattern types (dots / lines / crosshatch / checkerboard / diagonal stripes) with size + color sliders; tile preview corner.
/docs/tools#demo-pattern-fill-tile-editor
Center / inside / outside alignment of stroke relative to path; clip + double-width technique that the engine uses internally.
/docs/tools#demo-stroke-alignment
Toggle drop shadow, inner shadow, outer glow, and stroke effect on a single shape to see how the four per-object effects compose.
/docs/tools#demo-object-effects
Per-vertex opacity gradient on a brush stroke — sample alpha along arc length, multiply each segment's alpha by the curve. Independent of color stops.
/docs/tools#demo-opacity-stops
Side-by-side solid / linear gradient / radial gradient / pattern fill on identical circles. Every vector object accepts any of the four.
/docs/tools#demo-fill-types-comparison
Slider-adjustable tilt X / Y → magnitude → opacity formula α = max(0.4, 1 − tiltMag/90 × 0.6). Visualizes Phase 81 pencil-shading behavior.
/docs/tools#demo-pen-tilt-opacity
Keyframing, easing, frame groups, and onion skin.
Drag the playhead across 4 keyframes; stage above shows live position + color interpolation.
/docs/animation#demo-timeline-scrub
Six named easings (linear / ease-in / -out / -in-out / bounce / elastic) on a 2 s loop.
/docs/animation#demo-easing
Two draggable control points define the curve; live preview dot uses it on a 1.5 s loop.
/docs/animation#demo-bezier-easing-editor
Animated dot snaps between N discrete positions instead of interpolating smoothly.
/docs/animation#demo-step-easing
Bezier path with a dot following it. Toggle "Orient along path" for tangent-aligned rotation.
/docs/animation#demo-motion-path
12-frame flipbook with a 1–30 fps slider. Feel the difference between 12 / 24 / 30.
/docs/animation#demo-frame-rate
Three side-by-side tracks — loop / pingpong / once on the same 2-second cycle.
/docs/animation#demo-loop-modes
Bouncing-ball flipbook with adjustable previous / next ghost-frame counts.
/docs/animation#demo-onion-skin
Hit testing, selection ops, quick mask.
Toggle anti-alias on a circular Magic Wand selection; magnified inset shows the binary edge vs the 1px Gaussian feather.
/docs/selection#demo-magic-wand-anti-alias
Three overlapping shapes; click anywhere — top-down z-order scan picks the topmost hit.
/docs/selection#demo-hit-testing
8 resize handles + rotation + skew. Shift locks aspect; rotation snaps to 15° steps.
/docs/selection#demo-free-transform
Animated dashed outline around a draggable selection — black underdash + offset white overdash.
/docs/selection#demo-marching-ants
Rectangular selection with edge softness slider 0–30 px via blurred mask + destination-in.
/docs/selection#demo-feather-selection
Click to seed; debounced tolerance slider runs flood fill over color similarity.
/docs/selection#demo-magic-wand-tolerance
Two regions A and B; pick New / Add / Subtract / Intersect to see the set operation.
/docs/selection#demo-selection-modes
Slider -20..+20 px applies dilate or erode morphology to a complex selection mask.
/docs/selection#demo-grow-shrink-selection
Click to seed a color, drag tolerance to widen the match. Highlights every matching pixel globally — distinct from contiguous Magic Wand.
/docs/selection#demo-select-color-range
Drag the selection rectangle handles to scale the marching-ants outline; the pixels under the selection stay put.
/docs/selection#demo-transform-selection
Drag a freehand path; click Convert to fill the closed path on a binary mask and trace its boundary as marching ants.
/docs/selection#demo-path-to-selection
Paint white / black on an overlay; convert to selection traces the boundary as marching ants.
/docs/selection#demo-quick-mask
Grids, snap, pixel-grid, composition guides, view modes.
Drag the orange box; green dashed guide lines appear and the box snaps when its edges or center align with any static box within 5px.
/docs/canvas#demo-smart-guides
Drag from the gray ruler at top or left to drop a horizontal or vertical guide line. Right-click a guide to remove.
/docs/canvas#demo-guide-ruler
Animated visualizations of pinch / two-finger rotate / two-finger tap / three-finger tap with the engine action each triggers.
/docs/mobile#demo-touch-gesture-visualizer
Drag a dot across rect or hex grid; snap-to-grid uses nearest cell intersection or hex center.
/docs/canvas#demo-honeycomb-grid
12×12 pixel-art sprite at 1×–32×; pixel-grid lines auto-appear at zoom ≥ 8×.
/docs/canvas#demo-pixel-grid
Same subject rendered at devicePixelRatio 1×, 2×, 3× — higher DPR reads sharper.
/docs/canvas#demo-dpi-scaling
Drag a box; toggle snap. Live readout shows fractional vs whole-pixel coords.
/docs/canvas#demo-snap-to-pixels
Sample landscape with 4 overlay options: thirds / golden / diagonals / center cross.
/docs/canvas#demo-composition-guides
Random splatter; click Auto-crop to bound non-transparent pixels and shrink the canvas to that box.
/docs/canvas#demo-auto-crop-content
Toggle horizontal and vertical flips on a sample scene with a directional F letter that makes the flip direction unmistakable.
/docs/canvas#demo-canvas-flip
Path booleans, vector stroke editing, stroke recording.
Two overlapping shapes — Union / Subtract / Intersect / Exclude via canvas compositing approximation.
/docs/advanced#demo-path-boolean
Centerline ribbon polygon with draggable position + perpendicular width handles per vertex.
/docs/advanced#demo-brush-stroke-editing
Draw a freehand stroke; replay it at 0.25× / 1× / 2× / 4× speed using captured timestamps.
/docs/advanced#demo-stroke-replay
Drag four corner handles to enclose a skewed quadrilateral; Apply renders the corrected view via 4-point bilinear warp.
/docs/advanced#demo-perspective-crop