# anvil

> Animations agents can write. One SceneSpec JSON dialect renders as Lottie (2-D vector) or three.js (3-D), via a single <Anvil> Svelte component on Cloudflare Workers. MIT.

Documentation follows Diataxis (https://diataxis.fr). Pages are grouped by mode.

## Tutorials
Start here. A guided lesson that takes you from nothing to a working, deployed animation.

- [Build your first animated page](https://anvil.coey.dev/docs/tutorials/first-animation): From an empty folder to a deployed, animated page in about ten minutes.

## How-to Guides
Recipes for specific tasks, for when you know what you want and need the steps.

- [How to add a loading spinner](https://anvil.coey.dev/docs/how-to/loading-spinner): Generate a Lottie spinner spec and render it while something loads.
- [How to make a 3D hero scene](https://anvil.coey.dev/docs/how-to/3d-hero): Compose a three.js SceneSpec with objects, lights, and motion.
- [How to serve a spec from a Worker route](https://anvil.coey.dev/docs/how-to/serve-from-worker): Return agent-generated SceneSpec JSON from a Cloudflare Worker.
- [How to author Lottie by hand](https://anvil.coey.dev/docs/how-to/lottie-by-hand): Write a custom Lottie document directly into a spec's data field.
- [How to use the agent skill](https://anvil.coey.dev/docs/how-to/agent-skill): Point an agent harness at the bundled skill so it authors specs for you.

## Explanation
Discussion of the design and the reasons behind it. Read away from the keyboard.

- [About one JSON dialect](https://anvil.coey.dev/docs/explanation/one-json-dialect): Why anvil makes an agent emit a single SceneSpec rather than code.
- [About choosing Lottie and three.js](https://anvil.coey.dev/docs/explanation/lottie-and-three): Why these two renderers, why not Remotion, and how kind splits them.
- [About the tiny-worker build](https://anvil.coey.dev/docs/explanation/tiny-worker): How the SSR Worker stays small while renderers load only when needed.

## Reference
The dry facts: the schema, the CLI, the component, the routes. Consult while working.

- [SceneSpec](https://anvil.coey.dev/docs/reference/scenespec): The complete SceneSpec schema: shared fields, LottieSpec, ThreeSpec.
- [make-spec CLI](https://anvil.coey.dev/docs/reference/cli): scripts/make-spec.mjs — scaffold a Lottie spec from a preset.
- [<Anvil> and package exports](https://anvil.coey.dev/docs/reference/component): The Anvil component props and the public API surface of the package.
- [Worker routes](https://anvil.coey.dev/docs/reference/worker-routes): The HTTP routes the anvil gallery Worker serves.

## Other
- [Live gallery](https://anvil.coey.dev/gallery): rendered examples; each links to its raw SceneSpec JSON.
- [Spec list](https://anvil.coey.dev/anim): JSON index of example spec ids.