Dot Image Slider React component
A before/after image reveal, a luminance-mapped halftone dot rendering on one side, the real photo on the other, dragged apart by a glowing lightsaber-style divider handle.
About the Dot Image Slider component
Dot Image Slider is a free before/after reveal for a single photo: one side shows the image redrawn as a halftone of dots sized by brightness, the other the real photo, split by a glowing, lightsaber-style handle you drag across.
The halftone is drawn on a canvas; dot spacing, maximum dot size, dot and background colors and the handle's glow color are props.
When to use it
Use it for a striking hero or portfolio piece: print and design studios, photographers, or anything that plays with the idea of an image being developed or revealed.
To compare two different photos, use Compare Slider.
Installation
Add the Dot Image Slider component to your project with the shadcn CLI. It lands in components/dot-image-slider.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/dot-image-sliderOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<DotImageSlider /> accepts 6 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| image | string | DEFAULT_IMAGE |
| dotSpacing | number | 4 |
| dotMaxSize | number | 3 |
| dotColor | string | "#1a1205" |
| backgroundColor | string | "#f0ece4" |
| saberColor | string | "#88aaff" |
- imagestringDefault: DEFAULT_IMAGE
- dotSpacingnumberDefault: 4
- dotMaxSizenumberDefault: 3
- dotColorstringDefault: "#1a1205"
- backgroundColorstringDefault: "#f0ece4"
- saberColorstringDefault: "#88aaff"
Collections
Use-case pages that compare Dot Image Slider with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Dot Image Slider FAQ
- Can it compare two different images?
- No, it compares one photo with its own halftone version; use Compare Slider for two images.
- How do I make the dots finer?
- Lower dotSpacing and dotMaxSize.
- Can I change the handle color?
- Yes, saberColor sets the glow.
