One behaviour at a time

Motion primitives you can actually inspect.

The playground combines everything into named states. These demos isolate individual capabilities so timing, layout, depth and placement can be evaluated without the rest of the authoring UI getting in the way.

Placement & geometry

Where things are

Position, anchors, layout systems, responsive geometry and how one persistent object moves between them.

Core

Absolute → Flow

A large absolute background object becomes a real inline child while surrounding content moves apart.

Placement

Absolute → Absolute

Change anchor, position, size and rotation without leaving stage space.

Anchors

Alignment

Top, right, bottom and left edge-aligned destinations resolved against the container.

Geometry

Size

Real width and height interpolation rather than visual scale alone.

Geometry

Rotation

Rotate Z as state-owned destination geometry.

Responsive

Responsive placement

Percent-based destination geometry recalculated from the real container.

Combined

Geometry overview

Position, size, scale and rotation working together in one example.

Motion & timing

How things get there

Duration, easing and composable arrival effects separated from destination geometry.

Timing

Animation curves

Same duration and distance, four different acceleration profiles.

Timing

Speed

Same path and curve across 250ms, 500ms, 1000ms and 2000ms.

Composition

Composed animations

Slide, Fade, Reveal, Focus and Collapse as independent effects.

Effects

Reveal vs Collapse

Clipping and directional compression shown side by side.

Layout & coordination

What happens around the object

Neighbouring layout, spacing and relationships between several moving elements.

Spacing

Padding vs Margin

Internal geometry versus external spacing and sibling displacement.

Coordination

Stagger & Follow

One shared motion recipe with delayed starts across a collection.

Layout

Layout effects

Overlay, Push, Replace and Reflow as companion behaviours.

Depth & accessibility

What should feel near, far or calm

Visual softness, stacking and alternative outcomes for people who prefer less motion.

Depth

Blur vs Focus

Softness, saturation and opacity without implicitly changing geometry or z-index.

Stacking

Depth & stacking

Keep visual depth separate from explicit z-index.

Accessibility

Reduced motion

Same semantic destination, with full motion or an immediate reduced-motion outcome.

3D experiments

How far can the spatial model go?

These are intentionally more playful: useful stress tests for transform composition, perspective and eventual layer/group abstractions.

Foundation