Scroll Over Hero

Installation

Usage

import { ScrollOverHero } from "@/components/ruixen/scroll-over-hero";
 
export default function Page() {
  return (
    <ScrollOverHero
      title="Every metric that matters, in one view."
      description="Real-time dashboards that turn raw events into decisions."
      actions={
        <>
          <button className="rounded-full bg-foreground px-5 py-2.5 text-sm font-medium text-background">
            Start free
          </button>
          <button className="rounded-full px-5 py-2.5 text-sm font-medium text-foreground ring-1 ring-border">
            Book a demo
          </button>
        </>
      }
      media={
        <img
          src="/dashboard.png"
          alt="Product dashboard"
          className="aspect-video w-full object-cover"
        />
      }
    />
  );
}

Props

Features

• Pinned title, rising panel — the title is pinned with position: sticky while the media panel translates up on scroll and overlaps it via a higher z-index, all driven by a single scroll progress value.
• No layout jank — the panel and title are both absolutely positioned inside one h-screen stage, so the overlap is pure transform work with nothing reflowing.
• Reduced-motion fallback — when prefers-reduced-motion is set, the component renders a calm, stacked hero (title then panel) with no scroll-driven motion.
• Bring your own media — media accepts any ReactNode, so drop in an <img>, a <video>, or a custom inline mock; an empty state shows a themed placeholder.
• Tunable pacing — scrollLength controls how much scrolling the overlap takes, so you can make it quick and punchy or long and cinematic.
• Theme adaptive — every surface uses shadcn tokens (bg-background, bg-card, bg-muted, text-foreground, text-muted-foreground, border-border), so the block inherits your theme without overrides.