Components /Scroll Dissolve Reveal

Scroll Dissolve Reveal

A beautiful image dissolve effect driven by scrolling using React Three Fiber and Shaders.

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/scroll-dissolve-reveal.json

Preparing preview…

Installation

Run the following command

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/scroll-dissolve-reveal.json

Usage

code

1import { ScrollDissolveReveal } from "@/components/ui/scroll-dissolve-reveal"
2
3export function ScrollDissolveRevealDemo() {
4  return (
5    <ScrollDissolveReveal
6      imageFront="/front.jpg"
7      imageBack="/back.jpg"
8    />
9  )
10}

Props

Prop Name	Type	Default	Description
imageFront	`string`	`-`	The image to display initially and dissolve away.
imageBack	`string`	`-`	The image to reveal underneath the dissolve effect.
className	`string`	`-`	Additional CSS classes for the sticky container.
containerClassName	`string`	`-`	Additional CSS classes for the outer scroll container.

Loading component…