PinePaper Studio Ontology

Formal OWL vocabulary for canvas elements, relations, animations, generators, and semantic dimensions.

Version: 0.5.2-beta Generated: 2026-05-25 License: CC0 1.0 (Public Domain)
Free to use, no attribution required. The PinePaper Studio Ontology (the 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.)

Downloads

Summary

Namespace

@prefix pp: <https://pinepaper.studio/ontology/>

Classes (Node Types)

NameDescriptionParentAnchorAbstractParameters
ConceptAbstract conceptual resource — addressable independently of canvas items.skos:ConceptYes
CanvasElementAbstract canvas elementschema:CreativeWorkYes
CanvasShapeAbstract shape elementCanvasElementYes
CanvasTextAbstract text elementCanvasElementYes
CanvasContainerAbstract container elementCanvasElementYes
DiagramAbstract diagram domain — flowcharts, UML, network topologies. Parent of pp:DiagramShape, pp:Connector, and the flow-relation hierarchy.CanvasElementYes
GeoFeatureAbstract geographic feature — regions, markers, administrative areas. Parent of pp:MapRegion and pp:Marker. Matches the GeoJSON \"feature\" concept.CanvasElementYes
TemplateA motion graphics templateschema:VisualArtwork
TextText elementCanvasTextschema:CreativeWork
CircleCircle shape (geometrically: ellipse where rx=ry)CanvasShape
RectangleRectangle shapeCanvasShape
PathVector path — semantically incomplete without open/closed distinction. Defined by its curveType (mathematical function family). Refined to OpenPath or ClosedPath during graph extraction.CanvasShape
OpenPathOpen path (trajectory/stroke) — has start and end points, does not enclose area. Defined by curveType: the mathematical function governing its segments.Path
ClosedPathClosed path (region/boundary) — encloses area, no start/end distinction. Functionally equivalent to a shape defined by its boundary equation.Path
StarStar shape (geometrically: concave polygon with alternating radii)CanvasShape
TriangleTriangle shape (geometrically: 3-sided polygon)CanvasShape
PolygonN-sided regular polygonCanvasShape
EllipseEllipse shapeCanvasShape
LineLine segment — 2-point open path with curveType: linearCanvasShape
ArcArc segment — open path subset with curveType: arcCanvasShape
GroupItem group/containerCanvasContainer
LetterCollageStyled text collageCanvasText
PrecompNested compositionCanvasContainer
SkeletonRigging skeletonCanvasContainer
BoneSkeleton boneCanvasElement
PoseNamed bone-angle map saved on a skeleton, addressable by id. Multiple poses per skeleton form a pose library.Concept
ShapeKeyPer-item visual delta (segments, opacity, color, size) saved on a skeleton with a rest baseline. Weighted blends drive facial-style animation.Concept
IKChainInverse-kinematics chain on a skeleton — ordered bones + solver (fabrik / two_bone / ccd), optional pole vector, optional driving target item.Concept
EventNamed 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
BonePhysicsVerlet 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
BoneJiggleSecondary-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)
BoneColliderCollision shape that bone-physics particles bump against. Lives on a skeleton; multiple colliders per skeleton are allowed. Concrete subtypes select the shape primitive.ConceptYes
GroundColliderHorizontal ground plane at a fixed y. Bones above this y stay above it — used for floors and standing surfaces.BoneCollider
y (px, default 600)
CircleColliderCircular 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)
RectColliderAxis-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)
PathSkinningPer-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)
SpriteSheetAtlas+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.CanvasElementschema:ImageObject
padding (px, default 1)
framePadding (px, default 4)
powerOfTwo (default true)
maxAtlasSize (px, default 4096)
SpriteFrameSingle 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
SpriteAnimationNamed 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)
SpritePlayerRuntime 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
VideoClipVideo media item — frame-sampled raster source with playhead, in/out trim, and optional per-frame GPU filters. Referenced by pp:MediaRef handle.CanvasElementschema:VideoObject
AudioClipAudio media item — sample-buffer source with volume, gain, and timeline placement. May coexist with a video pp:MediaRef or stand alone.CanvasElementschema:AudioObject
MediaRefShared 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
PhysicsBodyBox2D rigid body attached to a canvas item. Subtype determines simulation behavior: static (immobile), dynamic (full sim), kinematic (animation-driven, can push dynamics).ConceptYes
StaticBodyImmobile rigid body — collides with dynamics but never moves under force. Used for walls and obstacles.PhysicsBody
DynamicBodyFully simulated rigid body — gravity, forces, impulses, collisions all act on it.PhysicsBody
KinematicBodyAnimation-driven rigid body — ignores forces but pushes dynamic bodies. Used for animated platforms, controlled characters.PhysicsBody
PhysicsGroundConvenience static body at the bottom of the canvas — provides a floor for dynamic bodies to land on.StaticBody
PhysicsJointConstraint between two physics bodies. Subtype determines the degrees of freedom allowed.ConceptYes
RevoluteJointHinge joint — bodies pivot around a shared anchor point with optional motor and angle limits.PhysicsJoint
DistanceJointFixed-length tether between two bodies — like a rigid rope.PhysicsJoint
WeldJointRigidly fuses two bodies — eliminates relative motion. Used for compound objects.PhysicsJoint
SceneScriptTime-orchestrated container of character actions on a timeline. Loops, plays at variable speed, seekable.Concept
SceneActionSingle 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.ConceptYes
actionMoveLeftWalk-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)
actionMoveRightWalk-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)
actionJumpParabolic-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)
actionCrouchCrouched pose hold for the action duration. No parameters — the pose is fixed; duration is set on the SceneAction wrapper.SceneAction
actionIdleIdle / rest pose hold for the action duration. No parameters — clears velocity and returns to the idle pose.SceneAction
DataVisualizationAbstract data visualization — classified along 5 orthogonal dimensions: mark primitive, coordinate system, encoding channel, analytical task, and composition modeCanvasElementschema:CreativeWorkYes
MarkTypeAbstract mark primitive — the visual element used to represent data pointsYes
PointMarkDiscrete position mark (scatter, bubble, dot)MarkType
LineMarkConnected trajectory mark (line, step, spline)MarkType
BarMarkRectangular extent mark (bar, column, histogram bin)MarkType
AreaMarkFilled region mark (area, stream, band)MarkType
ArcMarkAngular sector mark (pie slice, donut, sunburst)MarkType
CellMarkGrid cell mark (heatmap, matrix, waffle)MarkType
TextMarkData-positioned text mark (word cloud, label)MarkType
CoordinateSystemAbstract coordinate system for spatial data mappingYes
CartesianCoordinatesCartesian X/Y axes — the most common coordinate system for chartsCoordinateSystem
PolarCoordinatesPolar angle/radius coordinates (pie, radar, rose charts)CoordinateSystem
GeographicCoordinatesGeographic lat/lon projection (choropleth, bubble map)CoordinateSystem
ParallelCoordinatesParallel axes for multivariate comparisonCoordinateSystem
EncodingChannelAbstract visual encoding channel — maps data values to perceptual propertiesYes
PositionEncodingPosition on x/y axes — highest-bandwidth encodingEncodingChannel
SizeEncodingWidth, height, or radius — encodes magnitudeEncodingChannel
ColorEncodingFill, stroke, or opacity — encodes category or intensityEncodingChannel
ShapeEncodingPoint shape or dash pattern — encodes categoryEncodingChannel
AngleEncodingRotation or arc sweep — encodes proportionEncodingChannel
TextEncodingLabel content — encodes identity or valueEncodingChannel
AnalyticalTaskAbstract analytical task — the question a visualization helps answerYes
ComparisonTaskCompare magnitudes across categories (which is bigger?)AnalyticalTask
TrendTaskShow change over time (how does it evolve?)AnalyticalTask
DistributionTaskShow spread or frequency of values (how is it distributed?)AnalyticalTask
CompositionTaskShow parts of a whole (what proportion?)AnalyticalTask
RelationshipTaskShow correlation between variables (how do they relate?)AnalyticalTask
SpatialTaskShow geographic distribution (where?)AnalyticalTask
HierarchyTaskShow nested structure (how is it organized?)AnalyticalTask
CompositionModeAbstract composition mode — how multiple data series are visually arrangedYes
SingleSeriesOne data series displayed aloneCompositionMode
StackedSeriesSeries stacked vertically (cumulative)CompositionMode
GroupedSeriesSeries placed side by side for comparisonCompositionMode
LayeredSeriesSeries overlaid with transparencyCompositionMode
FacetedSeriesSmall multiples — separate panels per seriesCompositionMode
BarChartBar chart — rectangular marks on Cartesian axes for categorical comparisonDataVisualization
LineChartLine chart — connected marks showing trends over a continuous axisDataVisualization
ScatterPlotScatter plot — point marks encoding two quantitative variables as positionDataVisualization
AreaChartArea chart — filled region under a line, showing volume and trendsDataVisualization
HistogramHistogram — binned bar chart showing value distributionDataVisualization
BubbleChartBubble chart — scatter plot with size-encoded third variableScatterPlot
PieChartPie chart — arc marks in polar coordinates showing part-to-wholeDataVisualization
HeatmapHeatmap — cell marks with color encoding for matrix dataDataVisualization
StackedBarChartStacked bar chart — bars subdivided by category showing compositionBarChart
DiagramShapeFlowchart/UML shapeDiagram
FlowchartShapeAbstract flowchart shapeDiagramShapeYes
ProcessShapeProcess/task stepFlowchartShape
DecisionShapeDecision/gateway diamondFlowchartShape
TerminalShapeStart/end terminalFlowchartShape
DataShapeData input/output parallelogramFlowchartShape
DocumentShapeDocument shapeFlowchartShape
DatabaseShapeDatabase/data store cylinderFlowchartShape
PreparationShapePreparation/setup stepFlowchartShape
UMLShapeAbstract UML shapeDiagramShapeYes
UMLClassShapeUML class boxUMLShape
UMLUseCaseShapeUML use case ellipseUMLShape
UMLActorShapeUML actor stick figureUMLShape
NetworkShapeAbstract network topology shapeDiagramShapeYes
CloudShapeCloud/service shapeNetworkShape
ServerShapeServer/host shapeNetworkShape
ConnectorDiagram connectorDiagram
SequenceConnectorSequence/control flow connectorConnector
DataConnectorData flow connectorConnector
AssociationConnectorAssociation connectorConnector
DependencyConnectorDependency connectorConnector
MapRegionGeographic regionGeoFeatureschema:AdministrativeArea
MarkerMap markerGeoFeatureschema:Place
MaskedItemItem with clipping maskCanvasElement
ImageRaster/bitmap imageCanvasElementschema:ImageObject
CompoundPathMultiple sub-paths as single item (SVG imports, boolean ops)CanvasShape
UnclassifiedItem type not expressible in current vocabulary. Enables vocabulary gap discovery — count and inspect unclassified items to identify missing types.CanvasElement

Object Properties (Relations)

NameDescriptionCategoryBehaviorParentParameters
RelationAbstract relationabstract
SpatialRelationPosition-based relationabstractRelation
TransformRelationOrientation/scale-based relationabstractRelation
AnimationRelationTime-based animation relationabstractRelation
ProceduralRelationProcedural/expression relationabstractRelation
containsParent-child containmentstructural
maskedByClipped by mask shapestructural
orbitsSource revolves around target at a fixed radius. Use for celestial mechanics, satellites, rotating-around-X relationships.spatialconstraintSpatialRelation
followsSmooth pursuit with lag — source asymptotically approaches target. Use for trailing, delay, easing motion. Contrast: attached_to is rigid (zero lag).spatialconstraintSpatialRelation
attachedToRigid parent-child transform — source moves with target instantly via fixed offset. Zero-lag variant of follows. Use for labels, attachments, child objects.spatialconstraintSpatialRelation
maintainsDistanceSource stays at a fixed distance from target as either moves. Use for tethering, leash dynamics, fixed-spacing groups.spatialconstraintSpatialRelation
pointsAtSource rotates to always face target. Use for compass needles, gun turrets, gaze direction, arrows tracking a target.transformconstraintTransformRelation
mirrorsSource's transform mirrors target across an axis. Use for reflections, symmetry, mirrored character poses.transformconstraintTransformRelation
parallaxSource moves at a depth-scaled fraction of target's motion. Use for background layers, parallax scrolling, depth illusion.spatialconstraintSpatialRelation
boundsToSource's position is clamped within target's bounds. Use for keeping characters inside a frame or viewport-bounded motion.spatialconstraintSpatialRelation
growsFromSource scales up from zero starting at target's position. Use for spawn-from-point effects, ripple-into-being entrances.animationtriggerTransformRelation
staggeredWithStored as pairwise edges with index param to reconstruct group ordering. Conceptually 1→N but decomposed into binary pairs.animationtriggerAnimationRelation
waveThroughStored as pairwise edges with index param for phase offset. Conceptually 1→N but decomposed into binary pairs.animationconstraintAnimationRelation
morphsToSource's path interpolates into target's path over time. Use for shape morphing, geometry transitions.animationtriggerAnimationRelation
circumscribesSource's bounds scale to fully enclose target. Use for halo highlights, selection rings, labels framing content.animationtriggerTransformRelation
indicatesTemporary emphasis effect. mathematically: pulseScale on source triggered by target reference.animationtriggerAnimationRelation
drivenBySource property linearly maps from a target property. Use for parameter linking, slaved values, reactive controls.proceduralproceduralProceduralRelation
wiggleSource position / rotation jitters via noise-driven offset. Use for hand-drawn liveliness, idle motion, organic shake.proceduralproceduralProceduralRelation
timeExpressionSource property evaluates a math expression of time each frame. Use for custom oscillations, formula-driven motion.proceduralproceduralProceduralRelation
cameraFollowsCamera viewport tracks target's position with smooth pursuit. Use for cinematic follow shots, subject-lock cameras.cameraconstraintSpatialRelation
cameraAnimatesCamera viewport interpolates between keyframed positions. Use for choreographed pans / zooms, fly-throughs, scripted shots.cameratriggerAnimationRelation
boneAttachedSource canvas item rides a skeleton bone — inherits its transform. Use for character props, weapons, accessories on a rig.riggingconstraintSpatialRelation
boneSkinnedSource 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.riggingconstraintSpatialRelation
ikTargetTarget item is the end-effector goal for an IK chain on source skeleton. Use for hand-reaches-cup, foot-lock, gaze-to-target.riggingconstraintSpatialRelation
blendReactsToSource blend mode changes when target enters proximity / state. Use for collision-triggered visuals, reactive composition.blendingproceduralProceduralRelation
blendTransitionSource cycles through blend modes on a timed loop. Use for animated mood shifts, rhythmic visual changes.blendingproceduralProceduralRelation
partOfSource is a named sub-element of target (e.g. eye_left part_of face). Use for compound items and named sub-element addressing.riggingconstraintSpatialRelation
expressesSource plays a named expression preset (smile, blink, surprise) driving its part_of children. Use for facial animation, character emotion.riggingproceduralProceduralRelation
EffectRelationAbstract particle effect relationabstractProceduralRelation
effectSparkleTwinkling particles cascade from the item. Use for celebration, magic, attention-draw moments.effectproceduralEffectRelation
effectBlastOutward radial burst of particles emits once. Use for impacts, explosions, energy release.effectproceduralEffectRelation
effectSmokeRising smoke trail emanates from the item. Use for damage, weight, atmosphere.effectproceduralEffectRelation
effectFireAnimated flame emerges from the item. Use for heat, burning, energy.effectproceduralEffectRelation
effectRainFalling raindrops cover the canvas area. Use for weather scenes, melancholy mood.effectproceduralEffectRelation
effectSnowFalling snowflakes drift across the canvas area. Use for winter scenes, peaceful slow motion.effectproceduralEffectRelation
effectConfettiColored streamers fall from above. Use for celebrations, accomplishments, party scenes.effectproceduralEffectRelation
effectRippleConcentric expanding rings emanate from the item. Use for water-drop, shockwave hint, attention pulse.effectproceduralEffectRelation
effectGlowSoft luminous halo surrounds the item. Use for highlighting, importance, magical quality.effectproceduralEffectRelation
effectElectricCrackling electric arcs jump around the item. Use for energy, danger, sci-fi power.effectproceduralEffectRelation
effectBubblesRising bubbles emerge from the item. Use for underwater, liquid, light-hearted scenes.effectproceduralEffectRelation
effectDustSlowly drifting dust motes fill the area. Use for old / abandoned moods, sunbeam visualizations.effectproceduralEffectRelation
effectFirefliesSlow-blinking glowing particles drift around the item. Use for magical night scenes, romantic ambiance.effectproceduralEffectRelation
effectShockwaveSingle explosive ring expands outward from the item once. Use for impact moments, dramatic emphasis.effectproceduralEffectRelation
effectTrailParticle trail follows the item as it moves. Use for motion blur, speed lines, comet tails.effectproceduralEffectRelation
ShaderEffectRelationAbstract shader-rendered effect relation (silhouette-clipped GPU shader)abstractEffectRelation
effectHeatmapAnimated thermal-color noise fills the item's silhouette. Use for temperature visualization, dramatic glow, abstract energy.effectproceduralShaderEffectRelation
effectLiquidMetalReflective chrome-flow shader stylizes the item with banded highlights. Use for metallic logos, sci-fi aesthetic, polish.effectproceduralShaderEffectRelation
effectGemSmokeVolumetric curling smoke wreath encircles the item silhouette. Use for ornate emphasis, ritual or magical contexts.effectproceduralShaderEffectRelation
AuraModeAura composite mode enumeration (silhouette clipping strategy)abstractConcept
AnimationCurveAnimation channel curve enumeration (transforms raw time into shader uniform)abstractConcept
DeformRelationAbstract vertex deformation relationabstractProceduralRelation
deformFoldItem creases along a fold line and lays flat. Use for paper-fold animations, panel reveals.deformproceduralDeformRelation
deformSqueezeItem pinches inward symmetrically. Use for cartoon expression, compression visuals.deformproceduralDeformRelation
deformSquashItem flattens vertically and stretches horizontally (area-preserving). Use for bounce-landing impact, weight.deformproceduralDeformRelation
deformPinchItem draws toward a central point. Use for vacuum-up, focus pull, gravity well.deformproceduralDeformRelation
deformBulgeItem bows outward from center. Use for inflation, swelling, expansion.deformproceduralDeformRelation
deformTwistItem rotates progressively along an axis. Use for whirlpool, candy-cane, screw motion.deformproceduralDeformRelation
deformRippleItem's surface ripples with concentric waves. Use for water disturbance, energy pulse on shape.deformproceduralDeformRelation
deformWaveItem undulates with a traveling sine wave. Use for flag-waving, fabric, liquid surface.deformproceduralDeformRelation
deformBreatheItem rhythmically scales in and out. Use for living / idle motion, organic presence.deformproceduralDeformRelation
deformMeltItem droops downward as if liquefying. Use for dissolution, dali-esque scenes, decay.deformproceduralDeformRelation
deformShearItem slants progressively along one axis. Use for italic-like lean, motion shear, gravity drag.deformproceduralDeformRelation
deformInflateItem swells uniformly outward. Use for balloon, pre-pop state, growth.deformproceduralDeformRelation
deformWobbleItem jiggles like jelly. Use for elastic motion, cartoon overshoot, gelatin shake.deformproceduralDeformRelation
ImageFilterAbstract per-item GPU image filter applied once to a Raster (not animated)abstractConcept
DiagramFlowRelationAbstract diagram flow relationabstractRelation
sequenceFlowSequence/control flow between shapesdiagramDiagramFlowRelation
dataFlowData flow between shapesdiagramDiagramFlowRelation
associationAssociation between diagram elementsdiagramDiagramFlowRelation
dependencyDependency between diagram elementsdiagramDiagramFlowRelation
connectsToGeneric diagram connectiondiagramDiagramFlowRelation
EventRelationAbstract event-channel relation — edge-triggered, frame-coherent dispatchabstractedgeTriggeredRelation
onClickFireSource item pulses target pp:Event on click.eventedgeTriggeredEventRelation
onPointerEnterFireSource pulses target pp:Event when pointer enters its bounds.eventedgeTriggeredEventRelation
onPointerExitFireSource pulses target pp:Event when pointer leaves its bounds.eventedgeTriggeredEventRelation
onKeyFireSource 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.eventedgeTriggeredEventRelation
onEventSetPropertyOn pp:Event pulse, set target.[property] = value.eventedgeTriggeredEventRelation
onEventSetVisibilityOn pp:Event pulse, set target.visible.eventedgeTriggeredEventRelation
onEventSetColorOn pp:Event pulse, set target.fillColor or .strokeColor.eventedgeTriggeredEventRelation
onEventSetDataOn pp:Event pulse, set target.data[property] = value.eventedgeTriggeredEventRelation
onEventIncrementOn pp:Event pulse, increment target.data[property] by N.eventedgeTriggeredEventRelation
onEventToggleOn pp:Event pulse, flip target.visible or target.data[property].eventedgeTriggeredEventRelation
onEventSetActiveOn pp:Event pulse, activate target in its exclusive_group (clears siblings).eventedgeTriggeredEventRelation
onEventFireAfterOn 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).eventedgeTriggeredEventRelation
onEventSetPropertyFromTemplateOn 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\" }.eventedgeTriggeredEventRelation
onEventAddRelationMeta-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.eventedgeTriggeredEventRelation
onEventRemoveRelationMeta-relation — the graph modifies itself. On pp:Event pulse, app.removeRelation(target, params.target, params.type). Inverse of onEventAddRelation, used for cleanup chains.eventedgeTriggeredEventRelation
exclusiveGroupTwo 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.eventedgeTriggeredEventRelation
onEnterSetPropertyWhen source becomes the active member of its exclusive_group, set target.[property] = value.eventedgeTriggeredEventRelation
onEnterSetVisibilityWhen source activates in its group, set target.visible.eventedgeTriggeredEventRelation
onExitSetPropertyWhen source stops being the active member of its exclusive_group, set target.[property] = value.eventedgeTriggeredEventRelation
onExitSetVisibilityWhen source deactivates in its group, set target.visible.eventedgeTriggeredEventRelation
menubarGroupTwo 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.eventedgeTriggeredEventRelation
unknownRelationRelation type not expressible in current vocabulary. Enables vocabulary gap discovery — count and inspect unknown relations to identify missing edge types.unknownRelation

Datatype Properties

NameDescriptionTypeUnitAnimatable
x-numberpxYes
y-numberpxYes
width-numberpxYes
height-numberpxYes
radius-numberpxYes
rotation-numberdegYes
scale-numberYes
scaleX-numberYes
scaleY-numberYes
opacity-numberYes
fillColor-colorYes
strokeColor-colorYes
shadowColor-colorYes
strokeWidth-numberpxYes
strokeCap-enum
strokeJoin-enum
dashArray-arraypxYes
shadowBlur-numberpxYes
shadowOffsetX-numberpxYes
shadowOffsetY-numberpxYes
fontSize-numberpxYes
fontFamily-string
fontWeight-string
textAlign-enum
content-stringYes
blendMode-enumYes
routing-enum
lineStyle-enum
headStyle-enum
tailStyle-enum
connectorLabel-string
shapeCategory-enum
closedWhether path forms a closed region. Determines ontological subtype (OpenPath vs ClosedPath).boolean
curveTypeMathematical function family governing segment interpolation. The functional representation that defines the path.enum
segmentCountNumber of anchor points defining the path.number
trimStart-numberYes
trimEnd-numberYes
trimOffset-numberYes

Math Functions

Mathematical primitives used in animation drivers, relation solvers, and generator physics. Each entry serializes as a pp:MathFunction in the TTL.

NameCategoryFormula
lerpinterpolationa + (b-a)*t
cubicBezierinterpolation(1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃
catmullRominterpolationCatmull-Rom spline through control points
easeIneasing
easeOuteasing1-(1-t)²
easeInOuteasingt<0.5 ? 2t² : 1-(-2t+2)²/2
easeInCubiceasing
easeOutCubiceasing1-(1-t)³
bounceeasingPiecewise parabolas
elasticeasing2^(-10t)·sin((10t-0.75)·c₄)+1
customCubicBeziereasingcubic-bezier(x1,y1,x2,y2)
sinOscillationtrigonometriccenter + amplitude·sin(ω·t + φ)
sinCostrigonometricsin(θ), cos(θ)
phaseOffsetSinusoidtrigonometricA·sin(ω·t - i·φ)
parametricCircleparametricx=r·cos(θ), y=r·sin(θ)
parametricEllipseparametricx=rx·cos(θ), y=ry·sin(θ)
spiralparametricr(θ)=a+bθ
euclideanDistancespatial√((x₂-x₁)²+(y₂-y₁)²)
atan2spatialatan2(y₂-y₁, x₂-x₁)
axisReflectionspatialv-2(v·n̂)n̂
rigidOffsetspatialtarget.pos + offset
rectClampspatialclamp(x, min, max)
depthScaledTranslationspatialbase + scroll·depth
affineTransformtransformx'=ax+cy+e, y'=bx+dy+f
deltaRotationtransformitem.rotate(shortestPathDelta)
linearBlendSkinningtransformv' = Σ w_i · M_i · v (weighted sum of bone matrices applied per vertex)
exponentialPursuitphysicspos += (target-pos)·lag
dampedHarmonicOscillatorphysicse^(-ζω₀t)(Acos(ωd·t)+Bsin(ωd·t))
gravityphysicsy += vy·dt + ½g·dt²
perlinNoisenoiseGradient noise [-1,1]
fbmnoiseΣ persistence^i · noise(x·lacunarity^i)
colorLerpcolorlerp per RGB/HSL channel
gradientInterpolationcolorStop-wise gradient lerp
fabrikSolversolverForward And Backward Reaching IK
linearMapmappingsource = target·multiplier + offset
mathExpressionexpressionUser-defined f(t,v)
keyframeLerpinterpolationMulti-keyframe piecewise lerp
scaleInterpolationinterpolationScale 0→1 with easing
delayOffsettimingdelay = index · stagger
pulseScaleanimationTemporary scale pulse
boundingGeometrygeometryBounding box/circle calculation
pathPointLerpinterpolationPer-point path interpolation
proximityThresholdspatialdist < radius → trigger
timedCyclingtimingmode[floor(t/cycleDur) % n]
trimPathpathdashArray/dashOffset trimming
staggerDelaytimingindex × delay
expressionexpressionmath.js compiled expression evaluation
odesolverOrdinary Differential Equation numerical integration
rk4solverFourth-order Runge-Kutta: y(n+1) = y(n) + (k1+2k2+2k3+k4)/6
dynamicSystemsolverState-space model: dx/dt = f(x,t,params)
fftsignalCooley-Tukey radix-2 Fast Fourier Transform
signalProcessingsignalSignal generation, windowing, filtering
parametricSurfacegeometryS(u,v) = (x(u,v), y(u,v), z(u,v))
projection3dgeometryPerspective projection: 2D = 3D × fov/(fov+z)

Design Patterns

Structural archetypes for motion-graphics compositions — each pattern names the node types, edges, and math functions it requires.

NameDescriptionRequired EdgesNode TypesMath Functions
orbitalCompositionItems orbiting a central elementorbits
staggeredRevealItems appearing in sequencestaggeredWith
parallaxDepthLayered depth illusion via differential motionparallax
followChainItems following each other in chainfollows
waveMotionWave propagating through itemswaveThrough
maskRevealContent revealed through animated maskMaskedItem
skeletalAnimationItems rigged to bone hierarchySkeleton, Bone
keyframeAnimationItems animated via keyframe timelinekeyframeLerp
proceduralBackgroundAlgorithmically generated background
trimPathDrawStroke draw-on effect via trim pathstrimPath
diagramFlowConnected flowchart/diagram shapesDiagramShape, Connector
diagramFlowchartLinear/branching flowchartsequenceFlowFlowchartShape, SequenceConnector
diagramUMLUML class or use-case diagramUMLShape
diagramNetworkNetwork topology diagramNetworkShape
diagramDecisionTreeDecision tree with branching pathsDecisionShape
mapVisualizationGeographic data visualizationMapRegion
morphTransitionShape morphing between statesmorphsTo
collageTextStylized per-letter textLetterCollage
cameraAnimationAnimated viewport zoom/pancameraFollows, cameraAnimates
proceduralNoiseNoise-driven procedural motionwiggle
expressionDrivenMath expression controlling propertiestimeExpression

Generators

Drawing functions invoked at canvas-init time to produce scene content (geometric patterns, math plots, simulations, etc.).

NameDescriptionParentCategoryMath Functions
ProceduralGeneratorAbstract generatorabstract
ParticleGeneratorParticle-based generatorProceduralGeneratorabstract
FieldGeneratorField-based generatorProceduralGeneratorabstract
PatternGeneratorPattern-based generatorProceduralGeneratorabstract
SceneGeneratorScene-based generatorProceduralGeneratorabstract
MathGeneratorMath-driven generator — evaluates expressions / ODEs / FFT / parametric surfaces to produce visual contentProceduralGeneratorabstract
drawSunburstRadial rays emanating from a center point. Use for solar emblems, celebratory backgrounds, retro motifs.PatternGeneratorpatternsinCos, parametricCircle
drawGridUniform grid pattern. Use for blueprint backgrounds, technical aesthetics, layout reference.PatternGeneratorpatternlerp
drawWavesLayered horizontal sine waves. Use for water surfaces, audio waveforms, ocean backgrounds.PatternGeneratorpatternsinOscillation
drawPatternTileable geometric pattern (chevrons, hexagons, polkadots). Use for textured backgrounds, brand backdrops.PatternGeneratorpatternparametricCircle, sinCos
drawSunsetSceneLayered horizon scene with sky-color gradient. Use for landscape backdrops, mood-setting backgrounds.SceneGeneratorscenelerp, colorLerp
drawFunctionPlotPlots a math expression y=f(x) over an x-range. Use for math illustrations, function visualization, education.MathGeneratormathexpression, keyframeLerp
drawParametricCurvePlots a parametric (x(t), y(t)) curve over a t-range. Use for Lissajous figures, spirals, parametric art.MathGeneratormathparametricCircle, sinCos
drawSimulationRenders a live ODE-based dynamic system (pendulum, Lorenz, spring-mass). Use for physics demos, chaos, science visuals.MathGeneratormathode, rk4, dynamicSystem
drawSpectrumAnalyzerRenders a signal's frequency spectrum via FFT. Use for audio visualizers, signal-processing demos, abstract data motion.MathGeneratormathfft, signalProcessing
draw3DSurfaceParametric 3D surface with perspective projection (Klein bottle, Möbius strip, torus). Use for math art, geometry visualization.MathGeneratormathparametricSurface, projection3d
drawStackedCirclesVertical stack of overlapping circles. Use for snowman-shapes, decorative beadwork, abstract sculpture forms.ParticleGeneratorsceneparametricCircle
drawCircuitMaze-like circuit-board pattern with nodes and traces. Use for tech backdrops, sci-fi panels.PatternGeneratorscenelerp
drawBokehSoft circular out-of-focus light dots. Use for photographic bokeh, romantic blur, ambient highlights.ParticleGeneratorparticleparametricCircle
drawGradientMeshSmooth multi-color noise gradient. Use for atmospheric backdrops, mood lighting.FieldGeneratororganicperlinNoise
drawGeometricAbstractRandomized composition of overlapping geometric shapes. Use for abstract art, modern poster backdrops.SceneGeneratorpatternlerp
drawWindFieldFlow-field of streaming particles driven by Perlin noise. Use for wind visualization, smoke trails, atmospheric motion.FieldGeneratorparticleperlinNoise, fbm
drawFluidFlowCurving streamlines suggesting fluid motion. Use for water / wind / lava illustration, organic backdrops.FieldGeneratororganicperlinNoise, fbm
drawOrganicFlowFlowing curves that breathe and shift over time. Use for living abstract backgrounds, mood ambience.FieldGeneratororganicsinOscillation, perlinNoise
drawNoiseTextureStatic or animated noise texture. Use for grain overlays, paper textures, depth-cueing backgrounds.PatternGeneratororganicperlinNoise, fbm

Value Types

Compound value shapes (vectors, points, gradients, keyframes) that property values commit to.

NameDescriptionFieldsAnchor
Point2D2D canvas coordinate {x, y}x, y
BoundingBox2D bounding rectanglex, y, width, height
CanvasCanvas coordinate spacewidth, height, backgroundColor
KeyframeProperty snapshot at timetime, properties, easing
KeyframeAnimationOrdered keyframes with duration — discrete property targets at specific timeskeyframes, duration, loop
LoopAnimationContinuous frame-based animation preset (pulse, rotate, bounce, etc.)animationType, animationSpeed, animationDirection
EasingFunctionInterpolation timing curvetype, params
TimelineGlobal playback controllerduration, loop, currentTime
ViewportCamera/viewport statezoom, center, rotation
MaskAnimationAnimated mask reveal effectmaskType, keyframes, duration, easing

Enumeration Values

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.

NameDescriptionCategoryScheme
auraModeInsideShader fills the item silhouette (destination-in mask)enumAuraMode
auraModeOutsideShader appears as a halo around the item edge (destination-out mask)enumAuraMode
auraModeOverlayShader stylizes the item via multiply blend on its silhouette — item content stays visible underneathenumAuraMode
curveLinearIdentity transform: continuous monotonic time, ideal for fbm warpingenumAnimationCurve
curveSineSmooth 0..1 oscillation at speed HzenumAnimationCurve
curveTriangleSharp linear up-and-down 0..1 oscillationenumAnimationCurve
curvePulseSquare wave on/off at speed HzenumAnimationCurve
curveEaseSmooth s-curve from 0 to 1 each cycle (slow-fast-slow)enumAnimationCurve
curveSawtoothLinear ramp 0..1 then instantaneous resetenumAnimationCurve
curveBounceDecaying bouncing oscillation each cycleenumAnimationCurve
curveNoiseSmoothed pseudo-random walk in 0..1enumAnimationCurve
filterGrayscaleDesaturation toward luminance-weighted grayimageFilterImageFilter
filterSepiaSepia tone — warm brown desaturationimageFilterImageFilter
filterBrightnessAdditive brightness shift (-1..1)imageFilterImageFilter
filterContrastContrast scale around mid-grayimageFilterImageFilter
filterSaturationSaturation lerp between luma and rgbimageFilterImageFilter
filterInvertNegative inversion (1 - rgb)imageFilterImageFilter
filterPosterizeQuantize each channel to N levels for a flat-color lookimageFilterImageFilter
filterHslHSL space adjustment (hue rotation, saturation, lightness)imageFilterImageFilter
filterColorTintColored tint blended via multiply/screen/overlayimageFilterImageFilter
filterVignetteRadial darkening from center to cornersimageFilterImageFilter
filterEdgeDetectSobel-style edge detection emphasizing high-frequency contrastimageFilterImageFilter
filterDitherOrdered Bayer 4×4 dithering for retro/limited-palette lookimageFilterImageFilter
filterHalftoneDotsSingle-channel halftone dot pattern at configurable angle (newspaper-print look)imageFilterImageFilter
filterHalftoneCMYKFour-plate CMYK halftone separation with rosette angle offsets (15°/75°/0°/45°)imageFilterImageFilter

Semantic Dimensions

SKOS concept schemes for non-binary classification (mood, style, complexity). Each scheme's values are reachable as pp:<dim>_<value> concepts.

DimensionCountConcepts
moods21energeticcalminspiringplayfulelegantdramaticmysteriousprofessionalwhimsicalnostalgicfuturisticwarmcoolfestivesolemnboldminimalorganicromanticcheerfulsummery
visualStyles23bold-typographyradial-backgroundparticle-effectsgeometricorganic-flowcinematicflat-designgradient-meshcircuit-boardhand-drawncollagedata-visualizationwave-patternsneon-glowskeletal-animationmask-revealtext-revealletter-by-letterfloral-patternstropicalconfettiacademicnature-inspired
colorSchemes11vibrantmutedmonochromedarklightneonpastelwarmcoolearthcontrast
audiences9creatorsgeneralbusinessstudentsdeveloperschildrenmultilingualindigenousmarketers
intents11inspireinformsellentertainteachcelebrateannouncedemonstratebrandgreetinvite
animationComplexities5staticsimplemoderatecomplexadvanced
compositionStyles8centeredasymmetricgridlayeredradialflowingsplitfull-bleed
contentTypes8text-focusedshape-focusedmixeddiagrammapcharacterscenedata-driven
designIntents4structuraldecorativetemporalinteractive

Visualization Dimension Properties

Graph-based chart-type classification links — connect a chart class to its mark, coordinate system, encoding, task, and composition dimensions.

NameDescriptionDomainRange
usesMarkThe mark primitive used to represent dataDataVisualizationMarkType
usesCoordinatesThe coordinate system for spatial mappingDataVisualizationCoordinateSystem
primaryEncodingThe primary visual encoding channelDataVisualizationEncodingChannel
secondaryEncodingAn additional encoding channel (e.g. size in bubble chart)DataVisualizationEncodingChannel
analyticalTaskThe analytical question this visualization helps answerDataVisualizationAnalyticalTask
defaultCompositionThe default composition mode for multi-series dataDataVisualizationCompositionMode