Frontend
React 19
The interface is a React application that manages controls, live preview state, timing, animation mode selection, and export interactions in a browser UI.
Main Stack
What powers this animation study tool and how it differs from a typical static visual demo.
Language
TypeScript
Application code, scene definitions, export logic, and Vite configuration are written in TypeScript, which helps keep the animation and export structures consistent.
Ferramenta de build
Vite 7
Vite handles the local development server, production build, preview mode, and plugin-based extension points that power the local export endpoint.
Animation model
Scene-based SVG generation
The app generates SVG visuals from structured scene/state data rather than embedding fixed animations. That makes the visual system parameter-driven and export-friendly.
Export layer
Local filesystem output
The tool exports not only SVG files but matching markdown snapshots, using a local server route and Node.js filesystem utilities rather than browser-only download blobs.
Development tooling
ESLint + React plugin
The project uses modern linting and a standard React/Vite TypeScript toolchain, making it much closer to Glossary Builder than to the static utilities in the workspace.
How It Runs
The app combines browser-side controls with a local export route backed by Node.js.
1
Vite serves the React app
The project starts as a normal Vite + React app, with src/main.tsx mounting the interface and src/App.tsx running the main tool.
2
The UI edits animation parameters
The browser controls adjust scene state such as mode, timing, design parameters, and preview behavior for the active visual composition.
3
Scene helpers generate the visual output
src/lib/scene.ts defines the animation designs, control metadata, defaults, and SVG generation logic that drive the preview.
4
The export route receives the snapshot
The app sends SVG plus structured snapshot data to /api/export, which is implemented through custom Vite middleware instead of a separate backend framework.
5
Node writes SVG and markdown files locally
The export middleware uses filesystem utilities to save the SVG and a matching markdown snapshot into svg-export/ with incremented filenames.
Architecture Map
This project is a frontend app with a local-only export backend embedded in the dev/build toolchain.
Key folders
src/Main React app, styling, and scene/export logic.
src/lib/Animation scene definitions and export markdown helpers.
public/Static assets like the favicon.
svg-export/Generated SVG and markdown snapshot outputs.
video-examples/Recorded examples of the tool in use.
dist/Built frontend output from the Vite build process.
Architecture Analysis
package.json vite.config.ts src/App.tsx src/main.tsx src/index.css src/lib/scene.ts src/lib/export.ts svg-export/
The distinguishing architectural choice here is that export behavior is implemented inside Vite middleware, not as a conventional hosted API service.
Data and Export Model
The core value of the tool is exploratory design plus structured local export.
State model
Animation output is derived from app state
Designs are parameterized rather than hard-coded as one fixed visual.
React state drives the live preview.
Orbit and Lines modes provide distinct scene families.
The app is built for iteration and variation.
Export model
Local files are part of the workflow
SVG exports are written to disk, not only downloaded in-browser.
Each export includes a markdown snapshot of the current design state.
The Vite server route assigns numbered filenames.
This is optimized for local creative workflow rather than general public deployment.
Run Commands
The app follows the normal Vite workflow, with local export support built into the server config.
Scripts
npm install npm run dev npm run build npm run preview npm run lint
npm run dev is especially important here because the local export route is wired into the Vite server configuration.
Environment setup
What the app expects
Node.js and npm.
No external API keys.
Filesystem write access for local export output.
A local workflow rather than a purely static hosted workflow if export is required.
Bottom Line
Dots Animation Tool is a Vite + React + TypeScript creative tool with a distinctive local export backend embedded in Vite. It is closer to a design workstation utility than a conventional static site or CRUD app.