The Last Bulb

A cinematic, interactive single-bulb web scene built with Vite and vanilla JavaScript.

Users can pull a hanging chain to toggle the chandelier bulb on and off. The experience is designed to feel physical, with spring-like motion, ambient lighting transitions, and responsive behavior across desktop, tablet, and mobile devices.

Table of Contents

• Overview
• Key Features
• Tech Stack
• Project Structure
• Getting Started
• Available Scripts
• Accessibility and Input Support
• Responsive Design Notes
• Deployment
• Customization Guide
• Troubleshooting
• License

Overview

The Last Bulb renders a full-screen dark environment containing:

• A stylized chandelier-inspired fixture
• A single realistic bulb with glow states
• A pull-chain interaction model
• Dynamic ambient illumination and floor shadowing

When the chain is pulled and released, the bulb toggles state and the scene transitions between dark and illuminated moods.

Key Features

• Interactive pull-chain control with physical-feeling motion
• Toggle behavior on pull-release threshold
• Smooth light-state transitions (off to on, on to off)
• Real-time chain swing and recovery animation
• Cinematic glow, halo, and floor-shadow treatment
• Keyboard, pointer, and touch support
• Responsive layout for multiple viewport sizes
• Reduced motion support for accessibility preferences
• Vercel-ready deployment configuration

Tech Stack

• Runtime: Browser (ES Modules)
• Build Tool: Vite 8
• Language: Vanilla JavaScript (no framework)
• Styling: CSS (custom, component-like sectioning)
• Package Manager: npm

Project Structure

.
├─ public/
│  └─ favicon.svg
├─ src/
│  ├─ main.js
│  └─ style.css
├─ index.html
├─ package.json
├─ vercel.json
└─ README.md

Getting Started

Prerequisites

• Node.js >= 20.19.0
• npm >= 10 (recommended)

Installation

npm install

Run in Development

npm run dev

Vite will print a local URL (for example, http://127.0.0.1:5173).

Available Scripts

npm run dev

Starts the Vite development server with hot reload.

npm run build

Builds an optimized production bundle into the dist directory.

npm run preview

Serves the production build locally for final verification.

Accessibility and Input Support

The interaction layer supports multiple input modes:

• Mouse or trackpad: drag the chain handle
• Touch devices: pull via touch drag
• Keyboard: focus the chain handle and use Enter, Space, or ArrowDown

Accessibility improvements include:

• Interactive handle exposed with button semantics
• Keyboard focus visibility
• ARIA pressed-state updates
• Reduced motion compatibility via prefers-reduced-motion

Responsive Design Notes

The scene includes breakpoint and viewport-height adaptations for:

• Large desktop screens
• Standard tablets
• Mobile portrait layouts
• Short-height viewports (small laptops or landscape phones)

Core visual elements (fixture, bulb, chain, and instruction text) scale and reposition to maintain composition quality and interaction usability.

Deployment

Vercel (Recommended)

This project includes a Vercel configuration file.

Configured values:

• Framework: vite
• Install Command: npm install
• Build Command: npm run build
• Output Directory: dist

Deploy Steps

1. Push the repository to GitHub.
2. Import the repository in Vercel.
3. Confirm auto-detected settings (or use the values listed above).
4. Deploy.

Customization Guide

Visual Theme

Adjust scene colors and gradients in src/style.css:

• Background mood gradients
• Bulb glow tones
• Fixture metal palette
• Shadow intensity

Interaction Tuning

Adjust pull and motion behavior in src/main.js:

• toggleThreshold: pull distance needed to toggle
• maxPull: maximum drag distance
• swing damping/spring values for return animation

Copy and Labels

Update instructional text and ARIA labels in:

• index.html
• src/main.js

Troubleshooting

Build Fails on Node Version

Ensure Node.js matches the engines requirement in package.json:

• Node >= 20.19.0

Development Server Does Not Start

Try the following:

1. Remove node_modules and reinstall dependencies.
2. Run npm install.
3. Run npm run dev again.

npm Script Issues on Windows Paths

If your project path contains special shell characters (such as ampersand), npm lifecycle scripts may fail on Windows default shell.

Workaround:

npm config set script-shell "C:\\Program Files\\Git\\bin\\bash.exe"

Then run install/build scripts again.

License

This project is currently licensed under ISC, as defined in package.json.