Getting Started
Templates
Components
ScrollFX is a cinematic scroll-driven media gallery built with Three.js and @react-three/fiber. It creates an infinite horizontal strip of images and videos that responds to scroll and drag input with smooth WebGL rendering.
Key Features:
import { ScrollFX } from "@/components/ui/scroll-fx"
const items = [
{ src: "/images/hero-1.jpg", alt: "Project Alpha" },
{ src: "/videos/demo.mp4", type: "video", poster: "/poster.jpg" },
{ src: "/images/hero-2.jpg", alt: "Project Beta" },
]
export default function Example() {
return (
<div className="h-screen">
<ScrollFX items={items} focusZ={-2} />
</div>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
items | ScrollFXMediaItem[] | required | Array of media items to display |
focusZ | number | -2 | Z-depth threshold for focus detection |
className | string | undefined | Additional CSS classes for the wrapper |
type ScrollFXMediaItem = {
src: string // URL to image or video
alt?: string // Alt text (displayed as label)
type?: "image" | "video" // Auto-detected if omitted
poster?: string // Video poster image
}If type is not specified, it's inferred from the file extension:
.mp4, .webm, .mov → "video""image"Videos are rendered using THREE.VideoTexture and autoplay when in view.
The item closest to the focusZ depth becomes the active item:
Adjust focusZ to fine-tune when items are considered "in focus."
Arrow keys are not hijacked and only prevent page scroll while hovering the canvas.
The component is optimized for smooth 60fps animation: