A modern web-based animation library for mathematical visualizations - like Manim but live in the browser.
Vivid is a TypeScript animation library designed for creating smooth, interactive mathematical visualizations directly in web browsers. Unlike traditional animation tools that require video rendering, Vivid provides real-time Canvas-based animations perfect for educational content, data visualization, and interactive mathematical demonstrations.
- Live Canvas Rendering - No video encoding, instant preview and interaction
- Mathematical Focus - Built-in support for functions, equations, matrices, 3D graphics
- TypeScript First - Full type safety and excellent developer experience
- Web Native - Runs anywhere JavaScript runs, no external dependencies
- AI-Friendly - Simple, declarative API perfect for AI code generation
- Manim-Inspired - Familiar concepts and patterns for Manim users
- Interactive 3D - Full 3D coordinate systems with camera controls
- Comprehensive Animation System - Create, transform, fade, morph, and custom animations
npm install vivid-animationsimport { Scene, Circle, Text, Create, FadeIn } from 'vivid-animations'
const canvas = document.getElementById('canvas') as HTMLCanvasElement
const scene = new Scene(canvas)
const circle = new Circle({ radius: 1, color: { r: 0.2, g: 0.6, b: 1, a: 1 } })
const text = new Text('Hello Vivid!').moveTo({ x: 0, y: -2 })
scene.play([
new Create(circle),
new FadeIn(text)
])import { Axes, FunctionPlot, MathText } from 'vivid-animations'
// Create coordinate axes
const axes = new Axes({ xRange: [-5, 5], yRange: [-3, 3] })
// Plot a function
const parabola = new FunctionPlot({
func: (x) => x * x,
color: { r: 1, g: 0.5, b: 0, a: 1 }
})
// Add mathematical text
const formula = new MathText('f(x) = x^2')
scene.add(axes)
scene.play(new Create(parabola))import { Axes3D, Surface3D, Vector3D } from 'vivid-animations'
// 3D coordinate system
const axes3d = new Axes3D({ xRange: [-2, 2], yRange: [-2, 2], zRange: [-2, 2] })
// 3D surface plot
const surface = new Surface3D({
func: (x, y) => Math.sin(x) * Math.cos(y),
xRange: [-Math.PI, Math.PI],
yRange: [-Math.PI, Math.PI]
})
// Enable interactive camera controls
scene.camera3D.enableControls(true)vivid/
├── packages/
│ └── core/ # Core animation engine (published as vivid-animations)
├── apps/
│ └── playground/ # Interactive demo & testing environment
├── docs/ # Comprehensive documentation
├── examples/ # Example implementations
└── README.md # This file
- API Reference - Complete API documentation
- Getting Started - Detailed setup and basic usage
- Examples - Common patterns and use cases
- 3D Guide - Working with 3D objects and cameras
- Animation System - Creating custom animations
- AI Integration - Using Vivid with AI code generation
- Contributing - How to contribute to the project
Experience Vivid interactively in the development playground:
git clone https://github.com/yourusername/vivid.git
cd vivid
npm install
npm run devOpen http://localhost:3000 to see live examples and experiment with the API.
- Function plotting and transformations
- Linear algebra visualizations (matrices, vectors, eigenvalues)
- Calculus concepts (derivatives, integrals, limits)
- Statistical distributions and data analysis
- Geometric constructions and proofs
- Algorithm visualizations
- Physics simulations
- Mathematical concept explanations
- Step-by-step problem solving
- Real-time charts and graphs
- 3D data representation
- Interactive dashboards
- Scientific plotting
# Clone the repository
git clone https://github.com/yourusername/vivid.git
cd vivid
# Install dependencies for all packages
npm install
# Start the playground for development
npm run dev
# Build the core library
npm run build
# Run tests
npm testvivid/
├── packages/core/ # Main library source code
│ ├── src/
│ │ ├── objects/ # Mathematical objects (Circle, Text, etc.)
│ │ ├── animations/ # Animation classes (Create, FadeIn, etc.)
│ │ ├── Scene.ts # Main scene management
│ │ ├── Timeline.ts # Animation timeline
│ │ └── index.ts # Public API exports
│ ├── dist/ # Built JavaScript and type definitions
│ └── package.json # Package configuration
├── apps/playground/ # Development playground
│ ├── src/
│ │ ├── main.ts # Playground examples
│ │ └── index.html # Playground interface
│ └── package.json
└── docs/ # Documentation files
| Feature | Vivid | Manim | p5.js | Three.js | D3.js |
|---|---|---|---|---|---|
| Mathematical focus | ✅ | ✅ | ❌ | ❌ | ❌ |
| Live preview | ✅ | ❌ | ✅ | ✅ | ✅ |
| TypeScript | ✅ | ❌ | ❌ | ✅ | ❌ |
| 2D + 3D | ✅ | ✅ | ✅ | ✅ | ❌ |
| Web native | ✅ | ❌ | ✅ | ✅ | ✅ |
| AI-friendly API | ✅ | ❌ | ❌ | ❌ | ❌ |
| Animation system | ✅ | ✅ | ❌ | ❌ | ✅ |
Vivid's simple, declarative API makes it perfect for AI code generation:
// AI can easily generate code like this based on natural language descriptions
function createVisualization(description: string) {
const scene = new Scene(canvas)
if (description.includes('sine wave')) {
const axes = new Axes({ xRange: [-2*Math.PI, 2*Math.PI] })
const sine = new FunctionPlot({
func: Math.sin,
color: { r: 0, g: 0.8, b: 1, a: 1 }
})
scene.add(axes)
scene.play(new Create(sine))
}
if (description.includes('3D surface')) {
const surface = new Surface3D({
func: (x, y) => Math.sin(Math.sqrt(x*x + y*y)),
xRange: [-5, 5],
yRange: [-5, 5]
})
scene.play(new Create(surface))
}
return scene
}- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Documentation: Online Docs
We welcome contributions! Please see CONTRIBUTING.md for guidelines on how to:
- Report bugs and request features
- Submit code contributions
- Improve documentation
- Add examples
MIT License - see LICENSE for details.
- Inspired by Manim by Grant Sanderson (3Blue1Brown)
- Built with modern web technologies for the next generation of mathematical visualization
- Special thanks to all contributors and the mathematical visualization community