Hologram Display

Installation

npm install @react-three/fiber @react-three/drei three
npx kinetic-ui-cli@latest add hologram-display

How It Works

The HologramDisplay uses @react-three/fiber to render the metallic projector base and an open cylinder with AdditiveBlending for the volumetric light cone. The <Html> component from @react-three/drei is used to perfectly place standard DOM elements inside the 3D projection, complete with CSS filters to simulate the glowing holographic scanlines.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { HologramDisplay } from "@/components/creative/hologram-display";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { HologramDisplay } from "@/components/creative/hologram-display";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <HologramDisplay
        color="example"
      >
        <div>Content goes here</div>
      </HologramDisplay>
    </div>
  );
}