Docs
Image Split
Image Split
This component provides a dynamic and visually captivating way to display images split into multiple sections.
Scroll to reveal
Installation
pnpm dlx shadcn@latest add to-setup
Usage
import { ImageSplit } from "@/components/ui/image-split";<ImageSplit
src="/images/components/image-split/badtz-ui-documentation-dark.webp"
sections={9}
/>Props
ImageSplit props.
| Prop | Type | Description | Default |
|---|---|---|---|
| src | string | The URL of the image to be split. | - |
| sections | number | The number of sections the image is divided into. | 9 |
| offsetStep | number | The step value for vertical offset applied to each image section. | 30 |
| initialBorderOpacity | number | The initial opacity of the borders between image sections. | 0.4 |
| enableBorder | boolean | Whether to display borders between image sections. | true |
| borderColor | string | The color of the borders between sections in hex format. | "#ffffff" |
| viewportThreshold | number | The percentage of the viewport height at which the animation starts. | 0.3 |
| className | string | Additional CSS classes for styling the container. | - |
| [key: string] | any | Any additional props passed to the parent <div>. | - |
Credits
This component is inspired by Reflect