Split Hero with 3D Tilt Effect

Hero51: Split Hero with 3D Tilt Effect

Two-column hero where the image side is a pointer-reactive card: moving the cursor over it tilts the card in 3D toward the pointer and sweeps a diagonal shine across the surface, then eases back flat on pointer leave.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero51?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero51?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero51.tsx and its shadcn/ui dependencies: Badge, Button.

Quick start

The installed file exports hero51Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero51, hero51Demo } from "@/components/beste/block/hero51";

export default function Page() {
  return <Hero51 {...hero51Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero51 } from "@/components/beste/block/hero51";

export default function Page() {
  return (
    <Hero51
      badge={{ label: "3D Experience", variant: "outline" }}
      heading="Interactive design that delights"
      description="Hover over the card to see the 3D effect."
      buttons={[
        { label: "Try It Now", href: "https://beste.co", icon: "arrow-right" },
        { label: "View Examples", href: "https://beste.co", variant: "outline" },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=900&fit=crop",
        alt: "Dashboard preview",
      }}
      displayPosition="left"
    />
  );
}

Props

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost";
  icon?: "arrow-right" | "chevron-right" | "external-link";
};

Behavior notes

• displayPosition describes where the image card sits, not the text: "left" (the default) puts the text column in lg:order-2 and the card in lg:order-1, so the card renders on the left and text on the right; "right" reverses both orders.
• The tilt is computed on every onPointerMove: the pointer's position inside the card's bounding rect is converted to rotateX/rotateY degrees (offset from center, divided by 10) and applied as an inline transform on a wrapper with perspective: 1000px and transformStyle: preserve-3d; the card also scales to 1.02 while hovering. onPointerLeave resets rotation to 0 and clears the hover flag.
• A shine overlay (pointer-events-none, absolutely positioned) uses an inline linear-gradient whose angle shifts with rotation.y * 2, fading in to opacity: 0.15 on hover and back to 0 over duration-300 on leave, giving the sweep its own independent fade separate from the tilt transform.
• The transform uses onPointerMove/onPointerEnter/onPointerLeave (not mouse-specific events), so the same handlers also fire for touch and pen input on capable devices.