Stacked Feature Cards

A two-column section with a sticky spring-animated hero card on the left and a stack of rotating feature cards on the right.

Installation

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

File Structure

stacked-feature-cards.tsx

Usage

import { StackedFeatureCards } from "@/components/unlumen-ui/stacked-feature-cards";
import { Leaf, Truck } from "lucide-react";

const heroCard = {
  imageSrc: "/product.png",
  imageAlt: "Product image",
  badge: "29 CHF · 250g",
  title: "Premium Blend",
  description: "A rich, full-bodied blend roasted fresh every week.",
  href: "/shop",
};

const featureCards = [
  {
    value: "01",
    title: "100% Organic",
    description: "Certified organic from seed to your cup.",
    icon: Leaf,
    cardClassName: "bg-green-50 text-green-950",
    iconClassName: "bg-green-100 text-green-700",
    rotateClassName: "rotate-[-1.2deg]",
  },
  {
    value: "02",
    title: "Free Shipping",
    description: "Orders over 40 CHF ship free in compostable packaging.",
    icon: Truck,
    cardClassName: "bg-violet-50 text-violet-950",
    iconClassName: "bg-violet-100 text-violet-700",
    rotateClassName: "rotate-[1deg]",
  },
];

export default function Example() {
  return (
    <StackedFeatureCards
      heroCard={heroCard}
      featureCards={featureCards}
      sectionTitle="Why Choose Us"
    />
  );
}

API Reference

StackedFeatureCards

heroCard
HeroCard
—

Data for the sticky hero card on the left.

featureCards
FeatureCard[]
—

Array of feature cards stacked on the right.

sectionTitle?
string
—

Optional eyebrow heading displayed above the grid.

className?
string
—

Extra classes applied to the outer section element.

HeroCard

imageSrc
string
—

URL of the floating product image.

imageAlt
string
—

Alt text for the product image.

badge
string
—

Short pill label (e.g. price or weight).

title
string
—

Main heading inside the hero card.

description
string
—

Short body copy below the heading.

href
string
—

Link target for the whole card.

FeatureCard

value
string
—

Monospace number label (e.g. "01").

title
string
—

Card heading.

description
string
—

One-to-two sentence body copy.

icon
React.ElementType
—

Any React component that renders an SVG icon (e.g. a Lucide icon).

cardClassName?
string
—

Background and text color classes for the card.

iconClassName?
string
—

Background and icon color classes for the icon wrapper.

rotateClassName?
string
—

Tailwind rotate utility for the subtle tilt (e.g. "rotate-[-1.2deg]").

Notes

  • The hero card uses position: sticky on lg screens so it tracks the user as they scroll through the feature list.
  • All spring animations (y, scale, width) use motion/react's useSpring hook — stiffness 300, damping 28.
  • The arrow button uses two overlapping ArrowRight icons: one exits top-right on hover, the other enters from bottom-left.
  • Each feature card's top offset is calculated as 80px + index * 20px so the stack fans out slightly when cards overlap.
  • The wave SVG at the bottom of the hero card blends into var(--background), keeping the transition seamless across themes.

Credits

Built by leo.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.