Chapter 138: Layout & Card UI Patterns (Recipes)

Core Idea

Curated recipes from Motion's official examples gallery for layout & card ui patterns. Each entry is implemented in one or more of vanilla JS, React, and Vue; consult the framework-specific example on motion.dev for the full runnable version.

Key Concepts

• card stack (react): An example of creating a swipeable card stack with photos in Motion for React.
• ios app folder (react): An iOS-style app folder that expands to reveal apps inside, using Motion for React's layout animations and AnimatePresence.
• app store (js, react): An example of creating a card layout inspired by the iOS App Store with Modal functionality using View Transitions in Motion.
• app store layout (js): An example of creating a card layout inspired by the iOS App Store with Modal functionality using Motion's animateLayout for
• staggered grid (js): An example of animating elements with a delay staggered by physical distance.
• accordion (js, react): An example of an accordion component using Motion. Animate accordion content using height: auto and accessible markup. Uses focus
• modal (js): An example of a modal dialog using Motion and the HTML <dialog /> element. This example demonstrates smooth animations for
• notifications list (js): An example of animating a list of animations as they're added and removed, using Motion for JavaScript's animation capabilities.
• notifications stack (js, react): A iOS inspired notifications stack using Motion's variants.
• multi state badge (js, react): A badge that can be in multiple states, such as processing, success, or error.
• smooth tabs (react): Segmented control with sliding indicator and directional content transitions
• tab select (react): An example of using making a tab select component with Motion for React's shared layout animations. Because it uses onTap and
• todo list (react): A draggable to-do list with animated checkboxes and strikethrough effects using Motion for React's Reorder component.
• family dialog (js): Family-style dialog using Motion. It uses the HTML dialog and Motion's animateView function for View Transitions.
• lightbox (js): An example and tutorial for a lightbox shared element transition, using Motion's view function.
• command palette (react): A ⌘K-style command palette with spring-animated entrance, filtered search, and keyboard navigation
• html content (js, react): An example using Motion to animate HTML content via the Element.innerText property.

Code Examples

"use client"

import Image from "next/image"
import { useState } from "react"

export default function CardStack() {
    const [currentIndex, setCurrentIndex] = useState(0)
    const images = [
        { src: "/photos/prague/image-03.jpg", ratio: 3 / 4 },
        { src: "/photos/prague/image-09.jpg", ratio: 3 / 4 },
        { src: "/photos/prague/image-01.jpg", ratio: 4 / 3 },
        // Add more images...
    ]

    return (
        <>
            <ul className="stack">
                {images.map((image, index) => (
// ...

• What it demonstrates: card stack pattern.

"use client"

import { AnimatePresence, motion, MotionConfig } from "motion/react"
import { useState } from "react"

function AppTile({ iconSrc, label, layoutId }) {
    return (
        <motion.img
            className="tile"
            src={iconSrc}
            alt={label}
            aria-label={label}
            layoutId={layoutId}
            draggable={false}
        />
    )
}

// ...

• What it demonstrates: ios app folder pattern.

Key Takeaways

1. These are recipe-level compositions of core Motion primitives (variants, gestures, layout, scroll, springs), not new APIs.
2. Most recipes exist in multiple frameworks with near-identical logic, only the component syntax differs.
3. Reach for the closest-matching recipe as a starting point, then adapt timing/easing/spring values to the design.

Connects To

• Transitions, Keyframes & Variants: recipes here compose those lower-level primitives.
• Gestures & Interaction: several recipes layer on drag/hover/press gestures.