Do Not Turn Off The Bulb

AI Overview: The Impossible Lightbulb

This project is an interactive "useless machine" built with HTML, CSS, and JavaScript. The main feature is a lightbulb with a pull-cord that the user can toggle. However, every time the user turns the light off, a bear emerges from a 3D door to pull the cord and turn the light back on. As the user persists, the bear becomes increasingly "annoyed," moving faster and eventually appearing with angry eyebrows.

The project's visual style is managed through CSS custom properties (variables) that react to the state of the lightbulb. By changing a single --on variable between 0 and 1, the entire theme—including the background color, the bulb's glow, and the room's brightness—updates instantly.

--bg: hsl(calc(200 - (var(--on) * 160)), calc((20 + (var(--on) * 50)) * 1%), calc((20 + (var(--on) * 60)) * 1%));

This CSS snippet uses the --on variable to mathematically calculate the background hue and brightness as the light toggles.

The interactivity is powered by the GSAP (GreenSock Animation Platform) library, specifically using the Draggable and MorphSVG plugins. The pull-cord is not just a button but a draggable SVG element that mimics the physics of being pulled. When the cord is released after a certain distance, it triggers a sequence of animations.

Draggable.create(PROXY, {
  trigger: HIT,
  type: 'x,y',
  onDrag: function () {
    set(DUMMY_CORD, { attr: { x2: this.x, y2: this.y } });
  },

The Draggable plugin tracks the user's mouse or touch movement to update the coordinates of the lightbulb's cord in real-time.

The "logic" of the bear is controlled by a JavaScript state object that tracks an "anger" level. Each time the bear has to come out, the STATE.ANGER value increases. This value is then used to determine how fast the bear moves and whether or not to display specific SVG elements, like the bear's furrowed brows.

if (STATE.ANGER >= CONFIG.BROWS) set('.bear__brows', { display: 'block' });

This line of code checks if the user has reached a specific "anger" threshold to trigger a visual change in the bear's expression.

Finally, the bear's movements are coordinated using GSAP Timelines. These timelines chain together the door opening, the bear sliding into view, the arm swinging to grab the cord, and the door slamming shut. This ensures that the sound effects and visual movements stay perfectly synchronized.

to('.door', {
  onStart: () => AUDIO.DOOR_OPEN.play(),
  rotateY: 25,
  duration: 0.2 })

This animation segment handles the 3D rotation of the door while simultaneously playing the door-opening audio file.