Tilt Scroll

Heroes

About

A wrapper that starts its content tilted back in 3D perspective and straightens it as the page scrolls, for a "container scroll" hero effect using only CSS scroll-driven animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tilt Scroll to your project and fits it to your theme.

Code

How Tilt Scroll is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { TiltScroll } from "@/components/ui/tilt-scroll";

export default function TiltScrollDemo() {
  return (
    <div className="h-screen w-full overflow-y-auto bg-background text-foreground">
      <div className="flex h-[60vh] items-center justify-center">
        <p className="text-sm text-muted-foreground">Scroll down ↓</p>
      </div>
      <TiltScroll flatBelow="md" className="mx-auto max-w-2xl px-6">
        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-xl">
          <div className="flex items-center gap-2 border-b border-border bg-muted px-4 py-2">
            <div className="h-3 w-3 rounded-full bg-destructive" />
            <div className="h-3 w-3 rounded-full bg-warning" />
            <div className="h-3 w-3 rounded-full bg-success" />
            <span className="ml-2 text-xs text-muted-foreground">
              harbour.example.com/dashboard
            </span>
          </div>
          <div className="grid grid-cols-3 gap-4 p-6">
            <div className="rounded-lg bg-muted p-4">
              <p className="text-xs text-muted-foreground">Berths booked</p>
              <p className="text-2xl font-semibold">82%</p>
            </div>
            <div className="rounded-lg bg-muted p-4">
              <p className="text-xs text-muted-foreground">Open hours</p>
              <p className="text-2xl font-semibold">22h</p>
            </div>
            <div className="rounded-lg bg-muted p-4">
              <p className="text-xs text-muted-foreground">Waiting list</p>
              <p className="text-2xl font-semibold">7</p>
            </div>
          </div>
        </div>
      </TiltScroll>
      <div className="h-[80vh]" />
    </div>
  );
}