solidjs-motion is alive

Phase 1

FadeIn

Mount-time fade + slide via static useMotion options.

Phase 1

Toggle (variants)

Signal-driven variant swap with a spring transition.

Phase 1

MotionValue size

MotionValue piped directly into a useMotion target.

Phase 1

Scroll-linked bar

createScroll → createTransform → MotionValue-driven width.

Phase 1

Reduced motion

System-pref accessor via createReducedMotion.

Phase 2

Gesture composition

hover / press / focus stacked on one element (state-machine winners).

Phase 2

whileInView + Provider

Card fades in on viewport entry; nested child inherits via m.Provider.

Phase 2

Drag

useMotion drag with constraints, elastic resistance, momentum.

Phase 2

Drag controls

Handle button drives drag on a separate target via createDragControls.

Phase 2

Standalone pan

createPan with pan.point.x piped through createTransform.

Phase 2

createInView (snapshot)

Single-threshold observer — entry snapshots at enter/leave.

Phase 2

createInView (live ratio)

Multi-threshold array — continuous intersectionRatio updates during scroll.

Phase 2

Variant orchestration

Parent label cascades; staggered children via `custom` + dynamic variants.

Phase 2

Controlling vs passive

Children with their own variant label opt out of the parent cascade.

Phase 2

MotionConfig

Share transition defaults across a subtree via <MotionConfig>.

Phase 2

createSpring

Spring-smoothed mirror of a numeric input — cursor follower with physics lag.

Phase 2

createTemplate

Tagged template composing a transform string from multiple MotionValues.

Phase 2

createVelocity / createTime

Frame-driver + velocity reader — oscillator that tilts in its direction of motion.

Phase 3

Presence (fade)

Single-element exit — <Show> + <Presence> running an exit target before unmount.

Phase 3

Presence (list)

<For> + add/remove with per-item enter/exit. Removed items animate; survivors stay put.

Phase 3

Presence (staggered list)

Per-item enter/exit with custom-driven delays — dynamic variants over the list.

Phase 3

Presence (orchestrated)

Parent shell's variant label cascades through m.Provider; Presence's descendant-walk exit makes the cascade work at unmount too.

Phase 3

Presence mode="wait"

Sequential panel swap — old exits fully before new enters.

Phase 3

Presence initial={false}

First-mount suppression. Initial paint is static; subsequent mounts animate.

Phase 3

useAnimatePresence (hook)

Imperative escape hatch — exit() returns a Promise, await it before flipping mount.

Phase 3

Presence + gestures

Hover/press combined with exit on the same card — gesture priority unchanged.

Phase 3

Presence + drag

Drag the card, then remove it — exit's x overrides drag's claim mid-unmount.

Phase 3

Presence (toast queue)

Stacked notifications — fire/auto-dismiss/clear all with parallel-exit coordination.

Phase 3

Presence (modal + backdrop)

Two children in one Presence — backdrop + dialog exit in parallel.

Phase 3

Presence (swipe stack)

Tinder-style draggable cards — exit direction follows the swipe, next card promotes.

Phase 4

motion.X tag-component

Orchestrated stagger via <motion.ul> + passive <motion.li> children — no useMotion calls, no manual m.Provider.

Phase 4

motion.create (HOC)

Wrap a custom Component with motion — original props compose with the full MotionOptions surface.

Phase 4

Sierpinski (perf stress)

6,500+ motion.divs subscribing to one shared MotionValue via style — the canonical fan-out stress test, with live FPS counter and depth slider.

Phase 4

Layout (toggle)

Single motion.div whose width/height swaps via signal — `layout` FLIPs from the old rect to the new one via ResizeObserver(self).

Phase 4

Layout (list)

<For> list with add / remove / shuffle. Survivors animate to new slots via parent-MutationObserver triggers; inserted items baseline.

Phase 4

Shared element (layoutId)

Thumbnail ↔ hero share `layoutId='card'`. Donor's onCleanup donates rect; consumer's createMotion FLIPs from there. Wrapped in Presence — exit + FLIP run in parallel.

Phase 4

LayoutGroup scoping

Two tab strips, each with its own <LayoutGroup>. Same layoutId in each doesn't cross-match — the indicator stays put when the other strip's tab changes.

Phase 4

Reorder (basic)

<Reorder.Group> + <Reorder.Item> — drag any row to reorder a controlled list. Center-cross detection mutates values() live; siblings FLIP into new slots; dragged row snaps back via dragSnapToOrigin.

Phase 4

Reorder (handle)

Drag-handle pattern. Each row has a `⋮⋮` grip; the rest of the row (checkbox, remove button) stays independently interactive. `dragListener: false` + `dragControls` scopes drag initiation to the handle.

Phase 4

Reorder (with exit)

Reorder + <Presence exitMethod="keep-index">. Add / remove items at will — removed items fade in place via `exit`; survivors FLIP into new slots after the slot is released. `keep-index` is REQUIRED for layout-animated lists: the default (`"move-to-end"`) shuffles the exiting node to the end of the list during its fade, hiding the exit visually.

Phase 4

Reorder (perf stage)

Profiling stage at realistic list sizes (N=50/100/300/500/1000). Toggle between minimal rows (library overhead) and card rows (realistic feature cost). Drag a row in DevTools → Performance to record the frame timeline; drag toward an edge to exercise drag-scroll (speed/threshold knobs). Pair with bench/BASELINES.md §09 for the JS-coordination baseline.

Phase 4

Reorder (perf stage, x-axis)

Horizontal twin of the perf stage — an axis="x" Reorder list in a horizontal scroller. Drag a cell toward the left/right edge to exercise horizontal drag-scroll (scrollLeft + horizontal edges). Same N / variant / drag-scroll knobs as the vertical stage.