Dynamic Hover Rotation: The entire sphere matrix tracks and responds to your cursor coordinates in real-time, maintaining motion fluidity even when the mouse glides outside the canvas area.
Fibonacci Particle Distribution: Generates an evenly distributed, mathematically perfect sphere layout using any single custom SVG or image node you upload.
100% Native Responsive Size: Fully compatible with Framer's native size layout constraints (Width/Height set to Fill, Fit, or Fixed) across all screen breakpoints.
Integrated 2D-3D SVG Connectors: Features customizable perspective vector lines running from each dynamic node directly to the center core, expanding the spatial depth during interaction.
No Layout Shift & Pure CSS Transforms: Runs computations seamlessly with modern hardware-accelerated preserve-3d properties, ensuring a flawless 60 FPS viewport animation.
Designer-Friendly Canvas Preview: Displays an instant, static 3D angle directly inside your Framer design view for smooth styling, background matching, and padding adjustments.
Tech & Cyberpunk Landing Pages: Create abstract tech backdrops, constellation node maps, or interactive network visualizations.
Creative Hero Backgrounds: Replace predictable static gradient shapes with a high-end, responsive 3D asset that follows the user's cursor.
Interactive Bento Grid Accents: Shrink it down and place it inside tiny card cells to add sophisticated structural micro-interactions.
AI & Web3 Visuals: The interconnected nodes and planetary structure match perfectly with modern AI branding and decentralized network visuals.
Advanced Web Designers: Looking for genuine 3D structural graphics inside Framer without relying on heavy Spline scenes or WebGL overhead.
Tech, AI & Crypto Brands: Agencies and startups needing a futuristic, tech-forward aesthetic that communicates complexity beautifully.
Framer Creator Entrepreneurs: Perfect asset for template creators wanting to pack their premium layouts with rare, highly-engaging custom components.
Drop the ImageSphere component into any Frame or Stack.
Upload your custom circle vector via the Circle SVG input asset file manager.
Fine-tune your layout size boundaries. Set Width/Height to Fill to watch it automatically scale into the available space, or restrict it with a fixed ratio.
Customize the node population via Grid Size, change the line aesthetics, or scale the inner object diameters directly from the sidebar.
Circle SVG: File input supporting .svg, .png, .jpg, and .webp graphics.
Sphere Radius: Controls the structural volume expansion of the nodes.
Grid Size (Circles): Define exactly how many copies of your graphic fill the constellation layout (supports up to 200 nodes).
Rotate Strength / Rotate Ease: Dictate the torque intensity and inertia smoothing deceleration when following the tracking cursor.
Perspective: Adjust the focal depth distortion of the 3D lens matrix.
Show Lines & Line Color/Opacity/Width: Full artistic authority over the vector structure extending to the dynamic core.
Technical Errors: If the product encounters major technical issues that significantly affect its performance and functionality, and these issues cannot be resolved within a reasonable timeframe, a refund may be granted.
Product Not Delivered: If you do not receive the product after purchase and we are unable to provide access, you are eligible for a refund.
Inaccurate Product Representation: If the product you receive differs substantially from its description or preview, and this discrepancy affects its usability, you may request a refund.
Sang
