examples.
Interactive animation demos built with @humanspeak/svelte-motion — spring physics, gestures, layout animations, exit animations, and scroll-linked motion. Pick a card, edit, ship.
pick an example.
Each page is a self-contained, copy-pasteable demo with the source you need.
ai-glow-border.
Recreate the Apple Intelligence wavy glow border — the Siri glow effect — in Svelte with springs, feTurbulence noise, and SVG displacement.
ai-gradient-card.
A rotating conic-gradient border with a masked glow spill, built with useMotionValue, animate, and useMotionTemplate.
animate-presence.
Interactive AnimatePresence animation example using Svelte Motion.
animate-presence-custom.
Directional exit animations powered by AnimatePresence custom data and dynamic variants.
animated-button.
Interactive animated button animation example using Svelte Motion.
animated-tabs.
Interactive animated tabs animation example using Svelte Motion.
armed-buttons.
Production-style archive and delete wait button microinteractions built with Svelte Motion.
characters-remaining.
Interactive characters remaining animation example using Svelte Motion.
color-interpolation.
Interactive color interpolation animation example using Svelte Motion.
conic-gradient.
Interactive conic gradient animation example using Svelte Motion.
drag-constraints.
A polished constrained-drag stage showing elastic overdrag, ref bounds, and spring settling.
fancy-like-button.
Interactive fancy like button animation example using Svelte Motion.
hover-and-tap.
Interactive hover and tap animation example using Svelte Motion.
html-content.
Interactive html content animation example using Svelte Motion.
keyframes.
Interactive Keyframes animation example using Svelte Motion.
layout-dependency.
Interactive layout dependency animation example
layout-group.
Scope shared-layout animations to a subtree so sibling regions reusing the same layoutId animate independently.
layout-scroll.
Keep FLIP layout animations anchored when the parent container scrolls mid-animation.
lazy-motion.
Load Svelte Motion feature bundles with LazyMotion and the m namespace.
mobile-drawer.
A theme-aware drag-to-close bottom sheet built with drag, a bound y MotionValue, and dragControls.
motion-path.
Interactive motion path animation example using Svelte Motion.
motion-value-children.
Render MotionValue values as live text in motion elements.
multi-state-badge.
Interactive multi-state badge animation example using Svelte Motion.
notifications-stack.
Interactive notifications stack animation example using Svelte Motion.
object-style-motion-values.
Interactive object style motion values animation example
optimized-appear.
Start SSR appear animations before Svelte hydrates the motion runtime.
pan.
Interactive pan animation example
path-morphing.
Interactive path morphing animation example using Svelte Motion.
reorder.
Drag-to-reorder lists with Reorder.Group and Reorder.Item — FLIP siblings and edge auto-scroll.
reordering.
Interactive Reordering animation example using Svelte Motion.
rotate.
Interactive Rotate animation example using Svelte Motion.
scoped-motion-classes.
Keep component-scoped CSS selectors alive when they are passed to motion components.
scroll-progress.
Interactive scroll progress animation example using Svelte Motion.
shared-layout-animation.
Interactive shared layout animation example using Svelte Motion.
style-string.
Interactive styleString animation example using Svelte Motion.
svg-animation.
Interactive svg animation animation example
tab-select.
Interactive tab select animation example using Svelte Motion.
toggle-switch.
Interactive toggle switch animation example using Svelte Motion.
transform-template.
Interactive transform template animation example
use-animate.
Interactive useAnimate animation example using Svelte Motion.
use-animation-controls.
Coordinate motion components from a shared imperative controller.
use-animation-frame.
Interactive useAnimationFrame animation example using Svelte Motion.
use-cycle.
Interactive useCycle animation example using Svelte Motion.
use-follow-value.
Interactive use follow value animation example
use-in-view.
Interactive useInView animation example using Svelte Motion.
use-presence.
Interactive usePresence animation example using Svelte Motion.
use-presence-data.
Read AnimatePresence custom data from an entering or exiting child.
use-reduced-motion.
Interactive useReducedMotion animation example using Svelte Motion.
use-reduced-motion-config.
Resolve the active reduced-motion policy by combining a parent <MotionConfig> override with the OS preference.
use-time.
Interactive useTime animation example using Svelte Motion.
use-time-synced.
Interactive useTime (synced) animation example using Svelte Motion.
use-will-change.
Interactive use will change animation example
vanilla-values.
Motion values without motion components — runes driving plain elements through styleEffect.
variants-basic.
Interactive variants basic animation example using Svelte Motion.
variants-dynamic.
Per-instance variants — function-form factories receive the custom prop, driving staggered index-based delays.
variants-propagation.
Interactive variants propagation animation example using Svelte Motion.
variants-while-hover.
Pass a variant key (or array) to whileHover, whileTap, whileFocus, whileDrag, or whileInView to reuse named states across gestures.
view.
Shared-element morphs and enter/exit view layers with animateView and the native View Transitions API.
while-focus.
Interactive while focus animation example using Svelte Motion.
while-in-view.
Interactive while in view animation example using Svelte Motion.
animate-presence → gesture + exit animations