Aurora Flares
Backgrounds
Holo Code Card
A holographic code card with foil shimmer, line highlights, and copy action.
Customize
ADVERT
Overview
Holo Code Card wraps a syntax-highlighted snippet in a glassy, holographic card that tilts with the cursor. The background foil shifts subtly under the code, while the header keeps metadata and copy actions within easy reach. Use it for docs, product highlights, or developer-focused landing pages.
Props
Use the props below to customise the holo code card in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | HoloCodeCard | Short title shown in the card header. |
| subtitle | string | No | WebGL holographic foil + crisp code rendering. | Supporting line beneath the title in the header. |
| language | string | No | tsx | Language identifier used for syntax highlighting. |
| code | string | No | export function cn(...classes: (string | undefined)[]) { ... } | Code snippet rendered in the highlighted block. |
| highlightLine | number | No | 8 | Line number to emphasize in the snippet. |
| className | string | No | undefined | Optional custom class name applied to the outer container for layout tweaks. |
| colors | string[] | No | ["#0a0b14", "#6ad4ff", "#f0b8ff"] | Array of up to three colors used for the backdrop gradients and foil tint. |
| intensity | number | No | 1 | Overall brightness of the holographic foil effect. |
| tilt | number | No | 1 | How much the card tilts as you move the pointer. |
| parallax | number | No | 1 | How much the foil shifts with pointer movement. |
| minHeight | number | string | No | 420 | Minimum height for the component container. Accepts a number (pixels) or any valid CSS height string. |
Related React components
More components from the same category or sharing similar tags.
