https://github.com/simplearyan/canvas-animator
Animator Studio 📐 (Blueprint Edition)
https://github.com/simplearyan/canvas-animator
canvas canvas-api demos design-demos
Last synced: 5 days ago
JSON representation
Animator Studio 📐 (Blueprint Edition)
- Host: GitHub
- URL: https://github.com/simplearyan/canvas-animator
- Owner: simplearyan
- Created: 2026-04-19T11:04:25.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-07-05T07:04:48.000Z (6 days ago)
- Last Synced: 2026-07-05T07:13:11.047Z (6 days ago)
- Topics: canvas, canvas-api, demos, design-demos
- Language: HTML
- Homepage: https://simplearyan.github.io/canvas-animator/
- Size: 67.1 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Animator Studio 📐 (Blueprint Edition)
Adaptive research lab for high-fidelity canvas animations, character lip-sync engines, and procedural whiteboard prototypes.
## 🏗️ The Blueprint Identity
Unlike the dark-themed VFX Lab, the **Animator Studio** uses a technical drafting aesthetic:
* **Architectural Grid**: Background pattern for precise visual alignment.
* **Drafting Colors**: Navy blue borders and "Pencil Red" annotations.
* **Research First**: Focused on component-level testing and evolutionary versioning.
## 🚀 Automation Pipeline
The studio is equipped with a fully autonomous build system:
* **`generate-preview.js`**: Orchestrates headless Chromium (Puppeteer) to capture screenshots of all research demos.
* **`generate-index.js`**: Generates a responsive, searchable portal reflecting the latest hierarchy.
* **GitHub Actions**: Scoped deployment to `gh-pages` for live component review.
## 🛠️ Usage
Install dependencies:
```bash
npm install
```
Build portal & previews:
```bash
npm run build
```
The live portal is available at:
**[https://simplearyan.github.io/canvas-animator/](https://simplearyan.github.io/canvas-animator/)**
## 🎨 Studio Suite Overview
The lab consists of 12 specialized high-fidelity canvas engines, each focused on a specific animation or interactive domain:
| Studio | Core Engine | Key Features | Aesthetic |
| :--- | :--- | :--- | :--- |
| **Waveform Pro** | p5.js | Real-time audio visualization | Dark Glass |
| **VoxAnimator** | Rough.js | Sketch-style vector animation | Hand-drawn |
| **Thumbnail Studio** | SVG Filters | High-perf thumbnail design | Blueprint |
| **Sumi-e Studio** | Custom Physics | Japanese brush ink simulation | Minimalist |
| **Parliament Animator** | Vanilla JS | Performance-optimized editorial | Blueprint Pro |
| **Paint Studio** | p5.js (Instance) | High-fidelity brush physics | Zen |
| **Motion Typography** | SVG Transform | Professional text animations | Modern Web |
| **MarkerForge Pro** | Canvas API | Marker stroke rendering | Draft |
| **Macify Web** | HTML/CSS | Browser-mockup generator | macOS Native |
| **Editorial Chart** | Canvas API | Animated data visualization | Newsroom |
| **Emoji Motion** | Physics Engine | Particle simulation (Fountain/Rain) | Vibrant |
| **Elements Annotator** | Rough.js | Procedural hand-drawn annotations | Organic |
## 📐 Unified Architecture Roadmap
We are currently formalizing the cross-studio infrastructure to enable a seamless "Suite" experience:
1. **Shared Design Tokens**: Centralizing CSS variables for the color palette (Brand, Zinc, Glass) and typography (Inter, JetBrains Mono).
2. **StudioBridge**: A singleton state synchronization module leveraging `localStorage` for cross-window project and theme persistence.
3. **Autonomous Previews**: Enhancing the `generate-preview.js` utility to capture high-res "poster" frames for every studio prototype.
---
*Generated by Animator Studio SSG*