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.
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.
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.
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.
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.
Cristian Mielu
