{
  "contract": "tessli.public-collection.v2",
  "canonicalPath": "/collections/motion-starter-pack",
  "representations": {
    "json": "/collections/motion-starter-pack/collection.json",
    "markdown": "/collections/motion-starter-pack/collection.md"
  },
  "collection": {
    "id": "collection-motion-starter-pack",
    "slug": "motion-starter-pack",
    "title": "Motion starter pack",
    "description": "A balanced introduction to interface animation, interactive vectors, JavaScript motion, WebGL, and browser-based 3D workflows.",
    "outcome": "A motion approach matched to the interaction goal, runtime constraints, authoring workflow, and team stack.",
    "audience": "Designers and frontend engineers deciding how to add purposeful interface motion, vector animation, or browser 3D.",
    "stageCount": 3,
    "resourceCount": 10,
    "stages": [
      {
        "order": 1,
        "id": "define-motion-scope",
        "title": "Define the motion scope",
        "resources": [
          {
            "order": 1,
            "role": "Motion provides a production-oriented JavaScript and React baseline for interface animation.",
            "inspectPrompt": "Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.",
            "decisionPrompt": "Choose whether the project needs timeline control, lightweight transitions, or both.",
            "sourceGuide": {
              "id": "resource-374543d4f72b",
              "slug": "motion",
              "name": "Motion",
              "canonicalPath": "/resources/motion",
              "jsonPath": "/resources/motion/profile.json",
              "markdownPath": "/resources/motion/profile.md",
              "providerUrl": "https://motion.dev",
              "accessAction": {
                "kind": "documentation",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Read the official Motion documentation before implementing animation.",
                "url": "https://motion.dev"
              }
            }
          },
          {
            "order": 2,
            "role": "GSAP represents high-control timeline animation when sequencing and performance are central.",
            "inspectPrompt": "Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.",
            "decisionPrompt": "Choose whether the project needs timeline control, lightweight transitions, or both.",
            "sourceGuide": {
              "id": "resource-9042d48e084f",
              "slug": "gsap",
              "name": "GSAP",
              "canonicalPath": "/resources/gsap",
              "jsonPath": "/resources/gsap/profile.json",
              "markdownPath": "/resources/gsap/profile.md",
              "providerUrl": "https://gsap.com",
              "accessAction": {
                "kind": "browser",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Open the canonical provider URL; sign-in and other access requirements are not recorded.",
                "url": "https://gsap.com"
              }
            }
          },
          {
            "order": 3,
            "role": "LottieFiles supports asset-based vector animation workflows and handoff.",
            "inspectPrompt": "Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.",
            "decisionPrompt": "Choose whether the project needs timeline control, lightweight transitions, or both.",
            "sourceGuide": {
              "id": "resource-eae789634e34",
              "slug": "lottiefiles",
              "name": "LottieFiles",
              "canonicalPath": "/resources/lottiefiles",
              "jsonPath": "/resources/lottiefiles/profile.json",
              "markdownPath": "/resources/lottiefiles/profile.md",
              "providerUrl": "https://lottiefiles.com",
              "accessAction": {
                "kind": "browser",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Open the canonical provider URL; sign-in and other access requirements are not recorded.",
                "url": "https://lottiefiles.com"
              }
            }
          }
        ]
      },
      {
        "order": 2,
        "id": "choose-asset-workflow",
        "title": "Choose the asset workflow",
        "resources": [
          {
            "order": 1,
            "role": "Rive adds stateful interactive vector animation rather than playback-only assets.",
            "inspectPrompt": "Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.",
            "decisionPrompt": "Decide whether motion should be authored as interactive vectors, 3D scenes, or code.",
            "sourceGuide": {
              "id": "resource-a69034dde468",
              "slug": "rive",
              "name": "Rive",
              "canonicalPath": "/resources/rive",
              "jsonPath": "/resources/rive/profile.json",
              "markdownPath": "/resources/rive/profile.md",
              "providerUrl": "https://rive.app",
              "accessAction": {
                "kind": "browser",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Open the canonical provider URL; sign-in and other access requirements are not recorded.",
                "url": "https://rive.app"
              }
            }
          },
          {
            "order": 2,
            "role": "Spline provides a collaborative browser 3D authoring route for teams avoiding low-level scene code.",
            "inspectPrompt": "Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.",
            "decisionPrompt": "Decide whether motion should be authored as interactive vectors, 3D scenes, or code.",
            "sourceGuide": {
              "id": "resource-631345718892",
              "slug": "spline",
              "name": "Spline",
              "canonicalPath": "/resources/spline",
              "jsonPath": "/resources/spline/profile.json",
              "markdownPath": "/resources/spline/profile.md",
              "providerUrl": "https://spline.design",
              "accessAction": {
                "kind": "browser",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Open the canonical provider URL; sign-in and other access requirements are not recorded.",
                "url": "https://spline.design"
              }
            }
          },
          {
            "order": 3,
            "role": "Three.js establishes the lower-level WebGL option and its engineering cost.",
            "inspectPrompt": "Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.",
            "decisionPrompt": "Decide whether motion should be authored as interactive vectors, 3D scenes, or code.",
            "sourceGuide": {
              "id": "resource-e5c348f9190f",
              "slug": "three-js",
              "name": "Three.js",
              "canonicalPath": "/resources/three-js",
              "jsonPath": "/resources/three-js/profile.json",
              "markdownPath": "/resources/three-js/profile.md",
              "providerUrl": "https://threejs.org",
              "accessAction": {
                "kind": "documentation",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Read the official Three.js documentation and examples before building a scene.",
                "url": "https://threejs.org"
              }
            }
          }
        ]
      },
      {
        "order": 3,
        "id": "match-the-stack",
        "title": "Match the implementation stack",
        "resources": [
          {
            "order": 1,
            "role": "React Three Fiber shows how Three.js integrates with React component architecture.",
            "inspectPrompt": "Compare low-level rendering, React integration, sequencing, and lightweight alternatives.",
            "decisionPrompt": "Select the implementation layer that fits the framework, performance budget, and maintenance capacity.",
            "sourceGuide": {
              "id": "resource-c873b7d6cf1d",
              "slug": "react-three-fiber",
              "name": "React Three Fiber",
              "canonicalPath": "/resources/react-three-fiber",
              "jsonPath": "/resources/react-three-fiber/profile.json",
              "markdownPath": "/resources/react-three-fiber/profile.md",
              "providerUrl": "https://r3f.docs.pmnd.rs",
              "accessAction": {
                "kind": "browser",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Open the canonical provider URL; sign-in and other access requirements are not recorded.",
                "url": "https://r3f.docs.pmnd.rs"
              }
            }
          },
          {
            "order": 2,
            "role": "Theatre.js supports authored sequencing and motion-design control for web scenes.",
            "inspectPrompt": "Compare low-level rendering, React integration, sequencing, and lightweight alternatives.",
            "decisionPrompt": "Select the implementation layer that fits the framework, performance budget, and maintenance capacity.",
            "sourceGuide": {
              "id": "resource-e0917de2c7a9",
              "slug": "theatre-js",
              "name": "Theatre.js",
              "canonicalPath": "/resources/theatre-js",
              "jsonPath": "/resources/theatre-js/profile.json",
              "markdownPath": "/resources/theatre-js/profile.md",
              "providerUrl": "https://www.theatrejs.com",
              "accessAction": {
                "kind": "browser",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Open the canonical provider URL; sign-in and other access requirements are not recorded.",
                "url": "https://www.theatrejs.com"
              }
            }
          },
          {
            "order": 3,
            "role": "Anime.js offers a smaller code-driven animation alternative for targeted interactions.",
            "inspectPrompt": "Compare low-level rendering, React integration, sequencing, and lightweight alternatives.",
            "decisionPrompt": "Select the implementation layer that fits the framework, performance budget, and maintenance capacity.",
            "sourceGuide": {
              "id": "resource-23cc7dc75f79",
              "slug": "anime-js",
              "name": "Anime.js",
              "canonicalPath": "/resources/anime-js",
              "jsonPath": "/resources/anime-js/profile.json",
              "markdownPath": "/resources/anime-js/profile.md",
              "providerUrl": "https://animejs.com",
              "accessAction": {
                "kind": "browser",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Open the canonical provider URL; sign-in and other access requirements are not recorded.",
                "url": "https://animejs.com"
              }
            }
          },
          {
            "order": 4,
            "role": "AutoAnimate covers low-configuration layout transitions where a full motion system is unnecessary.",
            "inspectPrompt": "Compare low-level rendering, React integration, sequencing, and lightweight alternatives.",
            "decisionPrompt": "Select the implementation layer that fits the framework, performance budget, and maintenance capacity.",
            "sourceGuide": {
              "id": "resource-9ab2847bb0d5",
              "slug": "autoanimate",
              "name": "AutoAnimate",
              "canonicalPath": "/resources/autoanimate",
              "jsonPath": "/resources/autoanimate/profile.json",
              "markdownPath": "/resources/autoanimate/profile.md",
              "providerUrl": "https://auto-animate.formkit.com",
              "accessAction": {
                "kind": "source-code",
                "preferred": true,
                "auth": "unknown",
                "agentAction": "Review the recorded AutoAnimate repository and its installation guidance.",
                "url": "https://github.com/formkit/auto-animate"
              }
            }
          }
        ]
      }
    ]
  },
  "boundaries": [
    "Collection order is editorial guidance and does not represent popularity, sponsorship, or universal quality.",
    "Repository intelligence is not live-provider verification.",
    "Revalidate provider access, pricing, licensing, terms, availability, and time-sensitive claims.",
    "No browser-local Board, Saved, account, cookie, or credential data is included."
  ]
}