Formal OWL vocabulary for canvas elements, relations, animations, generators, and semantic dimensions.
pp: vocabulary) is dedicated to the public domain under
CC0 1.0 Universal. You may use these terms in your own canvases, exports, training data, models, or downstream systems with no licensing obligations. (Note: this CC0 dedication covers only the vocabulary; PinePaper Studio software itself is separately licensed — see Terms of Service.)
@prefix pp: <https://pinepaper.studio/ontology/>
| Name | Description | Parent | Anchor | Abstract | Parameters |
|---|---|---|---|---|---|
| Concept | Abstract conceptual resource — addressable independently of canvas items. | — | skos:Concept | Yes | — |
| CanvasElement | Abstract root of everything drawn on the canvas. Every element has a position, a transform and an identity in the registry, which is what lets a relation address it and an export find it. | — | schema:CreativeWork | Yes | — |
| CanvasShape | Abstract: elements defined by vector geometry — paths, closed forms, strokes. They can be filled, stroked, trimmed, morphed and deformed at the vertex level, none of which a raster or a text run supports. | CanvasElement | — | Yes | — |
| CanvasText | Abstract: elements whose content is language. They carry the scene's meaning, are what a screen reader announces, and re-measure when the content changes — so anything depending on their bounds must run after. | CanvasElement | — | Yes | — |
| CharacterAsset | Abstract: a generated character part — eyes, a skin, a rigged body. Produced by an asset generator from parameters, so it is modifiable and re-generatable rather than a fixed file. | CanvasElement | schema:CreativeWork | Yes | — |
| CharacterEye | A parametric eye: an outer silhouette, an optional pupil and a highlight, emitted under the eye_/pupil_ roles the expression system drives so it blinks and looks without further wiring. Not the anatomical organ — a drawn component of a character. | CharacterAsset | — | — | |
| CharacterSkin | A named appearance for a character body — palette plus proportions. A starting point that accepts overrides, not a fixed costume. | CharacterAsset | — | — | |
| RiggedCharacter | A character whose parts are bound to a skeleton, so a pose or a walk cycle drives the artwork. Anchored on skeletal animation — the technique that defines it. | CharacterAsset | wd:Q1813564 | — | |
| Store | Abstract: persistent state a scene can read and write, surviving a page reload. Addressable and non-visual — it exists so a relation has somewhere to put a value, which is what keeps saving a score an assertion rather than a script. | CanvasElement | — | Yes | — |
| LocalStore | Synchronous key/value storage of strings, around 5 MB. Readable and writable during a frame, which is why a counter can increment on click and be read in the same tick. Shares the HOST PAGE's origin, so keys are namespaced and nothing private belongs here. | Store | — | — | |
| IndexedStore | Asynchronous structured storage, large enough for scene-sized state. Resolves LATER than the frame that asked, so it suits loading and saving rather than per-frame reads — that asynchrony is the whole reason it is a separate type from pp:LocalStore. | Store | — | — | |
| CustomShaderEffect | A fragment shader supplied by the author and rendered over an item's silhouette. Registered at runtime through registerShaderEffect, which COMPILES AND LINKS it first and refuses it with the driver log — a shader that fails otherwise renders nothing while appearing to apply, because the error goes to a console production strips. | Concept | — | — | |
| TextEffect | A character-level text animation: one text item decomposed into per-character glyphs that arrive under a named effect (scattered, matrix, decrypt…). The composition is addressed through its ROOT glyph, which carries the content, font and origin it was built from — so the effect can be changed without retyping the text. | CanvasText | wd:Q638636 | — | |
| TextEffectGlyph | One character of a pp:TextEffect. An ordinary text item with its own keyframes; it points back at the composition root through pp:glyphOf, which is what lets the whole effect be re-targeted or removed as a unit. | CanvasText | — | — | |
| CanvasContainer | Abstract: elements that hold other elements and transform them as a unit. Containment comes from the scene tree, so a child inherits the parent's transform, opacity and blend unit. | CanvasElement | — | Yes | — |
| Diagram | Abstract diagram domain — flowcharts, UML, network topologies. Parent of pp:DiagramShape, pp:Connector, and the flow-relation hierarchy. | CanvasElement | — | Yes | — |
| GeoFeature | Abstract geographic feature — regions, markers, administrative areas. Parent of pp:MapRegion and pp:Marker. Matches the GeoJSON \"feature\" concept. | CanvasElement | — | Yes | — |
| Template | A complete authored scene, loadable as a starting point and parameterisable. Templates are the engine's worked examples — they exercise the same public API a caller has, so anything a template does is reproducible. | — | schema:VisualArtwork | — | |
| Text | A run of characters rendered as vector glyphs, sized by `fontSize` and set in `fontFamily`. The only type whose content is language, so it carries the scene's meaning and is what a screen reader announces. `contentType` makes it LIVE — clock, timer, countdown, stopwatch — updating itself without any animation attached. Becomes pp:LetterCollage when a Text Style is applied and pp:TextEffect when split per character; both REPLACE the text item, so reach for them last. | CanvasText | schema:CreativeWork | — | |
| Glyph | A single character rendered as an editable vector outline (CompoundPath) — distinct from pp:Text (system-font text). Use to animate, morph, scale, or boolean a letter/digit as geometry. Emitted as custom Paper.js code (a CompoundPath per glyph). | CanvasShape | — | — | |
| Circle | A closed round shape defined by `radius` alone — a circle has no width/height, and passing them sizes it by the SMALLER of the two. Choose it over pp:Ellipse whenever the shape is meant to stay round under scaling, because an ellipse with equal axes will drift the moment either is animated. | CanvasShape | — | — | |
| Rectangle | A closed four-sided shape defined by `width` and `height`, with optional `cornerRadius` for rounded corners. The default container for panels, cards, bars and backdrops. Choose pp:DiagramShape instead when the rectangle is a NODE that connectors should attach to — a plain rectangle has no ports, so a connector aimed at it will not track it. | CanvasShape | — | — | |
| Pattern | Repeating decorative field (scanlines, stripes, grid, dots) materialized as ONE item — a single CompoundPath tiling an area. The scale-safe form of what would otherwise be hundreds of individual primitives. | CanvasShape | — | — | |
| Path | Vector path — semantically incomplete without open/closed distinction. Defined by its curveType (mathematical function family). Refined to OpenPath or ClosedPath during graph extraction. | CanvasShape | — | — | |
| OpenPath | Open path (trajectory/stroke) — has start and end points, does not enclose area. Defined by curveType: the mathematical function governing its segments. | Path | — | — | |
| ClosedPath | Closed path (region/boundary) — encloses area, no start/end distinction. Functionally equivalent to a shape defined by its boundary equation. | Path | — | — | |
| Star | Star shape (geometrically: concave polygon with alternating radii) | CanvasShape | — | — | |
| Triangle | A closed three-sided shape. Beyond `width`/`height` it accepts `kind` — right, equilateral, isosceles, obtuse, acute, scalene — or an explicit `angles` array, so the shape can be specified by its geometry rather than by computing vertices. Angles that nearly sum to 180 are normalised rather than refused. | CanvasShape | — | — | |
| Polygon | A regular N-sided shape defined by `sides` (3 or more) and `radius` — every side and interior angle equal. Choose pp:Path when the outline is irregular; a polygon cannot express one, and forcing it produces a shape that silently ignores the vertices you meant. | CanvasShape | — | — | |
| Ellipse | A closed oval defined by independent `width` and `height`. Choose pp:Circle when the shape must remain round; use an ellipse precisely when the two axes should differ or animate apart. | CanvasShape | — | — | |
| Line | An open two-point path from `from` to `to`, drawn with `strokeColor`/`strokeWidth` and NOT filled — a fill on an open path renders as the region between its endpoints, which is rarely what is wanted. Choose pp:Connector when the line joins two diagram nodes and should follow them; a plain line is fixed in place and will not. | CanvasShape | — | — | |
| Arc | An open curved path through three points — `from`, `through`, `to` — where the middle point sets the bulge. The curve is defined by geometry rather than by control handles, so it is the cheapest way to get a controlled curve without authoring béziers. Choose pp:Path for anything needing more than one bend. | CanvasShape | — | — | |
| Group | A container whose children transform, animate and export as one unit: moving, scaling or rotating the group applies to everything inside it. Selection resolves to the group, so click-through requires ⌥/Alt. Choose pp:Precomp instead when the contents need their OWN timeline — a group shares the scene's clock and cannot loop independently. | CanvasContainer | — | — | |
| LetterCollage | Text rebuilt as per-letter artwork so each character can be styled independently — tiles, magazine cut-out, gradient fills. It REPLACES the text item, so apply it once the wording is settled; the letters are hit-tested by their ink, not by a bounding box. | CanvasText | — | — | |
| Precomp | A nested composition with its OWN timeline, so its contents can loop independently of the scene clock. That local clock is the whole difference from pp:Group, which shares the scene's time and cannot. | CanvasContainer | — | — | |
| World3D | A BOUNDED procedural volume rendered under the canvas: a square heightfield of `terrain.size` across with sky above it — a cuboid extent, not an open or shared world. Seeded terrain, scattered props and lighting, addressed as a parameter set rather than as geometry. Anchored on virtual place (any digitally created environment); NOT wd:Q444835 virtual world, whose sense is a multi-user simulated environment and which this is not. | CanvasContainer | wd:Q107307154 | — | |
| WorldTerrain | The heightfield a world is built on — seed, size, amplitude and relief. One height function serves both the mesh and collision. | CanvasElement | wd:Q271669 | — | |
| WorldObject | An object placed at chosen coordinates in a 3D world, as opposed to procedurally scattered. | CanvasElement | — | — | |
| ShaderMesh | Geometry in a 3D world drawn by an author-supplied vertex and fragment program. Unlike pp:WorldObject, which is a box with a colour, its SHAPE and its SHADING are both the author's: vertices and triangles supplied as data, transformed by a vertex program that may displace them per frame. A registry citizen under its own id, so relations can target it — anchor a label to a procedural surface, or drive its uniforms from an event. | WorldObject | wd:Q1154597 | — | |
| WorldMaterial | A named, SHARED surface description referenced by many world objects: one node, many users, so a single edit restyles all of them. That sharing is the whole point — a per-object colour already existed, and a material that styled one thing would be a rename rather than a capability. Carries colour and emissive only, because those are what this renderer consumes; there is no roughness or metalness here because there is no BRDF to read them, and opacity waits on sorted transparency. Anchored to nothing: a plausible-looking Wikidata concept would be worse than none. | CanvasElement | — | — | |
| WorldLight | A point light placed in a 3D world: a position, a colour, an intensity and a RANGE at which its contribution reaches exactly zero. A light as an OBJECT rather than a constant — addressable, so a relation can move it and a lamp that follows a character is an edge rather than a special case in the renderer. Casts no shadow: each shadow-casting light doubles the geometry passes, and the sun remains the single directional caster. | CanvasElement | wd:Q1146001 | — | |
| WorldCharacter | A controllable body in a 3D world — walks, jumps and collides with the terrain. Drivable by keyboard, timeline, relations or an agent. | CanvasElement | wd:Q1062345 | — | |
| Skeleton | A hierarchy of bones that drives artwork bound to it. Poses, walk cycles and expression presets are all defined against a skeleton's bone NAMES, so the naming is what makes stock animation work without per-character wiring. | CanvasContainer | — | — | |
| Bone | One segment of a skeleton: a joint position, a length and an angle, with children starting at its tip. Rotating a bone rotates everything below it — which is forward kinematics, and why a rig is authored root-first. | CanvasElement | — | — | |
| Pose | Named bone-angle map saved on a skeleton, addressable by id. Multiple poses per skeleton form a pose library. | Concept | — | — | |
| BreakdownPose | A pose keyframe that shapes the ARC and SPACING of the transition between key poses rather than being a storytelling extreme. Carries `favor` (−1..1, biases spacing toward the previous/next key) and a `breakdown` flag; interpolation naturally arcs in bone-angle space. Breakdowns are what turn robotic pose-to-pose into believable motion (traditional keys → breakdowns → in-betweens). | Pose | — | favor (default 0) breakdown (default false) | |
| TimingCurve | A per-segment cubic-bezier ease { o:{x,y}, i:{x,y} } from [0,0]→[1,1] with y UNCLAMPED, so overshoot/anticipation are representable — a Disney timing/spacing chart as data. Schema-aligned with the LLM timing-deformation-graph spec (Lottie o/i tangents). Overrides the named ease on a pose keyframe. | Concept | — | curve | |
| PoseOverlap | Per-bone timing offsets on a pose keyframe { boneId: lag∈[0,0.95) } — lagged bones trail during the transition so the tip drags the root: overlapping action / follow-through / drag (e.g. a \"delay foot\" on a kick). | Concept | — | boneOffsets | |
| MovingHold | A pose hold that slowly DRIFTS toward the next key (by a small holdDrift) instead of dead-stopping — keeps a held pose alive and anticipating the next action. | Concept | — | movingHold (default false) holdDrift (default 0.06) | |
| IKTargetPath | A spatial motion PATH (Lottie ti/to-style waypoints with bezier tangents) that an IK chain's effector follows, so it travels an ARC instead of a straight line to a static target. Temporal ease (pp:TimingCurve) is orthogonal to this spatial curvature. | Concept | — | waypoints duration (default 1) loop (default false) | |
| ShapeKey | Per-item visual delta (segments, opacity, color, size) saved on a skeleton with a rest baseline. Weighted blends drive facial-style animation. | Concept | — | — | |
| CompositionPattern | Abstract named composition — an arrangement recipe expressed as structural relations rather than coordinates. | Concept | skos:Concept | Yes | — |
| CollagePattern | A named arrangement of N sibling items (grid-2x2, hero-plus-strip, editorial-split, stacked-depth). Instantiating one positions a single root and wires beside/below/on_top_of edges for the rest. | CompositionPattern | — | — | |
| AudioSync | A composition timed to an audio track — the detected tempo and onset times that decide when each item lands. Held in the graph so a beat-synced piece can be re-cut or re-timed rather than re-detected. | Concept | — | — | |
| CameraTreatment | A named shot-list recipe (sheet-reveal, hero-then-details, slow-pan, push-through) compiled into a camera_animates track. Held separately from the pattern so one composition can be filmed several ways. | CompositionPattern | — | — | |
| IKChain | Inverse-kinematics chain on a skeleton — ordered bones + solver (fabrik / two_bone / ccd), optional pole vector, optional driving target item. | Concept | — | — | |
| ConstructionSequence | Ordered set of pp:ConstructionStep, played on the timeline to reveal a geometric construction one step at a time (replayable, scrubbable). Persisted as timed pp:constructionReveal relations, not a script. | Concept | — | — | |
| ConstructionStep | One step of a pp:ConstructionSequence: the item(s) introduced at a given stepOrder, mapped to a timeline reveal time (stepOrder × stepDuration). | Concept | — | — | |
| Event | Named event channel — pulsed by interaction relations (on_click_fire, etc.) and listened to by reaction relations (on_event_set_property, etc.). Carries optional payload (Numeric/String/Boolean/Pulse). Frame-coherent dispatch. | CanvasElement | — | — | |
| BonePhysics | Verlet integration layer over a skeleton — each bone has a particle at its tip, distance constraints preserve bone lengths, spring motors pull toward animated angles. Enabled per skeleton; blendWeight per bone mixes animated vs simulated. Use for hit reactions, hair/tail secondary motion, ragdoll. | Concept | — | — | |
| BoneJiggle | Secondary-motion config attached to a bone — overshoots and oscillates around the animated angle with stiffness/damping. Use for jiggly accessories (ponytail, antenna, scarf) without authoring per-frame keyframes. | Concept | — | stiffness (default 100) damping (default 0.85) gravity (default 0) | |
| BoneCollider | Collision shape that bone-physics particles bump against. Lives on a skeleton; multiple colliders per skeleton are allowed. Concrete subtypes select the shape primitive. | Concept | — | Yes | — |
| GroundCollider | Horizontal ground plane at a fixed y. Bones above this y stay above it — used for floors and standing surfaces. | BoneCollider | — | y (px, default 600) | |
| CircleCollider | Circular obstacle. Bones pushed out radially when they enter the disc. Use for balls, posts, round platforms. | BoneCollider | — | x (px, default 0) y (px, default 0) radius (px, default 50) | |
| RectCollider | Axis-aligned rectangular obstacle. Bones pushed out to the nearest edge. Use for boxes, walls, platforms. | BoneCollider | — | x (px, default 0) y (px, default 0) width (px, default 100) height (px, default 100) | |
| PathSkinning | Per-vertex bone-weight binding of a Path or CompoundPath to a skeleton — linear blend skinning in 2D. Each path segment carries a list of (boneId, weight) influences, computed once at skin time from vertex-to-bone distances. Use for cloth, capes, and any deformable surface that should flex with the underlying rig. | Concept | — | maxInfluences (default 2) maxDistance (px, default 150) falloff (default 2) | |
| SpriteSheet | Atlas+metadata package generated by rendering a rigged character across multiple poses or an animation timeline. Contains the packed image (TexturePacker JSON Hash format), per-frame uv data, and named animation cycles (e.g., walk / run / idle). Use to ship character animation as a single image for game engines or pre-rendered playback. | CanvasElement | schema:ImageObject | padding (px, default 1) framePadding (px, default 4) powerOfTwo (default true) maxAtlasSize (px, default 4096) | |
| SpriteFrame | Single frame inside a pp:SpriteSheet — a captured raster of the rigged character at one pose. Has a name, source rect in the atlas, trim metadata, and the original capture bounds. | Concept | — | — | |
| SpriteAnimation | Named playback cycle in a pp:SpriteSheet — ordered list of frame names, playback FPS, loop flag, and direction (forward / reverse / pingpong). Game engines and PinePaper's built-in player consume this for character animation. | Concept | — | fps (frames/s, default 12) loop (default true) direction (default forward) | |
| SpritePlayer | Runtime playback session for a pp:SpriteAnimation on the canvas. Owns the per-frame delta-time accumulator, the current frame index, and the Raster item displaying the active frame. Use to play a generated atlas back on the canvas without re-rigging. | Concept | — | — | |
| VideoClip | Video media item — frame-sampled raster source with playhead, in/out trim, and optional per-frame GPU filters. Referenced by pp:MediaRef handle. | CanvasElement | schema:VideoObject | — | |
| AudioClip | Audio media item — sample-buffer source with volume, gain, and timeline placement. May coexist with a video pp:MediaRef or stand alone. | CanvasElement | schema:AudioObject | — | |
| MediaRef | Shared media handle for a video / audio source. Multiple clips can reference the same source — two timeline copies of one uploaded video share one MediaRef. Use this to deduplicate media across a scene and across exports. | Concept | — | — | |
| Sound | A synthesized audio source in the graph — a named voice whose value is a continuous waveform signal (ExpressionIR) over a [t0,t1] window, rendered by the Web Audio renderer. The synthesis counterpart to the sample-based pp:AudioClip; can hold a single tone, a chord, or an arbitrary partial set. | CanvasElement | schema:AudioObject | — | |
| Tone | A single synthesized voice: a pitch (note or base frequency), a timbre (waveform → additive harmonic partials), an ADSR envelope, gain, and pan. The atomic building block of a pp:Sound. | Sound | — | — | |
| Chord | A renowned, instrument-agnostic frequency-ratio pattern (major, minor, dom7, maj7, min7, sus2/4, dim, aug, power) named over a root note; expands deterministically to N pp:Tone partials. \"Name it, the engine computes the frequencies\" — a weak model supplies root+kind, not Hz. | Sound | — | — | |
| PhysicsBody | Box2D rigid body attached to a canvas item. Subtype determines simulation behavior: static (immobile), dynamic (full sim), kinematic (animation-driven, can push dynamics). | Concept | — | Yes | — |
| StaticBody | Immobile rigid body — collides with dynamics but never moves under force. Used for walls and obstacles. | PhysicsBody | — | — | |
| DynamicBody | Fully simulated rigid body — gravity, forces, impulses, collisions all act on it. | PhysicsBody | — | — | |
| KinematicBody | Animation-driven rigid body — ignores forces but pushes dynamic bodies. Used for animated platforms, controlled characters. | PhysicsBody | — | — | |
| PhysicsGround | Convenience static body at the bottom of the canvas — provides a floor for dynamic bodies to land on. | StaticBody | — | — | |
| PhysicsJoint | Constraint between two physics bodies. Subtype determines the degrees of freedom allowed. | Concept | — | Yes | — |
| RevoluteJoint | Hinge joint — bodies pivot around a shared anchor point with optional motor and angle limits. | PhysicsJoint | — | — | |
| DistanceJoint | Fixed-length tether between two bodies — like a rigid rope. Use for tethers, pendulums and ropes; unlike a weld it permits rotation at both ends. | PhysicsJoint | — | — | |
| WeldJoint | Rigidly fuses two bodies — eliminates relative motion. Used for compound objects. | PhysicsJoint | — | — | |
| SceneScript | Time-orchestrated container of character actions on a timeline. Loops, plays at variable speed, seekable. | Concept | — | — | |
| SceneAction | Single scheduled action inside a pp:SceneScript. Concrete subtypes are the composable character verbs (move/jump/crouch/idle/custom). All actions accept a duration (seconds) at the SceneScript level controlling how long they remain active. | Concept | — | Yes | — |
| actionMoveLeft | Walk-cycle action toward negative-X. Per-tick displacement = speed*delta. Defaults: speed=120 px/s, so 2 px/frame at 60 Hz. | SceneAction | — | speed (px/s, default 120) delta (s, default 0.01667) | |
| actionMoveRight | Walk-cycle action toward positive-X. Per-tick displacement = speed*delta. Defaults: speed=120 px/s, so 2 px/frame at 60 Hz. | SceneAction | — | speed (px/s, default 120) delta (s, default 0.01667) | |
| actionJump | Parabolic-arc jump with anticipation and landing squash. Height/duration parametrize the arc; gravity is derived to make the character return to ground after `duration` seconds. | SceneAction | — | height (px, default 100) duration (s, default 0.6) | |
| actionCrouch | Crouched pose hold for the action duration. No parameters — the pose is fixed; duration is set on the SceneAction wrapper. | SceneAction | — | — | |
| actionIdle | Idle / rest pose hold for the action duration. No parameters — clears velocity and returns to the idle pose. | SceneAction | — | — | |
| DataVisualization | Abstract data visualization — classified along 5 orthogonal dimensions: mark primitive, coordinate system, encoding channel, analytical task, and composition mode | CanvasElement | schema:CreativeWork | Yes | — |
| MarkType | Abstract mark primitive — the visual element used to represent data points | — | — | Yes | — |
| PointMark | Discrete position mark (scatter, bubble, dot) Position is read accurately, so scatter is the right mark for correlation; it degrades fastest under overplotting. | MarkType | — | — | |
| LineMark | Connected trajectory mark (line, step, spline) Connecting points asserts CONTINUITY between them, so it is wrong for unordered categories no matter how good it looks. | MarkType | — | — | |
| BarMark | Rectangular extent mark (bar, column, histogram bin) Length from a common baseline is the most accurately-read encoding there is, which is why bars beat pie for comparison. The baseline must be zero or the lengths lie. | MarkType | — | — | |
| AreaMark | Filled region mark (area, stream, band) Fills emphasise volume and accumulation; stacked areas make the TOTAL easy and the individual series hard. | MarkType | — | — | |
| ArcMark | Angular sector mark (pie slice, donut, sunburst) Angle is read poorly, so reserve it for part-to-whole with few slices — a pie with many segments is a bar chart that has been made harder. | MarkType | — | — | |
| CellMark | Grid cell mark (heatmap, matrix, waffle) For dense matrices where the PATTERN matters more than any single value; colour carries the value, so the scale choice decides what a reader sees. | MarkType | — | — | |
| TextMark | Data-positioned text mark (word cloud, label) The only mark that states its value exactly rather than encoding it — use it where precision beats comparison, and sparingly, because text does not scan. | MarkType | — | — | |
| CoordinateSystem | Abstract coordinate system for spatial data mapping The choice decides which comparisons are easy: Cartesian favours magnitude, polar favours cycles, geographic favours location. | — | — | Yes | — |
| CartesianCoordinates | Cartesian X/Y axes — the most common coordinate system for charts | CoordinateSystem | — | — | |
| PolarCoordinates | Polar angle/radius coordinates (pie, radar, rose charts) Makes cyclical structure obvious and magnitudes hard, since radius encodes area rather than length. | CoordinateSystem | — | — | |
| GeographicCoordinates | Geographic lat/lon projection (choropleth, bubble map) The projection is a real decision — every one distorts something, and the usual default exaggerates area toward the poles. | CoordinateSystem | — | — | |
| ParallelCoordinates | Parallel axes for multivariate comparison For multivariate data where relationships BETWEEN axes matter; axis ORDER changes which relationships are visible, so it is part of the analysis. | CoordinateSystem | — | — | |
| EncodingChannel | Abstract visual encoding channel — maps data values to perceptual properties | — | — | Yes | — |
| PositionEncoding | Position on x/y axes — highest-bandwidth encoding Use it for the most important variable — nothing else is read as precisely. | EncodingChannel | — | — | |
| SizeEncoding | Width, height, or radius — encodes magnitude Area is systematically UNDER-estimated by readers, so size exaggerates differences unless the scale corrects for it. | EncodingChannel | — | — | |
| ColorEncoding | Fill, stroke, or opacity — encodes category or intensity Use a sequential ramp for magnitude and distinct hues for categories — and keep categories under about seven, past which they stop being distinguishable. | EncodingChannel | — | — | |
| ShapeEncoding | Point shape or dash pattern — encodes category Robust in print and greyscale where colour is not, but slow to read; best for a small number of categories. | EncodingChannel | — | — | |
| AngleEncoding | Rotation or arc sweep — encodes proportion Read least accurately of the common channels — acceptable for part-to-whole, poor for comparison. | EncodingChannel | — | — | |
| TextEncoding | Label content — encodes identity or value States a value exactly instead of encoding it, so it does not scale: a label per datum stops being readable long before the chart does. | EncodingChannel | — | — | |
| AnalyticalTask | Abstract analytical task — the question a visualization helps answer | — | — | Yes | — |
| ComparisonTask | Compare magnitudes across categories (which is bigger?) Favours position and length: bars and dot plots. This is the most common task and the one most often served by the wrong chart. | AnalyticalTask | — | — | |
| TrendTask | Show change over time (how does it evolve?) Favours a continuous horizontal axis with lines; the aspect ratio materially changes how steep a trend appears, so it is a real choice. | AnalyticalTask | — | — | |
| DistributionTask | Show spread or frequency of values (how is it distributed?) Favours histograms and box plots. Bin width IS the analysis — the same data tells different stories at different widths. | AnalyticalTask | — | — | |
| CompositionTask | Show parts of a whole (what proportion?) Favours stacked bars or a treemap; reach for a pie only with very few parts, since angle is read poorly. | AnalyticalTask | — | — | |
| RelationshipTask | Show correlation between variables (how do they relate?) Favours scatter plots. Beware of implying causation from a visible correlation — the chart cannot distinguish them. | AnalyticalTask | — | — | |
| SpatialTask | Show geographic distribution (where?) Favours a map, but only when LOCATION is the variable; when it is merely an attribute, a bar chart usually reads better than a map. | AnalyticalTask | — | — | |
| HierarchyTask | Show nested structure (how is it organized?) Favours treemaps, sunbursts and node-link trees. Treemaps show magnitude well and structure poorly; node-link trees do the reverse. | AnalyticalTask | — | — | |
| CompositionMode | Abstract composition mode — how multiple data series are visually arranged | — | — | Yes | — |
| SingleSeries | One data series displayed alone The clearest option; add a second series only when the comparison is the point. | CompositionMode | — | — | |
| StackedSeries | Series stacked vertically (cumulative) Makes the TOTAL easy to read and every series except the bottom one hard, because only the first shares a baseline. | CompositionMode | — | — | |
| GroupedSeries | Series placed side by side for comparison Keeps every series on a common baseline so all are comparable, at the cost of width — it degrades quickly past a handful of groups. | CompositionMode | — | — | |
| LayeredSeries | Series overlaid with transparency Preserves each series' own baseline, but overlapping fills obscure one another; best with two or three. | CompositionMode | — | — | |
| FacetedSeries | Small multiples — separate panels per series Small multiples: each panel is simple and all share a scale, so comparison is across panels rather than within one. The scale must be shared or the panels lie. | CompositionMode | — | — | |
| BarChart | Bar chart — rectangular marks on Cartesian axes for categorical comparison | DataVisualization | — | — | |
| LineChart | Line chart — connected marks showing trends over a continuous axis | DataVisualization | — | — | |
| ScatterPlot | Scatter plot — point marks encoding two quantitative variables as position | DataVisualization | — | — | |
| AreaChart | Area chart — filled region under a line, showing volume and trends | DataVisualization | — | — | |
| Histogram | Histogram — binned bar chart showing value distribution Bin width is the analysis, not a display detail — the same data tells different stories at different widths. | DataVisualization | — | — | |
| BubbleChart | Bubble chart — scatter plot with size-encoded third variable | ScatterPlot | — | — | |
| PieChart | Pie chart — arc marks in polar coordinates showing part-to-whole | DataVisualization | — | — | |
| Heatmap | Heatmap — cell marks with color encoding for matrix data For dense matrices where the pattern matters more than any single cell; the colour scale decides what a reader sees. | DataVisualization | — | — | |
| StackedBarChart | Stacked bar chart — bars subdivided by category showing composition | BarChart | — | — | |
| DiagramShape | A flowchart, UML or network node — a shape that carries PORTS, so connectors attach to it and keep tracking it when it moves. That attachment is the whole difference from the plain shape of the same outline: choose this whenever anything will be connected to it, and a plain pp:Rectangle or pp:Ellipse when nothing will. | Diagram | — | — | |
| FlowchartShape | Abstract: shapes in flowchart notation, where the OUTLINE carries the meaning. A reader infers the role from the silhouette before reading a word, so using the wrong shape actively misinforms. | DiagramShape | — | Yes | — |
| ProcessShape | A rectangle: an action or step that DOES something. The default flowchart node — reach for another shape only when the step is not a plain action. | FlowchartShape | — | — | |
| DecisionShape | A diamond: a branch point with two or more labelled outgoing edges. The labels are load-bearing — an unlabelled decision tells a reader that a choice happens but not what decides it. | FlowchartShape | — | — | |
| TerminalShape | A stadium/rounded form: where a process STARTS or ENDS. Conventionally exactly one start; multiple ends are normal and often clearer than funnelling every path together. | FlowchartShape | — | — | |
| DataShape | A parallelogram: input or output crossing the process boundary. Distinct from pp:DatabaseShape, which is where data RESTS rather than where it moves. | FlowchartShape | — | — | |
| DocumentShape | A rectangle with a wavy lower edge: a printed or reported artefact produced by the process — something a person receives, rather than data a system stores. | FlowchartShape | — | — | |
| DatabaseShape | A cylinder: a persistent data store. Signals that state SURVIVES the process, which is the distinction a reader most wants from a diagram. | FlowchartShape | — | — | |
| PreparationShape | A hexagon: initialisation or setup performed before the main flow — declaring a variable, opening a connection. Separating it keeps the main path readable. | FlowchartShape | — | — | |
| UMLShape | Abstract: shapes in UML notation, where both the shape AND the connector style are formally defined. Unlike a flowchart, UML meanings are standardised, so a wrong arrowhead states something specific and false. | DiagramShape | — | Yes | — |
| UMLClassShape | A three-compartment box — name, attributes, operations. The compartments are the notation: collapsing them loses the distinction between what a class HAS and what it DOES. | UMLShape | — | — | |
| UMLUseCaseShape | An ellipse: a goal the system fulfils for an actor, named as a verb phrase from the actor's point of view. It describes an outcome, not an implementation step. | UMLShape | — | — | |
| UMLActorShape | A stick figure: a role OUTSIDE the system that interacts with it — a person, or another system. It marks the boundary of what is being designed. | UMLShape | — | — | |
| NetworkShape | Abstract: shapes in network-topology notation, where the subject is what CONNECTS to what rather than what happens first. | DiagramShape | — | Yes | — |
| CloudShape | A cloud outline: a network or service whose internals are deliberately out of scope — the internet, a third party, anything you do not control. | NetworkShape | — | — | |
| ServerShape | A host that runs something. The concrete counterpart to pp:CloudShape: this is infrastructure you own and can reason about. | NetworkShape | — | — | |
| Connector | An edge between two diagram shapes that re-routes as they move, with configurable `routing` (direct, orthogonal, curved), head and tail arrowheads and an optional label. It binds to PORTS, not coordinates — which is why it survives layout changes and why a plain pp:Line, which does not, is the wrong tool for joining nodes. | Diagram | — | — | |
| SequenceConnector | A connector carrying CONTROL flow — what happens next. The default flowchart edge; a solid arrow means the process continues along it. | Connector | — | — | |
| DataConnector | A connector carrying DATA rather than control — what is passed, not what happens next. Drawn distinctly so the two can be told apart at a glance. | Connector | — | — | |
| AssociationConnector | A plain link between elements with no direction of control or data implied — UML's weakest relationship. Use it when a stronger edge would overstate the coupling. | Connector | — | — | |
| DependencyConnector | A connector meaning \"a change there may force a change here\". Conventionally dashed, because the coupling is weaker than containment but stronger than an association. | Connector | — | — | |
| MapRegion | A rendered region shape on a map, filled and selectable. Unanchored for the same reason as pp:Marker: the drawn polygon DEPICTS an administrative area, it is not one, and rdfs:subClassOf would say it is. | GeoFeature | — | — | |
| Marker | A pin drawn on a map at a geographic coordinate. Deliberately UNANCHORED: `anchor` compiles to rdfs:subClassOf, and a marker is a graphical annotation that POINTS AT a place — it is not one. Asserting schema:Place would publish that every marker has an address and real-world coordinates, when what it has is a fill colour and a canvas position. | GeoFeature | — | — | |
| MaskedItem | An item clipped to a mask shape, existing as a composite of the two. The registry identity follows the COMPOSITE rather than the original, which is why relations pointing at the item keep working after a mask is applied. | CanvasElement | — | — | |
| Image | A raster bitmap placed from `src` — pixels, not vectors, so it does not scale infinitely and cannot be morphed or path-animated. `crossOrigin` defaults to 'anonymous' so a CORS-friendly host keeps exports untainted; a non-CORS host fails VISIBLY as an empty slot rather than silently tainting every export of the scene. | CanvasElement | schema:ImageObject | — | |
| CompoundPath | Multiple sub-paths as single item (SVG imports, boolean ops) | CanvasShape | — | — | |
| Unclassified | Item type not expressible in current vocabulary. Enables vocabulary gap discovery — count and inspect unclassified items to identify missing types. | CanvasElement | — | — | |
| DetectedObject | A real-world object detected in an image or video by on-device vision (DETR/YOLO). Registered as an addressable design node so relations (follows, circumscribes, indicates) can bind graphics to it; subclasses alias one-way to a public Wikidata entity. | CanvasElement | — | Yes | — |
| DetectedPerson | A human being. | DetectedObject | wd:Q5 | — | |
| DetectedBicycle | A pedal-driven two-wheeled vehicle. | DetectedObject | wd:Q11442 | — | |
| DetectedCar | A motorized road vehicle designed to carry a few people rather than goods. | DetectedObject | wd:Q1420 | — | |
| DetectedMotorcycle | A two- or three-wheeled motor vehicle. | DetectedObject | wd:Q34493 | — | |
| DetectedAirplane | A powered fixed-wing aircraft. | DetectedObject | wd:Q197 | — | |
| DetectedBus | A large road vehicle for carrying passengers. | DetectedObject | wd:Q5638 | — | |
| DetectedTrain | A connected series of rail vehicles that move along a track. | DetectedObject | wd:Q870 | — | |
| DetectedTruck | A large commercial or utilitarian motor vehicle for carrying goods. | DetectedObject | wd:Q43193 | — | |
| DetectedBoat | A small watercraft. | DetectedObject | wd:Q35872 | — | |
| DetectedTrafficLight | A signalling device that controls competing flows of road traffic. | DetectedObject | wd:Q8004 | — | |
| DetectedFireHydrant | A street connection point by which firefighters tap into a water supply. | DetectedObject | wd:Q634299 | — | |
| DetectedStopSign | A traffic sign requiring vehicles to make a complete stop. | DetectedObject | wd:Q250429 | — | |
| DetectedParkingMeter | A device that collects payment for the right to park a vehicle for a limited time. | DetectedObject | wd:Q953960 | — | |
| DetectedBench | A long seat on which several people can sit at once. | DetectedObject | wd:Q204776 | — | |
| DetectedBird | A winged, feather-covered, beaked vertebrate animal. | DetectedObject | wd:Q5113 | — | |
| DetectedCat | A small domesticated carnivorous mammal. | DetectedObject | wd:Q146 | — | |
| DetectedDog | A domesticated canine animal. | DetectedObject | wd:Q144 | — | |
| DetectedHorse | A large domesticated four-footed mammal of the equine family. | DetectedObject | wd:Q726 | — | |
| DetectedSheep | A domesticated ruminant animal bred for meat, wool, and milk. | DetectedObject | wd:Q7368 | — | |
| DetectedCow | A large domesticated cloven-hooved herbivore (cattle). | DetectedObject | wd:Q830 | — | |
| DetectedElephant | A very large terrestrial mammal with a trunk and tusks. | DetectedObject | wd:Q7378 | — | |
| DetectedBear | A large carnivoran mammal of the family Ursidae. | DetectedObject | wd:Q30090244 | — | |
| DetectedZebra | A black-and-white striped African member of the horse family. | DetectedObject | wd:Q32789 | — | |
| DetectedGiraffe | A very tall, long-necked African mammal. | DetectedObject | wd:Q862089 | — | |
| DetectedBackpack | A bag carried on one’s back. | DetectedObject | wd:Q5843 | — | |
| DetectedUmbrella | A folding canopy on a frame, used as protection against rain or sun. | DetectedObject | wd:Q41607 | — | |
| DetectedHandbag | A handled bag used to hold personal items. | DetectedObject | wd:Q467505 | — | |
| DetectedTie | A necktie — a strip of cloth worn around the neck with a shirt. | DetectedObject | wd:Q44416 | — | |
| DetectedSuitcase | A rectangular piece of luggage for carrying clothes and belongings. | DetectedObject | wd:Q200814 | — | |
| DetectedFrisbee | A gliding disc thrown and caught for recreation or sport. | DetectedObject | wd:Q131689 | — | |
| DetectedSkis | Long narrow runners fixed to boots for gliding over snow. | DetectedObject | wd:Q172226 | — | |
| DetectedSnowboard | A board ridden over snow, with both feet attached. | DetectedObject | wd:Q2000617 | — | |
| DetectedSportsBall | A round object used in sports or for playing. | DetectedObject | wd:Q18545 | — | |
| DetectedKite | A tethered aircraft flown in the wind on a rope or string. | DetectedObject | wd:Q42861 | — | |
| DetectedBaseballBat | A smooth club used to hit the ball in baseball. | DetectedObject | wd:Q809910 | — | |
| DetectedBaseballGlove | A large leather glove worn by baseball fielders to catch the ball. | DetectedObject | wd:Q809894 | — | |
| DetectedSkateboard | A short wheeled board ridden standing up. | DetectedObject | wd:Q15783 | — | |
| DetectedSurfboard | A long board used to ride ocean waves. | DetectedObject | wd:Q457689 | — | |
| DetectedTennisRacket | A strung bat used to hit the ball in tennis. | DetectedObject | wd:Q153362 | — | |
| DetectedBottle | A closable narrow-necked container for liquids. | DetectedObject | wd:Q80228 | — | |
| DetectedWineGlass | A stemmed drinking glass for wine. | DetectedObject | wd:Q1531435 | — | |
| DetectedCup | A small open vessel for drinking. | DetectedObject | wd:Q81727 | — | |
| DetectedFork | An eating utensil with prongs for spearing food. | DetectedObject | wd:Q81881 | — | |
| DetectedKnife | A tool with a cutting blade. | DetectedObject | wd:Q32489 | — | |
| DetectedSpoon | An eating utensil with a small shallow bowl on a handle. | DetectedObject | wd:Q81895 | — | |
| DetectedBowl | A round, open-top container used as tableware. | DetectedObject | wd:Q153988 | — | |
| DetectedBanana | An elongated, curved, edible yellow fruit. | DetectedObject | wd:Q503 | — | |
| DetectedApple | A round edible fruit of the apple tree. | DetectedObject | wd:Q89 | — | |
| DetectedSandwich | A dish of fillings held between or wrapped in bread. | DetectedObject | wd:Q28803 | — | |
| DetectedOrange | A round citrus fruit of the orange tree. | DetectedObject | wd:Q13191 | — | |
| DetectedBroccoli | An edible green vegetable in the cabbage family. | DetectedObject | wd:Q47722 | — | |
| DetectedCarrot | An edible orange root vegetable. | DetectedObject | wd:Q81 | — | |
| DetectedHotDog | A cooked sausage served in a sliced bun. | DetectedObject | wd:Q181055 | — | |
| DetectedPizza | A flat dough base baked with toppings. | DetectedObject | wd:Q177 | — | |
| DetectedDonut | A ring-shaped fried sweet dough (doughnut). | DetectedObject | wd:Q192783 | — | |
| DetectedCake | A sweet baked dessert. | DetectedObject | wd:Q13276 | — | |
| DetectedChair | A single-person seat with a back and legs. | DetectedObject | wd:Q15026 | — | |
| DetectedCouch | A long upholstered seat for several people (sofa). | DetectedObject | wd:Q131514 | — | |
| DetectedPottedPlant | A plant grown in a container or pot. | DetectedObject | wd:Q27993793 | — | |
| DetectedBed | A piece of furniture used for sleeping or resting. | DetectedObject | wd:Q42177 | — | |
| DetectedDiningTable | A flat-topped piece of furniture on legs, used for dining. | DetectedObject | wd:Q14748 | — | |
| DetectedToilet | A sanitary fixture for the disposal of human waste. | DetectedObject | wd:Q7813355 | — | |
| DetectedTv | A television set — a device with a screen for viewing broadcasts. | DetectedObject | wd:Q8075 | — | |
| DetectedLaptop | A foldable portable personal computer. | DetectedObject | wd:Q3962 | — | |
| DetectedMouse | A hand-held pointing device for a computer. | DetectedObject | wd:Q7987 | — | |
| DetectedRemote | A hand-held device for controlling another device wirelessly. | DetectedObject | wd:Q185091 | — | |
| DetectedKeyboard | A computer input device with a set of keys. | DetectedObject | wd:Q1921606 | — | |
| DetectedCellPhone | A portable mobile telephone. | DetectedObject | wd:Q17517 | — | |
| DetectedMicrowave | A microwave oven — a kitchen appliance that heats food with microwaves. | DetectedObject | wd:Q127956 | — | |
| DetectedOven | An enclosed chamber for heating or cooking food. | DetectedObject | wd:Q36539 | — | |
| DetectedToaster | A small appliance for toasting slices of bread. | DetectedObject | wd:Q14890 | — | |
| DetectedSink | A bowl-shaped plumbing fixture for washing. | DetectedObject | wd:Q140565 | — | |
| DetectedRefrigerator | An appliance that preserves food at a low temperature. | DetectedObject | wd:Q37828 | — | |
| DetectedBook | A bound set of printed or written pages. | DetectedObject | wd:Q571 | — | |
| DetectedClock | An instrument that measures and shows the time. | DetectedObject | wd:Q376 | — | |
| DetectedVase | An open container, typically for holding cut flowers. | DetectedObject | wd:Q191851 | — | |
| DetectedScissors | A hand-operated cutting tool with two pivoted blades. | DetectedObject | wd:Q40847 | — | |
| DetectedTeddyBear | A soft stuffed toy in the shape of a bear. | DetectedObject | wd:Q213477 | — | |
| DetectedHairDrier | An electrical appliance that blows warm air to dry hair. | DetectedObject | wd:Q15004 | — | |
| DetectedToothbrush | A small brush for cleaning the teeth. | DetectedObject | wd:Q134205 | — |
| Name | Description | Category | Behavior | Parent | Parameters |
|---|---|---|---|---|---|
| Relation | Abstract root of the behaviour graph. A relation is a live rule evaluated per frame or on an event, not a stored value — which is why changing one param changes the motion without re-authoring anything. | abstract | — | — | — |
| SpatialRelation | Abstract: relations that write POSITION. The source is moved by the rule each frame, so any position keyframe on the same item fights it — one owner per channel. | abstract | — | Relation | — |
| TransformRelation | Abstract: relations that write ROTATION or SCALE rather than position, so they compose with a spatial relation on the same item instead of fighting it. | abstract | — | Relation | — |
| AnimationRelation | Abstract: relations driven by TIME — they read the scene clock, so they scrub with the timeline and bake into exports. | abstract | — | Relation | — |
| ProceduralRelation | Abstract: relations computed from a function or expression rather than from another item, so they need no target and are deterministic from a seed. | abstract | — | Relation | — |
| contains | Structural: the target is a child of the source, so it inherits the parent's transform, opacity and blend unit. Containment comes from the scene tree rather than from an authored relation, which is why removing the parent removes the child. | structural | — | — | — |
| maskedBy | Structural: the source is clipped to the target's outline — only the region inside the mask shape is drawn. The mask itself is not rendered, and the pair becomes one composite whose registry identity follows the composite, not the original. | structural | — | — | — |
| onTopOf | Source bottom edge sits on target top edge. Use for stacking (a cocktail on a bar). Params: gap, align (left/center/right), overhang. | structural | constraint | SpatialRelation | — |
| below | Source top edge sits on target bottom edge (mirror of on_top_of). Params: gap, align, overhang. | structural | constraint | SpatialRelation | — |
| beside | Source is placed to the left or right of the target. Params: side (left/right), gap, align (top/center/bottom). | structural | constraint | SpatialRelation | — |
| inside | Source is placed inside the target bounds at a 9-way anchor. Places (contrast contained_in_place, which clamps a moving item). Params: anchor, padding. | structural | constraint | SpatialRelation | — |
| centeredOn | Source center = target center + offset. Concentric when offset is 0 (use for concentric rings). Params: offsetX, offsetY. | structural | constraint | SpatialRelation | — |
| alignedWith | One axis (x or y) of the source center matches the target center; the other axis stays free (partial write). Params: axis (required), offset. | structural | constraint | SpatialRelation | — |
| orbits | Source revolves around target at a fixed radius. Use for celestial mechanics, satellites, rotating-around-X relationships. Spatial params (radius) accept canvas-relative units (e.g. '30vmin' = 30% of min(canvasW,canvasH)) so the scene adapts to any size/aspect. | spatial | constraint | SpatialRelation | — |
| follows | Smooth pursuit with lag — source asymptotically approaches target. Use for trailing, delay, easing motion. Contrast: attached_to is rigid (zero lag). | spatial | constraint | SpatialRelation | — |
| attachedTo | Rigid parent-child transform — source moves with target instantly via fixed offset. Zero-lag variant of follows. Use for labels, attachments, child objects. | spatial | constraint | SpatialRelation | — |
| maintainsDistance | Source stays at a fixed distance from target as either moves. Use for tethering, leash dynamics, fixed-spacing groups. | spatial | constraint | SpatialRelation | — |
| pointsAt | Source rotates to always face target. Use for compass needles, gun turrets, gaze direction, arrows tracking a target. | transform | constraint | TransformRelation | — |
| mirrors | Source's transform mirrors target across an axis. Use for reflections, symmetry, mirrored character poses. | transform | constraint | TransformRelation | — |
| parallax | Source moves at a depth-scaled fraction of target's motion. Use for background layers, parallax scrolling, depth illusion. | spatial | constraint | SpatialRelation | — |
| boundsTo | Source's position is clamped within target's bounds. Use for keeping characters inside a frame or viewport-bounded motion. | spatial | constraint | SpatialRelation | — |
| growsFrom | Source scales up from zero starting at target's position. Use for spawn-from-point effects, ripple-into-being entrances. | animation | trigger | TransformRelation | — |
| staggeredWith | Stored as pairwise edges with index param to reconstruct group ordering. Conceptually 1→N but decomposed into binary pairs. | animation | trigger | AnimationRelation | — |
| waveThrough | Stored as pairwise edges with index param for phase offset. Conceptually 1→N but decomposed into binary pairs. | animation | constraint | AnimationRelation | — |
| morphsTo | Source's path interpolates into target's path over time. Use for shape morphing, geometry transitions. | animation | trigger | AnimationRelation | — |
| groupMorphsTo | Source paper.Group's children migrate into target Group's children's positions, paired by index. Path.Line children deform via segment endpoints; other items translate. Excess children fade. Generic across any two groups. | animation | trigger | AnimationRelation | — |
| movesAlongPath | Item position is driven along a user-supplied path stored as params. Self-relation; named easing curves (linear / easeIn / easeOut / easeInOut / sine / bounce / pingpong). | animation | procedural | ProceduralRelation | — |
| circumscribes | Source's bounds scale to fully enclose target. Use for halo highlights, selection rings, labels framing content. | animation | trigger | TransformRelation | — |
| isMidpointOf | Source is held at the midpoint of the target and params.other (a second anchor). Live: drag either anchor and the source follows. | spatial | constraint | SpatialRelation | — |
| liesOnLine | Source is constrained to the line through the target and params.other, at fraction params.t along it (0=target, 1=other). | spatial | constraint | SpatialRelation | — |
| isCentroidOf | Source is held at the centroid (average position) of the target and params.others (more anchor ids). | spatial | constraint | SpatialRelation | — |
| isCircumcenterOf | Source is held at the circumcenter of the triangle target, params.other1, params.other2 (inactive when the three are collinear). | spatial | constraint | SpatialRelation | — |
| concentricWith | Source's center is held on the target's center (shared center / concentric). | spatial | constraint | SpatialRelation | — |
| constructionReveal | Self-relation: source fades in (opacity 0→1) starting at params.revealAt over params.fadeIn seconds, driven by the timeline (playbackTime). Used by pp:ConstructionSequence to play a construction back one step at a time. | animation | procedural | ProceduralRelation | — |
| indicates | Temporary emphasis effect. mathematically: pulseScale on source triggered by target reference. | animation | trigger | AnimationRelation | — |
| drivenBy | Source property linearly maps from a target property. Use for parameter linking, slaved values, reactive controls. | procedural | procedural | ProceduralRelation | — |
| wiggle | Source position / rotation jitters via noise-driven offset. Use for hand-drawn liveliness, idle motion, organic shake. | procedural | procedural | ProceduralRelation | — |
| timeExpression | Source property evaluates a math expression of time each frame. Use for custom oscillations, formula-driven motion. | procedural | procedural | ProceduralRelation | — |
| cameraFollows | Camera viewport tracks target's position with smooth pursuit. Use for cinematic follow shots, subject-lock cameras. | camera | constraint | SpatialRelation | — |
| cameraAnimates | Camera viewport interpolates between keyframed positions. Use for choreographed pans / zooms, fly-throughs, scripted shots. | camera | trigger | AnimationRelation | — |
| boneAttached | Source canvas item rides a skeleton bone — inherits its transform. Use for character props, weapons, accessories on a rig. | rigging | constraint | SpatialRelation | — |
| boneSkinned | Source path is skinned to a skeleton — each vertex deforms by linear blend of nearby bones' transforms. Contrast with attached_to (rigid follow) and bone_attached (inherits one bone's transform): this is per-vertex deformation enabling cloth, capes, soft-tissue. Stored as one self-edge per skinned path; the per-vertex weights live on the path's segments. | rigging | constraint | SpatialRelation | — |
| ikTarget | Target item is the end-effector goal for an IK chain on source skeleton. Use for hand-reaches-cup, foot-lock, gaze-to-target. | rigging | constraint | SpatialRelation | — |
| blendReactsTo | Source blend mode changes when target enters proximity / state. Use for collision-triggered visuals, reactive composition. | blending | procedural | ProceduralRelation | — |
| blendTransition | Source cycles through blend modes on a timed loop. Use for animated mood shifts, rhythmic visual changes. | blending | procedural | ProceduralRelation | — |
| partOf | Source is a named sub-element of target (e.g. eye_left part_of face). Use for compound items and named sub-element addressing. | rigging | constraint | SpatialRelation | — |
| expresses | Source plays a named expression preset (smile, blink, surprise) driving its part_of children. Use for facial animation, character emotion. | rigging | procedural | ProceduralRelation | — |
| EffectRelation | Abstract: particle effects attached to an item — sparkle, smoke, fire and the rest. The particles are system-owned visuals, not registry items, so they never appear in a selection or an item query. | abstract | — | ProceduralRelation | — |
| effectSparkle | Twinkling particles cascade from the item. Use for celebration, magic, attention-draw moments. | effect | procedural | EffectRelation | — |
| effectBlast | Outward radial burst of particles emits once. Use for impacts, explosions, energy release. | effect | procedural | EffectRelation | — |
| effectSmoke | Rising smoke trail emanates from the item. Use for damage, weight, atmosphere. | effect | procedural | EffectRelation | — |
| effectFire | Animated flame emerges from the item. Use for heat, burning, energy. | effect | procedural | EffectRelation | — |
| effectRain | Falling raindrops cover the canvas area. Use for weather scenes, melancholy mood. | effect | procedural | EffectRelation | — |
| effectSnow | Falling snowflakes drift across the canvas area. Use for winter scenes, peaceful slow motion. | effect | procedural | EffectRelation | — |
| effectConfetti | Colored streamers fall from above. Use for celebrations, accomplishments, party scenes. | effect | procedural | EffectRelation | — |
| effectRipple | Concentric expanding rings emanate from the item. Use for water-drop, shockwave hint, attention pulse. | effect | procedural | EffectRelation | — |
| effectGlow | Soft luminous halo surrounds the item. Use for highlighting, importance, magical quality. | effect | procedural | EffectRelation | — |
| effectElectric | Crackling electric arcs jump around the item. Use for energy, danger, sci-fi power. | effect | procedural | EffectRelation | — |
| effectBubbles | Rising bubbles emerge from the item. Use for underwater, liquid, light-hearted scenes. | effect | procedural | EffectRelation | — |
| effectDust | Slowly drifting dust motes fill the area. Use for old / abandoned moods, sunbeam visualizations. | effect | procedural | EffectRelation | — |
| effectFireflies | Slow-blinking glowing particles drift around the item. Use for magical night scenes, romantic ambiance. | effect | procedural | EffectRelation | — |
| effectShockwave | Single explosive ring expands outward from the item once. Use for impact moments, dramatic emphasis. | effect | procedural | EffectRelation | — |
| effectTrail | Particle trail follows the item as it moves. Use for motion blur, speed lines, comet tails. | effect | procedural | EffectRelation | — |
| ShaderEffectRelation | Abstract shader-rendered effect relation (silhouette-clipped GPU shader) | abstract | — | EffectRelation | — |
| anchoredInWorld | A 2D item tracks a point in a 3D world (pp:World3D), projected onto the canvas — labels, markers and callouts that follow a character or a place as the camera moves. Use to caption, annotate or attach UI to 3D content. | spatial | projective | SpatialRelation | — |
| effectHeatmap | Animated thermal-color noise fills the item's silhouette. Use for temperature visualization, dramatic glow, abstract energy. APPLIED WITH applyEffect(item, 'heatmap'), NOT addRelation: unlike the particle effects beside it this is a shader aura owned by ItemAuraSystem and persisted on item.data.aura, so no effect_heatmap rule is registered and addRelation would no-op silently. | effect | procedural | ShaderEffectRelation | — |
| effectLiquidMetal | Reflective chrome-flow shader stylizes the item with banded highlights. Use for metallic logos, sci-fi aesthetic, polish. APPLIED WITH applyEffect(item, 'liquid_metal'), NOT addRelation: unlike the particle effects beside it this is a shader aura owned by ItemAuraSystem and persisted on item.data.aura, so no effect_liquid_metal rule is registered and addRelation would no-op silently. | effect | procedural | ShaderEffectRelation | — |
| effectGemSmoke | Volumetric curling smoke wreath encircles the item silhouette. Use for ornate emphasis, ritual or magical contexts. APPLIED WITH applyEffect(item, 'gem_smoke'), NOT addRelation: unlike the particle effects beside it this is a shader aura owned by ItemAuraSystem and persisted on item.data.aura, so no effect_gem_smoke rule is registered and addRelation would no-op silently. | effect | procedural | ShaderEffectRelation | — |
| effectInkBleed | Fluid ink dispersion and paper-grain capillary bleed shader. Use for sketches, watercolor bleed, calligraphy and fluid dynamic art. APPLIED WITH applyEffect(item, 'ink_bleed'), NOT addRelation: owned by ItemAuraSystem and persisted on item.data.aura. | effect | procedural | ShaderEffectRelation | — |
| AuraMode | Aura composite mode enumeration (silhouette clipping strategy) | abstract | — | Concept | — |
| ShaderStage | Which stage of the rendering pipeline a shader program occupies. The stages are not interchangeable and not equally open: only pp:shaderStageItem accepts an author-supplied shader today, and a definition naming a closed stage is refused with the reason rather than silently applied as something else. | abstract | — | Concept | — |
| AnimationCurve | Animation channel curve enumeration (transforms raw time into shader uniform) | abstract | — | Concept | — |
| DesignRegister | A design language — the idiom a composition speaks. Sets the budget for distinct hues and decorative elements, the type-scale ratio, spacing proportions, alignment discipline and motion policy, so those move together instead of being chosen one at a time. A CHOICE, never a ranking. | abstract | — | Concept | — |
| DesignLevel | Craft level WITHIN a register — how well the chosen design language is executed, from accepted defaults to art direction. Applied as proportional modifiers, so a level means the same thing in every register and leaves each recognisably itself. Climbing never widens a budget: restraint is the direction of craft. | abstract | — | Concept | — |
| DesignMedium | What makes the marks — the mark-maker, not the style. A medium is a set of physical constraints that produce characteristic marks: thread looks the way it does because a needle lays a directional stitch of finite length with sheen, overlapping its neighbours. Every medium declares a pp:MediumFidelity, because a vector engine can genuinely make some of these marks and can only impersonate others. | abstract | — | Concept | — |
| MediumFidelity | How faithfully a VECTOR engine can render a medium. Exists so the engine can never quietly claim a medium it cannot make: the honest answer for half of them is \"an impression, not the medium\", and collapsing that to a boolean is how a tool ends up claiming to paint in oils. | abstract | — | Concept | — |
| StitchKind | A kind of embroidery stitch — the mark of the thread medium. Each is a short oriented segment with a taper and a sheen, which is what makes thread native to a vector engine rather than approximated by one. | abstract | — | Concept | — |
| Motion | Anything that makes a rig move over time, as distinct from the structure that can be moved. A pose is a snapshot; a motion is a function of scene time. | abstract | — | Concept | — |
| ProceduralMotion | Motion generated from a rule rather than authored key by key. One call produces a layer that keeps running — the reason a character can idle or breathe without anyone keyframing it. | abstract | — | Motion | — |
| Expression | A named facial state driven through part_of roles rather than through bones — blink, smile, frown, surprise. Works on any character whose parts carry the standard role tokens, with no skeleton required. | abstract | — | Motion | — |
| PoseSequence | Keyed poses over scene time, each naming a saved pose or an inline bone-angle map. Sampled as a pure function of playbackTime, so it scrubs, pauses and bakes. ONE per skeleton: starting another replaces it, which is why joining clips is a planning problem rather than a second playback slot. | motion | — | Motion | — |
| MotionClip | One bounded span of motion offered for joining — a walk cycle, a jump, a held idle. Carries how it joins as well as what it plays: whether it is cyclic (and so can be entered at any phase), how many times it repeats, and how long its seam should be. | motion | — | Motion | — |
| MotionSeam | The join between two clips: an overlap in which both are sampled and cross-faded per bone. Reports the angular mismatch it could NOT remove, in degrees — near zero is a real match, a large number means the blend is hiding a cut. That figure is the difference between a transition and an edit, and it is measurable rather than a matter of taste. | motion | — | Motion | — |
| PoseBlend | A pose part way between two others, interpolated per bone along the SHORTEST arc. Going the long way round turns a 20° step across ±180 into a 340° swing, which reads as a limb rotating backwards rather than as a blend. | motion | — | Motion | — |
| PoseLayer | An additive motion layer over whatever pose is current, cycling its own pose list on its own clock. Layers compose, which is what lets a breath run underneath a walk instead of replacing it. | motion | — | Motion | — |
| GaitCycle | A looping limb pattern — the walk or run cycle itself, as a set of named poses (walk_00…, walk_contact_L, walk_passing_L) rather than a formula. Because it is a cycle, it can be entered at any phase, which is what makes joining it to another motion tractable. | motion | — | Motion | — |
| LocomotionTrack | Root translation across the world over SCENE SECONDS — what makes a figure travel rather than march on the spot. Sampled deterministically rather than integrated per frame, so it scrubs and exports; keyed on the same clock as the pose sequence, so a track shorter than the performance lands the figure early and leaves it standing. | motion | — | Motion | — |
| SecondaryMotion | Spring-driven follow-through on a chain of bones — a tail, hair, cloth — that lags the motion driving it. Not decoration: the lag is what makes a rig read as having mass rather than as a diagram of one. | motion | — | Motion | — |
| BakedAnimation | A rig sampled frame by frame into plain item keyframes, so motion that only a skeleton could produce survives into formats that have no concept of one. Writes onto the ATTACHED items — a skeleton with nothing bound to it bakes to nothing. | motion | — | Motion | — |
| MotionCapture | Recorded motion driving a rig — a BVH clip, a Spine export, or live landmarks from a camera. Retargeting maps it by bone NAME, so the names are the contract; root translation is kept as a separate track rather than baked into the poses, because a walk whose root motion was dropped is a march on the spot. | motion | — | Motion | — |
| motionWalk | A walk cycle played from saved walk poses. A pose PLAYER, not a generator: it needs at least two poses named walk_00… or walk_contact_L…, which is exactly what the humanoid and quadruped libraries save. | enum | — | ProceduralMotion | — |
| motionIdle | A small continuous shift so a character at rest is not a still image. Finds its bones by NAME — head, hip, upper_hub, spine — and declines on a rig that uses others. | enum | — | ProceduralMotion | — |
| motionBreath | A slow rise and fall through the spine. Finds spine, chest, upper_spine or body by name, and is the cheapest single thing that makes a rig look alive. | enum | — | ProceduralMotion | — |
| motionJump | A parabolic root arc with an impact compression at the landing, cleaning itself up afterwards. Combines a pose layer with root physics, which is why it reads as weight rather than as a translation. | enum | — | ProceduralMotion | — |
| expressionBlink | Eyes close and reopen, periodically. Scales the eye_* roles and hides the pupil_* ones — which is why an imported layer set maps its iris to pupil rather than to a pupil-shaped name. | enum | — | Expression | — |
| expressionSmile | The mouth role curves upward and the eyes narrow slightly. Sustained rather than periodic. | enum | — | Expression | — |
| expressionFrown | The mouth role curves down and the brows draw in. Sustained. | enum | — | Expression | — |
| expressionSurprise | Eyes widen and the mouth opens. Sustained, and the one preset where the eye roles grow rather than shrink. | enum | — | Expression | — |
| DeformRelation | Abstract: vertex-level deformations that move a path's actual segments and bezier handles, rather than applying a transform to the whole item. | abstract | — | ProceduralRelation | — |
| deformFold | Item creases along a fold line and lays flat. Use for paper-fold animations, panel reveals. | deform | procedural | DeformRelation | — |
| deformSqueeze | Item pinches inward symmetrically. Use for cartoon expression, compression visuals. | deform | procedural | DeformRelation | — |
| deformSquash | Item flattens vertically and stretches horizontally (area-preserving). Use for bounce-landing impact, weight. | deform | procedural | DeformRelation | — |
| deformPinch | Item draws toward a central point. Use for vacuum-up, focus pull, gravity well. | deform | procedural | DeformRelation | — |
| deformBulge | Item bows outward from center. Use for inflation, swelling, expansion. | deform | procedural | DeformRelation | — |
| deformTwist | Item rotates progressively along an axis. Use for whirlpool, candy-cane, screw motion. | deform | procedural | DeformRelation | — |
| deformRipple | Item's surface ripples with concentric waves. Use for water disturbance, energy pulse on shape. | deform | procedural | DeformRelation | — |
| deformWave | Item undulates with a traveling sine wave. Use for flag-waving, fabric, liquid surface. | deform | procedural | DeformRelation | — |
| deformBreathe | Item rhythmically scales in and out. Use for living / idle motion, organic presence. | deform | procedural | DeformRelation | — |
| deformMelt | Item droops downward as if liquefying. Use for dissolution, dali-esque scenes, decay. | deform | procedural | DeformRelation | — |
| deformShear | Item slants progressively along one axis. Use for italic-like lean, motion shear, gravity drag. | deform | procedural | DeformRelation | — |
| deformInflate | Item swells uniformly outward. Use for balloon, pre-pop state, growth. | deform | procedural | DeformRelation | — |
| deformWobble | Item jiggles asymmetrically like jelly. Use for playful, liquid, unstable motion. | deform | procedural | DeformRelation | — |
| deformFluidBleed | Item vertices diffuse outward into capillary paper-grain fibers like wet ink. Use for sketch art, watercolor bleeding, and fluid dispersion. | deform | procedural | DeformRelation | — |
| ImageFilter | Abstract per-item GPU image filter applied once to a Raster (not animated) | abstract | — | Concept | — |
| DiagramFlowRelation | Abstract: connector semantics in a diagram notation. The subtype is what the EDGE MEANS — control flow, data flow, association, dependency — and it selects the arrowhead and line style that notation expects. | abstract | — | Relation | — |
| sequenceFlow | Control flow between diagram shapes — \"this step, then that one\". The default flowchart edge; in BPMN and flowchart notation a solid arrow means the process CONTINUES here, which is what distinguishes it from pp:dataFlow. | diagram | — | DiagramFlowRelation | — |
| dataFlow | Data moving between diagram shapes rather than control — what is PASSED, not what happens next. Drawn distinctly from pp:sequenceFlow precisely so a reader can tell the two apart at a glance. | diagram | — | DiagramFlowRelation | — |
| association | A plain structural link between diagram elements, with no direction of control or data implied. In UML this is the weakest relationship — reach for it when the stronger meanings of pp:dependency or pp:sequenceFlow would overstate the link. | diagram | — | DiagramFlowRelation | — |
| dependency | One diagram element requires another: a change to the target may force a change to the source. Conventionally drawn dashed, because the coupling is weaker than containment but stronger than a plain association. | diagram | — | DiagramFlowRelation | — |
| connectsTo | A generic connection between diagram shapes when no notation-specific meaning applies. Prefer a specific subtype where one fits — the specific edge carries meaning into the exported graph, this one carries only adjacency. | diagram | — | DiagramFlowRelation | — |
| EventRelation | Abstract event-channel relation — edge-triggered, frame-coherent dispatch | abstract | edgeTriggered | Relation | — |
| onClickFire | Source item pulses target pp:Event on click. The producer half of the event channel: it names a pp:Event rather than doing anything itself, so any number of reactions can listen to one click without the click knowing about them. | event | edgeTriggered | EventRelation | — |
| onPointerEnterFire | Source pulses target pp:Event when pointer enters its bounds. | event | edgeTriggered | EventRelation | — |
| onPointerExitFire | Source pulses target pp:Event when pointer leaves its bounds. | event | edgeTriggered | EventRelation | — |
| onKeyFire | Source pulses target pp:Event when a key matches and the source has focus (or globally if params.global). Params: { key, modifiers?, global?, preventDefault? }. WCAG 2.2 keyboard-operability primitive. | event | edgeTriggered | EventRelation | — |
| onEventSetProperty | On pp:Event pulse, set target.[property] = value. The general reaction — reach for a specific one (visibility, colour, data) where it fits, since the specific edge says what the interaction MEANS in the exported graph. | event | edgeTriggered | EventRelation | — |
| onEventSetVisibility | On pp:Event pulse, set target.visible. The show/hide half of every tab, accordion and disclosure; pair with pp:exclusiveGroup when only one panel may be open. | event | edgeTriggered | EventRelation | — |
| onEventSetColor | On pp:Event pulse, set target.fillColor or .strokeColor. For selection and hover feedback. Colour is the cheapest state indicator that does not move anything, so it never disturbs layout. | event | edgeTriggered | EventRelation | — |
| onEventSetData | On pp:Event pulse, set target.data[property] = value. Writes to the item's data rather than its appearance — how a scene keeps state (a score, a mode, a flag) that other relations can then read. | event | edgeTriggered | EventRelation | — |
| onEventIncrement | On pp:Event pulse, increment target.data[property] by N. Counters and steppers. Increment rather than set, so several sources can advance the same value without knowing its current one. | event | edgeTriggered | EventRelation | — |
| onEventToggle | On pp:Event pulse, flip target.visible or target.data[property]. | event | edgeTriggered | EventRelation | — |
| onEventSetActive | On pp:Event pulse, activate target in its exclusive_group (clears siblings). | event | edgeTriggered | EventRelation | — |
| onEventFireAfter | On pp:Event pulse, schedule a target pp:Event pulse N ms later. Params: { delay: ms, timeline?: \"wall\" | \"canvas\" }. Default \"wall\" uses setTimeout (real-time). \"canvas\" schedules against app.playbackTime — pauses with timeline pause, seeks with timeline seek, loops with the canvas timeline. Use canvas mode when timing is animation-relative (state changes at t=2s of an animation); use wall mode for real-time effects (cleanup after 2 real seconds). | event | edgeTriggered | EventRelation | — |
| onEventSetPropertyFromTemplate | On pp:Event pulse, write target.[property] with a template-interpolated string. `template` contains `{key}` tokens; each is replaced with the stringified value of target.data[key] (default) or target[key] (when `source: \"item\"`). Missing keys resolve to \"\". Pairs with on_event_increment / on_event_set_data on the same channel to drive counters, formatted readouts, status lines, and debug HUDs — anything where the target text is derived from runtime state. Params: { property, template, source?: \"data\" | \"item\" }. | event | edgeTriggered | EventRelation | — |
| onEventAddRelation | Meta-relation — the graph modifies itself. On pp:Event pulse, app.addRelation(target, params.target, params.type, params.params). Use to attach effects, springs, or any relation in response to an event. | event | edgeTriggered | EventRelation | — |
| onEventRemoveRelation | Meta-relation — the graph modifies itself. On pp:Event pulse, app.removeRelation(target, params.target, params.type). Inverse of onEventAddRelation, used for cleanup chains. | event | edgeTriggered | EventRelation | — |
| exclusiveGroup | Two items belong to the same exclusive group — at most one is active at a time. Activating one via setActive() deactivates siblings and pulses :enter/:exit events. | event | edgeTriggered | EventRelation | — |
| onEnterSetProperty | When source becomes the active member of its exclusive_group, set target.[property] = value. | event | edgeTriggered | EventRelation | — |
| onEnterSetVisibility | When source activates in its group, set target.visible. The enter half of a mutex: it fires when the source BECOMES active in its exclusive group, which is what makes a tab reveal its own panel without every tab knowing about every panel. | event | edgeTriggered | EventRelation | — |
| onExitSetProperty | When source stops being the active member of its exclusive_group, set target.[property] = value. | event | edgeTriggered | EventRelation | — |
| onExitSetVisibility | When source deactivates in its group, set target.visible. The exit half, firing as the source LOSES active status — what hides the outgoing panel. Without it a tab set reveals panels and never hides them. | event | edgeTriggered | EventRelation | — |
| menubarGroup | Two items share a menubar group — together they form a horizontal action bar (toolbar / app menu). The A11yShadowTree matcher promotes to role=\"menubar\" + menuitem with horizontal arrow-key nav. Unlike exclusive_group, no item is \"active\"; clicking a menuitem fires its own on_click_fire reactions. | event | edgeTriggered | EventRelation | — |
| unknownRelation | Relation type not expressible in current vocabulary. Enables vocabulary gap discovery — count and inspect unknown relations to identify missing edge types. | unknown | — | Relation | — |
| onEventStoreSet | On a pp:Event pulse, write `key = value` into a pp:Store. The persistent counterpart of pp:onEventSetData, which only reaches item.data and dies with the page. | event | — | Relation | — |
| onEventStoreIncrement | On a pp:Event pulse, add N to a stored numeric key, creating it at 0 if absent. Increment rather than set, so several sources can advance one score without any of them knowing its current value. | event | — | Relation | — |
| restoresFrom | At LOAD, once, before the first frame, set a property on this item from a stored key — with a fallback when the key is absent. The read half of persistence: without it a store is write-only and continuity across sessions, the entire point, does not exist. | event | — | Relation | — |
| springFollow | Source follows target with spring dynamics — it lags behind, overshoots and settles rather than tracking rigidly. Params: stiffness (0-1), damping (0-1, higher settles sooner), mass, maxDisplacement in pixels. Use for secondary motion: hair, tails, cloth, anything that should feel attached rather than welded. | animation | — | AnimationRelation | — |
| composedAs | ANNOTATION: this item is the root of a composition built from a named pattern. Carries the pattern key. Inert — it moves nothing; it records WHAT the arrangement is so the composition can be recognised, re-applied or queried later. | annotation | — | Relation | — |
| fillsSlot | ANNOTATION: this item occupies slot N of a composition, by 0-based index. Together with pp:composedAs it is what lets a layout be re-run or re-targeted without re-deriving which item went where. | annotation | — | Relation | — |
| hasCameraTreatment | ANNOTATION: how this composition should be FILMED — a treatment key such as a sheet reveal. Records intent for the camera rather than moving it, so the treatment survives a re-layout. | annotation | — | Relation | — |
| syncedToAudio | ANNOTATION: this composition is timed to an audio track, carrying the source asset, the detected bpm and the onset times in seconds. The beats live on the EDGE so they survive save/restore and can be queried, rather than in a local variable. | annotation | — | Relation | — |
| hasTextEffect | ANNOTATION: this glyph is the ROOT of a character-level text effect, and carries what the effect was built FROM — effect key, original content, font size, family, origin, duration and seed. That spec lives on the edge precisely so the effect can be changed or undone without retyping the text. | annotation | — | Relation | — |
| glyphOf | ANNOTATION: this character belongs to a text-effect composition, by 0-based index, pointing back at the root glyph. Membership exists ONLY on this edge — the characters are siblings, not children of a group — which is what lets the composition be selected, re-targeted or removed as one unit. | annotation | — | Relation | — |
| Name | Description | Type | Unit | Animatable |
|---|---|---|---|---|
| x | Horizontal position of the item's CENTRE in canvas pixels. The canvas origin is top-left, so x grows rightward. | number | px | Yes |
| y | Vertical position of the item's CENTRE in canvas pixels. +y points DOWN — the screen convention, not the mathematical one, so a larger y is lower on the canvas. | number | px | Yes |
| width | Overall width in canvas pixels. On a ROTATED item this is applied by straightening the item, scaling in its own frame and re-rotating — scaling the rotated bounding box directly would shear the geometry. | number | px | Yes |
| height | Overall height in canvas pixels, applied in the item's own frame on a rotated item for the same reason as pp:width. | number | px | Yes |
| visible | Whether the item is drawn at all. Unlike pp:opacity 0, a hidden item is removed from the picture entirely — and note that rasterizing a hidden item yields a BLANK image rather than an error. | boolean | — | Yes |
| radius1 | A star's OUTER radius in canvas pixels — the distance from centre to point. | number | px | Yes |
| radius2 | A star's INNER radius in canvas pixels — the distance from centre to the valley between points. The ratio to pp:radius1 is what makes a star read as sharp or as a flower. | number | px | Yes |
| radius | Radius in canvas pixels, from the centre. Defines a Circle outright; on a Star it is the OUTER radius (pp:radius1/radius2 set both), and on an Arc it is the curvature. | number | px | Yes |
| rotation | Rotation in degrees, clockwise. CAUTION: creating an item with a rotation BAKES it into the geometry, after which the item reports a rotation of 0 — so a later absolute write re-rotates and renders at twice the angle. Write through setAbsoluteRotation, which subtracts the baked part; only axis-aligned angles hide the error. | number | deg | Yes |
| scale | Uniform size multiplier where 1 is the item's natural size. On a GROUP a keyframed scale is relative to the captured baseline; on a plain item it is ABSOLUTE, so registering an already-fitted item snaps it back to natural size on the first frame. | number | — | Yes |
| scaleX | Horizontal size multiplier, 1 = natural. Setting it independently of pp:scaleY on a rotated item shears unless the rotation is unbaked first, because scale is conjugated by the decomposed matrix rotation only. | number | — | Yes |
| scaleY | Vertical size multiplier, 1 = natural. Same rotated-item caveat as pp:scaleX. | number | — | Yes |
| opacity | Transparency from 0 (invisible) to 1 (opaque). An item at opacity 0 still occupies the graph, still hit-tests and still exports — use pp:visible to remove it from the picture entirely. | number | — | Yes |
| fillColor | Interior paint. A solid colour, or a GRADIENT — {type: \"linear\"|\"radial\", angle: | color | — | Yes |
| strokeColor | Outline paint. A solid colour or a GRADIENT — the same {type, angle, stops} form pp:fillColor accepts. An item with a stroke colour and no pp:strokeWidth draws nothing. | color | — | Yes |
| shadowColor | Drop-shadow colour. Has no effect without a pp:shadowBlur or a non-zero offset, since a shadow with neither is exactly behind the item. | color | — | Yes |
| strokeWidth | Outline thickness in canvas pixels. Animatable, which is what makes a stroke able to swell or thin over time; 0 removes the outline without clearing pp:strokeColor. | number | px | Yes |
| strokeCap | How an OPEN path ends: butt (flush), round, or square (extends half the stroke width past the end). Invisible on a closed shape, which has no ends. | enum | — | |
| strokeJoin | How two stroke segments meet at a corner: miter (sharp), round, or bevel (flattened). Miter is the default and spikes dramatically at very acute angles. | enum | — | |
| dashArray | Dash pattern as alternating on/off lengths in canvas pixels, e.g. [8, 4]. For a draw-on reveal prefer pp:trimEnd, which animates the path itself rather than a dash phase. | array | px | Yes |
| shadowBlur | Shadow softness radius in canvas pixels. 0 gives a hard-edged copy of the silhouette; the blur costs fill rate, so a large radius on many animated items is the expensive case. | number | px | Yes |
| shadowOffsetX | Horizontal shadow displacement in canvas pixels. With pp:shadowOffsetY it sets the implied light direction — keep it consistent across a scene or the lighting reads as broken. | number | px | Yes |
| shadowOffsetY | Vertical shadow displacement in canvas pixels; positive is DOWN, matching pp:y. | number | px | Yes |
| fontSize | Authored type size in canvas pixels. The RENDERED size is fontSize × the item's scaling, because dragging a resize handle changes scaling and leaves fontSize alone — so reading fontSize on a resized headline reports the original, not what is on screen. | number | px | Yes |
| fontFamily | Font family name, resolved against the fonts available to the page. A family that is not present falls back silently, which changes metrics and therefore layout — not just appearance. | string | — | |
| fontWeight | Font weight — a keyword ('normal', 'bold') or a numeric string ('600'). A weight the family does not ship is synthesised or ignored depending on the browser. | string | — | |
| textAlign | Horizontal alignment of the text relative to its own position point: left, center or right. This moves the text ABOUT its anchor; it does not move the anchor. | enum | — | |
| content | The characters displayed. Animatable, which is what a typewriter reveal keyframes — and changing it re-measures the item, so bounds-dependent work (masks, layout) must run after, not before. | string | — | Yes |
| blendMode | How the item composites against what is behind it — multiply and darken to deepen, screen and lighten to lift, overlay and soft-light for contrast. On an animated item it combines expensively with a shadow, which the engine decomposes automatically into a shadow twin. | enum | — | Yes |
| routing | The path a connector takes between two shapes: direct (straight), orthogonal (right-angled, for flowcharts) or curved. Routing is recomputed as the shapes move, so it is a rule rather than a stored geometry. | enum | — | |
| lineStyle | Connector stroke pattern: solid, dashed or dotted. Convention in most diagram notations is that dashed means a weaker or optional relationship — the style carries meaning, not just appearance. | enum | — | |
| headStyle | Arrowhead at the connector's TARGET end: classic, stealth, sharp, open, diamond, circle, or none. In UML the head is what distinguishes association from inheritance from composition. | enum | — | |
| tailStyle | Marker at the connector's SOURCE end, from the same set as pp:headStyle. Defaults to none; a tail marker is what makes a relation read as bidirectional or as composition. | enum | — | |
| connectorLabel | Text placed on the connector, positioned along the route and re-placed when the route changes. Prefer it to a free-floating text item, which will not follow the edge. | string | — | |
| shapeCategory | Which notation the shape belongs to: flowchart, uml, network or basic. It selects the shape's default ports and styling, so it determines where connectors attach. | enum | — | |
| closed | Whether path forms a closed region. Determines ontological subtype (OpenPath vs ClosedPath). | boolean | — | |
| curveType | Mathematical function family governing segment interpolation. The functional representation that defines the path. | enum | — | |
| segmentCount | Number of anchor points defining the path. Read-only in practice — it is a consequence of the geometry, and the way to change it is to change the path. | number | — | |
| trimStart | Where the visible portion of a path BEGINS, as a fraction from 0 to 1 of its length. With pp:trimEnd it produces the line-draw effect; animating start and end together sweeps a segment along the path. | number | — | Yes |
| trimEnd | Where the visible portion of a path ENDS, 0 to 1. Keyframing it from 0 to 1 is the canonical draw-on reveal, and unlike a dash pattern it follows the path's own arc length. | number | — | Yes |
| trimOffset | Rotates the trimmed window along the path, 0 to 1, without changing its length. On a closed path this makes the visible segment travel around the outline continuously. | number | — | Yes |
| pitch | Fundamental pitch — a note name (\"A4\", \"C#3\") or a base frequency in Hz. | string | — | Yes |
| chordKind | Renowned chord pattern; expands to frequency partials over the root. | enum | — | |
| timbre | Waveform → the additive harmonic partial set that gives the voice its color. | enum | — | |
| envelope | ADSR amplitude contour [attack, decay, sustain, release] as a keyframe signal over [t0,t1]. | array | s | |
| gain | Output level for the voice, 0 (silent) to 1. Clamped, so summing several voices at full gain does not clip the master — it just stops getting louder. | number | — | Yes |
| pan | Stereo position from -1 (fully left) through 0 (centre) to +1 (fully right). | number | — | Yes |
| soundWindow | [t0, t1] — when the sound plays on the timeline. Also fireable via an event relation (on_click_fire → play). | array | s | |
| detailedAcoustic | Handle to a sibling ppa: deep-synthesis descriptor (FM index curves, HRTF, resonance leak coefficients). Author-facing fields stay on pp:; the deep surface lives in ppa: (deferred). | string | — |
Mathematical primitives used in animation drivers, relation solvers, and generator physics. Each entry serializes as a pp:MathFunction in the TTL.
| Name | Category | Formula |
|---|---|---|
| lerp | interpolation | a + (b-a)*t |
| cubicBezier | interpolation | (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃ |
| catmullRom | interpolation | Catmull-Rom spline through control points |
| easeIn | easing | t² |
| easeOut | easing | 1-(1-t)² |
| easeInOut | easing | t<0.5 ? 2t² : 1-(-2t+2)²/2 |
| easeInCubic | easing | t³ |
| easeOutCubic | easing | 1-(1-t)³ |
| bounce | easing | Piecewise parabolas |
| elastic | easing | 2^(-10t)·sin((10t-0.75)·c₄)+1 |
| customCubicBezier | easing | cubic-bezier(x1,y1,x2,y2) |
| sinOscillation | trigonometric | center + amplitude·sin(ω·t + φ) |
| sinCos | trigonometric | sin(θ), cos(θ) |
| phaseOffsetSinusoid | trigonometric | A·sin(ω·t - i·φ) |
| parametricCircle | parametric | x=r·cos(θ), y=r·sin(θ) |
| parametricEllipse | parametric | x=rx·cos(θ), y=ry·sin(θ) |
| spiral | parametric | r(θ)=a+bθ |
| euclideanDistance | spatial | √((x₂-x₁)²+(y₂-y₁)²) |
| atan2 | spatial | atan2(y₂-y₁, x₂-x₁) |
| axisReflection | spatial | v-2(v·n̂)n̂ |
| rigidOffset | spatial | target.pos + offset |
| rectClamp | spatial | clamp(x, min, max) |
| depthScaledTranslation | spatial | base + scroll·depth |
| affineTransform | transform | x'=ax+cy+e, y'=bx+dy+f |
| deltaRotation | transform | item.rotate(shortestPathDelta) |
| linearBlendSkinning | transform | v' = Σ w_i · M_i · v (weighted sum of bone matrices applied per vertex) |
| exponentialPursuit | physics | pos += (target-pos)·lag |
| dampedHarmonicOscillator | physics | e^(-ζω₀t)(Acos(ωd·t)+Bsin(ωd·t)) |
| gravity | physics | y += vy·dt + ½g·dt² |
| perlinNoise | noise | Gradient noise [-1,1] |
| fbm | noise | Σ persistence^i · noise(x·lacunarity^i) |
| colorLerp | color | lerp per RGB/HSL channel |
| gradientInterpolation | color | Stop-wise gradient lerp |
| fabrikSolver | solver | Forward And Backward Reaching IK |
| linearMap | mapping | source = target·multiplier + offset |
| mathExpression | expression | User-defined f(t,v) |
| keyframeLerp | interpolation | Multi-keyframe piecewise lerp |
| scaleInterpolation | interpolation | Scale 0→1 with easing |
| delayOffset | timing | delay = index · stagger |
| pulseScale | animation | Temporary scale pulse |
| boundingGeometry | geometry | Bounding box/circle calculation |
| pathPointLerp | interpolation | Per-point path interpolation |
| proximityThreshold | spatial | dist < radius → trigger |
| timedCycling | timing | mode[floor(t/cycleDur) % n] |
| trimPath | path | dashArray/dashOffset trimming |
| staggerDelay | timing | index × delay |
| expression | expression | math.js compiled expression evaluation |
| ode | solver | Ordinary Differential Equation numerical integration |
| rk4 | solver | Fourth-order Runge-Kutta: y(n+1) = y(n) + (k1+2k2+2k3+k4)/6 |
| dynamicSystem | solver | State-space model: dx/dt = f(x,t,params) |
| fft | signal | Cooley-Tukey radix-2 Fast Fourier Transform |
| signalProcessing | signal | Signal generation, windowing, filtering |
| parametricSurface | geometry | S(u,v) = (x(u,v), y(u,v), z(u,v)) |
| projection3d | geometry | Perspective projection: 2D = 3D × fov/(fov+z) |
Structural archetypes for motion-graphics compositions — each pattern names the node types, edges, and math functions it requires.
| Name | Description | Required Edges | Node Types | Math Functions |
|---|---|---|---|---|
| orbitalComposition | Items revolving around a central element at differing radii and speeds. Reads as a system with a centre — solar systems, hubs, anything where one element is clearly primary. | orbits | — | — |
| staggeredReveal | Items entering one after another on a fixed delay rather than together. The stagger is what makes a group read as a sequence instead of a block, and it is the cheapest way to direct a viewer's reading order. | staggeredWith | — | — |
| parallaxDepth | Layers moving at different rates to imply depth — nearer layers travel further for the same camera move. The rate RATIO carries the depth; equal rates flatten the scene instantly. | parallax | — | — |
| followChain | Each item follows the one before it, so motion propagates down the chain with lag. Produces tails, trains and snake-like motion from a single driven head. | follows | — | — |
| waveMotion | A displacement travelling through a row of items with a phase offset per index. The offset is the wave; without it every item moves in unison and the effect disappears. | waveThrough | — | — |
| maskReveal | Content uncovered by an animated mask rather than faded in — a wipe, iris or shape reveal. Use when the SHAPE of the reveal should carry meaning; a plain fade carries none. | — | MaskedItem | — |
| skeletalAnimation | Artwork bound to a bone hierarchy so a pose drives the drawing. The right choice when the same character must take many poses; per-item keyframes are the right choice when it takes one. | — | Skeleton, Bone | — |
| keyframeAnimation | Explicit property values at explicit times, interpolated between. The most controllable form and the one that exports natively to SMIL and Lottie. | — | — | keyframeLerp |
| proceduralBackground | A generated backdrop — noise, gradients, fields — computed rather than drawn. Costs nothing to restyle and never needs an asset, which is why it suits templates. | — | — | — |
| trimPathDraw | A stroke revealed along its own length by animating pp:trimEnd, so the line appears to be drawn. Follows the path's arc length, unlike a dash animation. | — | — | trimPath |
| diagramFlow | Shapes joined by connectors that re-route as the shapes move. The general diagram arrangement; the notation-specific patterns below narrow it. | — | DiagramShape, Connector | — |
| diagramFlowchart | A process as boxes and arrows, linear or branching, with decisions as diamonds. Reach for it when the subject is a SEQUENCE of steps. | sequenceFlow | FlowchartShape, SequenceConnector | — |
| diagramUML | A UML class or use-case diagram, where the arrowhead and line style carry formal meaning — inheritance, composition, dependency are distinguished by notation, not by label. | — | UMLShape | — |
| diagramNetwork | Nodes and links where TOPOLOGY is the subject rather than sequence — what is connected to what, not what happens first. | — | NetworkShape | — |
| diagramDecisionTree | Branching paths from a single root, each branch a condition. Use when the subject is a choice with consequences; a flowchart when it is a process with steps. | — | DecisionShape | — |
| mapVisualization | Geographic data on a projected basemap — choropleth fills, markers, region highlights. The projection is a real choice: it decides which areas are exaggerated. | — | MapRegion | — |
| morphTransition | One shape becoming another by interpolating vertices, rather than by cross-fading two shapes. Requires comparable geometry; wildly different vertex counts produce a shape that passes through nonsense. | morphsTo | — | — |
| collageText | Text rebuilt as per-letter artwork so each character can be styled or animated independently. Consumes the original text item, so apply it after the wording is settled. | — | LetterCollage | — |
| cameraAnimation | The viewport itself moving — zoom, pan, focus — rather than the items. Moves the whole scene coherently and costs one animated entity instead of many. | cameraFollows, cameraAnimates | — | — |
| proceduralNoise | Motion driven by smoothed pseudo-random values, giving organic drift that never exactly repeats. Seeded, so it is deterministic and replays identically. | wiggle | — | — |
| expressionDriven | Properties computed from a math expression of time or of another property. The right choice when the relationship is a formula rather than a set of poses. | timeExpression | — | — |
Drawing functions invoked at canvas-init time to produce scene content (geometric patterns, math plots, simulations, etc.).
| Name | Description | Parent | Category | Math Functions |
|---|---|---|---|---|
| ProceduralGenerator | Abstract root of the generators — functions that DRAW rather than items that are placed. A generator produces its own content from parameters and a seed, so it costs no assets and restyles by re-running. | — | abstract | — |
| ParticleGenerator | Abstract: generators that emit many small elements — stars, bokeh, confetti, fireflies. Cost scales with the element count, which is the parameter to watch on a phone. | ProceduralGenerator | abstract | — |
| FieldGenerator | Abstract: generators driven by a continuous field sampled across the canvas — noise, flow, gradients. Smooth by construction, so they suit backdrops rather than focal content. | ProceduralGenerator | abstract | — |
| PatternGenerator | Abstract: generators that repeat a motif on a lattice — grids, truchet tiles, halftones, stripes. Regular by construction, which is why they read as designed rather than as texture. | ProceduralGenerator | abstract | — |
| SceneGenerator | Abstract: generators that compose a whole scene — horizons, skies, landscapes. They assume they own the background, so layering two of them rarely reads well. | ProceduralGenerator | abstract | — |
| MathGenerator | Math-driven generator — evaluates expressions / ODEs / FFT / parametric surfaces to produce visual content | ProceduralGenerator | abstract | — |
| drawSunburst | Radial rays emanating from a center point. Use for solar emblems, celebratory backgrounds, retro motifs. | PatternGenerator | pattern | sinCos, parametricCircle |
| drawGrid | Uniform grid pattern. Use for blueprint backgrounds, technical aesthetics, layout reference. | PatternGenerator | pattern | lerp |
| drawWaves | Layered horizontal sine waves. Use for water surfaces, audio waveforms, ocean backgrounds. | PatternGenerator | pattern | sinOscillation |
| drawPattern | Tileable geometric pattern (chevrons, hexagons, polkadots). Use for textured backgrounds, brand backdrops. | PatternGenerator | pattern | parametricCircle, sinCos |
| drawSunsetScene | Layered horizon scene with sky-color gradient. Use for landscape backdrops, mood-setting backgrounds. | SceneGenerator | scene | lerp, colorLerp |
| drawFunctionPlot | Plots a math expression y=f(x) over an x-range. Use for math illustrations, function visualization, education. | MathGenerator | math | expression, keyframeLerp |
| drawParametricCurve | Plots a parametric (x(t), y(t)) curve over a t-range. Use for Lissajous figures, spirals, parametric art. | MathGenerator | math | parametricCircle, sinCos |
| draw3DParametricCurve | Plots a 3D parametric curve (x(t), y(t), z(t)) projected to the canvas with rotation + perspective. Use for helices, knots, spherical spirals, space-curve math art. | MathGenerator | math | expression, parametricCircle, projection3d |
| drawSimulation | Renders a live ODE-based dynamic system (pendulum, Lorenz, spring-mass). Use for physics demos, chaos, science visuals. | MathGenerator | math | ode, rk4, dynamicSystem |
| drawSpectrumAnalyzer | Renders a signal's frequency spectrum via FFT. Use for audio visualizers, signal-processing demos, abstract data motion. | MathGenerator | math | fft, signalProcessing |
| draw3DSurface | Parametric 3D surface with perspective projection (Klein bottle, Möbius strip, torus). Use for math art, geometry visualization. | MathGenerator | math | parametricSurface, projection3d |
| drawStackedCircles | Vertical stack of overlapping circles. Use for snowman-shapes, decorative beadwork, abstract sculpture forms. | ParticleGenerator | scene | parametricCircle |
| drawCircuit | Maze-like circuit-board pattern with nodes and traces. Use for tech backdrops, sci-fi panels. | PatternGenerator | scene | lerp |
| drawBokeh | Soft circular out-of-focus light dots. Use for photographic bokeh, romantic blur, ambient highlights. | ParticleGenerator | particle | parametricCircle |
| drawGradientMesh | Smooth multi-color noise gradient. Use for atmospheric backdrops, mood lighting. | FieldGenerator | organic | perlinNoise |
| drawGeometricAbstract | Randomized composition of overlapping geometric shapes. Use for abstract art, modern poster backdrops. | SceneGenerator | pattern | lerp |
| drawWindField | Flow-field of streaming particles driven by Perlin noise. Use for wind visualization, smoke trails, atmospheric motion. | FieldGenerator | particle | perlinNoise, fbm |
| drawFluidFlow | Curving streamlines suggesting fluid motion. Use for water / wind / lava illustration, organic backdrops. | FieldGenerator | organic | perlinNoise, fbm |
| drawOrganicFlow | Flowing curves that breathe and shift over time. Use for living abstract backgrounds, mood ambience. | FieldGenerator | organic | sinOscillation, perlinNoise |
| drawNoiseTexture | Static or animated noise texture. Use for grain overlays, paper textures, depth-cueing backgrounds. | PatternGenerator | organic | perlinNoise, fbm |
| drawTruchet | Seeded Truchet tiling of quarter-arc or diagonal tiles, colored from an OKLCH palette. Use for flowing maze textures, generative line art, circuit-like backdrops. | PatternGenerator | pattern | parametricCircle |
| drawHalftone | Grid of dots whose radius rides a tone field (noise / radial / linear) with color from an OKLCH palette. Use for print-halftone looks, soft textured backgrounds, retro pop art. | PatternGenerator | pattern | perlinNoise, parametricCircle |
| drawRibbons | Smooth Bézier ribbons undulating across a shared Perlin noise field, colored from an OKLCH palette. Use for flowing aurora / silk / current backdrops, organic motion. | FieldGenerator | organic | perlinNoise, fbm |
| drawStackedWaves | Layered filled cubic-Bézier wave bands stacked at increasing baselines with an OKLCH palette ramp. Use for hero backgrounds, section dividers, ocean/dune/hill backdrops. | PatternGenerator | pattern | sinOscillation |
| drawBlobs | Soft organic blob shapes (smoothed paths through a jittered circle), colored from an OKLCH palette. Use for playful backgrounds, sticker shapes, lava/bubble motifs. | FieldGenerator | organic | parametricCircle |
| drawFallingPetals | Gentle falling petals drifting downward with wind sway. Use for spring, romantic, celebration, wedding, birthday designs. | ParticleGenerator | nature | sinOscillation |
| drawFireflies | Glowing firefly dots drifting in organic patterns. Use for magical, night, forest, warm summer evening moods. | ParticleGenerator | nature | perlinNoise |
| drawFloatingLeaves | Leaves drifting on wind currents with gentle rotation. Use for autumn, nature, organic, calming backgrounds. | ParticleGenerator | nature | sinOscillation, perlinNoise |
| drawGlowOrbs | Soft glowing orbs drifting slowly. Use for magical, dreamy, ethereal, ambient backgrounds. | ParticleGenerator | decorative | parametricCircle |
| drawConcentricRings | Expanding concentric ring patterns. Use for ripple, radar, target, hypnotic, meditative designs. | PatternGenerator | decorative | parametricCircle, sinOscillation |
| drawCornerAccents | Decorative corner flourishes framing the canvas. Use for certificates, invitations, formal designs, polished frames. | PatternGenerator | decorative | lerp |
| drawFlowCurves | Elegant flowing curve lines across the canvas. Use for luxury, fashion, minimal, sophisticated backgrounds. | PatternGenerator | decorative | sinOscillation, perlinNoise |
| drawLowPoly | Triangulated low-poly background — a jittered vertex grid split into triangles, each facet flat-filled from an OKLCH gradient. Use for modern geometric backdrops, crystalline textures. | PatternGenerator | pattern | lerp |
| drawPeaks | Stacked zig-zag mountain/ridgeline bands closed to the canvas bottom with an OKLCH palette ramp. Use for layered-mountain backdrops, ridge silhouettes, outdoor scenes. | PatternGenerator | scene | lerp |
| drawScatter | A scattered field of small shapes (circles / triangles / squares) sized and colored from an OKLCH palette. Use for confetti, starfields, particle textures, decorative speckle. | ParticleGenerator | particle | parametricCircle |
| drawGPUPlasma | Immersive fractal plasma — FBM noise + domain warp + animated cosine palette. Use for organic, fluid, trippy backgrounds. GPU-accelerated. | FieldGenerator | gpu | perlinNoise, fbm |
| drawGPUStarfield | Multi-layer parallax starfield with twinkling stars. Use for space, night sky, sci-fi backgrounds. GPU-accelerated. | FieldGenerator | gpu | sinOscillation |
| drawGPUVoronoi | Animated Voronoi tessellation with glow edges. Use for cellular, organic, abstract tech backgrounds. GPU-accelerated. | FieldGenerator | gpu | euclideanDistance |
| drawGPUOcean | Multi-layer sine waves with specular sun highlights and depth coloring. Use for ocean, sea, water backgrounds. GPU-accelerated. | SceneGenerator | gpu | sinOscillation |
| drawGPUClouds | Volumetric FBM cloud field with warm edge lighting and sky gradient. Use for sky, atmosphere, dreamy backgrounds. GPU-accelerated. | SceneGenerator | gpu | perlinNoise, fbm |
| drawGPUCaustics | Underwater caustic light patterns — Voronoi-based with deep blue to cyan palette. Use for underwater, pool, ocean-floor scenes. GPU-accelerated. | FieldGenerator | gpu | euclideanDistance |
| drawGPUTunnel | Rotating checkered tunnel with depth fog in warm tones. Use for portal, vortex, hypnotic, retro sci-fi backgrounds. GPU-accelerated. | FieldGenerator | gpu | parametricCircle |
Compound value shapes (vectors, points, gradients, keyframes) that property values commit to.
| Name | Description | Fields | Anchor |
|---|---|---|---|
| Point2D | A canvas coordinate {x, y} in pixels, origin top-left, +y DOWN. | x, y | — |
| BoundingBox | An axis-aligned rectangle {x, y, width, height} in canvas pixels. On a ROTATED item this is the bounding box of the rotated shape, so it is larger than the item and scaling it directly shears the geometry. | x, y, width, height | — |
| Canvas | The coordinate space items live in: {width, height, backgroundColor}. Distinct from the backing store, which is larger by the device pixel ratio — sizing an overlay to one when you meant the other is a common off-by-DPR error. | width, height, backgroundColor | — |
| Keyframe | A property snapshot at a time: {time, properties, easing}. Time is in SECONDS. The easing applies to the segment ENDING at this keyframe, not the one leaving it. | time, properties, easing | — |
| KeyframeAnimation | Ordered keyframes with duration — discrete property targets at specific times | keyframes, duration, loop | — |
| LoopAnimation | Continuous frame-based animation preset (pulse, rotate, bounce, etc.) | animationType, animationSpeed, animationDirection | — |
| EasingFunction | A timing curve {type, params} — a named ease or an explicit cubic bezier [x1,y1,x2,y2]. Named eases here are QUADRATIC, which is why they do not match the CSS curves of the same name. | type, params | — |
| Timeline | Global playback state {duration, loop, currentTime}. Scene time, not wall-clock: everything that reads it scrubs and exports identically, which is why nothing in the engine should read a clock directly. | duration, loop, currentTime | — |
| Viewport | Camera state {zoom, center, rotation}. Zoom is a multiplier on the view, so an overlay drawn in screen pixels must divide by it to stay a constant on-screen size. | zoom, center, rotation | — |
| MaskAnimation | An animated reveal {maskType, keyframes, duration, easing}. Its keyframes belong to the MASK, not the item — they are kept separate so they never double-apply as item transforms. | maskType, keyframes, duration, easing | — |
Fixed-set values picked by scene authors for properties like animation curve, aura mode, and image filter. Each entry serializes as a skos:Concept with skos:broader linking to its parent enumeration scheme.
| Name | Description | Category | Scheme |
|---|---|---|---|
| shaderStageItem | A fragment shader drawn over one canvas item and clipped to its silhouette. The only stage open to authoring, because it is the only one whose architecture already gives every effect its OWN program — so adding one is a registration rather than an edit to shared source. The vertex stage is fixed: a full-screen quad providing v_uv. | enum | ShaderStage |
| shaderStageMesh | A custom vertex AND fragment program over caller-supplied geometry, drawn in a pp:World3D. The one stage that accepts a VERTEX program, which is what makes writing a material possible rather than choosing from the built-in six. Two declared limits: a custom program has made no promise about what it writes to depth, so these are skipped in the shadow pass rather than corrupting every other object's shadow; and their geometry is typed arrays, which do not JSON-serialize, so it is not persisted. | enum | ShaderStage |
| shaderStageFilter | A full-frame image filter. NOT open to authoring: all 27 filters share one compiled program selected by an integer switch, so adding one means editing shared source — and a single reserved word in that unit once made every filter in the product return transparent black. Splitting it into per-filter programs would open this stage and remove that blast radius at once. | enum | ShaderStage |
| shaderStageMaterial | The surface of a 3D object in a pp:World3D. NOT open to authoring: the renderer holds six fixed programs against three fixed meshes with no per-object program path, so opening it means an attribute contract and arbitrary geometry rather than somewhere to put a fragment shader. | enum | ShaderStage |
| auraModeInside | Shader fills the item silhouette (destination-in mask). Use when the effect should read as the item's own material rather than as something around it. | enum | AuraMode |
| registerNaive | Flat colour, even spacing, symmetric placement, decoration welcome. The register of a nursery poster or a picture book. Also where undirected output lands by default, which is why naming it matters: it is a legitimate idiom, not a bug, and calling it by name separates \"chose this\" from \"chose nothing\". | enum | DesignRegister |
| registerPlayful | Rounded forms, a warm limited palette, bouncy motion. Restrained enough to read as designed, loose enough to stay friendly. | enum | DesignRegister |
| registerPoster | One dominant hue and enormous type contrast, readable across a room. Scale does the work, so the type-scale ratio is the highest of any register. | enum | DesignRegister |
| registerEditorial | Ink plus one or two hues, a modular type scale, hairline rules, asymmetric balance, and negative space treated as a subject rather than as leftover. Motion only where it carries meaning. | enum | DesignRegister |
| registerTechnical | Monochrome with a single accent, a tight grid, monospace labels, no ornament at all. A diagram, not a picture. | enum | DesignRegister |
| designLevelSketch | Level 1. Defaults accepted: no optical correction, no considered type scale, budgets untightened. | enum | DesignLevel |
| designLevelCompetent | Level 2. One consistent type scale and one grid, held throughout the composition. | enum | DesignLevel |
| designLevelRefined | Level 3. Optical alignment rather than merely mathematical, a tightened palette, and whitespace placed deliberately. | enum | DesignLevel |
| designLevelArtDirected | Level 4. A concept drives every choice and exactly one rule is broken on purpose. Meaningless below this level, where the rules are not yet kept reliably enough for a break to read as intent rather than error. | enum | DesignLevel |
| mediumVector | Flat fills, clean edges, uniform strokes. The engine's own idiom and a real medium in its own right — screen-print and modern flat illustration live here. | enum | DesignMedium |
| mediumThread | Needlepainting: rows of directional stitches that follow the form, so a feather or a petal reads as volume rather than as fill. Native because a stitch IS vector geometry — a short oriented segment with a taper and a sheen — which makes a vector engine genuinely better at this medium than a raster painting engine. | enum | DesignMedium |
| mediumInk | Pen and brush marks with pressure-varying width and hard edges. Native: the existing brush profiles already make these marks, so no new geometry is required. | enum | DesignMedium |
| mediumCutPaper | Flat shapes with a cut edge and a cast shadow, layered. Native: a vector silhouette with an offset shadow is the medium rather than an approximation of it. | enum | DesignMedium |
| mediumCharcoal | Granular tooth and smudged edge. Stylised: the grain is a shader over a silhouette, not deposited pigment — there is no smudging, no lifting and no true tonal blending. | enum | DesignMedium |
| mediumOil | Impasto volume, glazing, wet-in-wet blending, softened edges. Stylised: the signature is subsurface and continuous-tone, and impasto relief, glaze translucency and blended edges are pigment behaviour rather than geometry. The engine can suggest brush-shaped marks and a loaded palette; it cannot produce the medium. | enum | DesignMedium |
| mediumEncaustic | Pigmented wax fused with heat: translucent depth built in layers, with edges that flow rather than end. Absent, and registered precisely so it can be refused with that reason — volumetric layered translucency has no vertex-level expression, and a flat approximation would misrepresent the medium rather than approximate it. | enum | DesignMedium |
| fidelityNative | The medium's characteristic marks ARE vector geometry. The engine makes the medium, not an impression of it. | enum | MediumFidelity |
| fidelityStylised | A recognisable impression of the medium, said out loud rather than implied. Every stylised medium carries a limitation naming exactly what it cannot do. | enum | MediumFidelity |
| fidelityAbsent | The medium has no vertex-level expression. Registered so a request for it is REFUSED with a reason instead of quietly attempted — a wrong answer with an explanation beats a plausible one without. | enum | MediumFidelity |
| stitchSatin | Parallel stitches spanning edge to edge, filling a narrow shape in one flat sheet. The stitch that gives a petal or a letter its sheen, because every thread lies the same way and catches light together. | enum | StitchKind |
| stitchLongAndShort | Satin worked in staggered lengths so successive rows interlock instead of banding. The stitch that makes needlepainting shade continuously — the variance in stitch length IS the blend. | enum | StitchKind |
| stitchSeed | Short stitches scattered at many angles. Texture rather than direction — used to break up a flat area or to suggest granularity without describing form. | enum | StitchKind |
| stitchStem | Overlapping slanted stitches following a line, making a rope-like outline. The stitch for stems, contours and any edge that should read as drawn rather than cut. | enum | StitchKind |
| auraModeOutside | Shader appears as a halo around the item edge (destination-out mask) | enum | AuraMode |
| auraModeOverlay | Shader stylizes the item via multiply blend on its silhouette — item content stays visible underneath | enum | AuraMode |
| curveLinear | Identity transform: continuous monotonic time, ideal for fbm warping | enum | AnimationCurve |
| curveSine | Smooth 0..1 oscillation at speed Hz. The default for breathing, pulsing and anything that should feel alive — no corners, so nothing reads as mechanical. | enum | AnimationCurve |
| curveTriangle | Sharp linear up-and-down 0..1 oscillation. Reads as mechanical or metronomic precisely because of the corners; choose it over sine when regularity should be visible. | enum | AnimationCurve |
| curvePulse | Square wave on/off at speed Hz. For blinking, flashing and hard state changes — there is no in-between value to catch the eye. | enum | AnimationCurve |
| curveEase | Smooth s-curve from 0 to 1 each cycle (slow-fast-slow). The natural choice for a single considered movement, since real objects accelerate and decelerate. | enum | AnimationCurve |
| curveSawtooth | Linear ramp 0..1 then instantaneous reset. For anything that fills then resets — progress, refills, repeating sweeps. The reset is instantaneous and deliberately visible. | enum | AnimationCurve |
| curveBounce | Decaying bouncing oscillation each cycle. For impacts and landings, where the settling is what sells the weight. | enum | AnimationCurve |
| curveNoise | Smoothed pseudo-random walk in 0..1. For organic drift — flame, foliage, handheld camera. Seeded, so it replays identically. | enum | AnimationCurve |
| filterGrayscale | Desaturation toward luminance-weighted gray. Use to subordinate an image so foreground content reads, or to unify photos from different sources. | imageFilter | ImageFilter |
| filterSepia | Sepia tone — warm brown desaturation. Reads as archival or nostalgic; a period cue rather than a colour correction. | imageFilter | ImageFilter |
| filterBrightness | Additive brightness shift (-1..1). Additive, so it lifts shadows and can clip highlights — for a change that preserves contrast use pp:filterContrast instead. | imageFilter | ImageFilter |
| filterContrast | Contrast scale around mid-gray. Pushes values away from mid-gray, so it deepens and brightens at once; heavy values clip both ends. | imageFilter | ImageFilter |
| filterSaturation | Saturation lerp between luma and rgb. 0 is grayscale and values above 1 oversaturate; a small reduction is the usual way to make an image sit behind text. | imageFilter | ImageFilter |
| filterInvert | Negative inversion (1 - rgb). A hard, graphic effect — for negatives and glitch treatments, not for correction. | imageFilter | ImageFilter |
| filterPosterize | Quantize each channel to N levels for a flat-color look. Fewer levels reads as screen-print or poster art; it is the flat-colour look, so it destroys gradients by design. | imageFilter | ImageFilter |
| filterHsl | HSL space adjustment (hue rotation, saturation, lightness). The precise tool for shifting a palette without touching lightness relationships — prefer it to a tint when the image must stay photographic. | imageFilter | ImageFilter |
| filterColorTint | Colored tint blended via multiply/screen/overlay. For brand colouring and duotones; the blend mode decides whether the tint deepens (multiply) or lifts (screen). | imageFilter | ImageFilter |
| filterVignette | Radial darkening from center to corners. Directs the eye to the centre. Subtle values read as lens character; strong ones read as an effect. | imageFilter | ImageFilter |
| filterEdgeDetect | Sobel-style edge detection emphasizing high-frequency contrast | imageFilter | ImageFilter |
| filterDither | Ordered Bayer 4×4 dithering for retro/limited-palette look. Retro and limited-palette looks; it trades smooth gradients for a visible pattern on purpose. | imageFilter | ImageFilter |
| filterHalftoneDots | Single-channel halftone dot pattern at configurable angle (newspaper-print look) | imageFilter | ImageFilter |
| filterHalftoneCMYK | Four-plate CMYK halftone separation with rosette angle offsets (15°/75°/0°/45°) | imageFilter | ImageFilter |
SKOS concept schemes for non-binary classification (mood, style, complexity). Each scheme's values are reachable as pp:<dim>_<value> concepts.
| Dimension | Count | Concepts |
|---|---|---|
| moods | 21 | energeticcalminspiringplayfulelegantdramaticmysteriousprofessionalwhimsicalnostalgicfuturisticwarmcoolfestivesolemnboldminimalorganicromanticcheerfulsummery |
| visualStyles | 23 | bold-typographyradial-backgroundparticle-effectsgeometricorganic-flowcinematicflat-designgradient-meshcircuit-boardhand-drawncollagedata-visualizationwave-patternsneon-glowskeletal-animationmask-revealtext-revealletter-by-letterfloral-patternstropicalconfettiacademicnature-inspired |
| colorSchemes | 11 | vibrantmutedmonochromedarklightneonpastelwarmcoolearthcontrast |
| audiences | 9 | creatorsgeneralbusinessstudentsdeveloperschildrenmultilingualindigenousmarketers |
| intents | 11 | inspireinformsellentertainteachcelebrateannouncedemonstratebrandgreetinvite |
| animationComplexities | 5 | staticsimplemoderatecomplexadvanced |
| compositionStyles | 8 | centeredasymmetricgridlayeredradialflowingsplitfull-bleed |
| contentTypes | 8 | text-focusedshape-focusedmixeddiagrammapcharacterscenedata-driven |
| designIntents | 4 | structuraldecorativetemporalinteractive |
Graph-based chart-type classification links — connect a chart class to its mark, coordinate system, encoding, task, and composition dimensions.
| Name | Description | Domain | Range |
|---|---|---|---|
| usesMark | The geometric primitive that represents each datum — bar, point, line, area. The mark is the first choice in a grammar of graphics, and it constrains which encodings are legible afterwards. | DataVisualization | MarkType |
| usesCoordinates | The coordinate system data is mapped into — Cartesian, polar, geographic. Changing it changes what comparisons are easy: polar makes cycles obvious and magnitudes hard. | DataVisualization | CoordinateSystem |
| primaryEncoding | The visual channel carrying the main variable — position, length, angle, colour. Position and length are read most accurately; colour and area least, which is why the primary variable should take one of the first two. | DataVisualization | EncodingChannel |
| secondaryEncoding | An additional channel layered on the mark, such as size in a bubble chart. Each extra channel costs legibility, so a second is often the last one worth adding. | DataVisualization | EncodingChannel |
| analyticalTask | The question the chart is meant to answer — comparison, trend, distribution, correlation, part-to-whole. Naming the task is what makes a chart choice defensible rather than decorative. | DataVisualization | AnalyticalTask |
| defaultComposition | How multiple series are combined by default — overlaid, stacked, or faceted. Stacking shows a total and obscures individual series; faceting does the reverse. | DataVisualization | CompositionMode |