Slice Assembly
A photograph cut into vertical strips that float apart in 3D space, each turned toward or away from the light with its own soft shadow, then settle one after another into the whole picture with no seams left behind. Progress can come from a number or a live scroll value, or the strips loop on their own. Strip count, depth, scatter, stagger, shading, shadow, pace and a gentle cursor lean are all props. Reduced motion shows the whole photograph.
The import and the props worth knowing about, in one place.
import { SliceAssembly } from "@/components/beste/component/slice-assembly";
<SliceAssembly
className="aspect-[4/5] w-full max-w-md"
imageSrc="https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=1400&q=80"
imageAlt="A woman in a dark check coat walking down a city street"
/>
// Driven by scroll: pass a framer-motion MotionValue (or any { get() }) as progress
const { scrollYProgress } = useScroll({ target: ref });
<SliceAssembly progress={scrollYProgress} strips={18} depth={0.8} stagger={0.4} />Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
imageSrc | string | — | The photograph that is cut into strips. |
imageAlt | string | — | Description of the photograph for screen readers. |
strips | number | — | Number of vertical strips. |
depth | number | — | How far the strips spread forward and back in space, 0 to 1. |
scatter | number | — | How far the strips lift, turn and fan apart, 0 to 1. |
stagger | number | — | How much the strips arrive one after another instead of together, 0 to 1. |
shading | number | — | Light and shade on the turned strips, 0 to 1. |
shadow | number | — | Soft shadow under the lifted strips, 0 to 1. |
progress | number | SliceProgressSource | — | Assembly from scattered (0) to whole (1): a number or a live source such as a scroll MotionValue. |
autoplay | boolean | — | Loop between scattered and whole on its own. Defaults to on when no progress is given. |
speed | number | — | Pace of the autoplay loop and the idle drift. |
interactive | boolean | — | The image leans gently toward the cursor. |
paused | boolean | — | Freeze the strips where they are. |
className | string | — | |
children | ReactNode | — |
