# Interactive Examples > Live demos mirrored as markdown with runnable Svelte source for LLMs and agents. **Source:** [https://motion.svelte.page/examples](https://motion.svelte.page/examples) **Markdown mirror:** [https://motion.svelte.page/examples.md](https://motion.svelte.page/examples.md) --- Each linked mirror includes the live page description, section notes, and fenced source for the demo components used on that page. ## Examples - [Apple Intelligence Glow Border in Svelte](https://motion.svelte.page/examples/ai-glow-border.md) - Recreate the Apple Intelligence wavy glow border (the Siri screen-edge glow effect from iOS and macOS) in Svelte — spring physics, feTurbulence noise, and SVG displacement with a Framer Motion-compatible animation library. (live: [https://motion.svelte.page/examples/ai-glow-border](https://motion.svelte.page/examples/ai-glow-border), tag: `USEANIMATIONFRAME`) - [AI Gradient Card](https://motion.svelte.page/examples/ai-gradient-card.md) - Animated conic-gradient border with a masked glow spill, built with Svelte Motion useMotionValue, animate, and useMotionTemplate. (live: [https://motion.svelte.page/examples/ai-gradient-card](https://motion.svelte.page/examples/ai-gradient-card), tag: `USEMOTIONTEMPLATE`) - [AnimatePresence](https://motion.svelte.page/examples/animate-presence.md) - Animate components when they are added to or removed from the DOM using Svelte Motion. Smooth enter and exit transitions made easy. (live: [https://motion.svelte.page/examples/animate-presence](https://motion.svelte.page/examples/animate-presence), tag: `ANIMATE-PRESENCE`) - [AnimatePresence custom](https://motion.svelte.page/examples/animate-presence-custom.md) - Directional exit animations powered by AnimatePresence custom data and dynamic variants. (live: [https://motion.svelte.page/examples/animate-presence-custom](https://motion.svelte.page/examples/animate-presence-custom), tag: `PRESENCE`) - [Animated Button](https://motion.svelte.page/examples/animated-button.md) - Build a spring-based animated button with Svelte Motion featuring press feedback, hover lift, and smooth transitions for interactive UIs. (live: [https://motion.svelte.page/examples/animated-button](https://motion.svelte.page/examples/animated-button), tag: `ANIMATE`) - [Animated Tabs](https://motion.svelte.page/examples/animated-tabs.md) - Spring-based animated tabs with a sliding indicator powered by svelte-motion layoutId and bits-ui. (live: [https://motion.svelte.page/examples/animated-tabs](https://motion.svelte.page/examples/animated-tabs), tag: `LAYOUTID`) - [Armed Buttons](https://motion.svelte.page/examples/armed-buttons.md) - Production-style armed archive and delete wait button microinteractions built with Svelte Motion, AnimatePresence, and spring transitions. (live: [https://motion.svelte.page/examples/armed-buttons](https://motion.svelte.page/examples/armed-buttons), tag: `ARMED`) - [Characters Remaining](https://motion.svelte.page/examples/characters-remaining.md) - Character counter with spring-based bounce animation and color-mapped feedback built with Svelte Motion for smooth, reactive UI updates. (live: [https://motion.svelte.page/examples/characters-remaining](https://motion.svelte.page/examples/characters-remaining), tag: `TRANSFORM`) - [Color Interpolation](https://motion.svelte.page/examples/color-interpolation.md) - Smooth color transitions between multiple color values using Svelte Motion. Demonstrates interpolation across the full color spectrum. (live: [https://motion.svelte.page/examples/color-interpolation](https://motion.svelte.page/examples/color-interpolation), tag: `COLOR`) - [Conic Gradient](https://motion.svelte.page/examples/conic-gradient.md) - Pointer-tracking conic gradient example using Svelte Motion useTransform and writable stores. (live: [https://motion.svelte.page/examples/conic-gradient](https://motion.svelte.page/examples/conic-gradient), tag: `USETRANSFORM`) - [Drag Constraints](https://motion.svelte.page/examples/drag-constraints.md) - A polished constrained-drag stage showing elastic overdrag, ref bounds, and spring settling with Svelte Motion. (live: [https://motion.svelte.page/examples/drag-constraints](https://motion.svelte.page/examples/drag-constraints), tag: `DRAG`) - [Drag Transforms](https://motion.svelte.page/examples/drag-transforms.md) - Drag a card that stays angled and tilts in 3D — translation composes with authored rotate, skew, perspective, and whileDrag channels. (live: [https://motion.svelte.page/examples/drag-transforms](https://motion.svelte.page/examples/drag-transforms), tag: `DRAG`) - [Fancy Like Button](https://motion.svelte.page/examples/fancy-like-button.md) - Heart button with animated particle burst on press and hold using Svelte Motion. (live: [https://motion.svelte.page/examples/fancy-like-button](https://motion.svelte.page/examples/fancy-like-button), tag: `GESTURE`) - [Grid Exit](https://motion.svelte.page/examples/grid-exit.md) - Remove cards from a CSS grid with AnimatePresence exit animations that hold their slot until the exit finishes, then FLIP the surviving cards into place with the layout prop. (live: [https://motion.svelte.page/examples/grid-exit](https://motion.svelte.page/examples/grid-exit), tag: `GRID-EXIT`) - [Hover and Tap](https://motion.svelte.page/examples/hover-and-tap.md) - Gesture-driven animations for hover and tap interactions using Svelte Motion. Create responsive, interactive elements with spring physics. (live: [https://motion.svelte.page/examples/hover-and-tap](https://motion.svelte.page/examples/hover-and-tap), tag: `GESTURE`) - [HTML Content](https://motion.svelte.page/examples/html-content.md) - Animate HTML content with smooth enter and exit transitions using Svelte Motion. Demonstrates AnimatePresence with dynamic HTML elements. (live: [https://motion.svelte.page/examples/html-content](https://motion.svelte.page/examples/html-content), tag: `ANIMATE`) - [Keyframes](https://motion.svelte.page/examples/keyframes.md) - Multi-property keyframe animation with scale, rotate, and borderRadius using Svelte Motion. (live: [https://motion.svelte.page/examples/keyframes](https://motion.svelte.page/examples/keyframes), tag: `ANIMATE`) - [layoutDependency](https://motion.svelte.page/examples/layout-dependency.md) - Gate layout measurement so FLIP only recomputes when a dependency changes. (live: [https://motion.svelte.page/examples/layout-dependency](https://motion.svelte.page/examples/layout-dependency), tag: `LAYOUT`) - [LayoutGroup](https://motion.svelte.page/examples/layout-group.md) - Wrap regions in to keep identical layoutId values in sibling subtrees from cross-animating. Side-by-side tab strips demo. (live: [https://motion.svelte.page/examples/layout-group](https://motion.svelte.page/examples/layout-group), tag: `LAYOUTGROUP`) - [layoutScroll](https://motion.svelte.page/examples/layout-scroll.md) - Use layoutScroll to keep FLIP layout animations anchored when the user scrolls the parent container mid-animation. Side-by-side demo of the drift vs the fix. (live: [https://motion.svelte.page/examples/layout-scroll](https://motion.svelte.page/examples/layout-scroll), tag: `LAYOUTSCROLL`) - [LazyMotion](https://motion.svelte.page/examples/lazy-motion.md) - Use LazyMotion, m, domMin, domAnimation, and domMax to choose the motion feature bundle for a subtree. (live: [https://motion.svelte.page/examples/lazy-motion](https://motion.svelte.page/examples/lazy-motion), tag: `LAZY`) - [Mobile Drawer](https://motion.svelte.page/examples/mobile-drawer.md) - A theme-aware drag-to-close bottom sheet built with drag, a bound y MotionValue, and dragControls in Svelte Motion. (live: [https://motion.svelte.page/examples/mobile-drawer](https://motion.svelte.page/examples/mobile-drawer), tag: `DRAG`) - [Motion Path](https://motion.svelte.page/examples/motion-path.md) - Animate elements along an SVG path with offset distance using Svelte Motion. Create complex motion trajectories with minimal configuration. (live: [https://motion.svelte.page/examples/motion-path](https://motion.svelte.page/examples/motion-path), tag: `SVG`) - [MotionValue children](https://motion.svelte.page/examples/motion-value-children.md) - Render MotionValue values as live text in motion elements. (live: [https://motion.svelte.page/examples/motion-value-children](https://motion.svelte.page/examples/motion-value-children), tag: `MOTION-VALUE`) - [Multi-State Badge](https://motion.svelte.page/examples/multi-state-badge.md) - A badge component that cycles through idle, processing, success, and error states with smooth animated transitions in Svelte Motion. (live: [https://motion.svelte.page/examples/multi-state-badge](https://motion.svelte.page/examples/multi-state-badge), tag: `ANIMATE-PRESENCE`) - [Notifications Stack](https://motion.svelte.page/examples/notifications-stack.md) - iOS-style notification stack with variant-based stagger animations built with Svelte Motion. Smooth enter, exit, and reorder transitions. (live: [https://motion.svelte.page/examples/notifications-stack](https://motion.svelte.page/examples/notifications-stack), tag: `VARIANTS`) - [Object style MotionValues](https://motion.svelte.page/examples/object-style-motion-values.md) - Drive object-form style props with live MotionValues. (live: [https://motion.svelte.page/examples/object-style-motion-values](https://motion.svelte.page/examples/object-style-motion-values), tag: `MOTION-VALUE`) - [Optimized appear](https://motion.svelte.page/examples/optimized-appear.md) - Use optimized appear animations to start SSR entrance motion before hydration. (live: [https://motion.svelte.page/examples/optimized-appear](https://motion.svelte.page/examples/optimized-appear), tag: `SSR`) - [Pan](https://motion.svelte.page/examples/pan.md) - A swipe-to-dismiss bottom sheet — the canonical pan-gesture pattern. Pull the sheet down past a threshold or flick fast to dismiss; otherwise it springs back. Velocity-aware release. (live: [https://motion.svelte.page/examples/pan](https://motion.svelte.page/examples/pan), tag: `GESTURE`) - [Path Morphing](https://motion.svelte.page/examples/path-morphing.md) - Interactive path morphing animation using SVG shape interpolation with Svelte Motion. (live: [https://motion.svelte.page/examples/path-morphing](https://motion.svelte.page/examples/path-morphing), tag: `SVG`) - [Reorder](https://motion.svelte.page/examples/reorder.md) - Drag-to-reorder lists and wrapped grids with automatic axis detection, RTL-aware insertion, FLIP siblings, and edge auto-scroll. (live: [https://motion.svelte.page/examples/reorder](https://motion.svelte.page/examples/reorder), tag: `GESTURE`) - [Reordering](https://motion.svelte.page/examples/reordering.md) - Drag-to-reorder list items with smooth layout animations using Svelte Motion. Demonstrates drag gestures and automatic layout transitions. (live: [https://motion.svelte.page/examples/reordering](https://motion.svelte.page/examples/reordering), tag: `LAYOUT`) - [Rotate](https://motion.svelte.page/examples/rotate.md) - Continuous rotation animation with configurable easing built with Svelte Motion. A simple example demonstrating infinite transform animations. (live: [https://motion.svelte.page/examples/rotate](https://motion.svelte.page/examples/rotate), tag: `TRANSFORM`) - [Scoped Motion Classes](https://motion.svelte.page/examples/scoped-motion-classes.md) - A live Svelte Motion example using @humanspeak/svelte-scoped-props to keep component-scoped CSS selectors alive on motion components. (live: [https://motion.svelte.page/examples/scoped-motion-classes](https://motion.svelte.page/examples/scoped-motion-classes), tag: `SCOPED CSS`) - [Scroll Progress](https://motion.svelte.page/examples/scroll-progress.md) - Interactive scroll progress animation example using Svelte Motion useScroll and useSpring. (live: [https://motion.svelte.page/examples/scroll-progress](https://motion.svelte.page/examples/scroll-progress), tag: `SCROLL`) - [Shared Layout Animation](https://motion.svelte.page/examples/shared-layout-animation.md) - Animate elements between positions using layoutId for smooth shared layout transitions in Svelte Motion. (live: [https://motion.svelte.page/examples/shared-layout-animation](https://motion.svelte.page/examples/shared-layout-animation), tag: `LAYOUTID`) - [styleString](https://motion.svelte.page/examples/style-string.md) - Reactive style strings with automatic unit handling via the Svelte Motion styleString utility. Simplifies dynamic inline styles in components. (live: [https://motion.svelte.page/examples/style-string](https://motion.svelte.page/examples/style-string), tag: `UTILITY`) - [SVG Animation](https://motion.svelte.page/examples/svg-animation.md) - Bind MotionValues to SVG attributes and commit exact final styles after accelerated animation. (live: [https://motion.svelte.page/examples/svg-animation](https://motion.svelte.page/examples/svg-animation), tag: `SVG`) - [Tab Select](https://motion.svelte.page/examples/tab-select.md) - Animated tab selector using layoutId for a shared indicator that slides between tabs in Svelte Motion. (live: [https://motion.svelte.page/examples/tab-select](https://motion.svelte.page/examples/tab-select), tag: `LAYOUTID`) - [Toggle Switch](https://motion.svelte.page/examples/toggle-switch.md) - Animated toggle switch with spring physics built using Svelte Motion. Demonstrates layout animations and gesture-driven state transitions. (live: [https://motion.svelte.page/examples/toggle-switch](https://motion.svelte.page/examples/toggle-switch), tag: `LAYOUT`) - [transformTemplate](https://motion.svelte.page/examples/transform-template.md) - Customize generated Motion transform strings with transformTemplate. (live: [https://motion.svelte.page/examples/transform-template](https://motion.svelte.page/examples/transform-template), tag: `TRANSFORM`) - [useAnimate](https://motion.svelte.page/examples/use-animate.md) - Imperative animation with a scoped CSS-selector API. Sequenced staggered list with a follow-up beat on a target button. (live: [https://motion.svelte.page/examples/use-animate](https://motion.svelte.page/examples/use-animate), tag: `HOOK`) - [useAnimationControls](https://motion.svelte.page/examples/use-animation-controls.md) - Legacy imperative animation controls for coordinating one or more motion components with start, set, and stop. (live: [https://motion.svelte.page/examples/use-animation-controls](https://motion.svelte.page/examples/use-animation-controls), tag: `HOOK`) - [useAnimationFrame](https://motion.svelte.page/examples/use-animation-frame.md) - Run animations on every frame with Svelte Motion useAnimationFrame. Access delta time and elapsed time for smooth, frame-based effects. (live: [https://motion.svelte.page/examples/use-animation-frame](https://motion.svelte.page/examples/use-animation-frame), tag: `HOOK`) - [useCycle](https://motion.svelte.page/examples/use-cycle.md) - Cycle through animation variants in Svelte. useCycle returns a $state-backed { current, cycle } object for toggling motion states with Svelte 5 runes. (live: [https://motion.svelte.page/examples/use-cycle](https://motion.svelte.page/examples/use-cycle), tag: `HOOK`) - [useFollowValue](https://motion.svelte.page/examples/use-follow-value.md) - Six follower motion values driven by a single pointer source — each with a different transition (spring variants and tweens) so the trail visually shows how each animation type feels. (live: [https://motion.svelte.page/examples/use-follow-value](https://motion.svelte.page/examples/use-follow-value), tag: `HOOK`) - [useInView](https://motion.svelte.page/examples/use-in-view.md) - Detect viewport entry from a Svelte store with useInView. Reactive boolean store, IntersectionObserver-backed, with optional once-latch. (live: [https://motion.svelte.page/examples/use-in-view](https://motion.svelte.page/examples/use-in-view), tag: `HOOK`) - [usePresence](https://motion.svelte.page/examples/use-presence.md) - Custom exit animations from inside the child. PresenceChild holds the component rendered until your safeToRemove() fires. (live: [https://motion.svelte.page/examples/use-presence](https://motion.svelte.page/examples/use-presence), tag: `ANIMATE-PRESENCE`) - [usePresenceData](https://motion.svelte.page/examples/use-presence-data.md) - Read AnimatePresence custom data from an entering or exiting child. (live: [https://motion.svelte.page/examples/use-presence-data](https://motion.svelte.page/examples/use-presence-data), tag: `PRESENCE-DATA`) - [useReducedMotion](https://motion.svelte.page/examples/use-reduced-motion.md) - Honor the user's prefers-reduced-motion accessibility setting with Svelte Motion useReducedMotion. A reactive store that updates live when the OS preference changes. (live: [https://motion.svelte.page/examples/use-reduced-motion](https://motion.svelte.page/examples/use-reduced-motion), tag: `HOOK`) - [useReducedMotionConfig](https://motion.svelte.page/examples/use-reduced-motion-config.md) - Resolve the reduced-motion policy by combining a parent override with the OS preference. Reactive via Svelte 5 runes. (live: [https://motion.svelte.page/examples/use-reduced-motion-config](https://motion.svelte.page/examples/use-reduced-motion-config), tag: `HOOK`) - [useTime](https://motion.svelte.page/examples/use-time.md) - Time-based animations using the Svelte Motion useTime reactive store. Creates smooth, continuously updating animations driven by elapsed time. (live: [https://motion.svelte.page/examples/use-time](https://motion.svelte.page/examples/use-time), tag: `HOOK`) - [useTime (Synced)](https://motion.svelte.page/examples/use-time-synced.md) - Synchronized time-based animations across multiple elements using a shared Svelte Motion useTime store for coordinated motion effects. (live: [https://motion.svelte.page/examples/use-time-synced](https://motion.svelte.page/examples/use-time-synced), tag: `HOOK`) - [useWillChange](https://motion.svelte.page/examples/use-will-change.md) - Auto-managed CSS will-change that starts at auto and latches to transform after a qualifying animation. (live: [https://motion.svelte.page/examples/use-will-change](https://motion.svelte.page/examples/use-will-change), tag: `PERFORMANCE`) - [Vanilla Values](https://motion.svelte.page/examples/vanilla-values.md) - Motion values without motion components — a $state slider driving a plain div through toMotionValue, mapValue, springValue, and styleEffect. (live: [https://motion.svelte.page/examples/vanilla-values](https://motion.svelte.page/examples/vanilla-values), tag: `VANILLA`) - [Variants Basic](https://motion.svelte.page/examples/variants-basic.md) - Define and switch between named animation states with Svelte Motion variants. Create reusable, declarative animation presets for components. (live: [https://motion.svelte.page/examples/variants-basic](https://motion.svelte.page/examples/variants-basic), tag: `VARIANTS`) - [Variants Dynamic (custom)](https://motion.svelte.page/examples/variants-dynamic.md) - Per-instance variants using the custom prop and function-form factories in Svelte Motion. Staggered list reveals with index-driven delays. (live: [https://motion.svelte.page/examples/variants-dynamic](https://motion.svelte.page/examples/variants-dynamic), tag: `VARIANTS`) - [Variants Propagation](https://motion.svelte.page/examples/variants-propagation.md) - Propagate variant animations through nested component trees with Svelte Motion. Parent state changes automatically cascade to child elements. (live: [https://motion.svelte.page/examples/variants-propagation](https://motion.svelte.page/examples/variants-propagation), tag: `VARIANTS`) - [whileHover variant keys](https://motion.svelte.page/examples/variants-while-hover.md) - Pass a variant key (or array) to whileHover, whileTap, whileFocus, whileDrag, or whileInView to reuse named animation states across gestures. (live: [https://motion.svelte.page/examples/variants-while-hover](https://motion.svelte.page/examples/variants-while-hover), tag: `INLINE`) - [Velocity Interrupts](https://motion.svelte.page/examples/velocity-interrupts.md) - Interrupt a gesture spring mid-flight and the momentum carries — position AND velocity ride the same MotionValue into the next animation for a live, natural feel. (live: [https://motion.svelte.page/examples/velocity-interrupts](https://motion.svelte.page/examples/velocity-interrupts), tag: `GESTURE`) - [View Transitions](https://motion.svelte.page/examples/view.md) - Shared-element morphs and filtered galleries with animateView — the browser View Transitions API driven by Motion timing. (live: [https://motion.svelte.page/examples/view](https://motion.svelte.page/examples/view), tag: `MORPH`) - [While Focus](https://motion.svelte.page/examples/while-focus.md) - Animate elements when they receive keyboard focus using Svelte Motion whileFocus. Enhance accessibility with visual feedback on focus events. (live: [https://motion.svelte.page/examples/while-focus](https://motion.svelte.page/examples/while-focus), tag: `FOCUS`) - [While In View](https://motion.svelte.page/examples/while-in-view.md) - Animate elements when they enter or leave the viewport using Svelte Motion whileInView. Create scroll-triggered reveal and exit animations. (live: [https://motion.svelte.page/examples/while-in-view](https://motion.svelte.page/examples/while-in-view), tag: `SCROLL`)