Transform your Framer project with a professional-grade 3D physics simulation. This component leverages a custom Vanilla Three.js render loop to deliver a highly responsive and performant interactive experience that far exceeds standard web animations.
Unlike static backgrounds, this component features a robust physics engine. You can manipulate the environment in real-time by adjusting:
Time Scale: Speed up or slow down the flow of motion.
Gravity: Control the weight and pull of the simulation.
Wind & Turbulence: Create anything from a gentle ripple to a chaotic digital storm.
Choose the visual structure that fits your brand. The component supports multiple "Topology" modes including:
Grid: A classic interconnected mesh.
Vertical / Horizontal: Clean, architectural lines.
Diagonal / Cross: Complex, modern geometric patterns.
Every aspect of the 3D scene is at your fingertips through the Framer properties panel:
🎨 Visuals: Set your custom hex color, line width, and mesh resolution for the perfect balance of detail and performance.
🎥 Camera & Transform: Switch between Perspective, Isometric, and Front views, or manually set the XYZ position, rotation, and spin of the object.
Matt Gidaszewski
