# Hero Dashboard Lift — Tailwind Hero Section

> Centered headline over a product window that tilts flat as you scroll, with staggered entrance.

- Category: [Hero Sections](https://pixelpapa.com/components/heroes.md)
- Tags: hero, saas, scroll, perspective, dashboard
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/heroes/hero-dashboard-lift

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/hero-dashboard-lift.json"
```

The file is written to `components/pixelpapa/hero-dashboard-lift.tsx`. To install manually, run `npm install lucide-react motion` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { ArrowRight, Play } from "lucide-react";
import { motion, useScroll, useTransform } from "motion/react";
import { useRef } from "react";

const ease = [0.22, 1, 0.36, 1] as const;

const rise = {
  hidden: { opacity: 0, y: 24, filter: "blur(8px)" },
  shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: 0.8, ease } },
};

const bars = [38, 62, 45, 80, 56, 92, 70, 48, 85, 64, 96, 74];

export default function HeroDashboardLift() {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
  const rotateX = useTransform(scrollYProgress, [0, 0.5], [22, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.5], [0.92, 1]);

  return (
    <section ref={ref} className="relative overflow-hidden bg-background">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-[520px] [background:radial-gradient(60%_60%_at_50%_0%,color-mix(in_oklch,var(--primary)_22%,transparent),transparent)]"
      />
      <motion.div
        initial="hidden"
        animate="shown"
        transition={{ staggerChildren: 0.09 }}
        className="relative mx-auto flex max-w-5xl flex-col items-center px-6 pt-24 text-center sm:pt-32"
      >
        <motion.a
          variants={rise}
          href="#"
          className="inline-flex items-center gap-2 rounded-full border border-border bg-card/70 py-1 pr-3 pl-1 text-xs text-muted-foreground backdrop-blur"
        >
          <span className="rounded-full bg-primary px-2 py-0.5 font-medium text-primary-foreground">New</span>
          Realtime collaboration is here
          <ArrowRight className="size-3" />
        </motion.a>

        <motion.h1
          variants={rise}
          className="mt-7 max-w-3xl text-5xl font-semibold tracking-tight text-balance text-foreground sm:text-7xl"
        >
          Ship the dashboard your data{" "}
          <span className="font-serif font-normal text-primary italic">deserves</span>
        </motion.h1>

        <motion.p variants={rise} className="mt-6 max-w-xl text-lg text-pretty text-muted-foreground">
          Connect a source, pick a layout and publish. Northwind turns raw tables into boards your whole team
          actually opens.
        </motion.p>

        <motion.div variants={rise} className="mt-9 flex flex-wrap items-center justify-center gap-3">
          <a
            href="#"
            className="inline-flex h-11 items-center gap-2 rounded-full bg-primary px-6 text-sm font-medium text-primary-foreground shadow-lg shadow-primary/25 transition-transform hover:-translate-y-0.5"
          >
            Start free <ArrowRight className="size-4" />
          </a>
          <a
            href="#"
            className="inline-flex h-11 items-center gap-2 rounded-full border border-border bg-card px-6 text-sm font-medium text-foreground transition-colors hover:bg-muted"
          >
            <Play className="size-3.5 fill-current" /> Watch 2-min demo
          </a>
        </motion.div>
      </motion.div>

      <div className="relative mx-auto mt-16 max-w-5xl px-6 pb-24 [perspective:1400px]">
        <motion.div
          initial={{ opacity: 0, y: 60 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.45, ease }}
          style={{ rotateX, scale, transformOrigin: "50% 0%" }}
          className="overflow-hidden rounded-2xl border border-border bg-card shadow-2xl shadow-primary/10"
        >
          <div className="flex items-center gap-1.5 border-b border-border px-4 py-3">
            <span className="size-2.5 rounded-full bg-muted-foreground/25" />
            <span className="size-2.5 rounded-full bg-muted-foreground/25" />
            <span className="size-2.5 rounded-full bg-muted-foreground/25" />
            <span className="ml-3 h-5 w-56 rounded-md bg-muted" />
          </div>
          <div className="grid gap-4 p-5 sm:grid-cols-3">
            {[
              ["Revenue", "$84,210", "+12.4%"],
              ["Active teams", "1,932", "+4.1%"],
              ["Churn", "0.8%", "−0.3%"],
            ].map(([label, value, delta]) => (
              <div key={label} className="rounded-xl border border-border bg-background p-4 text-left">
                <p className="text-xs text-muted-foreground">{label}</p>
                <p className="mt-2 text-2xl font-semibold tracking-tight text-foreground tabular-nums">{value}</p>
                <p className="mt-1 text-xs font-medium text-primary">{delta}</p>
              </div>
            ))}
            <div className="flex h-48 items-end gap-2 rounded-xl border border-border bg-background p-4 sm:col-span-3">
              {bars.map((h, i) => (
                <motion.div
                  key={i}
                  initial={{ height: 0 }}
                  animate={{ height: `${h}%` }}
                  transition={{ duration: 0.9, delay: 0.9 + i * 0.05, ease }}
                  className="flex-1 rounded-t-md bg-primary/80"
                  style={{ opacity: 0.35 + (h / 100) * 0.65 }}
                />
              ))}
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
```

## AI prompt

```text
Add the "Hero Dashboard Lift" component from PixelPapa UI to this project.

What it is: Centered headline over a product window that tilts flat as you scroll, with staggered entrance.
Category: Hero Sections. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/hero-dashboard-lift.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/hero-dashboard-lift.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/hero-dashboard-lift" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More hero sections

- [Hero Before After Toggle](https://pixelpapa.com/components/heroes/hero-before-after-toggle.md) (Pro): A hero with a Before / After switch: the same nine request cards spring from a scattered pile into three labelled, colour-coded lanes and back.
- [Hero Cursor Spotlight](https://pixelpapa.com/components/heroes/hero-cursor-spotlight.md) (Pro): An always-dark hero where a soft light trails the pointer and reveals a hidden grid of service nodes; it wanders on its own until you move.
- [Hero Drifting Card Rows](https://pixelpapa.com/components/heroes/hero-drifting-card-rows.md) (Pro): Three tilted rows of small UI cards drift in opposite directions behind a headline that sits in a soft cleared pocket.
- [Hero Editorial Serif](https://pixelpapa.com/components/heroes/hero-editorial-serif.md) (Pro): A magazine-style opener: an oversized serif headline rises line by line from behind hairlines that draw across an asymmetric grid.
- [Hero Grid Cells Reveal](https://pixelpapa.com/components/heroes/hero-grid-cells-reveal.md): A hero on a spreadsheet-like grid where cells light up in rings that ripple out from the headline, and individual cells glow under the pointer.
- [Hero Mesh Gradient](https://pixelpapa.com/components/heroes/hero-mesh-gradient.md) (Pro): An inset poster hero filled with a slowly shifting CSS mesh of theme colours, with bottom-anchored type and a glass stat strip.