A Three.js-powered 3D animated loop component for Framer. Core parameters are exposed in the Framer properties panel, requiring no code edits to customize.
Key Features
Geometry Toggles: Switch the 3D shape output instantly from the properties panel. Available modes: Spikes, Coins, and Cubes.
Color Controls: Dedicated inputs to change the base 3D material and accent colors to match your hex codes or design system variables.
Velocity Adjustment: A slider to control the rotation speed of the continuous 3D loop.
Usage Instructions
Install: Drag and drop the component onto your Framer canvas.
Configure: Select the component. Use the right-hand properties sidebar to define the active shape, colors, and rotation speed. Changes render live on the canvas.
Performance: The Three.js rendering loop is optimized to minimize overhead and maintain frame rates alongside native Framer DOM elements.
Dharminder Singh
