Claude Sonnet 4 — Eval Report

```tsx
import React from 'react';
import Counter from './Counter';

export default function Example() {
  const [count, setCount] = React.useState(1234.56);
  const [revenue, setRevenue] = React.useState(987654.32);
  const [downloads, setDownloads] = React.useState(42069);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCount(prev => prev + Math.random() * 10 - 5);
      setRevenue(prev => prev + Math.random() * 1000 - 500);
      setDownloads(prev => Math.max(0, prev + Math.floor(Math.random() * 100)));
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ 
      padding: '2rem', 
      fontFamily: 'system-ui, -apple-system, sans-serif',
      backgroundColor: '#f5f5f5',
      minHeight: '100vh'
    }}>
      <h1 style={{ marginBottom: '2rem', color: '#333' }}>Counter Component Examples</h1>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
        {/* Basic Counter */}
        <div>
          <h2 style={{ marginBottom: '1rem', color: '#666' }}>Basic Counter</h2>
          <Counter 
            value={count}
            fontSize={60}
            textColor="#2563eb"
            fontWeight="bold"
            containerStyle={{
              backgroundColor: 'white',
              padding: '1rem',
              borderRadius: '12px',
              boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
            }}
          />
        </div>

        {/* Revenue Counter */}
        <div>
          <h2 style={{ marginBottom: '1rem', color: '#666' }}>Revenue Dashboard</h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
            <span style={{ fontSize: '24px', color: '#16a34a', fontWeight: 'bold' }}>$</span>
            <Counter 
              value={revenue}
              fontSize={48}
              textColor="#16a34a"
              fontWeight="600"
              containerStyle={{
                backgroundColor: 'white',
                border: '2px solid #dcfce7',
                borderRadius: '8px'
              }}
              gradientFrom="#16a34a"
              gradientHeight={12}
            />
          </div>
        </div>

        {/* Downloads Counter */}
        <div>
          <h2 style={{ marginBottom: '1rem', color: '#666' }}>Total Downloads</h2>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.5rem' }}>
            <Counter 
              value={downloads}
              fontSize={72}
              textColor="#7c3aed"
              fontWeight="800"
              gap={4}
              containerStyle={{
                backgroundColor: '#faf5ff',
                border: '3px solid #e9d5ff',
                borderRadius: '16px'
              }}
              gradientFrom="#7c3aed"
              gradientTo="transparent"
              gradientHeight={20}
            />
            <span style={{ fontSize: '24px', color: '#7c3aed', marginLeft: '0.5rem' }}>
              downloads
            </span>
          </div>
        </div>

        {/* Small Counter */}
        <div>
          <h2 style={{ marginBottom: '1rem', color: '#666' }}>Compact View</h2>
          <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: '14px', color: '#6b7280', marginBottom: '0.5rem' }}>
                Active Users
              </div>

import Counter from './Counter';

export default function Example() {
  return (
    <div style={{
      padding: '40px',
      backgroundColor: '#1a1a1a',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      gap: '40px',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <div style={{ textAlign: 'center' }}>
        <h2 style={{ color: 'white', marginBottom: '20px', fontSize: '24px' }}>
          Basic Counter
        </h2>
        <Counter 
          value={1234} 
          fontSize={60} 
          textColor="white" 
          fontWeight={700}
          gradientFrom="#1a1a1a"
        />
      </div>

      <div style={{ textAlign: 'center' }}>
        <h2 style={{ color: 'white', marginBottom: '20px', fontSize: '24px' }}>
          Large Revenue Counter
        </h2>
        <Counter 
          value={987654} 
          fontSize={80} 
          textColor="#00ff88" 
          fontWeight={800}
          gap={12}
          borderRadius={8}
          horizontalPadding={16}
          gradientFrom="#1a1a1a"
        />
      </div>

      <div style={{ textAlign: 'center' }}>
        <h2 style={{ color: 'white', marginBottom: '20px', fontSize: '24px' }}>
          Custom Places (Two Digits)
        </h2>
        <Counter 
          value={42} 
          places={[10, 1]} 
          fontSize={100} 
          textColor="#ff6b6b" 
          fontWeight={900}
          gap={16}
          padding={8}
          gradientFrom="#1a1a1a"
          gradientHeight={24}
        />
      </div>

      <div style={{ textAlign: 'center' }}>
        <h2 style={{ color: 'white', marginBottom: '20px', fontSize: '24px' }}>
          Compact Style
        </h2>
        <Counter 
          value={999} 
          fontSize={40} 
          textColor="#ffd700" 
          fontWeight={600}
          gap={4}
          borderRadius={6}
          horizontalPadding={12}
          gradientFrom="#1a1a1a"
          gradientHeight={12}
        />
      </div>
    </div>
  );
}

import React from 'react';
import Counter from './Counter';

export default function Example() {
  return (
    <div style={{ padding: '20px' }}>
      <Counter 
        value={12345.67}
        fontSize={60}
        padding={10}
        gap={12}
      />
    </div>
  );
}

import Counter from './Counter';

export default function Example() {
  return (
    <Counter 
      value={9876}
      fontSize={75}
      padding={12}
      gap={15}
    />
  );
}

```tsx
import { useState, useEffect } from 'react';
import Counter from './Counter';

interface MetricCardProps {
  title: string;
  value: number;
  suffix?: string;
  prefix?: string;
  change?: number;
  changeLabel?: string;
  icon: React.ReactNode;
  color: 'blue' | 'green' | 'purple' | 'orange';
}

function MetricCard({ title, value, suffix = '', prefix = '', change, changeLabel, icon, color }: MetricCardProps) {
  const colorClasses = {
    blue: {
      bg: 'bg-blue-50',
      icon: 'text-blue-600',
      counter: 'text-blue-900',
      change: change && change > 0 ? 'text-green-600' : 'text-red-500'
    },
    green: {
      bg: 'bg-green-50',
      icon: 'text-green-600',
      counter: 'text-green-900',
      change: change && change > 0 ? 'text-green-600' : 'text-red-500'
    },
    purple: {
      bg: 'bg-purple-50',
      icon: 'text-purple-600',
      counter: 'text-purple-900',
      change: change && change > 0 ? 'text-green-600' : 'text-red-500'
    },
    orange: {
      bg: 'bg-orange-50',
      icon: 'text-orange-600',
      counter: 'text-orange-900',
      change: change && change > 0 ? 'text-green-600' : 'text-red-500'
    }
  };

  const classes = colorClasses[color];

  return (
    <div className={`${classes.bg} rounded-xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-shadow`}>
      <div className="flex items-center justify-between mb-4">
        <div className={`p-2 rounded-lg bg-white ${classes.icon}`}>
          {icon}
        </div>
        {change !== undefined && (
          <div className={`flex items-center gap-1 text-sm font-medium ${classes.change}`}>
            {change > 0 ? (
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
              </svg>
            ) : (
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clipRule="evenodd" />
              </svg>
            )}
            {Math.abs(change)}%
          </div>
        )}
      </div>
      
      <div className="space-y-2">
        <h3 className="text-sm font-medium text-gray-600">{title}</h3>
        <div className="flex items-baseline gap-1">
          {prefix && <span className={`text-2xl font-bold ${classes.counter}`}>{prefix}</span>}
          <Counter
            value={

```jsx
import Counter from './Counter';
import { TrendingUp, TrendingDown, Users, DollarSign, ShoppingCart, Eye } from 'lucide-react';

export default function Example() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-white mb-2">Analytics Dashboard</h1>
          <p className="text-slate-300">Real-time business metrics and performance indicators</p>
        </div>

        {/* Main Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {/* Revenue Card */}
          <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
            <div className="flex items-center justify-between mb-4">
              <div className="p-3 bg-green-500/20 rounded-lg">
                <DollarSign className="w-6 h-6 text-green-400" />
              </div>
              <div className="flex items-center text-green-400 text-sm">
                <TrendingUp className="w-4 h-4 mr-1" />
                +12.5%
              </div>
            </div>
            <div className="mb-2">
              <div className="text-slate-300 text-sm mb-1">Revenue</div>
              <div className="flex items-center">
                <span className="text-white text-2xl font-bold mr-1">$</span>
                <Counter 
                  value={847392} 
                  fontSize={32} 
                  textColor="white" 
                  fontWeight={700}
                  gradientFrom="#1e293b"
                />
              </div>
            </div>
          </div>

          {/* Users Card */}
          <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
            <div className="flex items-center justify-between mb-4">
              <div className="p-3 bg-blue-500/20 rounded-lg">
                <Users className="w-6 h-6 text-blue-400" />
              </div>
              <div className="flex items-center text-blue-400 text-sm">
                <TrendingUp className="w-4 h-4 mr-1" />
                +8.2%
              </div>
            </div>
            <div className="mb-2">
              <div className="text-slate-300 text-sm mb-1">Active Users</div>
              <Counter 
                value={24567} 
                fontSize={32} 
                textColor="white" 
                fontWeight={700}
                gradientFrom="#1e293b"
              />
            </div>
          </div>

          {/* Orders Card */}
          <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
            <div className="flex items-center justify-between mb-4">
              <div className="p-3 bg-purple-500/20 rounded-lg">
                <ShoppingCart className="w-6 h-6 text-purple-400" />
              </div>
              <div className="flex items-center text-red-400 text-sm">
                <TrendingDown className="w-4 h-4 mr-1" />
                -2.1%
              </div>
            </div>
            <div className="mb-2">
              <div className="text-slate-300 text-sm mb-1">Orders</div>
              <Counter 
                value={3892} 
                fontSize={32} 
                textColor="white" 
                fontWeight={700}

import CircularGallery from './CircularGallery';

const exampleItems = [
  {
    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop',
    text: 'Mountain Peak'
  },
  {
    image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&h=600&fit=crop',
    text: 'Ocean Waves'
  },
  {
    image: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=600&fit=crop',
    text: 'Forest Trail'
  },
  {
    image: 'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=800&h=600&fit=crop',
    text: 'Desert Dunes'
  },
  {
    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop',
    text: 'City Lights'
  },
  {
    image: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=800&h=600&fit=crop',
    text: 'Autumn Leaves'
  }
];

export default function Example() {
  return (
    <div className="w-full h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900">
      <div className="absolute inset-0 flex flex-col">
        {/* Header */}
        <div className="z-10 p-8 text-center">
          <h1 className="text-4xl font-bold text-white mb-2">
            Interactive Gallery
          </h1>
          <p className="text-gray-300 text-lg">
            Scroll or drag to explore • Curved layout with smooth animations
          </p>
        </div>

        {/* Gallery Container */}
        <div className="flex-1 relative">
          <CircularGallery
            items={exampleItems}
            bend={2}
            textColor="#ffffff"
            borderRadius={0.08}
            font="bold 28px system-ui"
            scrollSpeed={1.8}
            scrollEase={0.08}
          />
        </div>

        {/* Footer */}
        <div className="z-10 p-6 text-center">
          <p className="text-gray-400 text-sm">
            Use mouse wheel, touch gestures, or click and drag to navigate
          </p>
        </div>
      </div>
    </div>
  );
}

import CircularGallery from './CircularGallery';

export default function Example() {
  const galleryItems = [
    { image: 'https://picsum.photos/400/300?random=1', text: 'Mountain Vista' },
    { image: 'https://picsum.photos/400/300?random=2', text: 'Ocean Waves' },
    { image: 'https://picsum.photos/400/300?random=3', text: 'Forest Path' },
    { image: 'https://picsum.photos/400/300?random=4', text: 'City Lights' },
    { image: 'https://picsum.photos/400/300?random=5', text: 'Desert Dunes' },
    { image: 'https://picsum.photos/400/300?random=6', text: 'Snowy Peaks' },
    { image: 'https://picsum.photos/400/300?random=7', text: 'Tropical Beach' },
    { image: 'https://picsum.photos/400/300?random=8', text: 'Urban Street' }
  ];

  return (
    <div style={{ 
      height: '600px', 
      position: 'relative',
      width: '100%',
      backgroundColor: '#1a1a1a'
    }}>
      <CircularGallery
        items={galleryItems}
        bend={3}
        textColor="#ffffff"
        borderRadius={0.05}
        font="bold 24px Figtree"
        scrollSpeed={2}
        scrollEase={0.05}
      />
    </div>
  );
}

import CircularGallery from './CircularGallery';

export default function Example() {
  const customItems = [
    { image: 'https://picsum.photos/seed/10/800/600', text: 'Mountain View' },
    { image: 'https://picsum.photos/seed/20/800/600', text: 'City Lights' },
    { image: 'https://picsum.photos/seed/30/800/600', text: 'Ocean Waves' },
    { image: 'https://picsum.photos/seed/40/800/600', text: 'Forest Path' },
    { image: 'https://picsum.photos/seed/50/800/600', text: 'Desert Dunes' },
    { image: 'https://picsum.photos/seed/60/800/600', text: 'Snowy Peak' },
  ];

  return (
    <div className="w-full h-screen bg-gradient-to-br from-purple-900 to-blue-900">
      <CircularGallery
        items={customItems}
        bend={1.5}
        textColor="#ff6b6b"
        borderRadius={0.15}
        font="bold 28px Arial"
        scrollSpeed={1.5}
        scrollEase={0.08}
      />
    </div>
  );
}

import React from 'react';
import CircularGallery from './CircularGallery';

export default function Example() {
  return (
    <div style={{ height: '600px', position: 'relative' }}>
      <CircularGallery
        bend={5}
        textColor="#ff6b6b"
        borderRadius={0.15}
      />
    </div>
  );
}

```tsx
import { useState, useEffect } from 'react';
import CircularGallery from './CircularGallery';
import { ChevronLeftIcon, ChevronRightIcon, PlayIcon, PauseIcon } from '@heroicons/react/24/outline';

interface Project {
  id: string;
  title: string;
  description: string;
  category: string;
  image: string;
  tags: string[];
  year: string;
}

const projects: Project[] = [
  {
    id: '1',
    title: 'Modern Architecture',
    description: 'A stunning residential complex that redefines urban living with sustainable design principles.',
    category: 'Architecture',
    image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&h=600&fit=crop',
    tags: ['Residential', 'Sustainable', 'Modern'],
    year: '2024'
  },
  {
    id: '2',
    title: 'Digital Art Installation',
    description: 'An immersive digital experience combining light, sound, and interactive elements.',
    category: 'Digital Art',
    image: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=800&h=600&fit=crop',
    tags: ['Interactive', 'Installation', 'Technology'],
    year: '2023'
  },
  {
    id: '3',
    title: 'Brand Identity System',
    description: 'Complete visual identity redesign for a sustainable fashion brand.',
    category: 'Branding',
    image: 'https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=800&h=600&fit=crop',
    tags: ['Identity', 'Fashion', 'Sustainability'],
    year: '2024'
  },
  {
    id: '4',
    title: 'Urban Photography',
    description: 'A series capturing the essence of city life through candid street photography.',
    category: 'Photography',
    image: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&h=600&fit=crop',
    tags: ['Street', 'Urban', 'Documentary'],
    year: '2023'
  },
  {
    id: '5',
    title: 'Product Design',
    description: 'Innovative consumer electronics that blend form and function seamlessly.',
    category: 'Product Design',
    image: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=800&h=600&fit=crop',
    tags: ['Electronics', 'Innovation', 'Design'],
    year: '2024'
  },
  {
    id: '6',
    title: 'Interior Spaces',
    description: 'Thoughtfully designed interior spaces that prioritize comfort and functionality.',
    category: 'Interior Design',
    image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=600&fit=crop',
    tags: ['Interior', 'Residential', 'Comfort'],
    year: '2023'
  }
];

export default function Example() {
  const [selectedCategory, setSelectedCategory] = useState<string>('All');
  const [isAutoPlay, setIsAutoPlay] = useState<boolean>(false);
  const [hoveredProject, setHoveredProject] = useState<string | null>(null);

  const categories = ['All', ...Array.from(new Set(projects.map(p => p.category)))];
  
  const filteredProjects = selectedCategory === 'All' 
    ? projects 
    : projects.filter(p => p.category === selectedCategory);

  const galleryItems = filteredProjects.map(project => ({
    image: project.image,
    text: project.title
  }));

  useEffect(() => {
    let interval: NodeJS.Timeout

```jsx
import CircularGallery from './CircularGallery';

export default function Example() {
  const portfolioItems = [
    { image: '/api/placeholder/400/300', text: 'Mountain Vista' },
    { image: '/api/placeholder/400/301', text: 'Ocean Waves' },
    { image: '/api/placeholder/400/302', text: 'Forest Path' },
    { image: '/api/placeholder/400/303', text: 'Desert Sunset' },
    { image: '/api/placeholder/400/304', text: 'City Lights' },
    { image: '/api/placeholder/400/305', text: 'Snowy Peaks' },
    { image: '/api/placeholder/400/306', text: 'Tropical Beach' },
    { image: '/api/placeholder/400/307', text: 'Autumn Valley' }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900">
      {/* Header Section */}
      <div className="relative z-10 pt-16 pb-8">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
            Photography
            <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> Portfolio</span>
          </h1>
          <p className="text-xl text-gray-300 mb-4 max-w-2xl mx-auto">
            Explore my collection of landscape photography captured from around the world
          </p>
          <div className="flex items-center justify-center gap-2 text-gray-400">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
            <span>Drag or scroll to navigate</span>
          </div>
        </div>
      </div>

      {/* Gallery Section */}
      <div className="relative">
        {/* Background decoration */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
        </div>

        {/* Gallery Container */}
        <div className="relative z-10 h-[600px] mx-4 md:mx-8">
          <CircularGallery
            items={portfolioItems}
            bend={2.5}
            textColor="#e5e7eb"
            borderRadius={0.08}
            font="bold 24px system-ui, -apple-system, sans-serif"
            scrollSpeed={2.5}
            scrollEase={0.08}
          />
        </div>

        {/* Stats Section */}
        <div className="relative z-10 max-w-4xl mx-auto px-6 mt-16 pb-20">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">

import React from 'react';
import InfiniteMenu from './InfiniteMenu';

const Example = () => {
  const menuItems = [
    {
      image: 'https://picsum.photos/512/512?random=1',
      link: 'https://github.com',
      title: 'GitHub',
      description: 'Code collaboration platform for developers worldwide'
    },
    {
      image: 'https://picsum.photos/512/512?random=2',
      link: 'https://stackoverflow.com',
      title: 'Stack Overflow',
      description: 'Developer community for coding questions and answers'
    },
    {
      image: 'https://picsum.photos/512/512?random=3',
      link: 'https://dribbble.com',
      title: 'Dribbble',
      description: 'Creative community showcasing design work and inspiration'
    },
    {
      image: 'https://picsum.photos/512/512?random=4',
      link: 'https://behance.net',
      title: 'Behance',
      description: 'Portfolio platform for creative professionals'
    },
    {
      image: 'https://picsum.photos/512/512?random=5',
      link: 'https://codepen.io',
      title: 'CodePen',
      description: 'Frontend playground for HTML, CSS, and JavaScript'
    },
    {
      image: 'https://picsum.photos/512/512?random=6',
      link: 'https://figma.com',
      title: 'Figma',
      description: 'Collaborative design tool for teams and individuals'
    },
    {
      image: 'https://picsum.photos/512/512?random=7',
      link: 'https://notion.so',
      title: 'Notion',
      description: 'All-in-one workspace for notes, tasks, and collaboration'
    },
    {
      image: 'https://picsum.photos/512/512?random=8',
      link: 'https://vercel.com',
      title: 'Vercel',
      description: 'Platform for frontend deployment and collaboration'
    }
  ];

  return (
    <div className="w-full h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
      <InfiniteMenu 
        items={menuItems}
        scale={1.2}
      />
    </div>
  );
};

export default Example;

import React from 'react';
import InfiniteMenu from './InfiniteMenu';

export default function Example() {
  const menuItems = [
    {
      image: 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=400&h=300&fit=crop',
      link: '/explore',
      title: 'Explore',
      description: 'Discover new adventures and hidden gems around the world'
    },
    {
      image: 'https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=400&h=300&fit=crop',
      link: '/technology',
      title: 'Technology',
      description: 'Latest innovations and breakthroughs in tech industry'
    },
    {
      image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
      link: '/nature',
      title: 'Nature',
      description: 'Beautiful landscapes and wildlife photography'
    },
    {
      image: 'https://images.unsplash.com/photo-1547036967-23d11aacaee0?w=400&h=300&fit=crop',
      link: '/food',
      title: 'Cuisine',
      description: 'Delicious recipes and culinary experiences from around the globe'
    },
    {
      image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=300&fit=crop',
      link: '/sports',
      title: 'Sports',
      description: 'Athletic achievements and sporting events coverage'
    },
    {
      image: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=300&fit=crop',
      link: '/art',
      title: 'Art & Culture',
      description: 'Creative expressions and cultural heritage from various civilizations'
    },
    {
      image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop',
      link: '/science',
      title: 'Science',
      description: 'Scientific discoveries and research breakthroughs'
    },
    {
      image: 'https://images.unsplash.com/photo-1486312338219-ce68e2c6b13d?w=400&h=300&fit=crop',
      link: '/business',
      title: 'Business',
      description: 'Market trends and entrepreneurial success stories'
    }
  ];

  return (
    <div style={{ 
      height: '600px', 
      position: 'relative',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      borderRadius: '12px',
      overflow: 'hidden'
    }}>
      <InfiniteMenu 
        items={menuItems}
        scale={1}
      />
    </div>
  );
}

import React from 'react';
import InfiniteMenu from './InfiniteMenu';

const Example: React.FC = () => {
  const customItems = [
    {
      image: 'https://picsum.photos/900/900?random=1',
      link: 'https://github.com',
      title: 'GitHub',
      description: 'Code repository and collaboration platform'
    },
    {
      image: 'https://picsum.photos/900/900?random=2',
      link: 'https://stackoverflow.com',
      title: 'Stack Overflow',
      description: 'Developer Q&A community'
    },
    {
      image: 'https://picsum.photos/900/900?random=3',
      link: 'https://developer.mozilla.org',
      title: 'MDN',
      description: 'Web development documentation'
    },
    {
      image: 'https://picsum.photos/900/900?random=4',
      link: 'https://reactjs.org',
      title: 'React',
      description: 'JavaScript library for building UIs'
    },
    {
      image: 'https://picsum.photos/900/900?random=5',
      link: 'https://typescript.org',
      title: 'TypeScript',
      description: 'Typed JavaScript at scale'
    },
    {
      image: 'https://picsum.photos/900/900?random=6',
      link: 'https://webgl.org',
      title: 'WebGL',
      description: '3D graphics for the web'
    }
  ];

  return (
    <div className="w-full h-screen bg-black">
      <InfiniteMenu 
        items={customItems}
        scale={1.5}
      />
    </div>
  );
};

export default Example;

import InfiniteMenu from './InfiniteMenu';

export default function Example() {
  const menuItems = [
    {
      image: '/api/placeholder/300/200',
      link: '/products',
      title: 'Products',
      description: 'Explore our latest product offerings and innovations'
    },
    {
      image: '/api/placeholder/300/200',
      link: '/services',
      title: 'Services',
      description: 'Professional services tailored to your needs'
    },
    {
      image: '/api/placeholder/300/200',
      link: '/about',
      title: 'About Us',
      description: 'Learn about our company history and mission'
    },
    {
      image: '/api/placeholder/300/200',
      link: '/contact',
      title: 'Contact',
      description: 'Get in touch with our team of experts'
    },
    {
      image: '/api/placeholder/300/200',
      link: '/blog',
      title: 'Blog',
      description: 'Read our latest insights and industry news'
    },
    {
      image: '/api/placeholder/300/200',
      link: '/careers',
      title: 'Careers',
      description: 'Join our growing team and make an impact'
    }
  ];

  return (
    <div style={{ height: '800px', position: 'relative' }}>
      <InfiniteMenu 
        items={menuItems}
        scale={1.2}
      />
    </div>
  );
}

```tsx
import { useState } from 'react';
import InfiniteMenu from './InfiniteMenu';

const portfolioItems = [
  {
    image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=900&h=900&fit=crop&crop=center',
    link: 'https://github.com/example/ecommerce-platform',
    title: 'E-Commerce Platform',
    description: 'Full-stack Next.js application with Stripe payments and inventory management'
  },
  {
    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=900&h=900&fit=crop&crop=center',
    link: 'https://github.com/example/data-dashboard',
    title: 'Analytics Dashboard',
    description: 'Real-time data visualization platform built with React and D3.js'
  },
  {
    image: 'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=900&h=900&fit=crop&crop=center',
    link: 'https://github.com/example/mobile-app',
    title: 'Mobile Banking App',
    description: 'React Native fintech application with biometric authentication'
  },
  {
    image: 'https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=900&h=900&fit=crop&crop=center',
    link: 'https://github.com/example/ai-chatbot',
    title: 'AI Chat Assistant',
    description: 'Intelligent conversational AI powered by OpenAI GPT and custom training'
  },
  {
    image: 'https://images.unsplash.com/photo-1504384764586-bb4cdc1707b0?w=900&h=900&fit=crop&crop=center',
    link: 'https://github.com/example/blockchain-wallet',
    title: 'Crypto Wallet',
    description: 'Secure multi-chain cryptocurrency wallet with DeFi integration'
  },
  {
    image: 'https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?w=900&h=900&fit=crop&crop=center',
    link: 'https://github.com/example/iot-dashboard',
    title: 'IoT Control Center',
    description: 'Industrial IoT monitoring system with real-time sensor data streams'
  },
  {
    image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=900&h=900&fit=crop&crop=center',
    link: 'https://github.com/example/saas-platform',
    title: 'SaaS Platform',
    description: 'Multi-tenant business automation platform with advanced workflow engine'
  },
  {
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=900&h=900&fit=crop&crop=center',
    link: 'https://github.com/example/social-network',
    title: 'Social Network',
    description: 'Professional networking platform with video calls and collaboration tools'
  }
];

const Example = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      {/* Header */}
      <header className="relative z-50 px-6 py-8">
        <nav className="flex items-center justify-between max-w-7xl mx-auto">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-lg"></div>

```jsx
import InfiniteMenu from './InfiniteMenu';

export default function Example() {
  const menuItems = [
    {
      image: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop',
      link: '/analytics',
      title: 'Analytics',
      description: 'Track your performance metrics and insights'
    },
    {
      image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop',
      link: '/projects',
      title: 'Projects',
      description: 'Manage and collaborate on your projects'
    },
    {
      image: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop',
      link: '/team',
      title: 'Team',
      description: 'Connect with your team members'
    },
    {
      image: 'https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400&h=300&fit=crop',
      link: '/settings',
      title: 'Settings',
      description: 'Configure your workspace preferences'
    },
    {
      image: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop',
      link: '/finance',
      title: 'Finance',
      description: 'Monitor budgets and financial reports'
    },
    {
      image: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&h=300&fit=crop',
      link: '/calendar',
      title: 'Calendar',
      description: 'Schedule meetings and track deadlines'
    },
    {
      image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=300&fit=crop',
      link: '/resources',
      title: 'Resources',
      description: 'Access documentation and learning materials'
    },
    {
      image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop',
      link: '/support',
      title: 'Support',
      description: 'Get help and contact our support team'
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      {/* Header */}
      <div className="relative z-10 pt-8 pb-4">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-4">
              Command Center
            </h1>
            <p className="text-xl sm:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
              Navigate your workspace with our interactive 3D menu. 
              <span className="block mt-2 text-lg text-purple-300">
                Drag to rotate • Click to explore
              </span>
            </p>
          </div>
        </div>
      </div>

      {/* 3D Menu Section */}
      <div className="relative z-10 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <div 
            className="relative bg-black/20 backdrop-blur-sm rounded-3xl border border-white/10 shadow-2xl overflow-hidden"
            style={{ height: '700px' }}
          >
            {/* Ambient lighting overlay */}
            <div

```tsx
import SoftAurora from './SoftAurora';

export default function Example() {
  return (
    <div className="relative min-h-screen bg-black overflow-hidden">
      {/* Aurora Background */}
      <div className="absolute inset-0">
        <SoftAurora
          speed={0.8}
          scale={2.0}
          brightness={0.9}
          color1="#00ffff"
          color2="#ff00ff"
          noiseFrequency={1.8}
          noiseAmplitude={0.8}
          bandHeight={0.4}
          bandSpread={1.2}
          octaveDecay={0.15}
          layerOffset={2.5}
          colorSpeed={0.7}
          enableMouseInteraction={true}
          mouseInfluence={0.3}
        />
      </div>

      {/* Content */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen p-8">
        <div className="text-center space-y-6 max-w-4xl">
          <h1 className="text-6xl md:text-8xl font-bold text-white/90 leading-tight">
            Aurora
          </h1>
          
          <p className="text-xl md:text-2xl text-white/70 leading-relaxed">
            Experience the mesmerizing dance of light with our interactive aurora effect.
            Move your cursor to influence the ethereal patterns.
          </p>

          <div className="flex flex-wrap justify-center gap-4 mt-12">
            <button className="px-8 py-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full text-white font-medium hover:bg-white/20 transition-all duration-300">
              Get Started
            </button>
            
            <button className="px-8 py-4 bg-transparent border border-white/30 rounded-full text-white font-medium hover:bg-white/10 transition-all duration-300">
              Learn More
            </button>
          </div>
        </div>

        {/* Feature Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 max-w-5xl w-full">
          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300">
            <div className="w-12 h-12 bg-cyan-400/20 rounded-lg flex items-center justify-center mb-4">
              <div className="w-6 h-6 bg-cyan-400 rounded-full opacity-60"></div>
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Interactive</h3>
            <p className="text-white/60 leading-relaxed">
              Responsive to mouse movement, creating a dynamic and engaging visual experience.
            </p>
          </div>

          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300">
            <div className="w-12 h-12 bg-purple-400/20 rounded-lg flex items-center justify-center mb-4">
              <div className="w-6 h-6 bg-purple-400 rounded-full opacity-60"></div>
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Customizable</h3>
            <p className="text-white/60 leading-relaxed">
              Full control over colors, speed, scale, and various visual parameters.
            </p>
          </div>

          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300">
            <div className="w-12 h-12 bg-pink-400/20

import SoftAurora from './SoftAurora';

export default function Example() {
  return (
    <div className="relative w-full h-screen overflow-hidden">
      <SoftAurora 
        color1="#f7f7f7" 
        color2="#e100ff" 
        speed={0.6}
        scale={1.5}
        brightness={1}
        enableMouseInteraction={true}
        mouseInfluence={0.25}
      />
      
      {/* Example content overlaid on the aurora */}
      <div className="absolute inset-0 flex items-center justify-center z-10">
        <div className="text-center text-white">
          <h1 className="text-6xl font-bold mb-6 drop-shadow-lg">
            Aurora Dreams
          </h1>
          <p className="text-xl mb-8 max-w-2xl mx-auto drop-shadow-md opacity-90">
            Experience the mesmerizing beauty of the northern lights with this 
            interactive WebGL aurora effect. Move your cursor to influence the flow.
          </p>
          <button className="px-8 py-3 bg-white/20 backdrop-blur-sm rounded-lg border border-white/30 hover:bg-white/30 transition-all duration-300">
            Explore
          </button>
        </div>
      </div>
    </div>
  );
}

import SoftAurora from './SoftAurora';

export default function Example() {
  return (
    <div className="w-full h-screen">
      <SoftAurora
        speed={1.2}
        scale={2.8}
        brightness={0.7}
      />
    </div>
  );
}

import SoftAurora from './SoftAurora';

export default function Example() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <SoftAurora 
        speed={0.8}
        scale={2.2}
        brightness={1.3}
      />
    </div>
  );
}

```tsx
import { useState, useEffect } from 'react';
import SoftAurora from './SoftAurora';
import { ChevronDownIcon, PlayIcon, PauseIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';

export default function Example() {
  const [isPlaying, setIsPlaying] = useState(true);
  const [showSettings, setShowSettings] = useState(false);
  const [settings, setSettings] = useState({
    speed: 0.6,
    brightness: 1.0,
    scale: 1.5,
    color1: '#f7f7f7',
    color2: '#e100ff',
    enableMouseInteraction: true,
    mouseInfluence: 0.25
  });

  const [stats] = useState([
    { label: 'Active Users', value: '2,847', change: '+12%', trend: 'up' },
    { label: 'Revenue', value: '$94,521', change: '+8%', trend: 'up' },
    { label: 'Conversion Rate', value: '3.24%', change: '-2%', trend: 'down' },
    { label: 'Growth Rate', value: '24.8%', change: '+5%', trend: 'up' }
  ]);

  useEffect(() => {
    const interval = setInterval(() => {
      // Simulate real-time data updates
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="min-h-screen bg-gray-950 text-white">
      {/* Navigation */}
      <nav className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <h1 className="text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
                  Aurora Analytics
                </h1>
              </div>
            </div>
            <div className="flex items-center space-x-4">
              <button
                onClick={() => setShowSettings(!showSettings)}
                className="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors"
              >
                <Cog6ToothIcon className="w-5 h-5" />
              </button>
              <button
                onClick={() => setIsPlaying(!isPlaying)}
                className="flex items-center space-x-2 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 transition-colors"
              >
                {isPlaying ? (
                  <PauseIcon className="w-4 h-4" />
                ) : (
                  <PlayIcon className="w-4 h-4" />
                )}
                <span className="text-sm">{isPlaying ? 'Pause' : 'Play'}</span>
              </button>
            </div>
          </div>
        </div>
      </nav>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Hero Section with Aurora Background */}
        <div className="relative overflow-hidden rounded-2xl mb-8">
          {/* Aurora Background */}
          <div className="absolute inset-0 h-80">
            {isPlaying && (
              <SoftAurora
                speed={settings.speed}
                brightness={settings.brightness}
                scale={settings.scale}
                color1={settings.color1}
                color2={settings.color2}
                enableMouseInteraction={settings.enableMouseInteraction}
                mouseInfluence={settings.mouseInfluence}
              />
            )}
          </div>
          
          {/* Content Overlay

```jsx
import SoftAurora from './SoftAurora';

export default function Example() {
  return (
    <div className="min-h-screen bg-gray-900">
      {/* Hero Section with Aurora Background */}
      <section className="relative h-screen overflow-hidden">
        {/* Aurora Background */}
        <div className="absolute inset-0">
          <SoftAurora 
            color1="#4c1d95" 
            color2="#7c3aed" 
            speed={0.4}
            brightness={0.8}
            noiseFrequency={1.8}
            bandHeight={0.7}
            enableMouseInteraction={true}
            mouseInfluence={0.3}
          />
        </div>
        
        {/* Content Overlay */}
        <div className="relative z-10 flex items-center justify-center h-full px-6">
          <div className="text-center max-w-4xl">
            {/* Logo/Brand */}
            <div className="mb-8">
              <div className="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-full mx-auto flex items-center justify-center border border-white/20">
                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
            </div>

            {/* Hero Text */}
            <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
              Aurora
              <span className="block bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
                Analytics
              </span>
            </h1>
            
            <p className="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed">
              Illuminate your data with powerful insights and beautiful visualizations
            </p>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <button className="px-8 py-4 bg-white text-purple-900 font-semibold rounded-xl hover:bg-gray-100 transition-colors shadow-lg backdrop-blur-sm">
                Start Free Trial
              </button>
              <button className="px-8 py-4 bg-white/10 text-white font-semibold rounded-xl hover:bg-white/20 transition-colors border border-white/20 backdrop-blur-sm">
                Watch Demo
              </button>
            </div>

            {/* Social Proof */}
            <div className="mt-12 text-gray-400">
              <p className="mb-4">Trusted by leading companies</p>
              <div className="flex justify-center items-center gap-8 opacity-60">
                {['TechCorp', 'DataFlow', 'Nexus'].map((company) => (
                  <div key={company} className="text-lg font-medium">
                    {company}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10">
          <div className="flex flex-col items-center text-white/60 animate-bounce">
            <span className="text-sm mb-2">Scroll to explore</span>
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7

```tsx
import React from 'react';
import ModelViewer from './ModelViewer';

const Example: React.FC = () => {
  const handleModelLoaded = () => {
    console.log('3D model has finished loading!');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-700 p-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-4xl font-bold text-white mb-8 text-center">
          3D Model Viewer Examples
        </h1>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {/* Example 1: Basic GLB model */}
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
            <h2 className="text-xl font-semibold text-white mb-4">Basic Model</h2>
            <ModelViewer
              url="/models/helmet.glb"
              width={300}
              height={300}
              environmentPreset="studio"
              enableMouseParallax={true}
              enableManualRotation={true}
              enableHoverRotation={false}
              autoFrame={true}
              onModelLoaded={handleModelLoaded}
            />
            <p className="text-gray-300 text-sm mt-4">
              A basic 3D helmet model with studio lighting and mouse interaction.
            </p>
          </div>

          {/* Example 2: Auto-rotating model with fade-in */}
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
            <h2 className="text-xl font-semibold text-white mb-4">Auto-Rotating</h2>
            <ModelViewer
              url="/models/duck.glb"
              width={300}
              height={300}
              environmentPreset="sunset"
              autoRotate={true}
              autoRotateSpeed={0.5}
              fadeIn={true}
              enableManualRotation={false}
              enableHoverRotation={true}
              defaultRotationX={0}
              defaultRotationY={0}
              ambientIntensity={0.4}
              keyLightIntensity={1.2}
            />
            <p className="text-gray-300 text-sm mt-4">
              An auto-rotating duck with sunset environment and fade-in effect.
            </p>
          </div>

          {/* Example 3: Customized lighting and positioning */}
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
            <h2 className="text-xl font-semibold text-white mb-4">Custom Setup</h2>
            <ModelViewer
              url="/models/robot.glb"
              width={300}
              height={300}
              environmentPreset="city"
              modelXOffset={0.1}
              modelYOffset={-0.05}
              defaultRotationX={-30}
              defaultRotationY={45}
              defaultZoom={0.8}
              minZoomDistance={0.3}
              maxZoomDistance={3}
              ambientIntensity={0.2}
              keyLightIntensity={1.5}
              fillLightIntensity={0.7}
              rimLightIntensity={1.0}
              enableMouseParallax={true}
              enableHoverRotation={true}
              showScreenshotButton={true}
            />
            <p className="text-gray-300 text-sm mt-4">
              A robot model with custom lighting, positioning, and screenshot capability.
            </p>
          </div>

          {/* Example 4: Large showcase model */}
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 md:col-span-2 lg:col-span-3">
            <h2 className="text-2xl font-semibold text-white mb-4 text-center">

```jsx
import ModelViewer from './ModelViewer';

export default function Example() {
  const handleModelLoaded = () => {
    console.log('3D model has finished loading');
  };

  return (
    <div style={{ padding: '2rem', backgroundColor: '#f5f5f5' }}>
      <h1 style={{ textAlign: 'center', marginBottom: '2rem', color: '#333' }}>
        3D Model Viewer Examples
      </h1>
      
      <div style={{ 
        display: 'grid', 
        gap: '3rem', 
        maxWidth: '1200px', 
        margin: '0 auto' 
      }}>
        {/* Basic Model Viewer */}
        <div style={{ textAlign: 'center' }}>
          <h2 style={{ marginBottom: '1rem', color: '#555' }}>
            Basic Model Viewer
          </h2>
          <p style={{ marginBottom: '1.5rem', color: '#666' }}>
            A simple 3D model viewer with default settings
          </p>
          <ModelViewer
            url="/models/example-model.glb"
            width={400}
            height={400}
            environmentPreset="studio"
            onModelLoaded={handleModelLoaded}
          />
        </div>

        {/* Interactive Product Viewer */}
        <div style={{ textAlign: 'center' }}>
          <h2 style={{ marginBottom: '1rem', color: '#555' }}>
            Interactive Product Viewer
          </h2>
          <p style={{ marginBottom: '1.5rem', color: '#666' }}>
            Enhanced viewer with auto-rotation, mouse parallax, and hover effects
          </p>
          <ModelViewer
            url="/models/product.glb"
            width={600}
            height={500}
            enableMouseParallax={true}
            enableHoverRotation={true}
            autoRotate={true}
            autoRotateSpeed={0.2}
            environmentPreset="sunset"
            fadeIn={true}
            showScreenshotButton={true}
            onModelLoaded={handleModelLoaded}
          />
        </div>

        {/* Custom Positioned Model */}
        <div style={{ textAlign: 'center' }}>
          <h2 style={{ marginBottom: '1rem', color: '#555' }}>
            Custom Positioned Model
          </h2>
          <p style={{ marginBottom: '1.5rem', color: '#666' }}>
            Model with custom rotation, zoom, and positioning
          </p>
          <ModelViewer
            url="/models/custom.glb"
            width={500}
            height={450}
            modelXOffset={0.1}
            modelYOffset={-0.2}
            defaultRotationX={-30}
            defaultRotationY={45}
            defaultZoom={0.8}
            environmentPreset="forest"
            enableManualRotation={true}
            enableManualZoom={true}
            autoFrame={true}
            onModelLoaded={handleModelLoaded}
          />
        </div>
      </div>

      <div style={{ 
        marginTop: '3rem', 
        padding: '2rem', 
        backgroundColor: '#fff', 
        borderRadius: '8px',
        boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
      }}>
        <h3 style={{ marginBottom: '1rem', color: '#333' }}>
          Usage Instructions
        </h3>
        <ul style={{ color: '#666', lineHeight: '1.6' }}>
          <li>Drag to rotate the model (when manual rotation is enabled)</li>
          <li>Scroll to zoom in and out (when manual zoom is enabled)</li>
          <li>Move your mouse around for parallax effects (when enabled)</li>
          <li>Click the screenshot button to capture the current view</li>
          <li>Models support glTF/GLB, FBX, and OBJ formats</li>
        </ul>
      </div>
    </div>

import ModelViewer from './ModelViewer';

const Example = () => {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Custom ModelViewer Example</h1>
      <ModelViewer
        url="/path/to/your/model.glb"
        width={600}
        height={500}
        modelXOffset={0.1}
      />
    </div>
  );
};

export default Example;

import ModelViewer from './ModelViewer';

export default function Example() {
  return (
    <ModelViewer
      url="/models/example.glb"
      width={600}
      height={500}
      modelXOffset={0.1}
    />
  );
}

```tsx
import { useState } from 'react';
import ModelViewer from './ModelViewer';

const models = [
  {
    id: 'robot',
    name: 'Retro Robot',
    url: 'https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb',
    description: 'An expressive retro-style robot with smooth animations',
    category: 'Characters'
  },
  {
    id: 'helmet',
    name: 'Damaged Helmet',
    url: 'https://threejs.org/examples/models/gltf/DamagedHelmet/DamagedHelmet.gltf',
    description: 'A battle-worn sci-fi helmet with detailed texturing',
    category: 'Props'
  },
  {
    id: 'duck',
    name: 'Rubber Duck',
    url: 'https://threejs.org/examples/models/gltf/Duck/Duck.gltf',
    description: 'A classic yellow rubber duck model',
    category: 'Objects'
  }
];

const presets = [
  { value: 'forest', label: '🌲 Forest', description: 'Natural woodland lighting' },
  { value: 'sunset', label: '🌅 Sunset', description: 'Warm golden hour ambiance' },
  { value: 'city', label: '🏙️ City', description: 'Urban environment lighting' },
  { value: 'studio', label: '💡 Studio', description: 'Professional studio setup' },
  { value: 'night', label: '🌙 Night', description: 'Cool moonlit atmosphere' },
  { value: 'none', label: '⚫ None', description: 'No environment lighting' }
];

const Example = () => {
  const [selectedModel, setSelectedModel] = useState(models[0]);
  const [environment, setEnvironment] = useState<'city' | 'sunset' | 'night' | 'dawn' | 'studio' | 'apartment' | 'forest' | 'park' | 'none'>('forest');
  const [autoRotate, setAutoRotate] = useState(true);
  const [showControls, setShowControls] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [viewerSettings, setViewerSettings] = useState({
    enableMouseParallax: true,
    enableHoverRotation: true,
    autoRotateSpeed: 0.35,
    ambientIntensity: 0.3,
    keyLightIntensity: 1
  });

  const handleModelLoad = () => {
    setIsLoading(false);
  };

  const handleModelChange = (model: typeof models[0]) => {
    setIsLoading(true);
    setSelectedModel(model);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      {/* Header */}
      <header className="relative z-10 px-6 py-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center">
            <h1 className="text-4xl md:text-6xl font-bold text-white mb-4">
              3D Model Gallery
            </h1>
            <p className="text-xl text-slate-300 max-w-2xl mx-auto">
              Explore interactive 3D models with customizable lighting and environments. 
              Click and drag to rotate, scroll to zoom.
            </p>
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-6 pb-12">
        <div className="grid lg:grid-cols-3 gap-8">
          {/* Main Viewer */}
          <div className="lg:col-span-2">
            <div className="bg-slate-800/50 backdrop-blur-sm rounded-2xl border

```tsx
import React, { useState } from 'react';
import ModelViewer from './ModelViewer';
import { Camera, RotateCcw, ZoomIn, ZoomOut, Settings } from 'lucide-react';

export default function Example() {
  const [selectedModel, setSelectedModel] = useState('/models/car.glb');
  const [environment, setEnvironment] = useState<'city' | 'sunset' | 'night' | 'dawn' | 'studio' | 'apartment' | 'forest' | 'park' | 'none'>('studio');
  const [autoRotate, setAutoRotate] = useState(false);
  const [showSettings, setShowSettings] = useState(false);

  const models = [
    { name: 'Sports Car', url: '/models/car.glb', category: 'Automotive' },
    { name: 'Gaming Chair', url: '/models/chair.glb', category: 'Furniture' },
    { name: 'Sneaker', url: '/models/shoe.glb', category: 'Fashion' },
    { name: 'Smartphone', url: '/models/phone.glb', category: 'Electronics' },
  ];

  const environments = [
    { name: 'Studio', value: 'studio' as const },
    { name: 'City', value: 'city' as const },
    { name: 'Sunset', value: 'sunset' as const },
    { name: 'Forest', value: 'forest' as const },
    { name: 'Night', value: 'night' as const },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
      {/* Header */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-6">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">3D Product Gallery</h1>
              <p className="text-gray-600 mt-1">Explore our collection in interactive 3D</p>
            </div>
            <button
              onClick={() => setShowSettings(!showSettings)}
              className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
            >
              <Settings className="w-4 h-4" />
              Settings
            </button>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* Model Selection Sidebar */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-xl shadow-sm border p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Models</h2>
              <div className="space-y-2">
                {models.map((model) => (
                  <button
                    key={model.url}
                    onClick={() => setSelectedModel(model.url)}
                    className={`w-full text-left px-4 py-3 rounded-lg transition-colors ${
                      selectedModel === model.url
                        ? 'bg-blue-50 border border-blue-200 text-blue-700'
                        : 'hover:bg-gray-50 text-gray-700'
                    }`}
                  >
                    <div className="font-medium">{model.name}</div>
                    <div className="text-sm text-gray-500">{model.category}</div>
                  </button>
                ))}
              </div>
            </div>

            {/* Settings Panel */}
            {showSettings && (
              <div className

```tsx
import React from 'react';
import ShapeGrid from './ShapeGrid';

const Example: React.FC = () => {
  return (
    <div className="min-h-screen bg-gray-900 relative overflow-hidden">
      {/* ShapeGrid as background */}
      <div className="absolute inset-0">
        <ShapeGrid
          shape="hexagon"
          direction="diagonal"
          speed={0.5}
          borderColor="#444"
          squareSize={60}
          hoverFillColor="#3b82f6"
          hoverTrailAmount={8}
        />
      </div>

      {/* Content overlay */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-8">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-6xl font-bold text-white mb-6 leading-tight">
            Interactive
            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600">
              Shape Grid
            </span>
          </h1>
          
          <p className="text-xl text-gray-300 mb-8 leading-relaxed">
            Move your cursor around to interact with the animated hexagonal grid.
            The shapes respond to your mouse movement with a beautiful trailing effect.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <button className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors duration-200">
              Get Started
            </button>
            <button className="px-8 py-3 border border-gray-400 hover:border-white text-gray-300 hover:text-white rounded-lg font-medium transition-colors duration-200">
              Learn More
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
            <div className="bg-black/20 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
                <svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-white mb-3">Interactive</h3>
              <p className="text-gray-400 leading-relaxed">
                Responsive grid that reacts to mouse movement with smooth animations and hover effects.
              </p>
            </div>

            <div className="bg-black/20 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
              <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4">
                <svg className="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z" />
                </svg>
              </div>

import ShapeGrid from './ShapeGrid';

export default function Example() {
  return (
    <div className="min-h-screen bg-black text-white relative">
      {/* ShapeGrid background */}
      <div className="absolute inset-0">
        <ShapeGrid 
          direction="diagonal"
          speed={1}
          borderColor="#333"
          squareSize={40}
          hoverFillColor="#666"
          shape="square"
          hoverTrailAmount={0}
        />
      </div>
      
      {/* Content overlay */}
      <div className="relative z-10 flex items-center justify-center min-h-screen p-8">
        <div className="max-w-2xl text-center">
          <h1 className="text-4xl font-bold mb-6">
            Animated Shape Grid
          </h1>
          <p className="text-lg mb-8 opacity-90">
            Move your mouse over the background to see the interactive hover effects. 
            The grid animates diagonally with smooth motion.
          </p>
          <div className="space-y-4 text-sm opacity-75">
            <p>• Hover over shapes to see them fill with color</p>
            <p>• Grid animates continuously in the chosen direction</p>
            <p>• Fully customizable shapes and colors</p>
          </div>
        </div>
      </div>
    </div>
  );
}

import React from 'react';
import ShapeGrid from './ShapeGrid';

const Example: React.FC = () => {
  return (
    <div className="w-full h-screen">
      <ShapeGrid
        direction="diagonal"
        speed={2.5}
        borderColor="#4a90e2"
      />
    </div>
  );
};

export default Example;

import ShapeGrid from './ShapeGrid';

export default function Example() {
  return (
    <div style={{ width: '100%', height: '400px' }}>
      <ShapeGrid 
        direction="diagonal"
        speed={0.8}
        borderColor="#555"
      />
    </div>
  );
}

```tsx
import React, { useState } from 'react';
import ShapeGrid from './ShapeGrid';
import { ChevronDownIcon, PlayIcon, PauseIcon } from '@heroicons/react/24/outline';

const Example: React.FC = () => {
  const [isPlaying, setIsPlaying] = useState(true);
  const [currentShape, setCurrentShape] = useState<'square' | 'hexagon' | 'circle' | 'triangle'>('hexagon');
  const [currentDirection, setCurrentDirection] = useState<'diagonal' | 'up' | 'right' | 'down' | 'left'>('diagonal');
  const [speed, setSpeed] = useState(2);

  const shapes = [
    { value: 'hexagon' as const, label: 'Hexagon' },
    { value: 'square' as const, label: 'Square' },
    { value: 'circle' as const, label: 'Circle' },
    { value: 'triangle' as const, label: 'Triangle' },
  ];

  const directions = [
    { value: 'diagonal' as const, label: 'Diagonal' },
    { value: 'right' as const, label: 'Right' },
    { value: 'left' as const, label: 'Left' },
    { value: 'up' as const, label: 'Up' },
    { value: 'down' as const, label: 'Down' },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      {/* Background Grid */}
      <div className="absolute inset-0">
        <ShapeGrid
          shape={currentShape}
          direction={currentDirection}
          speed={isPlaying ? speed : 0}
          borderColor="#4c1d95"
          hoverFillColor="rgba(147, 51, 234, 0.3)"
          squareSize={60}
          hoverTrailAmount={8}
        />
      </div>

      {/* Content Overlay */}
      <div className="relative z-10 min-h-screen flex flex-col">
        {/* Header */}
        <header className="p-6">
          <nav className="max-w-7xl mx-auto flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <div className="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-lg">G</span>
              </div>
              <span className="text-white font-semibold text-xl">GridMotion</span>
            </div>
            
            <div className="hidden md:flex items-center space-x-8">
              <a href="#" className="text-gray-300 hover:text-white transition-colors">Features</a>
              <a href="#" className="text-gray-300 hover:text-white transition-colors">Pricing</a>
              <a href="#" className="text-gray-300 hover:text-white transition-colors">About</a>
              <button className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors">
                Get Started
              </button>
            </div>
          </nav>
        </header>

        {/* Main Content */}
        <main className="flex-1 flex items-center justify-center p-6">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
              Dynamic
              <span className="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
                {' '}Grid{' '}
              </span>
              Animations
            </h1>
            
            <p className="text-

```jsx
import ShapeGrid from './ShapeGrid';

export default function Example() {
  return (
    <div className="min-h-screen bg-gray-900 text-white">
      {/* Hero Section with ShapeGrid Background */}
      <section className="relative h-screen flex items-center justify-center overflow-hidden">
        {/* Background Grid */}
        <div className="absolute inset-0 opacity-30">
          <ShapeGrid 
            shape="hexagon"
            direction="diagonal"
            speed={0.8}
            borderColor="#374151"
            hoverFillColor="#3b82f6"
            squareSize={60}
            hoverTrailAmount={3}
          />
        </div>

        {/* Hero Content */}
        <div className="relative z-10 text-center max-w-4xl mx-auto px-6">
          <h1 className="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 bg-clip-text text-transparent">
            TechFlow
          </h1>
          <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto">
            Next-generation development platform powered by AI and designed for the future
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="px-8 py-4 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold text-lg transition-colors">
              Get Started
            </button>
            <button className="px-8 py-4 border border-gray-600 hover:border-gray-400 rounded-lg font-semibold text-lg transition-colors">
              Watch Demo
            </button>
          </div>
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
          <div className="w-6 h-10 border-2 border-gray-400 rounded-full flex justify-center">
            <div className="w-1 h-3 bg-gray-400 rounded-full mt-2"></div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="relative py-20 bg-gray-800">
        {/* Subtle background grid */}
        <div className="absolute inset-0 opacity-10">
          <ShapeGrid 
            shape="square"
            direction="right"
            speed={0.3}
            borderColor="#4b5563"
            hoverFillColor="#10b981"
            squareSize={40}
            hoverTrailAmount={0}
          />
        </div>

        <div className="relative z-10 max-w-6xl mx-auto px-6">
          <h2 className="text-4xl font-bold text-center mb-16">Powerful Features</h2>
          
          <div className="grid md:grid-cols-3 gap-8">
            <div className="p-8 bg-gray-900/50 backdrop-blur-sm rounded-xl border border-gray-700">
              <div className="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-6">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-4">Lightning Fast</h3>
              <p className="text-gray-400">Built with performance in mind, delivering results at unprecedented speed.</p>
            </div>

            <div className="p-8 bg-