Radial
Radial gallery with circular arrangement.
Main Features of Radial
How to Use Radial in Next.js
Installation Guide for Radial
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [...array of image URLs] | Array of image source URLs. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
radius | number | 350 | Radius of the circular arrangement in pixels. |
count | number | 8 | Number of images to display in the circle. |
rotationSpeed | number | 0.2 | Speed multiplier for scroll-based rotation. |
centerText | string | ORBITAL | Center text displayed in the orb. |
centerSubtext | string | SYSTEM READY | Center subtext displayed below main text. |
borderColor | string | #06b6d4 | Border and accent color (hex, rgb, or hsl). |
Related Components
When to Use
Perfect for high-octane brands, gaming labs, and Next.js platforms that want an immersive 'Radial' aesthetic. Use this layout for a tactile experience with organic orbital animations and heat-gradient effects.
Best Practices
Maintain scalable component architecture by keeping the orb count balanced. Follow React best practices by using Framer Motion for the fluid advection renders. Optimize for performance by managed the gradient intensity.
Why This Component Matters in Modern UI Development
Organic liquid aesthetics communicate digital complexity, flow, and digital craft. This production-ready UI template helpsคุณ build an interface that feels advanced and 'Breathing', adding a unique 'Orbital' signature to your project.
Frequently Asked Questions
QIs the orbit real?
The component uses localized SVG filters and spring physics to simulate organic 'Metaballs' that merge and split smoothly as they 'orbit' through the grid.
QCan I adjust radius?
Absolutely, you can customize both the primary `radius` and the specific `rotationSpeed` to match your brand's specific intensity.
QIs it mobile responsive?
The liquid flows and orb spans adapt for mobile, ensuring the 'Orbital' feel remains consistent on high-density mobile screens.