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

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

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

Type a phrase; misspelled words show red wavy underlines. Click a word to see Levenshtein-≤2 suggestions or add it to the demo dictionary.

/docs/tools#demo-spell-check

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

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

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

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

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