Holo Code Card React Component

LIVE PREVIEWInteract with the component

Install dependencies

npm install @react-three/fiber three lucide-react prism-react-renderer

CSS Modules

Usage

Matches your current playground settings.

import HoloCodeCard from "./HoloCodeCard";

export default function Example() {
  return (
    <HoloCodeCard
      title={"HoloCodeCard"}
      subtitle={"WebGL holographic foil + crisp code rendering."}
      language={"tsx"}
      highlightLine={8}
      code={"export function cn(...classes: (string | undefined)[]) {\n  return classes.filter(Boolean).join(\" \");\n}\n\nexport default function Button({\n  label = \"Explore\",\n  onClick,\n}: {\n  label?: string;\n  onClick?: () => void;\n}) {\n  return (\n    <button className=\"btn\" onClick={onClick}>\n      {label}\n    </button>\n  );\n}"}
      colors={[
        "#0a0b14",
        "#6ad4ff",
        "#f0b8ff"
      ]}
      intensity={1}
      tilt={1}
      parallax={1}
      minHeight={420}
    />
  );
}

Using Holo Code Card

Pass the code sample through code, with language and title describing what the reader is seeing.

Use highlightLine to direct attention to a relevant line. Avoid using motion or decorative badges as the only explanation of the sample.

Props

Name	Type	Required	Default	Description
title	string	No	""	Short title shown in the card header.
badgeLabel	string	No	""	Badge Label.
subtitle	string	No	""	Supporting line beneath the title in the header.
language	string	No	"tsx"	Language identifier used for syntax highlighting.
code	string	No	""	Code snippet rendered in the highlighted block.
highlightLine	number	No	8	Line number to emphasize in the snippet.
className	string	No	undefined	Additional CSS class names, merged with base component styles.
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.