Problem/Opportunity: I wanted to create a website hero section that "Turns On" as it loads, engaging the visitor instantly.

Solution: Inspired by a pc and gaming cpu turning on, I designed a mechanical grid that switches on as the Brand Logo fits exactly in place.

Role: UI/UX Designer / Motion Designer / Rive Dev

Client/Brand: Concept design, used Solana, a Web3/Blockchain network to showcase the design vision.

Services: Product Design, Framer Development

Tools: Figma, Rive, Framer

Inspired by a PC and gaming CPU booting up, I created a hero interaction where a mechanical grid powers on cell by cell, then snaps the Brand Logo into a precise slot, visually “completing the circuit” and making the interface feel like it turns on with the brand

First I designed the static hero — the grid layout, logo placement, and overall look — so even without motion, it works as a clean, focused landing section.​

Then I bring those pieces into Rive, animating the grid to turn on cell by cell and the logo to snap into its slot, like a CPU quietly booting up.​

Finally, I’m wrapping everything in a Rive state machine and integrating it into the live site with Framer, so the whole sequence plays smoothly on page load

Created a Live website with Framer integration. Smooth handoff between Rive and Framer thanks to the built-in Rive plugin in Framer.