Built with Jitter
Interactive Energy Animations for Light
Tone Segurado
Making Complex Energy Tech Feel Simple
(and Fast)
Client: Light Energy
Role: Motion Design Lead
Deliverables: Custom Illustrations + Interactive Lottie/Rive
Timeline: 11 Days (Rush)
The Problem: How do you visualize the invisible?
Light isn’t just another energy company; they’re a platform that lets other brands launch their own energy plans. It’s a powerful concept, but explaining "white-label energy infrastructure" with just text? That’s a fast way to lose a visitor’s attention.
They needed to move beyond static diagrams. The goal was to take complex, backend concepts — like API integrations and virtual power plants — and make them feel simple, fluid, and exciting. And they needed it fast: we had an 11-day window to go from "hello" to launch-ready code.
The Approach: "Stripe-Quality" Motion without the Bloat
We didn't just want pretty videos; we needed functional assets that the engineering team could plug directly into the site.
I designed a suite of 4 interactive Lottie animations that respond to the user. Instead of forcing visitors to read a paragraph about "API flexibility," they can simply hover over a graphic and watch the interface morph in real-time.
The Hero Loop: We created a "sense of wonder" right at page load, showing how energy flows seamlessly between homes, EVs, and the grid—looping perfectly so the site feels alive without slowing down the browser.
Interactive Storytelling: For the "What We Do" section, I built animations that trigger on scroll. As a user reads about "Custom Experiences," the visuals shift to match, keeping the storytelling tight and engaging.
Why It Worked
The secret sauce here wasn't just the animation — it was the technical delivery.
Engineers hate heavy video files that break site performance. Delivered ultra-lightweight code-embed ready JSON, .lottie, .rive, MP4, SVG files. 60fps, perfectly scalable, immediate dev implementation.
We hit the aggressive 11-day deadline with zero technical debt, giving Light a premium, "Stripe-level" brand polish just in time for their big launch.
Illustration and Looping Animation for Hero Home Lottie
We created four Hero Lottie Illustrative and Animations Loops.
We created Three illustrative and interactive animations that behave on scroll in a single Lottie file (Timeline).
We created Nine illustrative and interactive animations (representing different states within the same Rive (.riv) file for the product page)
Behind the Scenes
↑ Rejected Illustration for HERO-SEQUENCE1_Home-electrification_option1-dimensional-style ↑
↑ Rejected Illustration for HERO-SEQUENCE2_RealState-dimensional-style ↑
↑ Rejected Illustration for HERO SEQUENCE 3: Electric Vehicles in a Dimensional Style ↑
↑ Rejected Illustration for HERO-SEQUENCE3: Homeownership in a Dimensional Style ↑
Storyboard for the Hero Loop
Storyboard for the "what we do" section state transitions
Storyboard for the Product Page Features Scroll Based State transitions
Storyboard for the Dev Flexibility state transitions
Do you like what you see? Book now for motion like this for your brand.
Freelancer: tonesegurado.com
Agency: tonemaki.com
Like this project
Posted Dec 18, 2025
Light needed motion to explain white-label energy. Delivered +10 interactive animations (hero loops, scroll/hover), making complex tech crystal clear, on-time.
Likes
1
Views
6
Timeline
Aug 11, 2025 - Aug 22, 2025
