Rotating Cubes

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.

📐 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.