Chapter 141: Misc & Advanced (Recipes)

Core Idea

Curated recipes from Motion's official examples gallery for misc & advanced. 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

• three (js): An example of a rotating cube using Three.js and Motion.
• color interpolation (js): A comparison of color interpolation between Motion and the browser's native interpolation. Motion uses linear RGB color space,
• page wipe (js): An example of combining a full page wipe with a shared element transition using Motion's view function. The view function is
• material design ripple (js, react): An example of creating a press ripple with Motion, inspired by Google Material Design.

Code Examples

<div id="three-container"></div>

<script type="module">
    import * as THREE from "https://cdn.jsdelivr.net/npm/three@v0.149.0/build/three.module.js"

    const main = document.getElementById("three-container")
    const scene = new THREE.Scene({ alpha: true })
    const camera = new THREE.PerspectiveCamera(
        25,
        main.offsetWidth / main.offsetHeight,
        0.1,
        1000
    )
    const renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(main.offsetWidth, main.offsetHeight)
    main.appendChild(renderer.domElement)

    const geometry = new THREE.BoxGeometry()
// ...

• What it demonstrates: three pattern.

<div class="container">
    <div class="swatch-container">
        <div class="swatch waapi"></div>
        <div class="label">Browser</div>
    </div>
    <div class="swatch-container">
        <div class="swatch motion"></div>
        <div class="label">Motion</div>
    </div>
</div>

<style>
    /** Copy styles from example source code */
</style>

• What it demonstrates: color interpolation 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.