Components

Hero Image 3D

Transform static images into living WebGL surfaces with liquid displacement and chromatic aberration.

Preview

Usage

import HeroImage3D from "@/components/HeroImage3D";

export default function HeroSection() {
  return (
    <div className="h-[500px] w-full">
       <HeroImage3D src="/path/to/image.jpg" />
    </div>
  );
}

Props

Prop	Type	Default	Description
src	string	-	Path to the image texture
className	string	''	Additional CSS classes for the wrapper

Components

Hero Image 3D

Transform static images into living WebGL surfaces with liquid displacement and chromatic aberration.

Preview

Usage

import HeroImage3D from "@/components/HeroImage3D";

export default function HeroSection() {
  return (
    <div className="h-[500px] w-full">
       <HeroImage3D src="/path/to/image.jpg" />
    </div>
  );
}

Props

Prop	Type	Default	Description
src	string	-	Path to the image texture
className	string	''	Additional CSS classes for the wrapper

Frame

Hero Image 3D

Preview

Usage

Props

Hero Image 3D

Preview

Usage

Props