Morphing Shapes

// MorphingShapes Component - Install: npm install three @types/three
// See full source at: https://github.com/your-repo/morphing-shapes

"use client";

import React, { useEffect, useRef, useCallback } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";

export const SHAPE_NAMES = ["Torus Knot", "Dual Helix", "Sphere", "Star", "Spiral", "Cube"];

export interface MorphingShapesProps {
  width?: number;
  height?: number;
  particleCount?: number;
  sparkCount?: number;
  starCount?: number;
  morphSpeed?: number;
  autoRotateSpeed?: number;
  showButton?: boolean;
  showInstructions?: boolean;
  className?: string;
  targetPatternIndex?: number;
}

// Component includes 6 parametric shape generators:
// - Torus Knot (Three.js geometry)
// - Dual Helix (DNA double helix)
// - Sphere (Fibonacci distribution)
// - Star (5-pointed 3D star)
// - Spiral (expanding helix)
// - Cube (edge + surface sampling)

// Full implementation available at component URL

import dynamic from "next/dynamic";

const MorphingShapes = dynamic(() => import("@/components/MorphingShapes"), {
  ssr: false,
  loading: () => <div className="h-screen bg-[#FAF9EE]" />,
});

// Full screen hero with specific shape
export default function Hero() {
  return (
    <div className="relative h-screen">
      <MorphingShapes
        className="absolute inset-0"
        targetPatternIndex={2} // Sphere
        showButton={false}
        showInstructions={false}
      />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-6xl font-bold text-gray-900">Welcome</h1>
      </div>
    </div>
  );
}

// Interactive with morph button
export function InteractiveDemo() {
  return (
    <div className="w-full h-[400px] rounded-xl overflow-hidden">
      <MorphingShapes
        height={400}
        particleCount={8000}
        showButton={true}
      />
    </div>
  );
}