Tilted Scroll

A tilted infinite scroll component with a 3D perspective effect. Features smooth scrolling animation and interactive hover states for each item. Automatically adapts to light and dark themes. Features: • 3D perspective animation • Infinite scroll effect • Interactive hover states • Theme-aware styling • Gradient masks for smooth edges • Customizable content • Responsive design • Smooth transitions • Accessible markup • Optimized performance

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

import { TiltedScroll } from "@/components/ui/tilted-scroll"

export function TiltedScrollDemo() {
  const customItems = [
    { id: "1", text: "Feature One" },
    { id: "2", text: "Feature Two" },
    { id: "3", text: "Feature Three" },
    { id: "4", text: "Feature Four" },
    { id: "5", text: "Feature Five" },
  ]

  return (
    <div className="space-y-8">
      <TiltedScroll 
        items={customItems}
        className="mt-8"
      />
    </div>
  )
}