create-neon-flux 1.0.0

package/components/3d/CyberCity.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export default function CyberCity() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    // Check for reduced motion preference
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Set canvas size
+    let width = window.innerWidth;
+    let height = window.innerHeight;
+    canvas.width = width;
+    canvas.height = height;
+
+    // Create initial gradient
+    let bgGradient = ctx.createLinearGradient(0, 0, 0, height);
+    bgGradient.addColorStop(0, '#0D0221');
+    bgGradient.addColorStop(1, '#0A0A0A');
+
+    const setCanvasSize = () => {
+      width = window.innerWidth;
+      height = window.innerHeight;
+      canvas.width = width;
+      canvas.height = height;
+      // Re-cache gradient on resize
+      bgGradient = ctx.createLinearGradient(0, 0, 0, height);
+      bgGradient.addColorStop(0, '#0D0221');
+      bgGradient.addColorStop(1, '#0A0A0A');
+    };
+    window.addEventListener('resize', setCanvasSize);
+
+    // Building data with antenna flag pre-determined
+    interface Building {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+      color: string;
+      windows: Array<{ x: number; y: number; lit: boolean }>;
+      hasAntenna: boolean;
+    }
+
+    const buildings: Building[] = [];
+    const colors = ['#FF10F0', '#00FFF0', '#B026FF', '#00D4FF'];
+    const buildingCount = 25; // Reduced for performance
+
+    // Generate buildings
+    for (let i = 0; i < buildingCount; i++) {
+      const bWidth = 40 + Math.random() * 60;
+      const bHeight = 100 + Math.random() * 300;
+      const x = (width / buildingCount) * i;
+      const y = height - bHeight;
+      const color = colors[Math.floor(Math.random() * colors.length)];
+
+      // Generate windows
+      const windows = [];
+      const windowRows = Math.floor(bHeight / 20);
+      const windowCols = Math.floor(bWidth / 15);
+
+      for (let row = 0; row < windowRows; row++) {
+        for (let col = 0; col < windowCols; col++) {
+          windows.push({
+            x: x + col * 15 + 5,
+            y: y + row * 20 + 5,
+            lit: Math.random() > 0.3,
+          });
+        }
+      }
+
+      buildings.push({
+        x, y, width: bWidth, height: bHeight, color, windows,
+        hasAntenna: Math.random() > 0.7 // Pre-determine antenna
+      });
+    }
+
+    // Animation variables
+    let animationFrame: number;
+    let time = 0;
+
+    // Stars - reduced count
+    const stars: Array<{ x: number; y: number; size: number; phaseOffset: number }> = [];
+    for (let i = 0; i < 60; i++) { // Reduced from 100
+      stars.push({
+        x: Math.random() * width,
+        y: Math.random() * height * 0.6,
+        size: Math.random() * 2,
+        phaseOffset: Math.random() * Math.PI * 2,
+      });
+    }
+
+    // Grid
+    const gridSpacing = 50;
+
+    // If reduced motion, draw static scene once
+    if (prefersReducedMotion) {
+      ctx.fillStyle = bgGradient;
+      ctx.fillRect(0, 0, width, height);
+
+      // Static stars
+      stars.forEach((star) => {
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
+        ctx.fill();
+      });
+
+      // Static buildings
+      buildings.forEach((building) => {
+        ctx.fillStyle = 'rgba(10, 10, 10, 0.8)';
+        ctx.fillRect(building.x, building.y, building.width, building.height);
+        ctx.strokeStyle = building.color;
+        ctx.lineWidth = 2;
+        ctx.strokeRect(building.x, building.y, building.width, building.height);
+
+        building.windows.forEach((win) => {
+          if (win.lit) {
+            ctx.fillStyle = 'rgba(0, 255, 240, 0.6)';
+            ctx.fillRect(win.x, win.y, 8, 8);
+          }
+        });
+      });
+      return;
+    }
+
+    // Animation loop
+    const animate = () => {
+      time += 0.01;
+
+      // Clear with cached gradient
+      ctx.fillStyle = bgGradient;
+      ctx.fillRect(0, 0, width, height);
+
+      // Draw stars with pre-calculated phase
+      for (let i = 0; i < stars.length; i++) {
+        const star = stars[i];
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, ${0.5 + Math.sin(time * 2 + star.phaseOffset) * 0.5})`;
+        ctx.fill();
+      }
+
+      // Draw perspective grid
+      ctx.lineWidth = 1;
+      const horizon = height * 0.6;
+
+      // Horizontal lines
+      for (let i = 0; i < 10; i++) {
+        const y = horizon + i * 30;
+        const perspective = (y - horizon) / (height - horizon);
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.strokeStyle = `rgba(0, 255, 240, ${0.05 + perspective * 0.1})`;
+        ctx.stroke();
+      }
+
+      // Vertical lines
+      const vanishingPointX = width / 2;
+      for (let i = -10; i <= 10; i++) {
+        const x = width / 2 + i * gridSpacing;
+        ctx.beginPath();
+        ctx.moveTo(x, height);
+        ctx.lineTo(vanishingPointX + (x - vanishingPointX) * 0.3, horizon);
+        ctx.strokeStyle = 'rgba(0, 255, 240, 0.05)';
+        ctx.stroke();
+      }
+
+      // Draw buildings - batch similar operations
+      ctx.fillStyle = 'rgba(10, 10, 10, 0.8)';
+      for (let i = 0; i < buildings.length; i++) {
+        const building = buildings[i];
+        ctx.fillRect(building.x, building.y, building.width, building.height);
+      }
+
+      // Building borders and details
+      for (let i = 0; i < buildings.length; i++) {
+        const building = buildings[i];
+
+        // Neon border
+        ctx.strokeStyle = building.color;
+        ctx.lineWidth = 2;
+        ctx.shadowColor = building.color;
+        ctx.shadowBlur = 10;
+        ctx.strokeRect(building.x, building.y, building.width, building.height);
+        ctx.shadowBlur = 0;
+
+        // Windows - batch by lit state
+        ctx.fillStyle = 'rgba(0, 255, 240, 0.6)';
+        for (let j = 0; j < building.windows.length; j++) {
+          const win = building.windows[j];
+          if (win.lit) {
+            ctx.fillRect(win.x, win.y, 8, 8);
+          }
+        }
+
+        // Antenna (pre-determined)
+        if (building.hasAntenna) {
+          const antennaX = building.x + building.width / 2;
+          const antennaHeight = 20;
+
+          ctx.strokeStyle = building.color;
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+          ctx.moveTo(antennaX, building.y);
+          ctx.lineTo(antennaX, building.y - antennaHeight);
+          ctx.stroke();
+
+          // Blinking light
+          if (Math.sin(time * 5) > 0.5) {
+            ctx.fillStyle = '#FF10F0';
+            ctx.shadowColor = '#FF10F0';
+            ctx.shadowBlur = 10;
+            ctx.beginPath();
+            ctx.arc(antennaX, building.y - antennaHeight, 3, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.shadowBlur = 0;
+          }
+        }
+      }
+
+      // Scanline effect
+      ctx.fillStyle = 'rgba(0, 255, 240, 0.02)';
+      const scanlineY = (time * 100) % height;
+      ctx.fillRect(0, scanlineY, width, 2);
+
+      animationFrame = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      cancelAnimationFrame(animationFrame);
+      window.removeEventListener('resize', setCanvasSize);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="canvas-container"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: -1,
+      }}
+    />
+  );
+}

package/components/animations/CyberGrid.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+export default function CyberGrid() {
+  return (
+    <div
+      className="fixed inset-0 z-0 cyber-grid opacity-30"
+      style={{
+        backgroundSize: '50px 50px',
+        backgroundPosition: 'center center'
+      }}
+    />
+  );
+}

package/components/animations/GlitchText.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+interface GlitchTextProps {
+  text: string;
+  className?: string;
+}
+
+export default function GlitchText({ text, className = '' }: GlitchTextProps) {
+  return (
+    <h1
+      className={`glitch neon-text-pink ${className}`}
+      data-text={text}
+    >
+      {text}
+    </h1>
+  );
+}

package/components/animations/Hero.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import GlitchText from './GlitchText';
+import NeonButton from '../ui/NeonButton';
+import Particles from '../effects/Particles';
+
+export default function Hero() {
+  const [mounted, setMounted] = useState(false);
+  const [showScrollIndicator, setShowScrollIndicator] = useState(true);
+
+  useEffect(() => {
+    setMounted(true);
+
+    // Hide scroll indicator after user scrolls
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        setShowScrollIndicator(false);
+      }
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToSection = (id: string) => {
+    const element = document.getElementById(id);
+    element?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return (
+    <section
+      id="home"
+      className="relative z-10 min-h-screen flex items-center justify-center pt-20"
+    >
+      {/* Particles Background */}
+      {mounted && <Particles />}
+
+      <div className="container mx-auto px-4 text-center">
+        <div className="space-y-8 fade-in">
+          {/* Main Title with Glitch Effect */}
+          <GlitchText
+            text="NEON FLUX"
+            className="text-5xl md:text-7xl lg:text-9xl font-orbitron font-bold"
+          />
+
+          {/* Subtitle */}
+          <h2 className="text-2xl md:text-4xl font-rajdhani text-neon-cyan text-shadow-neon-cyan">
+            Cyberpunk Portfolio Template
+          </h2>
+
+          {/* Description */}
+          <p className="text-lg md:text-xl text-neon-cyan/80 max-w-2xl mx-auto font-space-mono">
+            Showcase your projects with stunning graphics, smooth animations,
+            and cyberpunk aesthetics. Built with Next.js 15 & TypeScript.
+          </p>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-8">
+            <NeonButton
+              variant="primary"
+              onClick={() => scrollToSection('portfolio')}
+            >
+              View Portfolio
+            </NeonButton>
+            <NeonButton
+              variant="secondary"
+              onClick={() => scrollToSection('blog')}
+            >
+              Read Blog
+            </NeonButton>
+          </div>
+
+          {/* Scroll Indicator - hidden after scroll */}
+          {showScrollIndicator && (
+            <div
+              className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce cursor-pointer transition-opacity duration-300"
+              onClick={() => scrollToSection('portfolio')}
+            >
+              <div className="w-6 h-10 border-2 border-neon-cyan rounded-full flex justify-center">
+                <div className="w-1 h-3 bg-neon-cyan rounded-full mt-2 animate-pulse" />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

package/components/effects/Particles.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export default function ParticlesBackground() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(true);
+
+  // Intersection Observer to pause when off-screen
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0 }
+    );
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    // Check for reduced motion preference
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReducedMotion) return;
+
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    let animationFrame: number;
+    let isRunning = true;
+
+    // Set canvas size
+    const setCanvasSize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    setCanvasSize();
+    window.addEventListener('resize', setCanvasSize);
+
+    // Particle system - reduced count for better performance
+    const particles: Array<{
+      x: number;
+      y: number;
+      vx: number;
+      vy: number;
+      color: string;
+      size: number;
+    }> = [];
+
+    const colors = ['#FF10F0', '#00FFF0', '#FFFF00'];
+    const particleCount = 50; // Reduced from 80
+
+    // Initialize particles
+    for (let i = 0; i < particleCount; i++) {
+      particles.push({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        vx: (Math.random() - 0.5) * 0.5,
+        vy: (Math.random() - 0.5) * 0.5,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        size: Math.random() * 2 + 1,
+      });
+    }
+
+    // Mouse position
+    let mouseX = 0;
+    let mouseY = 0;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+
+    // Spatial grid for O(n) neighbor lookup
+    const CELL_SIZE = 150;
+    const getGridKey = (x: number, y: number) =>
+      `${Math.floor(x / CELL_SIZE)},${Math.floor(y / CELL_SIZE)}`;
+
+    // Animation loop
+    const animate = () => {
+      ctx.fillStyle = 'rgba(10, 10, 10, 0.1)';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Build spatial grid
+      const grid: Map<string, number[]> = new Map();
+      particles.forEach((particle, i) => {
+        const key = getGridKey(particle.x, particle.y);
+        if (!grid.has(key)) grid.set(key, []);
+        grid.get(key)!.push(i);
+      });
+
+      particles.forEach((particle, i) => {
+        // Update position
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+
+        // Bounce off edges
+        if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
+        if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;
+
+        // Mouse repulsion
+        const dx = mouseX - particle.x;
+        const dy = mouseY - particle.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        if (distance < 100) {
+          particle.x -= (dx / distance) * 2;
+          particle.y -= (dy / distance) * 2;
+        }
+
+        // Draw particle
+        ctx.beginPath();
+        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+        ctx.fillStyle = particle.color;
+        ctx.fill();
+
+        // Draw connections - only check neighboring cells
+        const cellX = Math.floor(particle.x / CELL_SIZE);
+        const cellY = Math.floor(particle.y / CELL_SIZE);
+
+        for (let ox = -1; ox <= 1; ox++) {
+          for (let oy = -1; oy <= 1; oy++) {
+            const neighborKey = `${cellX + ox},${cellY + oy}`;
+            const neighbors = grid.get(neighborKey);
+            if (!neighbors) continue;
+
+            for (const j of neighbors) {
+              if (i >= j) continue; // Avoid duplicate lines
+
+              const other = particles[j];
+              const dx = particle.x - other.x;
+              const dy = particle.y - other.y;
+              const dist = Math.sqrt(dx * dx + dy * dy);
+
+              if (dist < 150) {
+                ctx.beginPath();
+                ctx.moveTo(particle.x, particle.y);
+                ctx.lineTo(other.x, other.y);
+                ctx.strokeStyle = `rgba(0, 255, 240, ${0.3 * (1 - dist / 150)})`;
+                ctx.lineWidth = 1;
+                ctx.stroke();
+              }
+            }
+          }
+        }
+      });
+
+      if (isRunning) {
+        animationFrame = requestAnimationFrame(animate);
+      }
+    };
+
+    animate();
+
+    return () => {
+      isRunning = false;
+      cancelAnimationFrame(animationFrame);
+      window.removeEventListener('resize', setCanvasSize);
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [isVisible]);
+
+  return (
+    <div ref={containerRef} className="absolute inset-0 z-0">
+      <canvas
+        ref={canvasRef}
+        className="w-full h-full"
+        style={{
+          pointerEvents: 'none',
+        }}
+      />
+    </div>
+  );
+}

package/components/effects/ScanLines.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+export default function ScanLines() {
+  return <div className="scan-lines" />;
+}

package/components/hooks/useAudioReactive.ts

@@ -0,0 +1,68 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+
+interface AudioReactiveData {
+  volume: number;
+  frequency: number;
+}
+
+export function useAudioReactive(enabled: boolean = false) {
+  const [audioData, setAudioData] = useState<AudioReactiveData>({
+    volume: 0,
+    frequency: 0,
+  });
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const dataArrayRef = useRef<Uint8Array<ArrayBuffer> | null>(null);
+
+  useEffect(() => {
+    if (!enabled || typeof window === 'undefined') return;
+
+    const setupAudio = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const audioContext = new AudioContext();
+        const source = audioContext.createMediaStreamSource(stream);
+        const analyser = audioContext.createAnalyser();
+
+        analyser.fftSize = 256;
+        source.connect(analyser);
+
+        audioContextRef.current = audioContext;
+        analyserRef.current = analyser;
+        dataArrayRef.current = new Uint8Array(analyser.frequencyBinCount);
+
+        const updateAudioData = () => {
+          if (!analyserRef.current || !dataArrayRef.current) return;
+
+          analyserRef.current.getByteFrequencyData(dataArrayRef.current);
+
+          const volume =
+            dataArrayRef.current.reduce((sum, value) => sum + value, 0) /
+            dataArrayRef.current.length;
+
+          const frequency = dataArrayRef.current[0];
+
+          setAudioData({ volume: volume / 255, frequency: frequency / 255 });
+
+          requestAnimationFrame(updateAudioData);
+        };
+
+        updateAudioData();
+      } catch (error) {
+        console.error('Error setting up audio:', error);
+      }
+    };
+
+    setupAudio();
+
+    return () => {
+      if (audioContextRef.current) {
+        audioContextRef.current.close();
+      }
+    };
+  }, [enabled]);
+
+  return audioData;
+}

package/components/hooks/useGlitch.ts

@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface UseGlitchOptions {
+  interval?: number;
+  duration?: number;
+}
+
+export function useGlitch(options: UseGlitchOptions = {}) {
+  const { interval = 3000, duration = 300 } = options;
+  const [isGlitching, setIsGlitching] = useState(false);
+
+  useEffect(() => {
+    const glitchInterval = setInterval(() => {
+      setIsGlitching(true);
+      setTimeout(() => {
+        setIsGlitching(false);
+      }, duration);
+    }, interval);
+
+    return () => clearInterval(glitchInterval);
+  }, [interval, duration]);
+
+  return isGlitching;
+}

package/components/hooks/useNeonGlow.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+
+export function useNeonGlow() {
+  const [isGlowing, setIsGlowing] = useState(false);
+
+  const startGlow = useCallback(() => {
+    setIsGlowing(true);
+  }, []);
+
+  const stopGlow = useCallback(() => {
+    setIsGlowing(false);
+  }, []);
+
+  const toggleGlow = useCallback(() => {
+    setIsGlowing((prev) => !prev);
+  }, []);
+
+  const glowClasses = isGlowing
+    ? 'shadow-neon-cyan brightness-125 scale-105'
+    : '';
+
+  return {
+    isGlowing,
+    startGlow,
+    stopGlow,
+    toggleGlow,
+    glowClasses,
+  };
+}