Interactive Front-End Mastery

Experience creative coding, games, data visualization, and audio synthesis—all in your browser.

FPS: --
Explore Demos

Visual Experiments

Interactive particle systems, 3D scenes, and generative art.

Particle System

Mouse-reactive particles with physics.

3D Galaxy

Interactive Three.js galaxy with camera controls.

Plasma Effect

Procedural plasma waves and color cycles.

Interactive Games

Classic games and interactive simulations.

Snake Game

Arcade classic with scoring and controls.

Score: 0
Use Arrow Keys or WASD to move. Avoid walls and yourself.

Pong

Two-player Pong with AI opponent.

Player: 0 | AI: 0
Left: W/S, Right: Arrow Keys. First to 5 wins.

Drawing Canvas

Creative drawing with multiple tools.

Data & Algorithms

Interactive algorithm visualizers and data charts.

Sorting Visualizer

Watch algorithms sort arrays in real-time.

Pathfinding Visualizer

A* and BFS pathfinding on a grid.

Animated Charts

Real-time charts with Chart.js.

Audio & Music

Web Audio synthesis, visualizers, and reactive effects.

Synthesizer

Play notes with your keyboard.

Use computer keyboard: A-K for white keys, W-E-R-Y-U for black keys.

Audio Visualizer

Real-time frequency and waveform visualization.

Step Sequencer

Create patterns with multiple tracks.

About

This showcase demonstrates advanced front-end capabilities using vanilla JavaScript and carefully selected CDN libraries. It runs entirely client-side with zero server dependencies.

Features

  • Creative coding with Canvas and Three.js
  • Interactive games and simulations
  • Algorithm visualizations and data charts
  • Web Audio synthesis and visualization
  • Performance optimization for low-spec devices
  • Accessibility features with keyboard navigation
  • Bilingual UI (English/French) with seamless switching
  • Static hosting compatible - no build tools required
Read Technical Article

Technology Stack

HTML5
CSS3
JavaScript (ES6+)
Canvas 2D
WebGL (Three.js)
Web Audio API
GSAP
Tone.js
Chart.js