# PureAnim

> Visual SVG animation editor that exports CSS @keyframes and animated SVG with no JavaScript player, plus optional Lottie, GIF, and MP4. Built for motion designers, product designers, and engineers who want web-native output they keep in their repo.

PureAnim provides an After Effects-style timeline — motion paths, per-key easing, repeaters, stroke draw-on, echo, shake, nested compositions — over plain SVG, and exports CSS you can read and commit. Projects are stored locally in the browser.

## Docs

- [Learn](https://flekta.app/learn/): Short guides for PureAnim workflows. Markdown in the Learn collection publishes here.
- [Reuse motion with linked layers](https://flekta.app/learn/linked-layers/): Animate one layer, then link others so they follow. Whole layer or one property, reverse, or shift when it plays.
- [Loop without snapping back](https://flekta.app/learn/ping-pong-loop/): Enable Pingpong on a property so a move plays forward and back. Pingpong Travel turns the layer around at the turnaround.
- [Animate once, tile the rest](https://flekta.app/learn/repeaters/): Repeat one keyed move on the same layer. Cycle restarts; Offset keeps going.
- [Offset timing across many layers](https://flekta.app/learn/stagger/): Link copies of one move and drag when each plays. There is no Stagger panel.
- [Draw the path, export the CSS](https://flekta.app/learn/custom-motion-path/): Draw a curve on the canvas, optionally face the layer along it, then export.
- [Play the animation on hover](https://flekta.app/learn/hover-playback/): Design on the timeline, then export Playback Hover so the graphic plays on hover.
- [Drive motion from the page scroll](https://flekta.app/learn/scroll-playback/): Export On scroll so the graphic plays as it moves through the page. Entry, Cover, or Exit.
- [Nest one project inside another](https://flekta.app/learn/nested-compositions/): Add layer → Composition, then drag the Project Bar to set when it plays.
- [Stop guessing pixel values](https://flekta.app/learn/canvas-gizmo/): Move, rotate, and scale on the canvas. Keys land at the playhead.
- [Draw a stroke on](https://flekta.app/learn/stroke-draw/): Open Draw, pick a mode, and animate Start, End, and Offset.
- [Scripting reference](https://flekta.app/scripting.md): Complete API for the in-app script console (Edit → Scripting) — commands, units, property channels, motion-design guidance, and worked examples. Read this before writing a PureAnim script.
- [Driving PureAnim from an AI agent](https://flekta.app/agents.md): How an assistant with browser control operates the editor directly — loading a document, opening the script console, the element ids to click, and how to read results back. Read this if you are animating on the user's behalf in a live browser rather than handing them a script.

## App

- [Editor](https://flekta.app/app): The animation editor itself. Import an SVG, animate it, export CSS or Lottie.
- [Home](https://flekta.app/): Product overview, feature list, and export formats.