Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
import { ThreeJsBlendSlider } from "@/registry/tween/threejs-blend-slider"
export function ThreeJsBlendSliderDemo() {
return <ThreeJsBlendSlider />
}
import { ThreeJsBlendSlider } from "@/components/ui/threejs-blend-slider"<ThreeJsBlendSlider
slides={[
{
title: "Chalk Meridian",
image:
"https://images.unsplash.com/photo-1760530098172-d28d2e05b659?q=80&w=1600&h=900&fit=crop",
},
{
title: "Mesa Drift",
image:
"https://images.unsplash.com/photo-1714229719918-68e7c74a0373?q=80&w=1600&h=900&fit=crop",
},
]}
/>A single Three.js plane sized to the container renders through a ShaderMaterial. Wheel and touch input on the canvas accumulate a scroll position and intensity: the vertex shader bends the plane on a sine displacement scaled by the smoothed scroll intensity, while the fragment shader wipes vertically between the current and next slide textures based on the fractional scroll position. When input stops the slider snaps to the nearest slide, marks itself stable, and the title swaps with a clipped translate transition. The renderer is sized to the component (not the window), input is scoped to the canvas, and a ResizeObserver rebuilds the plane geometry on resize. When prefers-reduced-motion: reduce is set it renders a single static frame of the first slide.
| Prop | Type | Default | Description |
|---|---|---|---|
slides | ThreeJsBlendSlide[] | 6 defaults | Each slide is { title, image, url? }. Use 16:9 images. |
background | string | "#d6cbbd" | Bottom color of the backdrop gradient. |
foreground | string | "#fbf7f1" | Title text color. |
wheelSpeed | number | 0.001 | How fast wheel/touch delta advances the slider. |
positionSmoothing | number | 0.05 | Lerp factor toward the target scroll position. |
intensitySmoothing | number | 0.5 | Lerp factor toward the target distortion intensity. |
className | string | — | Extra classes on the outer section. |