Creative Coding is a high-performance interactive playground built with Vue 3, Vite, and TypeScript. It provides a curated set of composables, overlay components, and a zero-boilerplate sketch system so you can focus on creative code — not wiring up routers, preview cards, or animation teardown logic.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/hetari/creative-coding/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
Learn what Creative Coding is, what rendering libraries it supports, and how the playground is architected.
Quickstart
Install dependencies, start the dev server, and run your first sketch in under five minutes.
Adding a Sketch
Register a new experiment in the SKETCHES array and have it appear on the dashboard automatically.
Project Structure
Understand how sketches, composables, components, and routing are organized across the repo.
Composables
Each rendering library has a lifecycle-managed composable that handles initialization, hot-reload teardown, and dynamic imports out of the box.usePixiApp
Mount a PixiJS Application to a container element with automatic cleanup on unmount.
useP5
Create a p5.js sketch in instance mode with a consistent teardown contract.
useGsap
Scoped GSAP context, ScrollTrigger, and lazy plugin loading with auto-revert on unmount.
useAsciiRasterizer
Convert raster images into interactive, canvas-rendered ASCII art grids with hover effects.
Overlay Components
Drop-in overlay tools that automatically hide themselves when a sketch is rendered inside a dashboard preview iframe.StatsPanel
Real-time FPS, MS, and MB performance panels powered by stats.js.
LilGui
Reactive parameter controller backed by lil-gui, synchronized to Vue refs.
ResourcesList
Collapsible reference link panel for tutorials and assets used by a sketch.
Sketch Gallery
GLSL Shader — Learn
A WebGL heart shader built with p5.js WEBGL mode, palette functions, and GUI-controlled uniforms.
PixiJS Image Swiper
A GPU-accelerated image transition effect using a custom GLSL filter and GSAP animation.
GSAP ASCII Hand Footer
A scroll-triggered footer with ASCII-rasterized hand images and parallax mouse tracking.
GSAP Reveal Loader
A GSAP-powered loading screen with a curtain reveal animation.