Scroll down or wait for the component to intersect to see the shader transition.
Installation
npx kinetic-ui-cli@latest add Usage
This component takes a standard image source and renders it onto a WebGL plane using `@react-three/fiber`. It uses an intersection observer to trigger a custom simplex-noise fragment shader when the image scrolls into view.
import { DiffusionImageReveal } from "@/components/creative/diffusion-image-reveal";
export function HeroSection() {
return (
<div className="w-full">
<DiffusionImageReveal
src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop"
className="w-full max-w-lg mx-auto"
/>
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | undefined | The URL of the image to reveal. |
className | string | undefined | Additional CSS classes for the container. Make sure it has a width and height. |
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { DiffusionImageReveal } from "@/components/creative/diffusion-image-reveal";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { DiffusionImageReveal } from "@/components/creative/diffusion-image-reveal";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<DiffusionImageReveal
src="example"
/>
</div>
);
}