Hero3D

The Hero3D component loads a Three.js canvas utilizing custom GLSL shader programs to perturb mesh geometry in real time. It reacts organically to mouse coordinates, deforming the glass-like torus-knot with sine/cosine offset frequencies.

Live Preview

Performance Notes

[!TIP] The Hero3D component relies on Three.js and @react-three/fiber which are heavy dependencies. Always import this component dynamically with ssr: false in Next.js to avoid blocking your initial page load.

WebGL shaders execute directly on the GPU. The torus knot is geometry-instanced with low vertex division counts to maintain 60fps rendering cycles across both mobile and integrated GPU devices.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { Hero3D } from "@/components/creative/hero/hero-3d";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { Hero3D } from "@/components/creative/hero/hero-3d";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <Hero3D
        color="example"
        speed{10}
        scale{10}
      />
    </div>
  );
}