Tools Used: Figma, Framer, LottieFiles State Machines 🔗 Visit the live website: finiro.framer.website

Finiro (short for Financial Hero) is a concept Fintech website that showcases interactive, state-based animations.

It’s my first full project built from design to development using Figma and Framer.

My main goal was to understand how to create and implement LottieFiles State Machine animations for interactive web experiences.

The fictional Fintech app, Finiro, helps users manage multiple bank accounts and cards, send money internationally, and track income and expenses — all from one place. I wanted the website to reflect this simplicity and innovation through motion and interaction.

I created a series of animations in LottieFiles State Machines to bring the design to life:

Security Animation: Floating cards that come together and morph into a padlock.

International Transfer: A world map where pulsing circles send currency lines to different countries.

Digital Wallet: Cards that reveal individual balances on hover and return to show total balance.

Transaction Alerts: Looping notifications showing real-time activity.

Graphs: Income and expense graphs that animate on click and hover.

Figma: Designed the entire one-page website and app homepage.

Check out the Figma design here.

LottieFiles: Built all interactive animations with State Machines.

Framer: Developed the website and integrated the animations.

🔗 Visit the live website: finiro.framer.website

This project wasn’t perfect — I made mistakes with sizing animations and understanding how frames and stacks in Framer handle scaling. But those mistakes were invaluable. Through this process, I learned:

The best practices for preparing animations for Framer.

How touch and hover states behave across devices.

How interactivity enhances user experience and engagement.

Finiro helped me understand the full motion design pipeline for Framer — from ideation to real-world implementation. It also reaffirmed my love for exploration and creating experiences that merge design, animation, and development.

I’m accepting LottieFiles animation projects for web and app interfaces that need interactive, meaningful motion. Let's talk if you have one.