---
title: "Rotating Cubes — Free Framer component · Best of Framer"
description: "Free Framer component · by Cristian Mielu · Effects. Add dimension to your design"
canonical: "https://framer.elliotli.dev/component/rotating-cubes"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Rotating Cubes

# Rotating Cubes

Add dimension to your design

[View on Framer](https://framer.com/marketplace/components/rotating-cubes/?via=elliot-li)

![Rotating Cubes preview image 1](https://framer.elliotli.dev/og/component/rotating-cubes/1970f858df3a888a/1600x1200.jpg)

## Summary

Add dimension to your design

## Description

This component is an **interactive 3D cube** built with the **Workshop plugin** in Framer. It combines **scroll-driven motion** with extensive styling controls, making it a versatile and engaging element for modern digital experiences.

## 🎮 Interactivity

-   The cube rotates dynamically along different axes in response to **scroll input**, creating a playful sense of depth and immersion.
    
-   Motion can be fine-tuned with controls for **smoothness** and **scroll sensitivity**, ensuring the interaction feels natural and responsive.
    

## 🎨 Customization

The component offers a wide range of creative handles:

-   **Perspective** — Adjust the depth to match your layout’s visual hierarchy.
    
-   **Scaling** — Resize the cube to fit seamlessly into different design contexts.
    
-   **Face Styling** — Each face can be styled independently with custom colors.
    
-   **Borders** — Control border width, color, and radius to shift between sharp geometry and softer, more playful aesthetics.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-0b74zfwv-xTgjzKLIdRi2hurTj2ngOWEho8NCe6)

## 📐 Positioning Requirements

For the cube to function properly with scroll interactions, it needs to be placed with the correct positioning. You have four options:

-   **Fixed Position** — Position the cube directly as fixed.
    
-   **Inside a Fixed Stack** _(Recommended)_— Place the cube within a stack that is fixed.
    
-   **Sticky Position** — Apply sticky positioning directly to the cube.
    
-   **Inside a Sticky Stack** _(Recommended)_ — Place the cube inside a stack with sticky positioning for a cleaner, more polished result.
    

**Tip:** If you choose the sticky option, ensure the parent content (the cube itself or the stack containing it) has a height of at least **200vh**. This provides enough scrollable space for the cube’s interactive effect to feel smooth and immersive.

## 🌟 Best Practice

While all four positioning methods are supported, the most aesthetically pleasing approach is to place the cube **inside a stack with sticky positioning**. This balances technical reliability with visual elegance.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1969

## Details

- **Author**: Cristian Mielu
- **Published**: 2025-09-22
- **Updated**: 2026-06-02
- **Added**: 2025-09-14
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows