Introducing Nyx UI v1.2.0

3d Layered Card

A 3D interactive card component with layers that moves interacts with hover, smooth animations, and customizable styling.

Card3DAnimationInteractive
Open in
Logo

Snapchat

REVENUE

The addictive habbit of sending snaps.

4 min
Character
Logo

McDonald's

ONBOARDING

The Psychology Behind McDonald's $2 Meal.

5 min
Character

Installation

Usage

import { InteractiveCard } from "@/components/ui/interactive-card";

Basic Usage

<InteractiveCard
  logo="/logo.png"
  mainImage="/character.png"
  title="Interactive Card"
>
  <p>Hover to see the magic!</p>
</InteractiveCard>

Custom Styling

<InteractiveCard
  logo="/logo.png"
  mainImage="/character.png"
  title="Custom Card"
  width={320}
  height={{ collapsed: 140, expanded: 350 }}
  logoSize={80}
  backgroundColor="bg-gradient-to-b from-purple-500 to-blue-600"
  textColor="white"
  glowColor="rgba(168, 85, 247, 0.2)"
  glowGradient="#a855f7"
  shineIntensity={0.5}
>
  <div className="space-y-2">
    <h3 className="text-lg font-semibold">Custom Title</h3>
    <p className="text-sm opacity-90">Custom description content</p>
  </div>
</InteractiveCard>

Props

PropTypeDefaultDescription
logostringRequiredPath to the logo image.
mainImagestringRequiredPath to the main character/image displayed on hover.
titlestringRequiredTitle text displayed in collapsed state.
childrenReact.ReactNodeundefinedContent displayed in expanded state on hover.
classNamestring""Additional CSS classes to apply to the container.
widthnumber | string288Width of the card in pixels or CSS units.
heightobject{ collapsed: 130, expanded: 300 }Height configuration for collapsed and expanded states.
logoSizenumber64Size of the logo in pixels.
logoPositionobject{ expanded: 15 }Logo position from top when expanded (in pixels).
shineIntensitynumber0.3Intensity of the shine effect (0-1).
backgroundColorstring"bg-gradient-to-b from-[#FF9901] via-[#DF911A] to-[#724f13]"Background gradient classes or CSS.
borderColorstringundefinedBorder color (requires borderWidth).
borderWidthstring"0"Border width CSS value.
textColorstring"white"Text color for title and content.
glowColorstring"rgba(255, 165, 0, 0.1)"Glow color for hover effects.
glowGradientstring"#fde047"Gradient color for the character glow effect.
titlePositionnumber90Fixed title position from top in collapsed state (in pixels).