Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
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:
| 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: