# Tessli Collection — Motion starter pack

## Use this research path

Use this research path to A motion approach matched to the interaction goal, runtime constraints, authoring workflow, and team stack.

A balanced introduction to interface animation, interactive vectors, JavaScript motion, WebGL, and browser-based 3D workflows.

- **Audience:** Designers and frontend engineers deciding how to add purposeful interface motion, vector animation, or browser 3D.
- **Stages:** 3
- **Sources:** 10

## Staged decisions

### 1. Define the motion scope

#### 1.1 Motion

- **Role:** Motion provides a production-oriented JavaScript and React baseline for interface animation.
- **Inspect:** Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.
- **Decide:** Choose whether the project needs timeline control, lightweight transitions, or both.
- **Source guide:** /resources/motion
- **JSON:** /resources/motion/profile.json
- **Markdown:** /resources/motion/profile.md
- **Provider:** https://motion.dev
- **Access action:** Read the official Motion documentation before implementing animation. (https://motion.dev)

#### 1.2 GSAP

- **Role:** GSAP represents high-control timeline animation when sequencing and performance are central.
- **Inspect:** Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.
- **Decide:** Choose whether the project needs timeline control, lightweight transitions, or both.
- **Source guide:** /resources/gsap
- **JSON:** /resources/gsap/profile.json
- **Markdown:** /resources/gsap/profile.md
- **Provider:** https://gsap.com
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://gsap.com)

#### 1.3 LottieFiles

- **Role:** LottieFiles supports asset-based vector animation workflows and handoff.
- **Inspect:** Compare general-purpose animation libraries with automatic transitions to separate essential interaction feedback from spectacle.
- **Decide:** Choose whether the project needs timeline control, lightweight transitions, or both.
- **Source guide:** /resources/lottiefiles
- **JSON:** /resources/lottiefiles/profile.json
- **Markdown:** /resources/lottiefiles/profile.md
- **Provider:** https://lottiefiles.com
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://lottiefiles.com)

### 2. Choose the asset workflow

#### 2.1 Rive

- **Role:** Rive adds stateful interactive vector animation rather than playback-only assets.
- **Inspect:** Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.
- **Decide:** Decide whether motion should be authored as interactive vectors, 3D scenes, or code.
- **Source guide:** /resources/rive
- **JSON:** /resources/rive/profile.json
- **Markdown:** /resources/rive/profile.md
- **Provider:** https://rive.app
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://rive.app)

#### 2.2 Spline

- **Role:** Spline provides a collaborative browser 3D authoring route for teams avoiding low-level scene code.
- **Inspect:** Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.
- **Decide:** Decide whether motion should be authored as interactive vectors, 3D scenes, or code.
- **Source guide:** /resources/spline
- **JSON:** /resources/spline/profile.json
- **Markdown:** /resources/spline/profile.md
- **Provider:** https://spline.design
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://spline.design)

#### 2.3 Three.js

- **Role:** Three.js establishes the lower-level WebGL option and its engineering cost.
- **Inspect:** Inspect vector and browser-based 3D authoring workflows, runtime ownership, and handoff needs.
- **Decide:** Decide whether motion should be authored as interactive vectors, 3D scenes, or code.
- **Source guide:** /resources/three-js
- **JSON:** /resources/three-js/profile.json
- **Markdown:** /resources/three-js/profile.md
- **Provider:** https://threejs.org
- **Access action:** Read the official Three.js documentation and examples before building a scene. (https://threejs.org)

### 3. Match the implementation stack

#### 3.1 React Three Fiber

- **Role:** React Three Fiber shows how Three.js integrates with React component architecture.
- **Inspect:** Compare low-level rendering, React integration, sequencing, and lightweight alternatives.
- **Decide:** Select the implementation layer that fits the framework, performance budget, and maintenance capacity.
- **Source guide:** /resources/react-three-fiber
- **JSON:** /resources/react-three-fiber/profile.json
- **Markdown:** /resources/react-three-fiber/profile.md
- **Provider:** https://r3f.docs.pmnd.rs
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://r3f.docs.pmnd.rs)

#### 3.2 Theatre.js

- **Role:** Theatre.js supports authored sequencing and motion-design control for web scenes.
- **Inspect:** Compare low-level rendering, React integration, sequencing, and lightweight alternatives.
- **Decide:** Select the implementation layer that fits the framework, performance budget, and maintenance capacity.
- **Source guide:** /resources/theatre-js
- **JSON:** /resources/theatre-js/profile.json
- **Markdown:** /resources/theatre-js/profile.md
- **Provider:** https://www.theatrejs.com
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://www.theatrejs.com)

#### 3.3 Anime.js

- **Role:** Anime.js offers a smaller code-driven animation alternative for targeted interactions.
- **Inspect:** Compare low-level rendering, React integration, sequencing, and lightweight alternatives.
- **Decide:** Select the implementation layer that fits the framework, performance budget, and maintenance capacity.
- **Source guide:** /resources/anime-js
- **JSON:** /resources/anime-js/profile.json
- **Markdown:** /resources/anime-js/profile.md
- **Provider:** https://animejs.com
- **Access action:** Open the canonical provider URL; sign-in and other access requirements are not recorded. (https://animejs.com)

#### 3.4 AutoAnimate

- **Role:** AutoAnimate covers low-configuration layout transitions where a full motion system is unnecessary.
- **Inspect:** Compare low-level rendering, React integration, sequencing, and lightweight alternatives.
- **Decide:** Select the implementation layer that fits the framework, performance budget, and maintenance capacity.
- **Source guide:** /resources/autoanimate
- **JSON:** /resources/autoanimate/profile.json
- **Markdown:** /resources/autoanimate/profile.md
- **Provider:** https://auto-animate.formkit.com
- **Access action:** Review the recorded AutoAnimate repository and its installation guidance. (https://github.com/formkit/auto-animate)

## Interpretation 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.