Technologies: JavaScript, CSS, HTML, Canvas API, CSS Transforms & IntersectionObserver

• → Click here to view the code repository ←
  

System Overview

Visit and explore the complete experience at:

• → Playable Interface Laboratory ←

Playable Interface Laboratory

A micro arcade laboratory—minigames, prototypes, and interactive surfaces exploring the web as a playable medium. Not a portfolio of finished things, but a workshop with the door left open: a place where the interface stops being a tool you use and becomes something you play.

Playable Interface Laboratory is a living archive of 26 interactive experiments built with pure vanilla HTML, CSS, and JavaScript—zero frameworks, zero build steps, no dependencies. It is where I house my experimentation with interfaces, minigames, and interaction straight from the browser.

The project uses minimal visual systems and serial artistic production as its core tools for radical conceptual experimentation with UI, game design, and generative art. Everything runs on native web technology—Canvas API, CSS transforms, and IntersectionObserver—wrapped in a dark monochrome aesthetic with minimal borders and clean typography. Each module is a small, self-contained corner to explore, break, and reflect upon.

The Lab is organized into three families, each tagged for filtering so the archive can keep growing without losing clarity:

Experiences

Visual prototypes and interactive demos—surfaces where the browser becomes a canvas for motion, distortion, and reveal.

• ASCII Art — A text-mask particle system that resolves characters into image.
• ASCII Glitch Mirror — A live webcam ASCII mirror laced with glitch.
• Circle Typography — Kinetic circular typography in motion.
• Clip Path — A CSS clip-path reveal effect.
• Magnetic Cursor — A reactive magnetic cursor field.
• Parallax Gradient — Layered gradient parallax.
• Scroll Tunnel — An infinite depth scroll tunnel.
• Scrollytelling — Narrative scroll scenes.
• Spiral 1 / Spiral 2 — Generative spiral visualizations, one bare and one with controls.
• Sticky Geometry — Sticky CSS geometry sections.
• Tri-Line — A cinema-minimal line composition.
• Typography Boss — Kinetic typography presets.
• Zoom Scroll — Background zoom driven by scroll.
  

Games

Playable minigames with score, loop, and mechanics—the arcade wing of the Lab, where interaction sharpens into challenge.

• Dark Snake — A cube-fold grid snake.
• Gravity Dots — Physics-based particle gravity.
• Mirror Split — A dynamic-axis mirror puzzle.
• Monolith Defense — Orbital shield defense.
• Orbit Lock — A precision timing puzzle.
• Pacman Darks — A dark Pacman variant.
• Prism Runner — An endless prism runner.
• Dark Pong — An organic breaker.
• Subatomic Collider — A particle collision simulator.
• Dark Invaders — Space Invaders charged with energy.
• Techno Visualizer — An audio-reactive visual engine.
• Wave Hunter — A 3-lane wave capture game.
  

Elements

Beyond experiences and games, several modules are conceived as reusable web components—elements meant to be lifted out of the Lab and dropped into other projects. The laboratory is, in this sense, both a place to play and a parts bin: every effect that proves itself here can become a building block elsewhere.

The Web as a Playable Medium

The premise holding all 26 modules together is simple: the browser is not only a place to read—it is a place to play, to break, and to think through the hands. By refusing frameworks and build tools, the Lab stays close to the raw material of the web, treating HTML, CSS, and JavaScript as an expressive medium rather than a delivery mechanism.

Serial production is the method. Each module is small enough to finish, strange enough to teach something, and open enough to feed the next one. The archive is designed to grow indefinitely—new experiments, new games, new elements—each a window into a slightly different way of asking what an interface can be.