Rotating Cubes

Add dimension to your design

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.

Add dimension to your design