Components
HoloCard provides a single, easy-to-use HolographicCard React component that adds depth and motion to UI elements. Each card reacts to mouse movement with subtle 3D tilt, a dynamic radial spotlight that follows the cursor, and an animated holographic shimmer layered behind the content. Props let you supply an image or custom children, control width and height, and change glow and shimmer colors. The component is fully styled with CSS variables so it’s simple to theme, responsive out of the box, and safe-falls back to a placeholder image on load failure.
npx @21st-dev/cli add dhileepkumargm/holo-cardLoading preview...
import HolographicCard from "@/components/ui/holo-card";
export default function DemoOne() {
return (
<div className="app-container">
<HolographicCard
imageUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Leonardo_da_Vinci%2C_Salvator_Mundi%2C_c.1500%2C_oil_on_walnut%2C_45.4_%C3%97_65.6_cm.jpg/250px-Leonardo_da_Vinci%2C_Salvator_Mundi%2C_c.1500%2C_oil_on_walnut%2C_45.4_%C3%97_65.6_cm.jpg"
width="250px"
height="350px"
glowColor="rgba(100, 180, 255, 0.4)"
holoColor1="rgba(100, 180, 255, 0.2)"
holoColor2="rgba(150, 220, 255, 0.1)"
/>
</div>
);
}