Built with Rive
Interactive Light Bulb in Rive
Muthu kumar M
BTS
Interactive Light Bulb in Rive — Warm to Cool Light, Power Switch, and Custom Glow
This project was originally part of a live interactive course by Gary Simon, but instead of following it 1:1, I took my own route and rebuilt the whole thing from scratch.
The idea was simple:
Create a light bulb that you can switch on and off, and change its color temperature from warm to cool using a slider.
But I wanted to push it a bit further visually and technically.
Here’s the breakdown.
01 — Creating the Visuals with AI
Instead of using premade assets, I generated everything with ChatGPT:
• The light bulb
• The display box
• The background
• The base environment
I wanted a clean, moody, product-showcase vibe — something minimal but with dimension.
Once the assets were generated, I took them into Figma to clean them up.
Using plugins, I removed backgrounds, isolated the bulb, polished edges, and exported clean layers ready for animation.
02 — Preparing Assets for Rive
The bulb came in as a PNG, which is perfect for this setup because I wanted the glow to be controlled inside Rive.
Important thing:
The bulb initially had no glow, no lighting effects, nothing.
Just the bulb.
I did this intentionally so all the light behavior could be built natively inside Rive — more control, smoother transitions.
03 — Rebuilding the Glow in Rive
Here’s where the fun starts.
Inside Rive, I:
• Added a soft feathered vector behind the bulb
• Applied dynamic color changes
• Adjusted opacity based on power state
• Synced brightness with the slider value
The glow is reactive, so when the switch is off, it completely disappears.
Turn the switch on, and it warms up or cools down based on the slider value.
04 — Switch Interaction
I added a simple toggle switch inside the box:
Switch OFF
• No glow
• Bulb looks inactive
• Slider still moves, but no visible color output
Switch ON
• Glow reactivates
• Color temperature responds instantly
• The bulb feels “alive” again
This gave the whole setup a real product-feel interaction.
05 — Color Temperature Slider (1000K to 6500K)
On the top, I built a warm-to-cool slider.
1000K = warm, orange-ish
6500K = cool blue
To achieve this inside Rive:
• I created a color ramp
• Feathered a vector behind the bulb
• Built logic to blend the colors smoothly
• Synced the glow intensity with the slider position
The result is a smooth, professional-grade color temperature transition that feels like an actual smart bulb UI demo.
06 — Behind the Scenes
I’ve added a screen recording showing:
• The artboard setup
• The glow system
• The slider logic
• The switch state machine
• All the layers working together
It’s clean, simple, and easy to learn from — even for beginners who want to build physical-light mimicry inside Rive.
07 — Rive Marketplace Link
If you want to try the interactive version or break it apart to see how it works, I’ve put the full Rive file on the Marketplace.
https://rive.app/marketplace/19763-37173-skeuomorphism-light-bulb-animation-onoff-switch-and-color-control/
This project is perfect for anyone learning:
• UI motion
• Interactive glow effects
• Smart device simulations
• Slider interactions
• Dynamic color systems
08 — Final Thoughts
This was one of those projects where a simple idea becomes a great learning piece.
From AI asset creation to manual glow-building, this shows how flexible Rive is for product-style motion.
If you’re exploring Rive, this is a great beginner-friendly piece to reverse-engineer.
Like this project
Posted May 15, 2025
An interactive smart-bulb in Rive with on–off switch, warm–cool slider, and custom glow built using AI-generated assets and clean Rive logic.( 🔊Sound on)
Likes
0
Views
8
Timeline
May 3, 2025 - May 5, 2025
