https://github.com/simplearyan/vfx-demos
https://github.com/simplearyan/vfx-demos
demos html html-css-javascript
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/simplearyan/vfx-demos
- Owner: simplearyan
- Created: 2026-04-18T07:23:02.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-18T08:08:05.000Z (3 months ago)
- Last Synced: 2026-04-18T09:29:41.218Z (3 months ago)
- Topics: demos, html, html-css-javascript
- Language: HTML
- Homepage: https://simplearyan.github.io/vfx-demos/
- Size: 12.5 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 VFX Lab — Explorations in Motion
A high-performance, hierarchical portfolio showcasing 130+ canvas animations, mathematical visualizations, and procedural motion experiments.
## 🚀 Live Demo
**[View the Live Portal →](https://simplearyan.github.io/vfx-demos/)**
## ✨ Featured Previews
| Deadpool 3D | Dancing Turtle | Spinel (Steven Universe) |
| :---: | :---: | :---: |
|  |  |  |
---
## 🏗️ Project Architecture
This repository is built for scale and organization, using a custom-engineered indexing and preview system.
### Hierarchical Discovery
Unlike flat portfolios, VFX Lab recursively scans its directory structure to maintain a natural organization:
- **Canvas Animations**: Character sketches, interactive faces, and cartoon physics.
- **Mathematical VFX**: Visualizing waves, Fourier transforms, and geometric systems.
- **GSAP Motion**: High-performance library-driven animations.
- **Procedural Animation**: Inverse Kinematics (IK) and skeletal movement.
### Automated Build Pipeline
The project utilizes a robust **GitHub Actions** workflow to ensure a "clean repository" strategy:
1. **Hierarchical Indexing**: `generate-index.js` builds a multi-level tree of all animations.
2. **CI Preview Capture**: `generate-preview.js` uses Puppeteer in a headless environment to capture screenshots of every experiment.
3. **Clean Main Branch**: The `main` branch stays lean. All generated assets (screenshots and the final index.html) are pushed exclusively to the `gh-pages` branch for hosting.
---
## 🛠️ Local Development
### Prerequisites
- Node.js (v18+)
- Google Chrome installed on your system
### Installation
```bash
# Install dependencies
# (Skips heavy browser downloads locally)
npm install
```
### Build & Preview
```bash
# Generate the index locally
npm run index
# Capture screenshots locally (uses your system Chrome)
npm run preview
```
> [!TIP]
> This project uses `puppeteer-core` principles locally to keep the installation light. It will automatically detect your local Chrome installation on Windows.
---
## ✨ Features
- **Modern UI**: Built with the **Outfit** font and a sleek, dark glassmorphic design.
- **Instant Search**: Real-time filtering across all categories and file names.
- **Full Hierarchy**: Breadcrumbs and nested sections that reflect the actual folder structure.
- **Responsive Design**: Optimized for everything from mobile phones to 4K displays.
---
Created with ❤️ by **Aryan**.