3D Showcase

The 3D Showcase component is a React Three Fiber component that renders a 3D hollow cylinder with a custom image texture and subtle rotation. Perfect for dynamic 3D showcases.

Usage

Follow the steps below to add the 3D Showcase Component to your project.

Add the import statement for the component

import { Showcase } from "@/components/elixir-ui/showcase";

Import the component in your project and use it

<Showcase
  imageSrc="/components/jujutsu-kaisen.png"
  text="Anime"
  fontSize="55px"
  fontFamily="exo"
  textColor="#FFFFD4"
  className="h-full w-full bg-black"
  rotationSpeed={0.005}
  bloomIntensity={2}
  enableControls={true}
/>

Props

Prop	Type	Default	Description
`imageSrc`	`string`	-	The source of the image to be displayed
`text`	`string`	-	The text to be displayed
`fontSize`	`string`	`40px`	The size of the text
`fontFamily`	`string`	`Times New Roman`	The font family of the text
`textColor`	`string`	`#F6F77D`	The color of the text
`rotationSpeed`	`number`	`0.006`	The speed of the rotation
`bloomIntensity`	`number`	`3`	The intensity of the bloom
`enableControls`	`boolean`	`true`	Whether to enable the controls
`className`	`string`	-	Additional CSS classes