This project was built with:

Gameboy – Framer Concept Interactive Micro Website

Chris Nutbeen

A interactive Gameboy template on Framer to experiment with nested components and design without the need of Figma.

The Gameboy only uses 1 svg for the Nintendo logo, no other images and 100% no code.

The Design

It was important to see how far I could design the visuals directly in Framer, instead of using Figma to create the UI and elements.
Everything on this Gameboy was created directly in Framer with no external resources, except the blue Nintendo SVG logo. Even the pixelated Nintendo logo on start-up is a font.
I was very impressed with the outcome I was able to achieve soley using Framers features. The only aspect I think Figma could have improved in the Pad, as the shadows and lighting to achieve a clean look was tricky in Framer.
Nested Component Navigation in Framer
Nested Component Navigation in Framer

The Experiment

This experiment was to review the capabilities of nested components before having to use code. While code would make this a little more elegant in terms of component structure, the outcome is ultimately the same, whereas with no-code the navigation has to be within one-level of the screen to work correctly.
Loading Animations in Framer
Loading Animations in Framer

✦ The Stats

Timeline: 3 days Budget: N/A No. of components: 10 Deliverables: Finished Framer project file and Remix.

Impressed? Want me to create a Framer website for you? Check out my Framer services and book instantly ⚡

Like this project
8

Posted Jan 22, 2024

An interactive Gameboy 'link-in-bio' template made completely in Framer with 100% no-code. Displaying how nested components can be used to create interactions.

Brand & Jamstack Website
Brand & Jamstack Website
Nectar - Shopify Plus Theme Design & Custom Development
Nectar - Shopify Plus Theme Design & Custom Development
Creador - Notion Creator Framer Template
Creador - Notion Creator Framer Template
Headless WordPress + Brand
Headless WordPress + Brand