"use client"
import dynamic from "next/dynamic"
const PixelDistorsionScene = dynamic(
() => import("@/components/ui/pixel-distorsion-scene"),
{
ssr: false,
loading: () => (
<div className="h-full w-full bg-zinc-100 dark:bg-neutral-950">
{/* Skeleton loader */}
</div>
),
}
)
export function PixelDistorsionDemo() {
return (
<div className="h-auto max-h-[400px] w-full overflow-hidden rounded-lg">
<PixelDistorsionScene imageSrc="https://cdn.badtz-ui.com/images/shaders/medusa-image.webp" />
</div>
)
}
pnpm dlx shadcn@latest add https://badtz-ui.com/r/pixel-distorsion.json
import dynamic from "next/dynamic";
const PixelDistorsionScene = dynamic(
() => import("@/components/ui/pixel-distorsion-scene"),
{
ssr: false,
loading: () => (
<div className="h-full w-full bg-zinc-100 dark:bg-neutral-950">
{/* Skeleton loader */}
</div>
),
},
);<div className="w-full max-w-[620px] h-auto">
<PixelDistorsionScene imageSrc="/images/shaders/medusa-image.webp" />
</div>You can use a placeholder while loading, to avoid potential issues, consider using dynamic imports.
By default, the shader is automatically disabled on mobile and replaced with a static image.
pixel-distorsion-scene props.
| Prop | Type | Default |
|---|---|---|
imageSrc | string | - |
alt? | string | undefined |
grid? | number | 20 |
mouse? | number | 0.25 |
strength? | number | 0.2 |
You can increase the grid and strength props significantly to achieve a liquid-like effect.
(Be mindful of performance—setting these values too high may impact rendering speed.)
Here are some of the key resources that helped me learn about shaders. If you're interested in exploring shaders further, these are great places to start!
If you are using Next.js 14 or earlier, install these packages instead:
@react-three/[email protected] @react-three/[email protected] gsap
pnpm add @react-three/[email protected] @react-three/[email protected] gsap three
THREE.WebGLRenderer: Context Lost error occurring on Next.js 15 projects.