Web motion and 3D: the pieces the user asked for, wired and honest

The user, 2026-09-06: "I want you to use Vectory Thredel and Jitter 2 so ... make sure they're ready available skills." Those are Vectary, Threlte and Jitter. This skill is the readiness: what each one is, what is installed, what needs his account, and the recipe that ships.

Two rules from [[website-craft]] frame all of it. Motion is a tell when it is generic (hover lift, sliding arrows, tells 23 and 24) and an asset when it shows the product doing something. 3D is a tell when it is a decorative blob (radial orb, tell 22) and an asset when it is a real object the user can read. Every recipe below is for the asset case. If you cannot say what the motion tells the user, do not add it.

1 · Jitter → Lottie → the app (motion)

What Jitter is. A browser motion tool (jitter.video). No API and no MCP. It exports Lottie, dotLottie, WebM/ProRes, GIF, APNG, and it will copy any easing curve as CSS. It has a Figma plugin: design the frames in Figma, animate in Jitter, export.

Status 2026-09-06: The user has a Jitter account and the Jitter Figma plugin installed. The LottieFiles Creator MCP was tried and dropped the same day ("forget about the lottie one, it just isn't"): its bridge needs a logged-in Creator tab kept open, and he did not want that dependency. Both Lottie MCPs are removed from the user config. The motion pipeline is Jitter only: design in Figma, animate in Jitter, export dotLottie, play it in the app. Do not reinstall the Lottie MCPs without asking him.

The recipe that ships (React / Next.js):

npm i @lottiefiles/dotlottie-react   # 0.19.x, dotLottie + Lottie JSON, small runtime

"use client";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";

export function Motion({ src, loop = false }: { src: string; loop?: boolean }) {
  // Respect the OS setting. A user who asked for less motion gets the last frame.
  const reduce = typeof window !== "undefined"
    && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  return (
    <DotLottieReact src={src} autoplay={!reduce} loop={loop && !reduce}
      style={{ width: "100%", height: "100%" }} />
  );
}

Rules:

• Export dotLottie (.lottie) not JSON when the file has raster assets; it is

zipped and a fraction of the size.

• Motion has a job. A transition that explains a state change (bet placed,

card settled, edge found) is a job. A hero that wiggles is not.

• prefers-reduced-motion is not optional. It is one of the 20 in

[[web-app-baseline]].

• Easing: Jitter's CSS export gives the exact curve. Use it on the same element

in code so the design and the build agree.

• Never autoplay looping motion inside a table of numbers. It fights the reading.

2 · 3D in React: React Three Fiber (not Threlte)

Threlte is Svelte-only. Verified against its installation docs 2026-09-06: npm install three @threlte/core, with @threlte/extras, rapier, theatre, xr, flex, gltf, studio. Nothing in it runs under React. The apps this was written for are Next.js, so Threlte is the wrong tool for them, and the right tool is the same idea for React:

npm i three @react-three/fiber @react-three/drei     # three 0.185, r3f 9.7, drei 10.7

"use client";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Environment, useGLTF } from "@react-three/drei";
import { Suspense } from "react";

function Model({ url }: { url: string }) {
  const { scene } = useGLTF(url);          // a REAL object exported from Vectary/Blender
  return <primitive object={scene} />;
}

export function Scene({ url }: { url: string }) {
  return (
    <Canvas dpr={[1, 1.5]} camera={{ position: [0, 0, 4], fov: 40 }}>
      <Suspense fallback={null}>
        <Model url={url} />
        <Environment preset="studio" />
      </Suspense>
      <OrbitControls enablePan={false} enableZoom={false} />
    </Canvas>
  );
}

Rules:

• Dynamic-import the Canvas (next/dynamic, ssr: false) and lazy-load it

below the fold. A 3D hero that blocks first paint fails the baseline.

• dpr capped at 1.5. Retina at 2x on a full-bleed canvas melts laptops.
• Ship a poster image for reduced-motion and for the loading state. No dead

black rectangle.

• If Threlte's ecosystem is the draw (Theatre.js timelines, Rapier physics), the

React equivalents are @react-three/rapier and Theatre.js's own React bindings.

• Use Threlte only on a Svelte project. Then it is excellent.

3 · Vectary (3D design and embeds)

What it is. Browser-based 3D design at vectary.com, publishes a scene as a live embed that behaves like a 3D CMS: edit the scene, every embed updates. No MCP. Its API (message layer into the iframe: click and scroll listeners, configurator state, data in and out) is Business plan only.

Free tier, verified on the pricing page 2026-09-06: 5 projects, private share links and "embed in web platforms". Public sharing and embedding require Pro AI or Business, and the un-branded viewer is Business. So on the free tier an embed works while we build and demo; a public production page needs Pro.

Needs the user: account at https://www.vectary.com (email or Google). Start free; upgrade to Pro only when a public page actually embeds a Vectary scene.

Recipe:

1. 1Design or import the object in Vectary (it accepts GLB/GLTF/OBJ/STEP).
2. 2Two ways out, choose by need: - Embed (Share → Embed) when the scene needs Vectary's viewer features (AR, hotspots, configurator). Paste the iframe; it is a live link. - Export GLB and render it with React Three Fiber (section 2) when we want full control, no third-party iframe, no plan dependency. Prefer this for a data-heavy app: one fewer external runtime on a page full of numbers.
3. 3Either way the object must be something real: a card, a chip, a stadium seat, a ticket. Not a floating gradient shape. That is tell 22 with more polygons.

4 · Before you ship any of it

Run in this order, every time:

1. 1node ~/.claude/skills/website-craft/scripts/detect.mjs <dir>. Motion and 3D are the two places tells 22 to 25 come back in.
2. 2A performance audit (chrome-devtools or PageSpeed Insights) on the route with the Canvas or the Lottie. Main-thread time and LCP are the numbers; a 3D hero that costs 2s of LCP is not "next generation", it is slow.
3. 3Toggle prefers-reduced-motion in DevTools and look at the page. It must still be complete.

What this skill will not do

It will not make a design good. It gets the motion and 3D pipeline connected and keeps the two failure modes (generic motion, decorative 3D) from sneaking back in. Taste is still the brief's.