Phase 1
FadeIn
Mount-time fade + slide via static useMotion options.
solidjs-motion is alive
SolidJS port of motion/react. Pick a demo from the sidebar — or any card below.
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.