Holographic Card

A stunning 3D floating card featuring a blurred holographic background gradient, local grain textures, and an accompanying glitch typography component.

Showcase

CSS FUTURE

Holographic Interface

Pure CSS art combining glitch typography, grain textures, floating holograms and 3D depth.

EXPLORE

Installation

npx shadcn-extras@latest add holographic-card

Usage


import {
  HolographicCard,
  GlitchText,
} from '@/components/core/holographic-card';
export function Example() {
  return (
    <div className='holographic-container h-screen w-full'>
      {/* Optional animated grain noise overlay */}
      <div className='holographic-grain-overlay' />
      <GlitchText text='CYBERPUNK' className='text-white' />
      <HolographicCard
        title='Welcome to the Future'
        description='This card floats in 3D space with a holographic glow.'
        buttonText='ENTER'
      />
    </div>
  );
}

Props

HolographicCard

Prop	Type	Description
`title`	`React.ReactNode`	The main title of the card
`description`	`React.ReactNode`	The paragraph text
`buttonText`	`string`	The text for the holographic button
`buttonHref`	`string`	The link for the holographic button

GlitchText

Prop	Type	Description
`text`	`string`	The text to display and animate
`as`	`string`	The HTML element to render (default: `h1`)