Magical Pull Lamp — Interactive Hanging Lamp Animation with Source Code

The Magical Pull Lamp is a high-fidelity interactive component that combines realistic CSS styling with physical-based interactions. It features a hanging lamp that users can toggle by pulling a physical string, triggering a warm flickering glow and ambient dust particles.

How It Works

This animation uses a combination of CSS for the structural design and vanilla JavaScript for the physics simulation. The lamp’s swinging motion is modeled as a damped pendulum, reacting dynamically when the string is pulled. The “glow” effect is achieved using radial gradients and CSS keyframe animations to simulate realistic bulb flickering.

Key Features

• String Physics: A draggable string handle with elastic return logic.
• Dynamic Lighting: Smooth transitions between “off” and “on” states with a warm, ambient glow.
• Flicker Simulation: A custom @keyframes animation that mimics the subtle instability of an old filament bulb.
• Dust Particles: A canvas-based particle system that becomes visible under the lamp’s light cone, adding depth and atmosphere.

Frequently Asked Questions

Can I change the light color?

Yes! Simply modify the --lamp-glow color or the background-color of the .bulb and .room-glow classes in the CSS section.

Is the swinging physics adjustable?

Absolutely. In the JavaScript code, you can tweak the gravity and damping constants to make the lamp swing faster, slower, or for longer durations.

How do I integrate this into my site?

You can copy the HTML, CSS, and JS blocks into any web project. Ensure the container has enough height to accommodate the hanging wire and the pull string.