Three.js Components

Interactive 3D components with glitch naturalism aesthetic

Print-style halftone effect with mouse interaction and CMYK color separation

Halftone Controls

Dot Size: 0.015

Animation Speed: 0.8

Mouse Intensity: 1.0

Color Scheme

Drag to rotate | Scroll to zoom | Right-click to pan

Technologies

+React Three Fiber
+Three.js
+Custom GLSL Shaders
+Drei Helpers

Features

+Interactive animations
+RGB channel separation
+Simplex noise deformation
+Mouse-reactive effects

Performance

+SSR-safe imports
+Code-split bundles
+Instanced rendering
+Mobile-friendly

Available 3D Components

HalftoneImage

OrganicMesh

DataViz3D

GlitchBackground

SimpleHeroBackground

ProjectCard3D

PixelFish

NeoGlitchHero

RegistrationMarks

PostEffects

Usage Example

import dynamic from 'next/dynamic';

// Dynamically import with SSR disabled
const HalftoneImage = dynamic(
  () => import('@/components/three').then(mod => mod.HalftoneImage),
  { ssr: false }
);

export default function Page() {
  return (
    <Canvas>
      <HalftoneImage
        imageSrc="/your-image.png"
        dotSize={0.015}
        colorScheme="mixed"
      />
    </Canvas>
  );
}