The next view arrives cut into slanted bands that slide in along their own angle, alternating from top and bottom. The view behind recedes and dims while the bands lock together.
Spring drop 01
Field Jacket, Olive
Recycled ripstop, 3 colors
npx shadcn@latest add https://hyperblur.dev/r/transition-diagonal-slice.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transition-diagonal-slice.tsx.
import { TransitionDiagonalSlice } from "@/components/hyperblur/transition-diagonal-slice"
<TransitionDiagonalSlice active={next}><DropOne /><DropTwo /></TransitionDiagonalSlice>| Prop | Type | Default | Description |
|---|---|---|---|
| from | ReactNode | built-in scene | The first view, shown while active is false. You can also pass two children instead of from and to. |
| to | ReactNode | built-in scene | The second view, shown while active is true. |
| active | boolean | Controlled state. False shows from, true shows to. Pair with onActiveChange. | |
| defaultActive | boolean | false | Initial state when uncontrolled. |
| onActiveChange | (active: boolean) => void | Called whenever the view switches, including switches made by autoPlay. | |
| autoPlay | boolean | false | Switch back and forth by itself. Stops when the user prefers reduced motion. |
| interval | number | 2600 | Milliseconds between switches when autoPlay is on. |
| duration | number | 720 | Travel time of one band in milliseconds. |
| stagger | number | 70 | Delay between bands in milliseconds. |
| slices | number | 5 | Number of bands. |
| slant | number | 24 | Horizontal lean of each band in percent of the width. |
| accent | string | "#2f7bff" | Color of the glint along each band edge. |