Enhance your Framer site with a high-performance, interactive 3D WebGL component that generates a continuous, flowing stream of custom cryptocurrency coins and banknotes erupting from a sleek portal mask. Powered by Three.js and GSAP, this component is fully integrated with Framer's native property controls and live CSS variables.
Key Features
- Custom 3D Coins: Upload your own SVG files or link directly to SVG URLs. Toggle custom colors for each individual coin or let them inherit your site's theme.
- Vector Banknotes: Animated, deformable banknotes that flutter along customizable wavy 3D paths.
- Dynamic Background Gradients: Automatically generates shifting gradient backgrounds based on your primary accent color, with full control over hue shifts, darkness, and gradient angles.
- Advanced Kinetics & Paths: Total control over the animation speed, spawn rates (note and coin counts), and 3D flow angles. Fine-tune the flight paths with settings for orbit, pitch, yaw, wave height, wave frequency, and scatter.
- Lighting & Camera: Adjust ambient and directional light intensities. Switch seamlessly between Perspective and Orthographic camera lenses.
- Live Color Resolution: Fully compatible with Framer's token system. The component intelligently reads your live CSS color variables and derives complementary light and dark shades automatically.
Customization Options
- Theme & Lights: Accent Color, Light Color, Ambient Intensity, Directional Intensity, Lens Type.
- Gradient Shift: Hue Turn, Darken, Angle.
- Coins Array: Add multiple coins, choose SVG Source (URL or File), Custom Color options.
- Kinetics: Speed, Notes Count, Coins Count, Flow Angle Z/X/Y.
- Path Waving: Orbit, Pitch, Yaw, Z-Spread, Wave Height, Wave Freq, Y-Width, Max Arc, Scatter, Show Traces.
- Note Metrics: Width, Height, Base Pitch, Base Yaw, Base Roll.
REFUND POLICY
Due to the digital nature of my products, all sales are final, and refunds will not be issued. Please ensure you review all product details carefully before purchasing. If you have any questions or need clarification, feel free to reach out before completing your order.