Kinetic UI
Back to Introduction
Cards

Holographic Foil Card

3D trading card component with dynamic iridescent foil reflections that shift depending on mouse tilt angle.

Quick Actions
CLI Installation
npx kinetic-ui-cli@latest add holographic-foil-card
Holographic Foil Card
RARE

SPECIAL EDITION

Kinetic Holographic Foil #001

Installation

npx kinetic-ui-cli@latest add

Props

Pass card titles, foil reflection colors, and tilt angle properties.

Usage Guide

1. Import the Component

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

import { HolographicFoilCard } from "@/components/creative/holographic-foil-card";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { HolographicFoilCard } from "@/components/creative/holographic-foil-card";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <HolographicFoilCard
        title="example"
        subtitle="example"
      />
    </div>
  );
}
Performance Notes
  • Uses CSS hardware acceleration via GPU transform-binds.
  • Damped interpolation minimizes paint-redraw flashes.
  • Tree-shakable import: only compiles elements requested.
Accessibility Notes
  • Full keyboard focus-ring navigation support (`Tab`/`Shift+Tab`).
  • ARIA roles mapped correctly for assistive screen readers.
  • Respects `prefers-reduced-motion` system toggles.