Day/Night Mode Toggle – Interactive Microinteraction in Rive

This project explores how a simple toggle can become an engaging microinteraction that improves usability and enhances the visual language of a product.

🎛️ Designed and animated in Rive, this day/night mode toggle goes beyond a functional switch. It responds with personality, softness, and subtle motion—helping users feel the shift from light to dark mode in a more expressive way.

🧠 Inspired by UX principles and motion design best practices, the animation includes:

— Smooth transitions between states

— Color and icon changes (sun 🌞 / moon 🌙)

— A soft bounce and glow to provide tactile feedback

⚙️ Fully interactive and ready to be implemented in mobile apps, websites, or product prototypes.

This piece was created to be lightweight, delightful, and functional—bringing a small but meaningful signature moment into everyday interfaces.

Figma

Rive

UX/Motion Design Principles

State Machine Logic

👉 Explore the file on the Rive Marketplace: