Components•Slice shift
Components•Slice shift
Slice shift
A headline cut into horizontal strips. Pointer or scroll velocity shears the strips sideways in alternating directions, a thin accent hairline shows at each cut, and springs pull everything back into registration. Pass words to get a venetian-blind swap between them.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/slice-shiftHow to use
import { SliceShift } from "@/components/bjork-ui/text/slice-shift";// Shear on pointer velocity<SliceShift text="Registration" trigger="hover" slices={7} maxOffset={0.22} stagger={0.032} />// Venetian-blind word swap<SliceShift words={["Shear", "Shift", "Register"]} interval={2600} duration={720} />
Registration
Registration
Registration
Registration
Registration
Registration
Registration
Registration
Registration
Registration
Sweep the pointer across the word.