WebGL + Canvas 2D
GPU-accelerated GLSL shaders for complex visuals, or Canvas 2D for particle systems. Pick your weapon.

LightScript Workshop ships with effects that push the boundaries:
| Effect | What It Does |
|---|---|
| 🕳️ Black Hole | Gravitational lensing with accretion disk and Hawking radiation |
| 💎 Voronoi Flow | Cellular patterns morphing with fluid dynamics |
| 🌧️ Cyber Descent | Cyberpunk matrix rainfall with scanline artifacts |
| ⚛️ Quantum Foam | Planck-scale virtual particles popping into existence |
| 🎯 ADHD Hyperfocus | Tunnel vision with dopamine-seeking sparkles |
And you can create your own in minutes.
import { Effect, NumberControl, WebGLEffect, initializeEffect } from '@lightscript/core'
import fragmentShader from './fragment.glsl'
@Effect({ name: 'Neon Dreams', author: 'You' })
export class NeonDreams extends WebGLEffect<{ speed: number }> {
@NumberControl({ label: 'Speed', min: 1, max: 10, default: 5 })
speed!: number
constructor() {
super({ id: 'neon-dreams', name: 'Neon Dreams', fragmentShader })
}
protected initializeControls() { window.speed = 5 }
protected getControlValues() { return { speed: window.speed ?? 5 } }
protected createUniforms() { return { iSpeed: { value: 1.0 } } }
protected updateUniforms(c) {
if (this.material) this.material.uniforms.iSpeed.value = c.speed
}
}
initializeEffect(() => new NeonDreams().initialize())That's it. Drop this in src/effects/neon-dreams/main.ts with a GLSL shader and it's auto-discovered.
LightScript is designed for AI collaboration. Try this prompt:
Create a WebGL effect called "aurora-waves" that simulates northern lights.
Add controls for speed (1-10), intensity (0-200), and a color palette dropdown.
Reference src/effects/black-hole/main.ts for the pattern.Works with Claude, Cursor, Copilot — any AI that can read code.
Jump to Getting Started and have your first effect running in under 5 minutes.