Rotating cubes
$8.00
Preview component here:
https://rotatingcubes.framer.ai/
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.
Preview component here:
https://rotatingcubes.framer.ai/
Important Note!
After checkout, you’ll receive a component URL or remix link by email.
Use the URL to paste the component into your project, or open the remix link.
Refund Policy:
You are eligible for a full refund within 14 days of your purchase under the following conditions:
Eligibility: The refund request must be made within 14 days of the original purchase date.
Usage: The digital product must not have been used for any commercial or public purpose.
Request: To request a refund, please contact me at [email protected] with your order details and the reason for your refund request.
Processing Time: Once I receive your refund request, I will review it and notify you of the approval or rejection within 5 business days. Approved refunds will be processed and a credit will automatically be applied to your original method of payment within 10 business days