Event Horizon
Cosmic feature section with scroll-driven conic gradient and glassmorphic cards.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| features | Array<{icon, title, description}> | 4 Uilora features | Array of feature items with icon, title, and description. |
| title | string | Beyond the Surface | Section heading text. |
| subtitle | string | Uilora components go deeper... | Section subtitle text. |
| accentColor | string | #a855f7 | Accent color for gradient glow and hover effects. |
When to Use
Ideal for deep-tech brands, creative agencies, and landing pages that want a mysterious, volumetric atmosphere with scroll-driven visual depth.
Best Practices
Use on dark backgrounds for the best glow contrast. Keep feature count to 3-4 for a clean grid. The scroll-driven background works best when the section has enough viewport height.
Why This Component Matters
Scroll-driven visual effects create a sense of discovery and wonder. The conic gradient rotation responds to the user's scroll, making the page feel alive and interactive.
FAQ
QHow does the background animation work?
A conic gradient element is transformed via Framer Motion's useScroll and useTransform hooks — rotation, scale, and opacity all respond to scroll position.
QIs it performant?
Yes, blur elements are sized conservatively (300px max) and use hardware-accelerated transforms only.
QCan I change the glow color?
Yes, the accentColor prop controls the conic gradient accent and card hover glow.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.