Interactive 3D Game Boxes in Framer

Copy component

Interactive 3D Game Boxes in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Interactive 3D Game Boxes in Framer

This is an interactive 3D games box component recreated in Framer, original work by Joe Russel. Feel free to remix the project to see how it's built or copy the component into your own project and customize it.

image of Nandi Muzsik
image of Prianca S.
Image of Joe

Created by

Showcasing a 3D carousel of classic Xbox 360 game boxes for a nostalgic gaming vibe
Showcasing a 3D carousel of classic Xbox 360 game boxes for a nostalgic gaming vibe
Showcasing a 3D carousel of classic Xbox 360 game boxes for a nostalgic gaming vibe

About the resource

There are two components that we need for interactive 3D box shelf: a 3D box component that has two variants—inactive and active—and a box shelf component that wraps multiple box components.

To create the 3D effect of the active and inactive state of the box component, I simply used 3D transforms to project the box in 3D space.

About the resource

There are two components that we need for interactive 3D box shelf: a 3D box component that has two variants—inactive and active—and a box shelf component that wraps multiple box components.

To create the 3D effect of the active and inactive state of the box component, I simply used 3D transforms to project the box in 3D space.

About the resource

There are two components that we need for interactive 3D box shelf: a 3D box component that has two variants—inactive and active—and a box shelf component that wraps multiple box components.

To create the 3D effect of the active and inactive state of the box component, I simply used 3D transforms to project the box in 3D space.

Highlighting the interactive transition of game box designs, focusing on Assassin's Creed III, with engaging 3D animations

3D game box component variants (inactive and active) in Framer.

Highlighting the interactive transition of game box designs, focusing on Assassin's Creed III, with engaging 3D animations

3D game box component variants (inactive and active) in Framer.

Highlighting the interactive transition of game box designs, focusing on Assassin's Creed III, with engaging 3D animations

3D game box component variants (inactive and active) in Framer.

Within the box shelf component, which wraps six box components, I created six variants. In each variant, a different box is activated. These variants are linked to mouse enter interactions, so when you hover over a box, it switches to the variant where that box is active. On mouse leave, all the boxes return to their default, inactive state.

Within the box shelf component, which wraps six box components, I created six variants. In each variant, a different box is activated. These variants are linked to mouse enter interactions, so when you hover over a box, it switches to the variant where that box is active. On mouse leave, all the boxes return to their default, inactive state.

Within the box shelf component, which wraps six box components, I created six variants. In each variant, a different box is activated. These variants are linked to mouse enter interactions, so when you hover over a box, it switches to the variant where that box is active. On mouse leave, all the boxes return to their default, inactive state.

3D game box lineup by title and release year

3D box shelf component variants.

3D game box lineup by title and release year

3D box shelf component variants.

3D game box lineup by title and release year

3D box shelf component variants.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

    Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

    Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

  • Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component