Casual / Experiment Experiment

Animated Lamp Toggle

JS Interactive Demo

01 — Project Overview

A fun interactive lamp UI with custom color and brightness controls and sound effects.

Solo Developer.

Stack

JavaScriptHTML5CSS3Web Audio API

Private / Offline

Goal

Build a delightful, tactile UI demo that shows creative DOM animation.

User Issue

Casual experiment to explore SVG + CSS glow animations.

CSS Glow

Used CSS custom properties to drive dynamic glow color and intensity from JS slider values in real-time.

Key Challenge

Syncing the light cone glow color to the color picker without performance drops on every input event.

snippet

input.addEventListener('input', e => {
  lamp.style.setProperty('--glow-color', e.target.value);
});

A responsive, animated lamp with real-time color and brightness control and click sound effects.

Impact

A fun portfolio piece that showcases creative CSS custom property animation.

Learnings

Learned to throttle input events for smooth real-time DOM updates.

What I'd do differently

Would add a room background that responds to the lamp's light color.