Aurora Flares
Backgrounds
Prism Hero
A glass prism hero with floating shards, depth, and cursor-reactive motion.
Customize
ADVERT
Overview
Prism Hero pairs a luminous glass prism with drifting shards and a layered backdrop to create a striking hero section. The copy floats above the scene with subtle parallax, keeping the focus on your message while adding depth. Use it for product launches, premium feature callouts, or polished landing pages.
Props
Use the props below to customise the prism hero in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | Yes | Design-led, glass prism UI | Main headline shown above the prism scene, centered and sized for hero layouts. |
| accentText | string | No | A prism hero that leans with your cursor, with depth, glow, and calm motion. | Supporting line below the title for a short product or brand message. |
| kicker | string | No | Premium interaction | Small label above the headline that highlights the hero theme. |
| chips | string[] | No | ["Glass", "Depth", "Motion", "Three.js"] | Optional list of quick feature chips shown below the subtitle. |
| ctaText | string | No | Explore | Label for the primary call-to-action button. |
| secondaryText | string | No | View details | Label for the secondary button styled like a link. |
| onCtaClick | () => void | No | undefined | Optional click handler for the primary call-to-action. |
| onSecondaryClick | () => void | No | undefined | Optional click handler for the secondary action. |
| className | string | No | undefined | Optional custom class name for the root container to control layout or spacing. |
| colors | string[] | No | ["#0a0b14", "#7ec8ff", "#f8fbff"] | Array of up to three colors used for the background gradients and glass tint. |
| intensity | number | No | 1 | Overall brightness of the prism reflections and background glow. |
| tilt | number | No | 1 | How strongly the prism tilts in response to pointer movement. |
| parallax | number | No | 1 | How much the prism and shards shift with cursor parallax. |
| minHeight | number | string | No | 520 | Minimum height for the hero section. Accepts a number (pixels) or any valid CSS height string. |
Related React components
More components from the same category or sharing similar tags.
