# Minimal API Examples Start with one complete program, then follow its API links for exact options and limitations. Browser examples include live previews; type-level and host-specific examples are labeled explicitly. Every source uses public package imports. ## animation - [Tween playback controls](/minimal-examples/animation/tween/): Animate a signal and control the mounted playback with native buttons. (live preview) - [Compose keyframes and springs](/minimal-examples/animation/composition/): Run two independent tracks together, then mark, wait, and repeat. (live preview) - [Custom sampling and fixed steps](/minimal-examples/animation/custom/): Combine a time-sampled sine wave with a fixed-step state machine. (live preview) - [Animate changing targets](/minimal-examples/animation/targets/): Compare a tween and spring as the same target changes. (live preview) ## compiler - [Automatic JSX runtime](/minimal-examples/compiler/production/): The production compiler emits jsx and jsxs calls for component values and fragments. (live preview) - [Development JSX runtime](/minimal-examples/compiler/development/): The development compiler emits jsxDEV calls with source-location metadata. (live preview) ## drawing - [Rounded and circular marks](/minimal-examples/drawing/round-shapes/): Draw a circle, ellipse, rounded rectangle, arc, and wedge with typed props and styles. (live preview) - [Polygon marks](/minimal-examples/drawing/polygons/): Draw a rounded triangle, regular hexagon, and five-point star. (live preview) - [Lines and authored paths](/minimal-examples/drawing/strokes-paths/): Combine polyline, axis-aligned strokes, mutable geometry, and SVG path data. (live preview) - [Drawing composition](/minimal-examples/drawing/composition/): Group, cache, and clip a drawing, then add text and an embedded thumbnail. (live preview) ## events - [Typed event target](/minimal-examples/events/target/): A geometric Canvas target routes pointer, mouse, touch, wheel, keyboard, input, clipboard, and drag events. (live preview) - [Focus and arrow navigation](/minimal-examples/events/focus/): Two logical targets participate in Tab focus and directional keyboard navigation. (live preview) - [Memoized hit paths](/minimal-examples/events/paths/): Rectangle, line, and SVG path hooks define three independent geometric click targets. (live preview) ## filters - [Blur and cast a shadow](/minimal-examples/filters/filter-blur-shadow/): Compare an original multicolor subject with separate blur and silhouette-shadow treatments. (live preview) - [Adjust brightness, contrast, and saturation](/minimal-examples/filters/filter-tone/): Compare brightness, contrast, and saturation independently against the same original subject. (live preview) - [Shift a color treatment](/minimal-examples/filters/filter-color/): Compare grayscale, hue rotation, and inversion independently against a colorful original. (live preview) - [Warm and fade a shape](/minimal-examples/filters/filter-finish/): Compare sepia and raster opacity against an original, with a checkerboard revealing transparency. (live preview) - [Refract and light water](/minimal-examples/filters/filter-water-light/): Compare an original tiled subject, displacement, reflected light, and their combined result. (live preview) ## layout - [Absolute and overlay layout](/minimal-examples/layout/absolute-overlay/): Position a block absolutely and center content within an overlay. (live preview) - [Flow and flex layout](/minimal-examples/layout/flow-flex/): Stack a banner with a flexible row of marks. (live preview) - [Grid and responsive style](/minimal-examples/layout/grid-responsive/): Place marks on explicit grid tracks and apply a local width rule. (live preview) - [Box resolution](/minimal-examples/layout/box-helpers/): Resolve padding, percentages, and a constrained box with typed diagnostics. (live preview) - [Intrinsic measurement](/minimal-examples/layout/measure/): Measure a Text element with a Canvas service and display its computed dimensions. (live preview) - [Allocated layout box](/minimal-examples/layout/layout-box/): Read the current canvas allocation and draw an inset panel. (live preview) ## lifecycle - [Read and update signals](/minimal-examples/lifecycle/signals/): Use writable, readonly, and computed values with synchronous batching. (live preview) - [Component-owned state and reactions](/minimal-examples/lifecycle/hooks/): Click to update a signal, derive a value, and publish an imperative effect after commit. (live preview) - [Typed components and recursive children](/minimal-examples/lifecycle/elements/): Build a component with createElement, group its children in a Fragment, and render textual children. (live preview) - [Mount, update, and dispose](/minimal-examples/lifecycle/mount/): Own one Pibbl root for a canvas and replace its content without creating another controller. (live preview) - [Define a Canvas primitive](/minimal-examples/lifecycle/primitive/): Supply synchronous drawing, style normalization, resolution, and opt-in measurement. (live preview) - [Host a native button in Pibbl](/minimal-examples/lifecycle/html/): Mount and update native HTML inside an HtmlBox, preserving native clicks and focus. (live preview) - [Define and own a texture](/minimal-examples/lifecycle/texture/): Rasterize a small animated tile and send it a message from native HTML. (live preview) - [Configure viewport and pixel density](/minimal-examples/lifecycle/surface/): Compare a fixed logical viewport with one that follows a resizable host. (live preview) ## machines - [Cancelable machine tasks](/minimal-examples/machines/tasks/): Run a state-owned task, observe completion, and release actors and listeners. (live preview) - [State-owned animation](/minimal-examples/machines/animation/): Move a circle with a machine-owned animation task that completes into the next state. (live preview) ## manipulation - [Drag, resize, and rotate](/minimal-examples/manipulation/basic/): Use the convenience component with a writable geometry box. (live preview) - [Own a manipulation controller](/minimal-examples/manipulation/controller/): Compose a drag surface and one resize handle, inspect gesture state, and cancel explicitly. (live preview) - [Style resize and rotation handles](/minimal-examples/manipulation/handles/): Add corner handles, a rotation connector, an angle arc, and gesture readouts. (live preview) ## particles - [Particle descriptors](/minimal-examples/particles/descriptors/): Define randomized spawn values and lifespan curves. (live preview) - [Particle effect configuration](/minimal-examples/particles/effect/): Compose a typed ember emitter from emission, motion, appearance, and bounds. (live preview) - [Effect parameters](/minimal-examples/particles/parameters/): Define typed spawn and render parameters and use them in an effect. (live preview) - [Mounted particle system](/minimal-examples/particles/system/): Mount a manual burst effect and trigger it with pointer input. (live preview) - [Flow-driven particles](/minimal-examples/particles/flow/): Advect mist through a mount-owned flow field and source. (live preview) - [Particle lifecycle events](/minimal-examples/particles/events/): Handle the discriminated event and diagnostic records. (live preview) ## paths - [Editable path geometry](/minimal-examples/paths/geometry/): Build a cubic path, convert it, and compare flattening and simplification utilities. (live preview) - [Circular path factories](/minimal-examples/paths/circular-factories/): Create circle, ellipse, arc, and wedge Path2D shapes. (live preview) - [Polygon path factories](/minimal-examples/paths/polygon-factories/): Create rounded rectangles and polygons alongside regular and star shapes. (live preview) - [Line and SVG paths](/minimal-examples/paths/line-svg-factories/): Construct a polyline and an SVG path from authored coordinates. (live preview) - [Affine transforms](/minimal-examples/paths/affine/): Compose translation and scaling, then transform geometry and a sample point. (live preview) - [Quad and envelope warps](/minimal-examples/paths/quad-envelope/): Warp a tile through a quadrilateral and between measured guide paths. (live preview) - [Arc and path bending](/minimal-examples/paths/bends/): Bend geometry around an arc and along a guide with explicit placement options. (live preview) - [Mesh warp](/minimal-examples/paths/mesh/): Define a one-cell guide mesh and warp a circle through it. (live preview) ## physics - [Shape measurements](/minimal-examples/physics/geometry-shapes/): Compare bounds, area, and mass for four common 2D shapes. (live preview) - [Path-like shapes](/minimal-examples/physics/geometry-paths/): Create curved, stroked, and polygonal shapes and transform them. (live preview) - [Geometry queries](/minimal-examples/physics/geometry-queries/): Check point containment, separation, overlap, contact, and casts. (live preview) - [Live physics world](/minimal-examples/physics/runtime-world/): Mount a falling ball, inspect it, and control its body with buttons. (live preview) - [World queries](/minimal-examples/physics/runtime-queries/): Query a static collider by ray, moving shape, overlap, point, and bounds. (live preview) - [Physics drawing components](/minimal-examples/physics/runtime-components/): Draw four physics shapes and move a custom kinematic collider. (live preview) - [Physics events](/minimal-examples/physics/runtime-events/): Record collisions, sensor overlap, body sleep, and contact inspection. (live preview) - [Deterministic physics test](/minimal-examples/physics/testing-harness/): Advance a public physics scene through controlled host frames. (live preview) ## render layers - [Interactive bitmap layer](/minimal-examples/render-layers/bitmap-layer/): Draw a dot into an OffscreenCanvas and route clicks through Pibbl's event boundary. (live preview) - [Three.js scene layer](/minimal-examples/render-layers/three-layer/): Mount a lit Three.js cube with Pibbl target clicks and raycast picking. (live preview) - [Three.js orbit controls](/minimal-examples/render-layers/orbit-controls/): Drag a cube using OrbitControls connected to Pibbl-routed input. (live preview) ## sprites - [Animated sprite atlas](/minimal-examples/sprites/atlas/): Generate a two-frame atlas, animate a shared sheet, and dispose it after unmounting. (live preview) - [Sprite format adapters](/minimal-examples/sprites/formats/): Compare normalized Aseprite, TexturePacker, and application-owned atlas metadata. (live preview) ## text - [Text outline](/minimal-examples/text/outline/): Load an outline font, shape a text run, and paint its editable path with glyph metrics. (live preview) ## textures - [Render a procedural material](/minimal-examples/textures/texture-procedural-component/): Paint a marble material with a typed palette, resolution, and synchronous renderer. (live preview) - [Paint reaction diffusion](/minimal-examples/textures/texture-reaction-component/): Mount an interactive reaction-diffusion layer with a typed brush. (live preview) - [Compare three material recipes](/minimal-examples/textures/texture-material-recipes/): Compare labeled marble, paper, and cellular swatches with palettes that reveal their surface detail. (live preview) - [Send paint to a living ink texture](/minimal-examples/textures/texture-ink-recipe/): Create a reaction-diffusion recipe and send a typed paint command on click. (live preview) - [Ripple a wave map](/minimal-examples/textures/texture-water-waves/): Refract and light a tiled sign through fine, fast-moving waves, with an unfiltered comparison toggle. (live preview) - [Ripple around an obstacle](/minimal-examples/textures/texture-water-surface/): Use a bounded water surface with a normalized rectangular obstacle. (live preview) - [Refract through rain glass](/minimal-examples/textures/texture-rain-drops/): Use a rain map for displacement and localized condensation blur. (live preview) - [Add a weighted filament source](/minimal-examples/textures/texture-tendrils/): Attach electric filaments to typed source sites and add one on click. (live preview) - [Connect two electric points](/minimal-examples/textures/texture-lightning/): Render a lightning recipe and reset its deterministic seed on click. (live preview) ## transitions - [fade enter and exit](/minimal-examples/transitions/fade/): Show and hide a captured Pibbl subtree with the fade transition. (live preview) - [slide enter and exit](/minimal-examples/transitions/slide/): Show and hide a captured Pibbl subtree with the slide transition. (live preview) - [zoom enter and exit](/minimal-examples/transitions/zoom/): Show and hide a captured Pibbl subtree with the zoom transition. (live preview) - [wipe enter and exit](/minimal-examples/transitions/wipe/): Show and hide a captured Pibbl subtree with the wipe transition. (live preview) - [blurReveal enter and exit](/minimal-examples/transitions/blur-reveal/): Show and hide a captured Pibbl subtree with the blurReveal transition. (live preview) - [dissolve enter and exit](/minimal-examples/transitions/dissolve/): Show and hide a captured Pibbl subtree with the dissolve transition. (live preview) - [bifrost enter and exit](/minimal-examples/transitions/bifrost/): Beam a transparent logo in and out with Bifrost, using a dark stage and space for its luminous trails. The first entrance runs automatically. (live preview) - [hologram enter and exit](/minimal-examples/transitions/hologram/): Project a spacecraft with swept wings, a transparent window, and detached exhaust shapes. Hologram follows the painted silhouette, not a filled rectangle. The first entrance runs automatically; Show and Hide replay either direction. (live preview) - [embers enter and exit](/minimal-examples/transitions/embers/): Break a transparent logo into glowing Embers, with a dark stage and space for falling particles. The first entrance runs automatically. (live preview) - [Define a custom transition](/minimal-examples/transitions/custom/): Render a captured subtree with a custom synchronous alpha curve. (live preview) ## viz - [Scales and axes](/minimal-examples/viz/scales/): Create band and linear scales with a typed axis and inspect resolved mappings. (live preview) - [Line series](/minimal-examples/viz/lines/): Plot readings with a nullable gap and a scale-adjusted marker. (live preview) - [Point and custom plot series](/minimal-examples/viz/points/): Render styled point marks and custom keyed point content. (live preview) - [Threshold-colored bars](/minimal-examples/viz/bars/): Render category bars with a typed style resolver and threshold fill. (live preview) - [Pie chart composition](/minimal-examples/viz/pie/): Compute pie geometry and render labeled donut slices. (live preview) - [Nearest-point lookup](/minimal-examples/viz/nearest/): Locate the nearest observation in pixel and domain space. (live preview) - [Hover query helpers](/minimal-examples/viz/hover-queries/): Run closest-point, closest-x, and interpolated-x queries against a scale context. (live preview) - [Hover inspection card](/minimal-examples/viz/hover-card/): Display a measured point in a bounded hover card. (live preview) - [Anchored callouts](/minimal-examples/viz/anchored/): Arrange labeled callouts while clearing their anchor points. (live preview) - [UTC scales and domain helpers](/minimal-examples/viz/utc/): Render real NOAA observations with UTC calendar ticks, numeric extents and outward domain rounding. (live preview) - [UTC dates across New Year](/minimal-examples/viz/utc-numeric/): Keep month, day, and year visible when a calendar axis crosses into a new year. (live preview) - [File sizes across orders of magnitude](/minimal-examples/viz/log-scale/): Multiplying the size by ten moves the same distance. (live preview) - [Daily inventory changes](/minimal-examples/viz/symlog-scale/): Negative means shipped; positive means received. (live preview) - [Checkpoints in a review](/minimal-examples/viz/point-scale/): Categories have equal spacing, not numeric distance. (live preview) - [Readable numeric ticks](/minimal-examples/viz/numeric-ticks/): Round a temperature range outward and format evenly spaced tick labels with units. (live preview) - [A target zone and reference line](/minimal-examples/viz/chart-guides/): Compare three tank-fill readings with a shaded target zone, a target line, and percentage grid lines. (live preview) - [Area and gaps](/minimal-examples/viz/area/): Fill runs to an explicit reference baseline. (live preview) - [Observed interval band](/minimal-examples/viz/interval-band/): Map paired published lower/upper observations into a filled band. (live preview) - [Named step definitions](/minimal-examples/viz/steps/): Compare before, midpoint, and after jumps between the same endpoints. (live preview) - [Monotone observations](/minimal-examples/viz/monotone/): Smooth measured observations without introducing extrema. (live preview) - [Categorical series](/minimal-examples/viz/categories/): Map original category identities with line and point marks. (live preview) - [Bounded domain navigation](/minimal-examples/viz/navigation/): Pan and zoom by mapping and inverting an explicit continuous scale. (live preview) - [Explicit color scales](/minimal-examples/viz/colors/): Map real observations with dedicated providers and authored palettes. (live preview) ## Documentation version Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.