Components
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
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>
)
}