CinematicCard

Card component that extracts color from its content and applies ambient lighting effects.

Basic Usage

Wrap any content in a CinematicCard to automatically extract colors and create ambient effects. The card will analyze its content and generate appropriate lighting.

tsx

import { AdaptiveProvider, CinematicCard } from "react-cinematic-lighting";

export default function App() {
  return (
    <AdaptiveProvider>
      <CinematicCard preset="neon">
        <h2>Card Title</h2>
        <p>Card content with cinematic lighting effects</p>
      </CinematicCard>
    </AdaptiveProvider>
  );
}

Custom Styling

Customize the card appearance with border radius, padding, and shadow strength. Control where colors are extracted from using the extractFrom prop.

tsx

import { CinematicCard } from "react-cinematic-lighting";

export default function CustomCard() {
  return (
    <CinematicCard
      preset="spotify"
      borderRadius="16px"
      padding="2rem"
      shadowStrength={1.5}
      extractFrom="dominant"
    >
      <div className="flex items-center gap-4">
        <img src="/avatar.jpg" alt="Avatar" className="w-16 h-16 rounded-full" />
        <div>
          <h3>User Profile</h3>
          <p>Dynamic card with adaptive lighting</p>
        </div>
      </div>
    </CinematicCard>
  );
}

Card Grid

Create dynamic layouts with multiple cards, each with different presets and effects.

tsx

import { CinematicCard } from "react-cinematic-lighting";

export default function CardGrid() {
  const cards = [
    { title: "Card 1", preset: "youtube" },
    { title: "Card 2", preset: "netflix" },
    { title: "Card 3", preset: "neon" },
  ];

  return (
    <div className="grid grid-cols-3 gap-6">
      {cards.map((card, idx) => (
        <CinematicCard 
          key={idx} 
          preset={card.preset}
          onColorChange={(color) => {
            console.log(`${card.title} color:`, color);
          }}
        >
          <h3>{card.title}</h3>
          <p>Content with {card.preset} preset</p>
        </CinematicCard>
      ))}
    </div>
  );
}

Props

childrenReact.ReactNoderequired

Card content

presetPresetName | PresetConfigoptional

Preset configuration. Default: "ambient"

extractFrom"background" | "content" | "dominant"optional

Color extraction source. Default: "background"

borderRadiusstring | numberoptional

Card border radius. Default: "12px"

paddingstring | numberoptional

Card padding. Default: "1.5rem"

shadowStrengthnumberoptional

Shadow intensity multiplier. Default: 1

intensitynumberoptional

Glow intensity from 0 to 1 (overrides preset)

blurnumberoptional

Background blur in pixels (overrides preset)

onColorChange(color: ColorRGB) => voidoptional

Callback when extracted color changes

classNamestringoptional

Additional CSS classes

styleReact.CSSPropertiesoptional

Additional inline styles