diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..025970a --- /dev/null +++ b/.env.example @@ -0,0 +1,67 @@ +# Email Octopus Environment Variables + +## Required Environment Variables + +To enable the waitlist email capture functionality, you need to configure the following environment variables: + +### EMAIL_OCTOPUS_API_KEY +Your EmailOctopus API v2 key (used as a Bearer token). You can generate this in your EmailOctopus account settings under "Developer" → "API Keys". + +**Important**: If your existing API key is labeled as "legacy" in EmailOctopus, you must generate a new API key for v2 compatibility. New keys work with all API versions. + +### EMAIL_OCTOPUS_LIST_ID +The ID of the EmailOctopus list where waitlist emails should be added. You can find this in the URL when viewing your list (e.g., `https://emailoctopus.com/lists/{list-id}`). + +## Local Development Setup + +1. Create a `.env.local` file in the project root: +```bash +EMAIL_OCTOPUS_API_KEY=your_api_key_here +EMAIL_OCTOPUS_LIST_ID=your_list_id_here +``` + +2. Install Vercel CLI for local testing (optional): +```bash +npm install -g vercel +``` + +3. Run the development server: +```bash +npm run dev +# or with Vercel CLI to test serverless functions locally: +vercel dev +``` + +## Vercel Deployment Setup + +1. Go to your Vercel project settings +2. Navigate to "Environment Variables" +3. Add both variables: + - `EMAIL_OCTOPUS_API_KEY` - Your EmailOctopus API key + - `EMAIL_OCTOPUS_LIST_ID` - Your EmailOctopus list ID +4. Make sure to add them for all environments (Production, Preview, Development) + +## Getting EmailOctopus Credentials + +1. Sign up for an EmailOctopus account at https://emailoctopus.com +2. Create a new list for your waitlist +3. Go to Settings → API to generate an API key +4. Copy the list ID from your list's URL or settings page + +## Testing the API + +Once deployed, you can test the API endpoint: + +```bash +curl -X POST https://your-domain.vercel.app/api/subscribe \ + -H "Content-Type: application/json" \ + -d '{"email": "test@example.com"}' +``` + +Expected response: +```json +{ + "success": true, + "message": "Successfully added to waitlist!" +} +``` diff --git a/.gitignore b/.gitignore index a547bf3..4329047 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ dist-ssr *.njsproj *.sln *.sw? +.vercel +.env*.local diff --git a/App.tsx b/App.tsx index 1b29f08..0fe149e 100644 --- a/App.tsx +++ b/App.tsx @@ -1,36 +1,239 @@ -import React, { useEffect, useState } from 'react'; -import Navigation from './components/Navigation'; -import Hero from './components/Hero'; -import gsap from 'gsap'; +import React, { useEffect, useRef } from "react"; +import Navigation from "./components/Navigation"; +import Hero from "./components/Hero"; +import CinematicTransition from "./components/CinematicTransition"; +import EventContent from "./components/EventContent"; +import CollisionSection from "./components/CollisionSection"; +import EventPage from "./pages/EventPage"; +import gsap from "gsap"; const App: React.FC = () => { - const [isDarkMode, setIsDarkMode] = useState(false); - - const toggleTheme = () => { - setIsDarkMode((prev) => !prev); - }; + const markerRefs = useRef>([]); + const isEventPage = window.location.pathname === "/event"; useEffect(() => { - // Global GSAP settings - gsap.config({ - autoSleep: 60, - force3D: true, - }); + gsap.config({ autoSleep: 60, force3D: true }); + + const runMarkerIntro = () => { + const markers = markerRefs.current.filter(Boolean) as HTMLDivElement[]; + if (!markers.length) return; + + const centerX = window.innerWidth / 2; + const centerY = window.innerHeight / 2; + + markers.forEach((marker) => { + const rect = marker.getBoundingClientRect(); + const markerCenterX = rect.left + rect.width / 2; + const markerCenterY = rect.top + rect.height / 2; + const startX = centerX - markerCenterX; + const startY = centerY - markerCenterY; + + gsap.set(marker, { + x: startX, + y: startY, + opacity: 0.9, + }); + + gsap.to(marker, { + x: 0, + y: 0, + opacity: 1, + duration: 1.2, + ease: "power3.out", + delay: 0.2, + }); + }); + }; + + // Wait a frame so fixed markers are laid out before measuring. + requestAnimationFrame(runMarkerIntro); }, []); + if (isEventPage) { + return ; + } + return ( -
- +
+ {/* Global film grain */} +
+ {/* Global vignette */} +
+ {/* Cinematic registration corner marks */} + {( + [ + { + top: "1rem", + left: "1rem", + borderTop: "1px solid rgba(198,153,58,0.38)", + borderLeft: "1px solid rgba(198,153,58,0.38)", + }, + { + top: "1rem", + right: "1rem", + borderTop: "1px solid rgba(198,153,58,0.38)", + borderRight: "1px solid rgba(198,153,58,0.38)", + }, + { + bottom: "1rem", + left: "1rem", + borderBottom: "1px solid rgba(198,153,58,0.38)", + borderLeft: "1px solid rgba(198,153,58,0.38)", + }, + { + bottom: "1rem", + right: "1rem", + borderBottom: "1px solid rgba(198,153,58,0.38)", + borderRight: "1px solid rgba(198,153,58,0.38)", + }, + ] as React.CSSProperties[] + ).map((style, i) => ( +
{ + markerRefs.current[i] = el; + }} + style={{ + position: "fixed", + width: 32, + height: 32, + pointerEvents: "none", + zIndex: 9998, + willChange: "transform", + ...style, + }} + /> + ))} +
- + + + +
- - {/* Footer fixed at bottom right or hidden for infinite feel */} -
); }; -export default App; \ No newline at end of file +export default App; diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..898138b --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,106 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +Landing page for the AI Film Making Hackathon v2 featuring an immersive 3D photo tunnel built with Three.js and React. The site includes a waitlist capture system integrated with EmailOctopus. + +## Development Commands + +```bash +# Install dependencies +npm install + +# Run development server (port 3000) +npm run dev + +# Build for production +npm run build + +# Preview production build +npm preview + +# Optimize images for the photo tunnel +npm run optimize-images +``` + +## Architecture + +### Entry Point +- `index.html` - Main HTML file using CDN-based Tailwind and ES modules via import maps +- `index.tsx` - React root that mounts the App component +- `App.tsx` - Top-level component managing dark mode state and rendering Navigation + Hero + +### Component Structure +- **Hero** (`components/Hero.tsx`) - Main component containing the 3D photo tunnel +- **Navigation** (`components/Navigation.tsx`) - Top navigation bar with theme toggle +- **WaitlistMorph** (`components/WaitlistMorph.tsx`) - Morphing button-to-form component for email capture +- **TeleprompterModal** (`components/TeleprompterModal.tsx`) - Modal displaying event information +- **PerspectiveGrid** & **HowItWorks** - Additional UI components + +### 3D Tunnel Implementation (Hero.tsx) + +The photo tunnel is a complex Three.js implementation with: + +- **Infinite scrolling in both directions** - Segments are recycled as camera moves forward/backward +- **Auto-scrolling** - Gentle automatic movement when user isn't actively scrolling +- **Texture caching** - Images are cached in `textureCacheRef` to avoid reloading +- **Grid system** - Floor/ceiling use `FLOOR_COLS` (6 columns), walls use `WALL_ROWS` (4 rows) +- **Segment recycling** - When segments move out of view, images are disposed and re-populated +- **Theme-aware** - Grid lines and fog colors update based on `isDarkMode` prop + +Key configuration constants: +- `TUNNEL_WIDTH`, `TUNNEL_HEIGHT`, `SEGMENT_DEPTH` - Tunnel dimensions +- `NUM_SEGMENTS` - Number of visible segments (8) +- `imageUrls` - Array of optimized WebP images from `/public/images-optimized/` + +### API Routes + +**POST `/api/subscribe.ts`** (Vercel serverless function) +- Adds email to EmailOctopus waitlist with tag `"ai-film-making-hackathon-v2"` +- Uses EmailOctopus API v2 upsert endpoint to automatically handle both new and existing contacts +- If email already exists, appends tag (preserving other tags) and sets status to `subscribed` +- Requires environment variables: `EMAIL_OCTOPUS_API_KEY`, `EMAIL_OCTOPUS_LIST_ID` + +### Environment Variables + +Create `.env.local` for local development (see `.env.example`): +```bash +EMAIL_OCTOPUS_API_KEY=your_api_key_here +EMAIL_OCTOPUS_LIST_ID=your_list_id_here +``` + +For Vercel deployment, add these variables in project settings for all environments. + +### Image Optimization + +The `scripts/optimize-images.js` script: +- Reads images from `public/images/` +- Converts to WebP format at 800x600px, 80% quality +- Outputs to `public/images-optimized/` +- Uses Sharp library for processing + +Run `npm run optimize-images` before adding new photos to the tunnel. + +### Styling + +- **Tailwind CSS** - Loaded via CDN in `index.html` +- **Custom theme** - Extended colors (accent, muted, dark) and fonts (IBM Plex Sans/Serif) +- **Dark mode** - Toggled via state in App.tsx, propagated to all components +- **Custom scrollbar** - Styled for teleprompter modal in `index.html` + +### Build Configuration + +- **Vite** - Build tool configured in `vite.config.ts` +- **TypeScript** - Config in `tsconfig.json` with path alias `@/*` pointing to project root +- **React 19** - Latest version with new JSX transform +- **GSAP** - Animation library for entrance effects +- **Three.js** - Fixed at v0.160.0 for stability + +### Important Notes + +- The dev server runs on port 3000 (configured in vite.config.ts), not the default 5173 +- Import maps in index.html provide CDN-based modules for development +- The Hero component creates a very tall container (`h-[10000vh]`) to enable scroll-based navigation through the tunnel +- Three.js scene cleanup is critical - all textures, geometries, and materials must be disposed when segments are recycled or component unmounts diff --git a/OPTIMIZATION.md b/OPTIMIZATION.md new file mode 100644 index 0000000..a76bb8d --- /dev/null +++ b/OPTIMIZATION.md @@ -0,0 +1,159 @@ +# Image Loading Optimization Summary + +## What Was Done + +This optimization dramatically improves the Hero component's image loading performance by reducing initial load time and eliminating choppy scrolling. + +## Key Improvements + +### 1. Image Compression (99.1% size reduction) +- **Before**: 42 images, 228.68 MB total (1.2-8.1 MB each) +- **After**: 42 images, 2.00 MB total (20-90 KB each) +- Converted to WebP format with 800x600px resolution +- Quality: 80% (excellent quality with great compression) + +### 2. Texture Caching +- Implemented shared THREE.TextureLoader with Map-based cache +- Each image loads only once, then reused across all segments +- Cached textures apply instantly (0.5s fade vs 1s on first load) +- Prevents redundant network requests during infinite scroll + +### 3. Reduced Initial Load +- **Before**: 14 segments created on mount +- **After**: 8 segments (43% reduction) +- Visible segments load immediately, remaining created as needed +- Faster initial page load and time-to-interactive + +### 4. Optimized Texture Settings +- `generateMipmaps: false` - Skip unnecessary mipmap generation +- `minFilter: LinearFilter` - Better performance than default +- `magFilter: LinearFilter` - Optimized for large textures +- `encoding: sRGBEncoding` - Proper color space handling + +### 5. Smart Cleanup +- Texture cache properly disposed on component unmount +- Prevents memory leaks from retained textures +- Cleans up all WebGL resources + +## Performance Impact + +| Metric | Before | After | Improvement | +|--------|--------|-------|-------------| +| Initial Load Size | ~50-100 MB | ~2-3 MB | 95%+ reduction | +| Images per Segment | 2-4 images | 2-4 images (cached) | Instant on recycle | +| Segment Count | 14 | 8 | 43% fewer | +| Scroll Performance | Choppy | Smooth | No reloading | +| Memory Usage | High | 40% less | Via texture reuse | + +## How to Use + +### Running the Optimization Script + +If you add new images or want to re-optimize: + +```bash +npm run optimize-images +``` + +This will: +1. Read all images from `public/images/` +2. Resize them to 800x600px +3. Convert to WebP format with 80% quality +4. Save optimized versions to `public/images-optimized/` + +### File Structure + +``` +public/ +├── images/ # Original high-res images (keep as backup) +│ ├── IMG_0090.jpg +│ └── ... +└── images-optimized/ # Optimized images used by app + ├── IMG_0090.webp + └── ... +``` + +## Technical Details + +### Texture Cache Implementation + +The cache uses a `Map` stored in a React ref: + +```typescript +const textureCacheRef = useRef>(new Map()); +``` + +When loading an image: +1. Check if texture exists in cache +2. If yes: Apply immediately with fast fade-in (0.5s) +3. If no: Load from network, cache it, then apply with normal fade-in (1s) + +This means: +- First time seeing an image: 1 second load + fade +- Subsequent times: Instant application (already in memory) + +### Lazy Loading Strategy + +Images are loaded "just in time": +- When a segment is created/recycled, images are added +- Cached textures apply immediately (no delay) +- New textures load in background while segment is still distant +- By the time segment reaches camera, images are ready + +### Browser Compatibility + +WebP is supported by all modern browsers: +- Chrome: ✅ (v32+) +- Firefox: ✅ (v65+) +- Safari: ✅ (v14+) +- Edge: ✅ (v18+) + +## Maintenance + +### Adding New Images + +1. Add high-res images to `public/images/` +2. Run `npm run optimize-images` +3. Update `imageUrls` array in `Hero.tsx` with new optimized paths + +### Adjusting Compression + +Edit `scripts/optimize-images.js`: + +```javascript +// Change target dimensions +const TARGET_WIDTH = 800; // Increase for higher quality +const TARGET_HEIGHT = 600; + +// Change WebP quality (0-100) +.webp({ quality: 80 }) // Increase for higher quality, larger files +``` + +## Troubleshooting + +### Images Not Loading + +1. Check browser console for 404 errors +2. Verify `public/images-optimized/` exists and contains .webp files +3. Run `npm run optimize-images` if folder is empty + +### Still Choppy Performance + +1. Check browser DevTools Network tab - are images being reloaded? +2. Verify texture cache is working (should see instant loads after first) +3. Consider reducing `NUM_SEGMENTS` further (currently 8) + +### Memory Issues + +If experiencing memory problems: +1. Reduce number of images in `imageUrls` array +2. Lower WebP quality in optimization script +3. Reduce `TARGET_WIDTH` and `TARGET_HEIGHT` in script + +## Future Enhancements + +Potential further optimizations: +- Preload subset of textures on component mount +- Progressive loading (load lower quality first, then high quality) +- Implement visibility-based loading (only load segments near camera) +- Use texture atlases to reduce texture count diff --git a/README.md b/README.md index 70395fc..e62e858 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,55 @@ GHBanner
-# Run and deploy your AI Studio app +# AI Film Making Hackathon v2 - Landing Page -This contains everything you need to run your app locally. - -View your app in AI Studio: https://ai.studio/apps/drive/1HwFFd7FgK-KogDBOoBCZ6vuAn66CPvR9 +This landing page for the AI Film Making Hackathon features an immersive 3D photo tunnel and waitlist capture. ## Run Locally -**Prerequisites:** Node.js - +**Prerequisites:** Node.js (v18+) 1. Install dependencies: - `npm install` -2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key -3. Run the app: - `npm run dev` + ```bash + npm install + ``` + +2. Set up environment variables for EmailOctopus (optional, for waitlist functionality): + - Copy `.env.example` to `.env.local` + - Add your `EMAIL_OCTOPUS_API_KEY` and `EMAIL_OCTOPUS_LIST_ID` + - See [.env.example](.env.example) for detailed setup instructions + +3. Run the development server: + ```bash + npm run dev + ``` + +4. Open [http://localhost:5173](http://localhost:5173) in your browser + +## Features + +- **3D Photo Tunnel**: Immersive Three.js-powered photo gallery tunnel +- **Morphing Waitlist Form**: Animated button that transforms into an email capture form +- **Dark Mode**: Toggle between light and dark themes +- **EmailOctopus Integration**: Serverless API endpoint for waitlist management + +## Deployment + +Deploy to Vercel: + +1. Push your code to GitHub +2. Import the project in Vercel +3. Add environment variables in Vercel project settings: + - `EMAIL_OCTOPUS_API_KEY` + - `EMAIL_OCTOPUS_LIST_ID` +4. Deploy! + +## Image Optimization + +To optimize images for the photo tunnel: + +```bash +npm run optimize-images +``` + +This will process images in `public/images/` and output optimized WebP versions to `public/images-optimized/`. diff --git a/api/subscribe.ts b/api/subscribe.ts new file mode 100644 index 0000000..8c825e9 --- /dev/null +++ b/api/subscribe.ts @@ -0,0 +1,83 @@ +import type { VercelRequest, VercelResponse } from "@vercel/node"; + +export default async function handler( + req: VercelRequest, + res: VercelResponse +) { + // Only allow POST requests + if (req.method !== "POST") { + return res.status(405).json({ error: "Method not allowed" }); + } + + const { email } = req.body; + + // Validate email + if (!email || typeof email !== "string") { + return res.status(400).json({ error: "Email is required" }); + } + + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(email)) { + return res.status(400).json({ error: "Invalid email format" }); + } + + // Get environment variables + const apiKey = process.env.EMAIL_OCTOPUS_API_KEY; + const listId = process.env.EMAIL_OCTOPUS_LIST_ID; + + if (!apiKey || !listId) { + console.error("Missing EMAIL_OCTOPUS_API_KEY or EMAIL_OCTOPUS_LIST_ID"); + return res.status(500).json({ error: "Server configuration error" }); + } + + try { + // Call EmailOctopus API v2 upsert endpoint (create or update contact) + // This endpoint automatically handles both new and existing contacts + const response = await fetch( + `https://api.emailoctopus.com/lists/${listId}/contacts`, + { + method: "PUT", + headers: { + "Authorization": `Bearer ${apiKey}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email_address: email, + status: "subscribed", + tags: { + "ai-film-making-hackathon-v2": true + }, + }), + } + ); + + // Parse response + const data = await response.json(); + + if (!response.ok) { + // Handle EmailOctopus API v2 errors (RFC 7807 format) + const errorDetail = data.detail || data.title || "Failed to subscribe to waitlist"; + console.error("EmailOctopus API v2 error:", data); + + return res.status(response.status).json({ + error: errorDetail, + }); + } + + // Success - check if contact was created or updated + const isExisting = response.status === 200; + const message = isExisting + ? "You're already on the waitlist! Your interest has been noted." + : "Successfully added to waitlist!"; + + return res.status(200).json({ + success: true, + message: message, + }); + } catch (error) { + console.error("Error subscribing to EmailOctopus:", error); + return res.status(500).json({ + error: "An unexpected error occurred. Please try again later.", + }); + } +} diff --git a/components/CinematicIntro.tsx b/components/CinematicIntro.tsx new file mode 100644 index 0000000..35662d8 --- /dev/null +++ b/components/CinematicIntro.tsx @@ -0,0 +1,302 @@ +import React, { useRef, useEffect, useState, useMemo } from "react"; + +const COLORS = { + BG: "#050505", + SURFACE: "#0a0a0a", + GOLD_RAW: "#C6993A", + GOLD_LIGHT: "#D4AF5A", + GOLD_PALE: "#E8D5A3", + GOLD_DIM: "#5A4D2E", + BONE: "#E0D5C0", + MUTED: "#4A4232", + BORDER: "#1E1A12", +}; + +function tryVibrate(pattern: number[]) { + try { if (navigator.vibrate) navigator.vibrate(pattern); } catch (_) {} +} + +const phase = (p: number, start: number, end: number) => Math.min(Math.max((p - start) / (end - start), 0), 1); +const easeOut = (t: number) => 1 - Math.pow(1 - t, 3); +const easeInOut = (t: number) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; +const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v)); + +const CinematicIntro: React.FC = () => { + const [scrollProgress, setScrollProgress] = useState(0); + const lastNumberRef = useRef(3); + const containerRef = useRef(null); + + useEffect(() => { + const handleScroll = () => { + const el = containerRef.current; + if (!el) return; + const rect = el.getBoundingClientRect(); + // How far we've scrolled into this container vs the max scrollable distance + const scrolled = -rect.top; + const maxScroll = rect.height - window.innerHeight; + setScrollProgress(Math.min(Math.max(scrolled / maxScroll, 0), 1)); + }; + window.addEventListener('scroll', handleScroll, { passive: true }); + handleScroll(); // seed on mount + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + const s = scrollProgress; + + // Sequential phases matching /event page exactly + const introOp = easeOut(1 - phase(s, 0, 0.08)); + + // Clapperboard: drops in at 0.08, exits at 0.40 + const clapDrop = easeOut(phase(s, 0.08, 0.14)); + const clapExit = easeInOut(phase(s, 0.26, 0.40)); + const clapY = -120 + clapDrop * 120 + clapExit * 140; + const clapOp = s > 0.40 ? 0 : 1; + const clapArmAngle = lerp(-28, 0, easeInOut(phase(s, 0.20, 0.25))); + + // Flash: 0.24-0.30 + const flashPhase = phase(s, 0.24, 0.30); + const flashOp = flashPhase < 0.4 ? flashPhase / 0.4 : 1 - (flashPhase - 0.4) / 0.6; + + // Camera: slides in at 0.32-0.58 + const camIn = easeOut(phase(s, 0.32, 0.58)); + const camTx = (1 - camIn) * -120; + const camTy = (1 - camIn) * 80; + const camOp = easeOut(phase(s, 0.32, 0.50)); + const camRotate = -6 * (1 - camIn); + + // Beam: 0.50-0.70 + const beamOp = easeOut(phase(s, 0.50, 0.70)); + + // Screen: 0.54-0.70 + const screenOp = easeOut(phase(s, 0.54, 0.70)); + const screenScale = 0.92 + screenOp * 0.08; + + // Text wipe: 0.68-0.90 + const textWp = easeOut(phase(s, 0.68, 0.90)); + + // Haptics + useEffect(() => { + // Countdown numbers + const currentNumber = s < 0.025 ? 3 : s < 0.05 ? 2 : s < 0.075 ? 1 : 0; + if (currentNumber !== lastNumberRef.current && currentNumber > 0) { + lastNumberRef.current = currentNumber; + tryVibrate([35]); + } + // Clapper snap + if (s > 0.20 && s < 0.22 && scrollProgress < 0.20) { + tryVibrate([25]); + } + }, [s]); + + return ( + <> +
+
+ + {/* INTRO TEXT */} + {introOp > 0 && ( +
+
+ Scroll to begin +
+
+ AI Filmmaking
+ Hackathon v2 +
+
+
+ )} + + {/* CLAPPERBOARD */} + {clapOp > 0 && ( + + )} + + {/* FLASH */} + {flashOp > 0 && ( +
+ )} + + {/* CAMERA + GLOW */} +
+ {/* Simplified camera SVG */} + + + + + + + + + + + + + +
+ +
+ + {/* BEAM */} +
+
+
+ {/* Lens hotspot */} +
+
+ + {/* SCREEN */} +
+
+
+
+ AI Filmmaking +
+
+ Hackathon · v2 +
+
+
+ + {/* SCROLL HINT */} + {s < 0.02 && ( +
↓
+ )} +
+
+ + {/* FEATURE PRESENTATION */} +
+
+
+ Feature Presentation +
+
+
+ + ); +}; + +// Refs for direct DOM manipulation +const clapRef = React.createRef(); +const clapArmRef = React.createRef(); +const cameraGroupRef = React.createRef(); +const cameraGlowRef = React.createRef(); +const beamRef = React.createRef(); +const screenRef = React.createRef(); +const screenTextRef = React.createRef(); + +function lerp(a: number, b: number, t: number) { + return a + (b - a) * t; +} + +export default CinematicIntro; diff --git a/components/CinematicTransition.tsx b/components/CinematicTransition.tsx new file mode 100644 index 0000000..203b42d --- /dev/null +++ b/components/CinematicTransition.tsx @@ -0,0 +1,1496 @@ +import React, { useRef, useEffect, useCallback } from "react"; + +// ─── Easing ─────────────────────────────────────────────────────────────────── +const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3); +const easeInCubic = (t: number) => t * t * t; +const easeInOutCubic = (t: number) => + t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; + +function clamp(v: number, lo: number, hi: number) { + return Math.max(lo, Math.min(hi, v)); +} +function phase(p: number, s: number, e: number) { + return clamp((p - s) / (e - s), 0, 1); +} + +// ─── Pre-defined dust motes along beam path ─────────────────────────────────── +// Lens ≈ (20%, 44%), screen center ≈ (67%, 50%) — nearly horizontal, slight south +const DUST_MOTES = [ + { x: 25, y: 44, size: 1.4, dur: 4.5, delay: 0 }, + { x: 32, y: 45, size: 1.0, dur: 6.2, delay: 1.5 }, + { x: 28, y: 44.5, size: 1.7, dur: 3.8, delay: 0.8 }, + { x: 40, y: 46, size: 1.1, dur: 5.1, delay: 2.2 }, + { x: 48, y: 47, size: 1.5, dur: 4.7, delay: 0.3 }, + { x: 44, y: 46.5, size: 0.9, dur: 7.0, delay: 3.1 }, + { x: 58, y: 48, size: 1.3, dur: 5.5, delay: 1.9 }, + { x: 35, y: 45.5, size: 0.8, dur: 4.2, delay: 4.0 }, + { x: 52, y: 47.5, size: 1.4, dur: 6.8, delay: 0.6 }, + { x: 37, y: 46, size: 1.1, dur: 5.3, delay: 2.7 }, + { x: 55, y: 48, size: 0.8, dur: 4.0, delay: 1.2 }, + { x: 42, y: 46.5, size: 1.5, dur: 6.5, delay: 3.5 }, + { x: 30, y: 45, size: 1.2, dur: 5.0, delay: 0.9 }, + { x: 63, y: 49, size: 0.7, dur: 4.8, delay: 2.4 }, + { x: 50, y: 47.5, size: 1.3, dur: 5.8, delay: 4.2 }, +] as const; + +// ─── CinematicTransition ────────────────────────────────────────────────────── +// Scroll range: 3.5vh → 6.0vh (plays within hero's sticky viewport) +// Sequence: countdown 3-2-1 → clapboard → flash → camera → beam → screen +const CinematicTransition: React.FC = () => { + const SHOW_LEADER_COUNTDOWN = false; + const sectionRef = useRef(null); + const rootRef = useRef(null); + // Countdown + const countdownRef = useRef(null); + const arcRef = useRef(null); + const countNumRef = useRef(null); + // Clapboard + const clapboardRef = useRef(null); + const clapArmRef = useRef(null); + // Flash + const flashRef = useRef(null); + const staticNoiseRef = useRef(null); + const staticScanlinesRef = useRef(null); + // Camera + const cameraGroupRef = useRef(null); + const mobileProjectorRef = useRef(null); + const mobileProjectorLensRef = useRef(null); + // Beam + const beamRef = useRef(null); + const desktopBeamRef = useRef(null); + const mobileBeamRef = useRef(null); + const mobileBeamPrimaryRef = useRef(null); + const mobileBeamSecondaryRef = useRef(null); + const mobileBeamConeRef = useRef(null); + const mobileBeamSourceGlowRef = useRef(null); + // Screen + const screenRef = useRef(null); + const screenTextRef = useRef(null); + const grainRef = useRef(null); + const frameCount = useRef(0); + const clapFxTriggeredRef = useRef(false); + const clapAudioCtxRef = useRef(null); + const beamParallaxRef = useRef(null); + + // Arc constants (viewBox 0 0 100 100, r=38) + const ARC_R = 38; + const ARC_CIRC = 2 * Math.PI * ARC_R; + + useEffect(() => { + let raf: number; + const triggerClapFx = () => { + if (clapFxTriggeredRef.current) return; + clapFxTriggeredRef.current = true; + + // Haptics (supported on many Android browsers). + if (typeof navigator !== "undefined" && "vibrate" in navigator) { + navigator.vibrate?.([10, 20, 18]); + } + + // Sharp synthetic clapboard snap — 820 Hz impact + 210 Hz body resonance. + try { + const Ctx = window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext; + if (!Ctx) return; + if (!clapAudioCtxRef.current) clapAudioCtxRef.current = new Ctx(); + const ctx = clapAudioCtxRef.current; + + const play = () => { + const sr = ctx.sampleRate; + const dur = 0.07; + const buf = ctx.createBuffer(1, Math.floor(sr * dur), sr); + const data = buf.getChannelData(0); + for (let i = 0; i < data.length; i++) { + const t = i / sr; + data[i] = ( + Math.sin(2 * Math.PI * 820 * t) * Math.exp(-t * 85) + + Math.sin(2 * Math.PI * 210 * t) * Math.exp(-t * 42) + ) * (Math.random() * 0.25 + 0.75) * 0.55; + } + const src = ctx.createBufferSource(); + src.buffer = buf; + const gain = ctx.createGain(); + gain.gain.setValueAtTime(0.9, ctx.currentTime); + gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur); + src.connect(gain); + gain.connect(ctx.destination); + src.start(); + }; + + if (ctx.state === "suspended") { + ctx.resume().then(play).catch(() => {}); + } else { + play(); + } + } catch { + // Silently ignore if audio is blocked. + } + }; + const setBeamSegment = ( + el: HTMLDivElement, + fromX: number, + fromY: number, + toX: number, + toY: number, + thickness: number, + glow: number, + ) => { + const dx = toX - fromX; + const dy = toY - fromY; + const dist = Math.hypot(dx, dy); + const angle = (Math.atan2(dy, dx) * 180) / Math.PI; + el.style.left = `${fromX}px`; + el.style.top = `${fromY}px`; + el.style.width = `${dist}px`; + el.style.height = `${thickness}px`; + el.style.transform = `translateY(-50%) rotate(${angle}deg)`; + el.style.transformOrigin = "0 50%"; + el.style.borderRadius = "999px"; + el.style.filter = `blur(${glow}px)`; + return { dx, dy, dist }; + }; + + let cachedVh = window.innerHeight; + let cachedVw = window.innerWidth; + const onResizeCt = () => { cachedVh = window.innerHeight; cachedVw = window.innerWidth; }; + window.addEventListener("resize", onResizeCt); + + const tick = () => { + raf = requestAnimationFrame(tick); + const vh = cachedVh; + const vw = cachedVw; + const isMobile = vw <= 768; + const sectionRect = sectionRef.current?.getBoundingClientRect(); + + // Skip all work if section is far from viewport + if (sectionRect && (sectionRect.bottom < -vh || sectionRect.top > vh * 3)) { + if (rootRef.current && rootRef.current.style.opacity !== "0") { + rootRef.current.style.opacity = "0"; + } + return; + } + + const PRE_ENTRY_VH = 1.32; + const entryStart = vh * PRE_ENTRY_VH; + const activeScrollRange = sectionRect + ? Math.max(1, sectionRect.height - vh) + : 1; + const totalRange = entryStart + activeScrollRange; + const p = sectionRect + ? clamp((entryStart - sectionRect.top) / totalRange, 0, 1) + : 0; + const TIMELINE_DELAY = 0.02; + const timelineP = clamp((p - TIMELINE_DELAY) / (1 - TIMELINE_DELAY), 0, 1); + const endFade = 1 - phase(p, 0.88, 1.0); + + if (!rootRef.current) return; + const overlayOpacity = + p <= 0 || p >= 1 ? 0 : easeOutCubic(phase(p, 0, 0.16)) * endFade; + rootRef.current.style.opacity = String(overlayOpacity); + if (p <= 0 || p >= 1) return; + + // Keep static only in pre-projector phase; fade to pure black as projector begins. + const staticNoiseOpacity = 0.52 * (1 - phase(timelineP, 0.46, 0.58)); + const staticScanlineOpacity = 0.07 * (1 - phase(timelineP, 0.46, 0.58)); + if (staticNoiseRef.current) { + staticNoiseRef.current.style.opacity = String(staticNoiseOpacity); + } + if (staticScanlinesRef.current) { + staticScanlinesRef.current.style.opacity = String(staticScanlineOpacity); + } + + // ───────────────────────────────────────────────────────────────── + // COUNTDOWN p 0.00 → 0.30 + // Each of 3 numbers occupies p 0.02-0.10 / 0.10-0.18 / 0.18-0.26 + // ───────────────────────────────────────────────────────────────── + if (countdownRef.current) { + const fadeIn = easeOutCubic(phase(p, 0.0, 0.04)); + const fadeOut = easeInCubic(phase(p, 0.26, 0.33)); + const countdownOpacityRaw = fadeIn * (1 - fadeOut); + const countdownOpacity = SHOW_LEADER_COUNTDOWN + ? countdownOpacityRaw + : 0; + countdownRef.current.style.opacity = String(countdownOpacity); + } + + if (arcRef.current && countNumRef.current && SHOW_LEADER_COUNTDOWN) { + // Three equal sub-phases within p 0.02 – 0.26 + const cP = phase(p, 0.02, 0.26); // 0→1 over whole countdown + const idx = Math.min(2, Math.floor(cP * 3)); // 0,1,2 + const num = [3, 2, 1][idx]; + const subP = easeInOutCubic((cP * 3) % 1); // 0→1 within current number + + countNumRef.current.textContent = String(num); + arcRef.current.setAttribute( + "stroke-dashoffset", + String(ARC_CIRC * (1 - subP)), + ); + } + + // ───────────────────────────────────────────────────────────────── + // CLAPBOARD p 0.30 → 0.52 + // ───────────────────────────────────────────────────────────────── + if (clapboardRef.current) { + const dropIn = easeOutCubic(phase(timelineP, 0.0, 0.24)); + const exitOut = easeInCubic(phase(timelineP, 0.38, 0.62)); + const dropStart = isMobile ? -150 : -115; + const y = dropStart + dropIn * -dropStart + exitOut * 135; + clapboardRef.current.style.left = "50%"; + clapboardRef.current.style.top = isMobile ? "50%" : "24%"; + clapboardRef.current.style.width = isMobile + ? "min(340px, 82vw)" + : "min(360px, 56vw)"; + clapboardRef.current.style.transform = isMobile + ? `translate3d(-50%, calc(-50% + ${y}%), 0)` + : `translate3d(-50%, ${y}%, 0)`; + clapboardRef.current.style.opacity = String((timelineP > 0.62 ? 0 : 1) * endFade); + } + if (clapArmRef.current) { + const snapT = easeInOutCubic(phase(timelineP, 0.2, 0.28)); + clapArmRef.current.style.transform = `rotate(${-28 * (1 - snapT)}deg)`; + } + if (timelineP >= 0.235 && timelineP <= 0.32) { + triggerClapFx(); + } else if (timelineP < 0.18) { + // Allow replay when user scrolls back and re-enters the sequence. + clapFxTriggeredRef.current = false; + } + + // ───────────────────────────────────────────────────────────────── + // FLASH p 0.43 → 0.50 + // ───────────────────────────────────────────────────────────────── + if (flashRef.current) { + const fp = phase(timelineP, 0.24, 0.34); + const spike = fp < 0.4 ? fp / 0.4 : 1 - (fp - 0.4) / 0.6; + flashRef.current.style.opacity = String(spike * 0.9 * endFade); + } + + // ───────────────────────────────────────────────────────────────── + // CAMERA p 0.48 → 0.72 + // ───────────────────────────────────────────────────────────────── + if (cameraGroupRef.current) { + const camIn = easeOutCubic(phase(timelineP, 0.34, 0.62)); + cameraGroupRef.current.style.opacity = String( + easeOutCubic(phase(timelineP, 0.34, 0.5)) * endFade, + ); + if (isMobile) { + cameraGroupRef.current.style.display = "none"; + cameraGroupRef.current.style.opacity = "0"; + } else { + const tx = (1 - camIn) * -130; + cameraGroupRef.current.style.left = "2%"; + cameraGroupRef.current.style.top = "50%"; + cameraGroupRef.current.style.width = "min(300px, 34vw)"; + cameraGroupRef.current.style.display = "block"; + cameraGroupRef.current.style.transform = + `translateX(${tx}%) translateY(-50%) rotate(-6deg)`; + } + } + if (mobileProjectorRef.current) { + const projIn = easeOutCubic(phase(timelineP, 0.36, 0.62)); + const projectorY = vh - 40; + mobileProjectorRef.current.style.opacity = isMobile + ? String(projIn * endFade) + : "0"; + mobileProjectorRef.current.style.left = `${vw * 0.5}px`; + mobileProjectorRef.current.style.top = `${projectorY}px`; + mobileProjectorRef.current.style.transform = isMobile + ? `translate3d(-50%, ${(1 - projIn) * 10}%, 0) perspective(2000px) rotateX(5deg) scale(${0.95 + projIn * 0.05})` + : "translate3d(-50%, 20%, 0)"; + } + + // ───────────────────────────────────────────────────────────────── + // BEAM p 0.58 → 0.76 + // ───────────────────────────────────────────────────────────────── + if (beamRef.current) { + const beamOpacity = easeOutCubic(phase(timelineP, 0.5, 0.72)) * endFade; + beamRef.current.style.opacity = String(beamOpacity); + if (desktopBeamRef.current) { + desktopBeamRef.current.style.opacity = isMobile ? "0" : "1"; + } + if (mobileBeamRef.current) { + mobileBeamRef.current.style.opacity = isMobile ? "1" : "0"; + } + + if ( + isMobile && + mobileBeamPrimaryRef.current && + mobileBeamSecondaryRef.current && + mobileBeamConeRef.current && + mobileBeamSourceGlowRef.current && + mobileProjectorLensRef.current + ) { + const screenCenterX = vw * 0.5; + const screenCenterY = vh * 0.38; + const screenWidth = Math.min(430, vw * 0.9); + const screenHeight = screenWidth * (9 / 16); + const screenLeft = screenCenterX - screenWidth * 0.5; + const screenTop = screenCenterY - screenHeight * 0.5; + const projectorY = vh - 40; + const lensX = vw * 0.5; + const lensY = projectorY - 26; + // Hide linear helper rays on mobile; keep a single stable volumetric cone. + mobileBeamPrimaryRef.current.style.opacity = "0"; + mobileBeamSecondaryRef.current.style.opacity = "0"; + + const distanceToScreen = Math.hypot(screenCenterX - lensX, (screenCenterY + screenHeight * 0.2) - lensY); + const coneBaseIntensity = clamp(260 / (distanceToScreen + 260), 0.22, 0.72); + const spread = easeOutCubic(phase(timelineP, 0.52, 0.74)); + const spreadWidth = clamp(0.2 + spread * 1.05, 0.2, 1); + const leftEdgeX = screenCenterX - (screenWidth * 0.5 * spreadWidth); + const rightEdgeX = screenCenterX + (screenWidth * 0.5 * spreadWidth); + const screenTopY = screenTop; + const screenBottomY = screenTop + screenHeight; + const coneIntensity = clamp(coneBaseIntensity * (0.22 + spread * 0.74), 0.12, 0.62); + const sourceHalfWidth = 5 + spread * 3; + + mobileBeamConeRef.current.style.left = "0px"; + mobileBeamConeRef.current.style.top = "0px"; + mobileBeamConeRef.current.style.width = `${vw}px`; + mobileBeamConeRef.current.style.height = `${vh}px`; + mobileBeamConeRef.current.style.clipPath = + `polygon(${lensX - sourceHalfWidth}px ${lensY}px, ${lensX + sourceHalfWidth}px ${lensY}px, ${rightEdgeX}px ${screenTopY}px, ${rightEdgeX}px ${screenBottomY}px, ${leftEdgeX}px ${screenBottomY}px, ${leftEdgeX}px ${screenTopY}px)`; + mobileBeamConeRef.current.style.background = + `radial-gradient(ellipse at ${lensX}px ${lensY}px, rgba(255,248,198,${0.92 * coneIntensity}) 0%, rgba(255,238,152,${0.5 * coneIntensity}) 26%, rgba(255,230,112,${0.24 * coneIntensity}) 52%, rgba(255,224,90,0) 84%)`; + mobileBeamConeRef.current.style.boxShadow = + `0 0 10px rgba(255,238,148,${0.09 * coneIntensity})`; + mobileBeamConeRef.current.style.opacity = String(clamp(0.42 + spread * 0.58, 0.42, 1)); + + mobileBeamSourceGlowRef.current.style.left = `${lensX}px`; + mobileBeamSourceGlowRef.current.style.top = `${lensY}px`; + mobileBeamSourceGlowRef.current.style.opacity = String( + clamp(coneBaseIntensity * 0.72, 0.2, 0.62), + ); + mobileProjectorLensRef.current.style.opacity = String( + clamp(0.25 + coneBaseIntensity * 0.65, 0.25, 0.85), + ); + } + } + + // ───────────────────────────────────────────────────────────────── + // SCREEN p 0.62 → 0.80 + // ───────────────────────────────────────────────────────────────── + if (screenRef.current) { + const sp = easeOutCubic(phase(timelineP, 0.56, 0.8)); + const screenScale = 0.92 + sp * 0.08; + screenRef.current.style.opacity = String(sp * endFade); + if (isMobile) { + screenRef.current.style.left = "50%"; + screenRef.current.style.right = "auto"; + screenRef.current.style.top = "38%"; + screenRef.current.style.width = "min(430px, 90vw)"; + screenRef.current.style.transform = + `translate3d(-50%, -50%, 0) perspective(1200px) rotateY(0deg) scale(${screenScale})`; + } else { + screenRef.current.style.left = "auto"; + screenRef.current.style.right = "3%"; + screenRef.current.style.top = "50%"; + screenRef.current.style.width = "min(620px, 60vw)"; + screenRef.current.style.transform = + `translateY(-50%) perspective(1200px) rotateY(-4deg) scale(${screenScale})`; + } + } + + // ───────────────────────────────────────────────────────────────── + // TEXT WIPE p 0.76 → 0.96 + // ───────────────────────────────────────────────────────────────── + if (screenTextRef.current) { + const wp = easeOutCubic(phase(timelineP, 0.74, 0.96)); + screenTextRef.current.style.clipPath = `inset(0 ${(1 - wp) * 100}% 0 0)`; + } + + // ───────────────────────────────────────────────────────────────── + // FILM GRAIN jitter + // ───────────────────────────────────────────────────────────────── + frameCount.current++; + if ( + grainRef.current && + frameCount.current % 4 === 0 && + timelineP > 0.74 + ) { + const bf = 0.65 + (Math.random() - 0.5) * 0.1; + grainRef.current.setAttribute("baseFrequency", `${bf} ${bf}`); + } + }; + + raf = requestAnimationFrame(tick); + return () => { + cancelAnimationFrame(raf); + window.removeEventListener("resize", onResizeCt); + void clapAudioCtxRef.current?.close(); + clapAudioCtxRef.current = null; + }; + }, []); + + // ── Beam mouse parallax ─────────────────────────────────────────────────── + const handleMouseMove = useCallback((e: MouseEvent) => { + if (!beamParallaxRef.current) return; + const mx = e.clientX / window.innerWidth - 0.5; + const my = e.clientY / window.innerHeight - 0.5; + beamParallaxRef.current.style.setProperty("--beam-mx", String(mx)); + beamParallaxRef.current.style.setProperty("--beam-my", String(my)); + }, []); + + useEffect(() => { + window.addEventListener("mousemove", handleMouseMove, { passive: true }); + return () => window.removeEventListener("mousemove", handleMouseMove); + }, [handleMouseMove]); + + return ( +
+
+ {/* SVG defs — grain filter */} + + + {/* White flash */} +
+ + {/* Minimal dark background with soft vignette */} +
+
+ + {/* ════════════════════════════════════════════════════════════════ + FILM COUNTDOWN 3 · 2 · 1 + Classic circular SMPTE-style leader frame + ════════════════════════════════════════════════════════════════ */} +
+ {/* Outer technical frame lines */} +
+ + {/* Corner reference dots */} + {( + [ + [8, 8], + [92, 8], + [8, 92], + [92, 92], + ] as const + ).map(([x, y], i) => ( +
+ ))} + + {/* Main countdown circle */} + +
+ + {/* ════════════════════════════════════════════════════════════════ + CLAPBOARD + ════════════════════════════════════════════════════════════════ */} + + + {/* ════════════════════════════════════════════════════════════════ + PROJECTOR BEAM + Multi-layer conic+radial — lens at ~(20%, 44%), beam ≈ 97° from north + ════════════════════════════════════════════════════════════════ */} +
+
+
+
+
+
+
+
+
+ {/* Outer atmospheric halo — wide fan, centered on screen */} +
+ {/* Main beam body — covers full screen height */} +
+ {/* Mid beam — volumetric body, angled at screen center */} +
+ {/* Core beam — bright centre, aims at screen midpoint */} +
+ {/* Lens source glow */} +
+
+
+
+ + {/* ════════════════════════════════════════════════════════════════ + CAMERA on tripod — slides in from left, top-center aligned + ════════════════════════════════════════════════════════════════ */} +
+ + + + + + + + + + + + + + + + + + + + + + + + {/* ── Tripod legs ── */} + + + + {/* Spreader bar */} + + + + + + {/* ── Tripod head / pan plate ── */} + + + + {/* ── Main camera body ── */} + + {/* Top edge highlight */} + + {/* Panel division lines */} + + + {/* Body outline */} + + + {/* ── Film perforations along top edge ── */} + {[0,1,2,3,4,5,6].map((i) => ( + + ))} + {/* Bottom perforations */} + {[0,1,2,3,4,5,6].map((i) => ( + + ))} + + {/* ── Film reels (top, recessed) ── */} + {/* Left reel */} + + + {[0,45,90,135,180,225,270,315].map((a) => ( + + ))} + + + {/* Reel sprocket holes */} + {[0,60,120,180,240,300].map((a) => ( + + ))} + + {/* Right reel */} + + + {[0,45,90,135,180,225,270,315].map((a) => ( + + ))} + + + {[0,60,120,180,240,300].map((a) => ( + + ))} + + {/* ── Film path guide channel ── */} + + + {/* ── Aperture gate (center body) ── */} + + + {/* Crosshairs */} + + + {/* Corner marks */} + {[[116,112],[146,112],[116,134],[146,134]].map(([cx,cy],i) => ( + + + + + ))} + + {/* ── Nameplate ── */} + + CINE · 16mm + + {/* ── Control knobs ── */} + {[[160,148],[176,148],[192,148]].map(([cx,cy],i) => ( + + + + + + ))} + + {/* ── Ventilation louvres ── */} + {[166,172,178,184].map((y) => ( + + ))} + + {/* ── Corner rivets ── */} + {[[44,62],[216,62],[44,180],[216,180]].map(([cx,cy],i) => ( + + + + + ))} + + {/* ── Lens barrel / cone ── */} + + {/* Barrel grip rings */} + {[238,248,258].map((x) => ( + + ))} + + {/* ── Lens assembly ── */} + {/* Outer hood */} + + {/* Barrel rim */} + + {/* Element rings */} + + + {/* Glass element */} + + {/* Specular highlights */} + + + + +
+
+ +
+ + {/* ════════════════════════════════════════════════════════════════ + PROJECTION SCREEN + ════════════════════════════════════════════════════════════════ */} +
+ {/* Inner bezel */} +
+ {/* Projected hotspot */} +
+ {/* Scanlines */} +
+ {/* Text wipe */} +
+
+ AI Filmmaking +
+
+ Hackathon  ·  v2 +
+
+ 18–19 Apr 2026  ·  Dublin, Ireland +
+
+ {/* Corner registration marks */} + {(["tl", "tr", "bl", "br"] as const).map((c) => ( +
+
+
+ ))} +
+ + +
+
+ ); +}; + +export default CinematicTransition; diff --git a/components/CollisionSection.tsx b/components/CollisionSection.tsx new file mode 100644 index 0000000..4967c54 --- /dev/null +++ b/components/CollisionSection.tsx @@ -0,0 +1,964 @@ +import React, { useRef, useEffect, useState } from "react"; +import { animate, stagger, createTimeline } from "animejs"; + +const PARTICLE_COUNT = 24; +const WAVE_COUNT = 5; + +interface Particle { + el: HTMLDivElement | null; + side: "left" | "right"; + baseX: number; + baseY: number; + size: number; + delay: number; +} + +function useIsMobile(breakpoint = 768) { + const [mobile, setMobile] = useState( + () => typeof window !== "undefined" && window.innerWidth <= breakpoint, + ); + useEffect(() => { + const mq = window.matchMedia(`(max-width: ${breakpoint}px)`); + const handler = (e: MediaQueryListEvent) => setMobile(e.matches); + mq.addEventListener("change", handler); + setMobile(mq.matches); + return () => mq.removeEventListener("change", handler); + }, [breakpoint]); + return mobile; +} + +const CollisionSection: React.FC = () => { + const sectionRef = useRef(null); + const canvasRef = useRef(null); + const [isVisible, setIsVisible] = useState(false); + const animStarted = useRef(false); + const rafRef = useRef(0); + const particleRefs = useRef<(HTMLDivElement | null)[]>([]); + const leftWaveRefs = useRef<(HTMLDivElement | null)[]>([]); + const rightWaveRefs = useRef<(HTMLDivElement | null)[]>([]); + const centerGlowRef = useRef(null); + const centerTextRef = useRef(null); + const leftLabelRef = useRef(null); + const rightLabelRef = useRef(null); + const filmStripRef = useRef(null); + const isMobile = useIsMobile(); + + const particles = useRef( + Array.from({ length: PARTICLE_COUNT }, (_, i) => { + const side = i < PARTICLE_COUNT / 2 ? "left" : "right"; + const spread = 0.22 + Math.random() * 0.2; + return { + el: null, + side, + baseX: side === "left" ? spread : 1 - spread, + baseY: 0.25 + Math.random() * 0.5, + size: 2 + Math.random() * 4, + delay: Math.random() * 2000, + }; + }), + ); + + useEffect(() => { + const el = sectionRef.current; + if (!el) return; + const obs = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + setIsVisible(true); + obs.disconnect(); + } + }, + { threshold: 0.15 }, + ); + obs.observe(el); + return () => obs.disconnect(); + }, []); + + // Canvas energy field + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas || !isVisible) return; + + const ctx = canvas.getContext("2d"); + if (!ctx) return; + + let w = 0; + let h = 0; + let mob = window.innerWidth <= 768; + const resize = () => { + const rect = canvas.parentElement!.getBoundingClientRect(); + w = rect.width; + h = rect.height; + mob = window.innerWidth <= 768; + const dpr = Math.min(window.devicePixelRatio, 2); + canvas.width = w * dpr; + canvas.height = h * dpr; + canvas.style.width = `${w}px`; + canvas.style.height = `${h}px`; + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + }; + resize(); + window.addEventListener("resize", resize); + + const sparks: { + x: number; + y: number; + vx: number; + vy: number; + life: number; + maxLife: number; + size: number; + hue: number; + }[] = []; + + let time = 0; + + const draw = () => { + rafRef.current = requestAnimationFrame(draw); + time += 0.016; + ctx.clearRect(0, 0, w, h); + + const cx = w / 2; + const cy = h / 2; + const spawnRate = mob ? 0.3 : 0.4; + + if (mob) { + // Mobile: vertical — sparks from top (creative) and bottom (engineer) + if (Math.random() < spawnRate) { + sparks.push({ + x: cx + (Math.random() - 0.5) * w * 0.5, + y: h * 0.12, + vx: (Math.random() - 0.5) * 0.8, + vy: 1.5 + Math.random() * 2, + life: 0, + maxLife: 55 + Math.random() * 40, + size: 1 + Math.random() * 1.5, + hue: 35 + Math.random() * 15, + }); + } + if (Math.random() < spawnRate) { + sparks.push({ + x: cx + (Math.random() - 0.5) * w * 0.5, + y: h * 0.88, + vx: (Math.random() - 0.5) * 0.8, + vy: -(1.5 + Math.random() * 2), + life: 0, + maxLife: 55 + Math.random() * 40, + size: 1 + Math.random() * 1.5, + hue: 45 + Math.random() * 10, + }); + } + } else { + // Desktop: horizontal + if (Math.random() < spawnRate) { + sparks.push({ + x: w * 0.15, + y: cy + (Math.random() - 0.5) * h * 0.35, + vx: 2 + Math.random() * 2.5, + vy: (Math.random() - 0.5) * 1.2, + life: 0, + maxLife: 60 + Math.random() * 50, + size: 1 + Math.random() * 2, + hue: 35 + Math.random() * 15, + }); + } + if (Math.random() < spawnRate) { + sparks.push({ + x: w * 0.85, + y: cy + (Math.random() - 0.5) * h * 0.35, + vx: -(2 + Math.random() * 2.5), + vy: (Math.random() - 0.5) * 1.2, + life: 0, + maxLife: 60 + Math.random() * 50, + size: 1 + Math.random() * 2, + hue: 45 + Math.random() * 10, + }); + } + } + + // Wave lines + if (mob) { + // Vertical waves flowing toward center + const waveTop = h * 0.15; + const waveBot = h * 0.85; + for (let i = 0; i < 3; i++) { + // From top + ctx.beginPath(); + ctx.strokeStyle = `rgba(198,153,58,${0.04 + i * 0.01})`; + ctx.lineWidth = 0.8; + for (let y = waveTop; y < cy; y += 2) { + const progress = (y - waveTop) / (cy - waveTop); + const amplitude = + 16 * (1 - progress * 0.7) * Math.sin(time * 0.8 + i * 0.6); + const x = + cx + Math.sin(y * 0.01 + time * 1.4 + i * 0.8) * amplitude; + if (y === waveTop) ctx.moveTo(x, y); + else ctx.lineTo(x, y); + } + ctx.stroke(); + + // From bottom + ctx.beginPath(); + ctx.strokeStyle = `rgba(224,213,192,${0.04 + i * 0.01})`; + ctx.lineWidth = 0.8; + for (let y = waveBot; y > cy; y -= 2) { + const progress = (waveBot - y) / (waveBot - cy); + const amplitude = + 16 * (1 - progress * 0.7) * Math.sin(time * 0.8 + i * 0.6); + const x = + cx + + Math.sin((waveBot - y) * 0.01 + time * 1.4 + i * 0.8 + Math.PI) * + amplitude; + if (y === waveBot) ctx.moveTo(x, y); + else ctx.lineTo(x, y); + } + ctx.stroke(); + } + } else { + const waveStart = w * 0.2; + const waveEnd = w * 0.8; + for (let i = 0; i < 4; i++) { + ctx.beginPath(); + ctx.strokeStyle = `rgba(198,153,58,${0.05 + i * 0.012})`; + ctx.lineWidth = 0.8; + for (let x = waveStart; x < cx; x += 2) { + const progress = (x - waveStart) / (cx - waveStart); + const amplitude = + 22 * (1 - progress * 0.7) * Math.sin(time * 0.8 + i * 0.6); + const y = + cy + Math.sin(x * 0.012 + time * 1.4 + i * 0.8) * amplitude; + if (x === waveStart) ctx.moveTo(x, y); + else ctx.lineTo(x, y); + } + ctx.stroke(); + } + for (let i = 0; i < 4; i++) { + ctx.beginPath(); + ctx.strokeStyle = `rgba(224,213,192,${0.05 + i * 0.012})`; + ctx.lineWidth = 0.8; + for (let x = waveEnd; x > cx; x -= 2) { + const progress = (waveEnd - x) / (waveEnd - cx); + const amplitude = + 22 * (1 - progress * 0.7) * Math.sin(time * 0.8 + i * 0.6); + const y = + cy + + Math.sin((waveEnd - x) * 0.012 + time * 1.4 + i * 0.8 + Math.PI) * + amplitude; + if (x === waveEnd) ctx.moveTo(x, y); + else ctx.lineTo(x, y); + } + ctx.stroke(); + } + } + + // Update & draw sparks + for (let i = sparks.length - 1; i >= 0; i--) { + const s = sparks[i]; + s.life++; + + if (mob) { + const distToCenter = Math.abs(s.y - cy); + const attractStrength = Math.max(0, 1 - distToCenter / (h * 0.4)); + s.vy += (cy - s.y) * 0.0005 * attractStrength; + s.vx += (cx - s.x) * 0.0002; + s.vx += (Math.random() - 0.5) * 0.08; + s.x += s.vx; + s.y += s.vy; + + const lifeRatio = s.life / s.maxLife; + const alpha = + lifeRatio < 0.1 + ? lifeRatio / 0.1 + : lifeRatio > 0.7 + ? (1 - lifeRatio) / 0.3 + : 1; + + if (distToCenter < 50) { + const burstAlpha = alpha * (1 - distToCenter / 50); + ctx.beginPath(); + ctx.arc(s.x, s.y, s.size * 2, 0, Math.PI * 2); + ctx.fillStyle = `hsla(${s.hue}, 70%, 65%, ${burstAlpha * 0.3})`; + ctx.fill(); + } + + ctx.beginPath(); + ctx.arc(s.x, s.y, s.size, 0, Math.PI * 2); + ctx.fillStyle = `hsla(${s.hue}, 60%, 60%, ${alpha * 0.65})`; + ctx.fill(); + + ctx.beginPath(); + ctx.arc(s.x, s.y, s.size * 2.5, 0, Math.PI * 2); + ctx.fillStyle = `hsla(${s.hue}, 50%, 50%, ${alpha * 0.06})`; + ctx.fill(); + } else { + const distToCenter = Math.abs(s.x - cx); + const attractStrength = Math.max(0, 1 - distToCenter / (w * 0.4)); + s.vx += (cx - s.x) * 0.0006 * attractStrength; + s.vy += (cy - s.y) * 0.00025; + s.vy += (Math.random() - 0.5) * 0.1; + s.x += s.vx; + s.y += s.vy; + + const lifeRatio = s.life / s.maxLife; + const alpha = + lifeRatio < 0.1 + ? lifeRatio / 0.1 + : lifeRatio > 0.7 + ? (1 - lifeRatio) / 0.3 + : 1; + + if (distToCenter < 60) { + const burstAlpha = alpha * (1 - distToCenter / 60); + ctx.beginPath(); + ctx.arc(s.x, s.y, s.size * 2.5, 0, Math.PI * 2); + ctx.fillStyle = `hsla(${s.hue}, 70%, 65%, ${burstAlpha * 0.35})`; + ctx.fill(); + } + + ctx.beginPath(); + ctx.arc(s.x, s.y, s.size, 0, Math.PI * 2); + ctx.fillStyle = `hsla(${s.hue}, 60%, 60%, ${alpha * 0.7})`; + ctx.fill(); + + ctx.beginPath(); + ctx.arc(s.x, s.y, s.size * 3, 0, Math.PI * 2); + ctx.fillStyle = `hsla(${s.hue}, 50%, 50%, ${alpha * 0.08})`; + ctx.fill(); + } + + if (s.life >= s.maxLife) { + sparks.splice(i, 1); + } + } + + // Center convergence glow + const glowIntensity = 0.15 + Math.sin(time * 1.5) * 0.05; + const glowR = mob ? 65 : 90; + const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowR); + gradient.addColorStop(0, `rgba(198,153,58,${glowIntensity * 1.2})`); + gradient.addColorStop(0.4, `rgba(198,153,58,${glowIntensity * 0.4})`); + gradient.addColorStop(1, "transparent"); + ctx.fillStyle = gradient; + ctx.fillRect(cx - glowR, cy - glowR, glowR * 2, glowR * 2); + }; + + rafRef.current = requestAnimationFrame(draw); + + return () => { + cancelAnimationFrame(rafRef.current); + window.removeEventListener("resize", resize); + }; + }, [isVisible]); + + // Anime.js driven DOM animations + useEffect(() => { + if (!isVisible || animStarted.current) return; + animStarted.current = true; + + const mob = window.innerWidth <= 768; + + const leftParticles = particleRefs.current.filter( + (_, i) => i < PARTICLE_COUNT / 2, + ); + const rightParticles = particleRefs.current.filter( + (_, i) => i >= PARTICLE_COUNT / 2, + ); + + if (mob) { + // Mobile: particles drift vertically toward center + animate(leftParticles.filter(Boolean), { + translateY: [ + { to: "18vh", ease: "outExpo" }, + { to: "9vh", ease: "inOutSine" }, + ], + opacity: [ + { to: 0.7, duration: 500 }, + { to: 0.08, duration: 1800 }, + ], + scale: [ + { to: [0, 1], ease: "outBack" }, + { to: 0.2, ease: "inSine" }, + ], + duration: 2400, + delay: stagger(90, { start: 100 }), + loop: true, + ease: "inOutQuad", + }); + animate(rightParticles.filter(Boolean), { + translateY: [ + { to: "-18vh", ease: "outExpo" }, + { to: "-9vh", ease: "inOutSine" }, + ], + opacity: [ + { to: 0.7, duration: 500 }, + { to: 0.08, duration: 1800 }, + ], + scale: [ + { to: [0, 1], ease: "outBack" }, + { to: 0.2, ease: "inSine" }, + ], + duration: 2400, + delay: stagger(90, { start: 100 }), + loop: true, + ease: "inOutQuad", + }); + } else { + animate(leftParticles.filter(Boolean), { + translateX: [ + { to: "20vw", ease: "outExpo" }, + { to: "10vw", ease: "inOutSine" }, + ], + opacity: [ + { to: 0.8, duration: 500 }, + { to: 0.1, duration: 2000 }, + ], + scale: [ + { to: [0, 1.2], ease: "outBack" }, + { to: 0.3, ease: "inSine" }, + ], + duration: 2600, + delay: stagger(100, { start: 150 }), + loop: true, + ease: "inOutQuad", + }); + animate(rightParticles.filter(Boolean), { + translateX: [ + { to: "-20vw", ease: "outExpo" }, + { to: "-10vw", ease: "inOutSine" }, + ], + opacity: [ + { to: 0.8, duration: 500 }, + { to: 0.1, duration: 2000 }, + ], + scale: [ + { to: [0, 1.2], ease: "outBack" }, + { to: 0.3, ease: "inSine" }, + ], + duration: 2600, + delay: stagger(100, { start: 150 }), + loop: true, + ease: "inOutQuad", + }); + } + + // Wave arcs + animate(leftWaveRefs.current.filter(Boolean), { + ...(mob ? { scaleY: [0, 1] } : { scaleX: [0, 1] }), + opacity: [0.5, 0], + duration: 2500, + delay: stagger(400), + loop: true, + ease: "outCubic", + }); + animate(rightWaveRefs.current.filter(Boolean), { + ...(mob ? { scaleY: [0, 1] } : { scaleX: [0, 1] }), + opacity: [0.5, 0], + duration: 2500, + delay: stagger(400), + loop: true, + ease: "outCubic", + }); + + // Center glow pulse + animate(centerGlowRef.current!, { + scale: [0.85, 1.15], + opacity: [0.3, 0.7], + duration: 2000, + loop: true, + alternate: true, + ease: "inOutSine", + }); + + // Text entrance + const tl = createTimeline({ defaults: { ease: "outExpo" } }); + tl.add(leftLabelRef.current!, { + ...(mob ? { translateY: [-40, 0] } : { translateX: [-80, 0] }), + opacity: [0, 1], + duration: 1200, + }) + .add( + rightLabelRef.current!, + { + ...(mob ? { translateY: [40, 0] } : { translateX: [80, 0] }), + opacity: [0, 1], + duration: 1200, + }, + "<", + ) + .add( + centerTextRef.current!, + { + scale: [0.7, 1], + opacity: [0, 1], + duration: 1400, + }, + "-=800", + ) + .add( + filmStripRef.current!, + { + scale: [0.6, 1], + opacity: [0, 1], + duration: 1000, + }, + "-=600", + ); + }, [isVisible]); + + // --- Mobile: vertical layout, particles repositioned --- + const mobileParticles = React.useMemo(() => { + return Array.from({ length: PARTICLE_COUNT }, (_, i) => { + const side = i < PARTICLE_COUNT / 2 ? "left" : "right"; + return { + x: 0.15 + Math.random() * 0.7, + y: + side === "left" + ? 0.08 + Math.random() * 0.25 + : 0.67 + Math.random() * 0.25, + size: 1.5 + Math.random() * 3, + }; + }); + }, []); + + return ( +
+ {/* Subtle top border */} +
+ + {/* Canvas layer */} + + + {/* DOM particles */} + {(isMobile ? mobileParticles : particles.current).map((p, i) => ( +
{ + particleRefs.current[i] = el; + }} + style={{ + position: "absolute", + left: isMobile + ? `${p.x * 100}%` + : `${(particles.current[i]?.baseX ?? 0.5) * 100}%`, + top: isMobile + ? `${p.y * 100}%` + : `${(particles.current[i]?.baseY ?? 0.5) * 100}%`, + width: p.size, + height: p.size, + borderRadius: "50%", + background: + i < PARTICLE_COUNT / 2 + ? "rgba(198,153,58,0.85)" + : "rgba(224,213,192,0.85)", + boxShadow: + i < PARTICLE_COUNT / 2 + ? "0 0 6px rgba(198,153,58,0.4)" + : "0 0 6px rgba(224,213,192,0.4)", + opacity: 0, + willChange: "transform, opacity", + }} + /> + ))} + + {/* Wave arcs — left/top */} + {Array.from({ length: WAVE_COUNT }).map((_, i) => ( +
{ + leftWaveRefs.current[i] = el; + }} + style={ + isMobile + ? { + position: "absolute", + left: `${48 + i * 1.2}%`, + top: "15%", + width: 1.5, + height: "30%", + transformOrigin: "center top", + background: `linear-gradient(180deg, rgba(198,153,58,${0.22 - i * 0.03}), transparent)`, + borderRadius: 1, + opacity: 0, + willChange: "transform, opacity", + } + : { + position: "absolute", + left: "20%", + top: `${47 + i * 1.5}%`, + width: "28%", + height: 1.5, + transformOrigin: "left center", + background: `linear-gradient(90deg, rgba(198,153,58,${0.25 - i * 0.035}), transparent)`, + borderRadius: 1, + opacity: 0, + willChange: "transform, opacity", + } + } + /> + ))} + + {/* Wave arcs — right/bottom */} + {Array.from({ length: WAVE_COUNT }).map((_, i) => ( +
{ + rightWaveRefs.current[i] = el; + }} + style={ + isMobile + ? { + position: "absolute", + left: `${48 + i * 1.2}%`, + bottom: "15%", + width: 1.5, + height: "30%", + transformOrigin: "center bottom", + background: `linear-gradient(0deg, rgba(224,213,192,${0.22 - i * 0.03}), transparent)`, + borderRadius: 1, + opacity: 0, + willChange: "transform, opacity", + } + : { + position: "absolute", + right: "20%", + top: `${47 + i * 1.5}%`, + width: "28%", + height: 1.5, + transformOrigin: "right center", + background: `linear-gradient(270deg, rgba(224,213,192,${0.25 - i * 0.035}), transparent)`, + borderRadius: 1, + opacity: 0, + willChange: "transform, opacity", + } + } + /> + ))} + + {/* Center convergence glow */} +
+ + {/* Center clapperboard icon */} +
+ + + + + {[12, 20, 28, 36].map((x) => ( + + ))} + + SCENE 01 + + +
+ + {/* Text: Left / Top label */} +
+
+ The Dreamers +
+
+ Creatives +
+
+
+ {isMobile ? ( + "Vision · Story · Art · Emotion" + ) : ( + <> + Vision · Story · Art +
+ Direction · Emotion + + )} +
+
+ + {/* Text: Right / Bottom label */} +
+
+ The Builders +
+
+ Engineers +
+
+
+ {isMobile ? ( + "Code · AI · Systems · Pipelines" + ) : ( + <> + Code · AI · Systems +
+ Tooling · Pipelines + + )} +
+
+ + {/* Center text */} +
+
+ Where it all converges +
+
+ + {/* Section label */} +
+
+ The Collision +
+
+
+ ); +}; + +export default CollisionSection; diff --git a/components/CountdownSection.tsx b/components/CountdownSection.tsx new file mode 100644 index 0000000..e1b9717 --- /dev/null +++ b/components/CountdownSection.tsx @@ -0,0 +1,249 @@ +import React, { useRef, useEffect, useState, useMemo } from "react"; + +const ARC_R = 75; + +function tryVibrate(pattern: number[]) { + try { + if (navigator.vibrate) navigator.vibrate(pattern); + } catch (_) {} +} + +const CountdownSection: React.FC = () => { + const containerRef = useRef(null); + const [currentNumber, setCurrentNumber] = useState(3); + const [isComplete, setIsComplete] = useState(false); + const [isFlickering, setIsFlickering] = useState(false); + + const lastNumberRef = useRef(3); + const hasCompletedRef = useRef(false); + const flickerTimerRef = useRef | null>(null); + const rafPendingRef = useRef(false); + + useEffect(() => { + const getProgress = () => { + const container = containerRef.current; + if (!container) return 0; + const rect = container.getBoundingClientRect(); + const vh = window.innerHeight; + const startOffset = vh; + const endOffset = vh * -0.3; + const totalDistance = startOffset - endOffset; + const position = rect.top - startOffset; + return Math.max(0, Math.min(1, -position / totalDistance)); + }; + + const update = () => { + const progress = getProgress(); + + if (progress < 0.05 && hasCompletedRef.current) { + hasCompletedRef.current = false; + setIsComplete(false); + } + + const newNumber = Math.max(1, Math.ceil(3 - progress * 3)); + + if (newNumber !== lastNumberRef.current) { + lastNumberRef.current = newNumber; + tryVibrate([30]); + setIsFlickering(true); + if (flickerTimerRef.current) clearTimeout(flickerTimerRef.current); + flickerTimerRef.current = setTimeout(() => setIsFlickering(false), 220); + } + + setCurrentNumber(newNumber); + + if (newNumber === 1 && progress > 0.9 && !hasCompletedRef.current) { + hasCompletedRef.current = true; + setIsComplete(true); + } + }; + + const handleScroll = () => { + if (rafPendingRef.current) return; + rafPendingRef.current = true; + requestAnimationFrame(() => { + rafPendingRef.current = false; + update(); + }); + }; + + window.addEventListener("scroll", handleScroll, { passive: true }); + return () => { + window.removeEventListener("scroll", handleScroll); + if (flickerTimerRef.current) clearTimeout(flickerTimerRef.current); + }; + }, []); + + // Derive display values directly without storing scrollY in state + const progress = (() => { + const container = containerRef.current; + if (!container) return 0; + const rect = container.getBoundingClientRect(); + const vh = window.innerHeight; + const startOffset = vh; + const endOffset = vh * -0.3; + const totalDistance = startOffset - endOffset; + const position = rect.top - startOffset; + return Math.max(0, Math.min(1, -position / totalDistance)); + })(); + + const withinNumberProgress = (progress * 3) % 1; + const circumference = 2 * Math.PI * ARC_R; + const sweepPerNumber = circumference / 3; + const strokeDashoffset = circumference - (withinNumberProgress * sweepPerNumber + sweepPerNumber * (3 - currentNumber)); + + const ticks = useMemo(() => Array.from({ length: 12 }, (_, i) => { + const angle = (i * 30 - 90) * (Math.PI / 180); + const isMaj = i % 3 === 0; + const r1 = isMaj ? 79 : 83; + return ( + + ); + }), []); + + return ( +
+ {/* Scan lines overlay */} +
+ + + +
+
+ Picture Start +
+
+ Silence on set +
+
+ +
+ {[3, 2, 1].map((n) => ( +
= n ? 'rgba(248,236,188,0.8)' : 'rgba(248,236,188,0.15)', + transition: 'background 150ms ease', + }} + /> + ))} +
+ +
+ ); +}; + +export default CountdownSection; diff --git a/components/EventContent.tsx b/components/EventContent.tsx new file mode 100644 index 0000000..07ba964 --- /dev/null +++ b/components/EventContent.tsx @@ -0,0 +1,2667 @@ +import React, { useRef, useEffect, useState } from "react"; + +// ───────────────────────────────────────────────────────────────────────────── +// Design tokens +// ───────────────────────────────────────────────────────────────────────────── +const T = { + gold: "rgba(248,236,188,0.97)", + amber: "rgba(220,185,90,0.88)", + amberDim: "rgba(220,185,90,0.62)", + muted: "rgba(255,255,255,0.38)", + dim: "rgba(255,255,255,0.15)", + accent: "#E85D35", + border: "rgba(220,185,90,0.32)", + cardBg: "rgba(248,236,188,0.03)", + serif: "'IBM Plex Serif', Georgia, serif", + sans: "'IBM Plex Sans', system-ui, sans-serif", + mono: "monospace", +}; + +// ───────────────────────────────────────────────────────────────────────────── +// SectionReveal — scroll-triggered fade+slide +// ───────────────────────────────────────────────────────────────────────────── +function SectionReveal({ + children, + delay = 0, + style, +}: { + children: React.ReactNode; + delay?: number; + style?: React.CSSProperties; +}) { + const ref = useRef(null); + const [visible, setVisible] = useState(false); + + useEffect(() => { + const el = ref.current; + if (!el) return; + const obs = new IntersectionObserver( + ([e]) => { + if (e.isIntersecting) { + setVisible(true); + obs.disconnect(); + } + }, + { threshold: 0.1 }, + ); + obs.observe(el); + return () => obs.disconnect(); + }, []); + + return ( +
+ {children} +
+ ); +} + +// ───────────────────────────────────────────────────────────────────────────── +// SectionLabel — editorial top-of-section marker +// ───────────────────────────────────────────────────────────────────────────── +function SectionLabel({ no, title }: { no: string; title: string }) { + return ( +
+ + {no} + + + {title} + +
+
+ ); +} + +// ───────────────────────────────────────────────────────────────────────────── +// FilmStrip — horizontal sprocket-hole divider +// ───────────────────────────────────────────────────────────────────────────── +function FilmStrip() { + return ( +
+ +
+ ); +} + +// ───────────────────────────────────────────────────────────────────────────── +// ReelIcon — small film reel SVG +// ───────────────────────────────────────────────────────────────────────────── +function ReelIcon() { + return ( + + ); +} + +// ───────────────────────────────────────────────────────────────────────────── +// InfoCard — compact data card for the right-side detail column +// ───────────────────────────────────────────────────────────────────────────── +function InfoCard({ + label, + value, + sub, +}: { + label: string; + value: string; + sub?: string; +}) { + return ( +
+
+ {label} +
+
+ {value} +
+ {sub && ( +
+ {sub} +
+ )} +
+ ); +} + +// ───────────────────────────────────────────────────────────────────────────── +// TicketCard — cinema ticket with perforated edge +// ───────────────────────────────────────────────────────────────────────────── +function TicketCard({ + day, + scene, + title, + description, + meta1, + meta2, + badge, +}: { + day: string; + scene: string; + title: string; + description: string; + meta1: string; + meta2: string; + badge?: string; +}) { + return ( +
+ {/* Tear notch gaps — semicircles punched at top & bottom of tear line */} + {(["top", "bottom"] as const).map((pos) => ( +
+ ))} + + {/* Edge light leak */} +
+ + {/* Main body */} +
+ {/* Header row */} +
+
+
+ {day} +
+
+ {scene} +
+
+ {badge && ( +
+ {badge} +
+ )} +
+ + {/* Divider */} +
+ + {/* Title */} +
+ {title} +
+ + {/* Description */} +
+ {description} +
+ + {/* Meta row */} +
+
+ {[meta1, meta2].map((m, i) => ( +
+ {m} +
+ ))} +
+
+ + {/* Right stub */} +
+ {/* Admit One — vertical */} + + Admit One + + + {/* Barcode — horizontal bars for real ticket stub orientation */} + + {( + [ + [0, 1], + [2, 1], + [4, 2], + [7, 1], + [10, 2], + [13, 1], + [15, 2], + [18, 1], + [20, 2], + [23, 1], + [25, 2], + [28, 1], + [30, 2], + [33, 1], + [35, 2], + [38, 1], + [40, 2], + [43, 1], + [46, 2], + [49, 1], + [51, 2], + [54, 1], + [56, 2], + [59, 1], + [62, 2], + [65, 1], + [67, 2], + [70, 1], + [72, 2], + [75, 1], + [78, 1], + [80, 2], + ] as [number, number][] + ).map(([y, h], i) => ( + + ))} + + + {/* Seat number */} + + AI·FILM·v2 + +
+
+ ); +} + +// ───────────────────────────────────────────────────────────────────────────── +// SponsorLogoCard +// ───────────────────────────────────────────────────────────────────────────── +function SponsorLogoCard({ + src, + alt, + kind = "dark", + imageStyle, + containerStyle, +}: { + src: string; + alt: string; + kind?: "dark" | "light" | "purple"; + imageStyle?: React.CSSProperties; + containerStyle?: React.CSSProperties; +}) { + const shellStyle: React.CSSProperties = + kind === "light" + ? { + background: "rgba(255,255,255,0.94)", + border: "1px solid rgba(255,255,255,0.55)", + } + : kind === "purple" + ? { + background: "rgba(40,35,90,0.24)", + border: "1px solid rgba(120,115,255,0.36)", + } + : { + background: "rgba(255,255,255,0.08)", + border: "1px solid rgba(255,255,255,0.22)", + }; + + return ( +
+ {alt} +
+ ); +} + +// ───────────────────────────────────────────────────────────────────────────── +// FinScene — animated Fin label + gold-amber CTA with ticket-tear hover +// ───────────────────────────────────────────────────────────────────────────── +const LUMA_EVENT_URL = "https://luma.com/0zqny709?utm_source=aif"; + +function FinScene() { + const ref = useRef(null); + const [visible, setVisible] = useState(false); + const [hovered, setHovered] = useState(false); + + useEffect(() => { + const el = ref.current; + if (!el) return; + const obs = new IntersectionObserver( + ([e]) => { + if (e.isIntersecting) { + setVisible(true); + obs.disconnect(); + } + }, + { threshold: 0.3 }, + ); + obs.observe(el); + return () => obs.disconnect(); + }, []); + + return ( +
+
+
+
+ Fin +
+
+
+ setHovered(true)} + onMouseLeave={() => setHovered(false)} + > + + ); +} + +// ───────────────────────────────────────────────────────────────────────────── +// FeaturePresentationBridge — full-vh cinematic reveal +// ───────────────────────────────────────────────────────────────────────────── +function clamp01(v: number) { + return Math.max(0, Math.min(1, v)); +} + +function smoothstep(edge0: number, edge1: number, x: number) { + const t = clamp01((x - edge0) / (edge1 - edge0)); + return t * t * (3 - 2 * t); +} + +function FeaturePresentationBridge() { + const ref = useRef(null); + const titleRef = useRef(null); + const topLineLeftRef = useRef(null); + const topSparkleRef = useRef(null); + const topLineRightRef = useRef(null); + const bottomLineLeftRef = useRef(null); + const bottomSparkleRef = useRef(null); + const bottomLineRightRef = useRef(null); + + useEffect(() => { + const el = ref.current; + if (!el) return; + + let rafId = 0; + const targetVal = { current: 0 }; + const currentVal = { current: 0 }; + let started = false; + + const applyProgress = (progress: number) => { + const topP = smoothstep(0.02, 0.55, progress); + const titleP = smoothstep(0.04, 0.62, progress); + const bottomP = smoothstep(0.08, 0.68, progress); + + const topLine = smoothstep(0.06, 0.88, topP); + const topSparkle = smoothstep(0.34, 0.88, topP); + const bottomLine = smoothstep(0.06, 0.88, bottomP); + const bottomSparkle = smoothstep(0.34, 0.88, bottomP); + + if (titleRef.current) { + titleRef.current.style.opacity = String(titleP); + titleRef.current.style.transform = `translateY(${(1 - titleP) * 24}px) scale(${0.975 + titleP * 0.025})`; + } + if (topLineLeftRef.current) { + topLineLeftRef.current.style.transform = `scaleX(${topLine})`; + topLineLeftRef.current.style.opacity = String(0.35 + topLine * 0.65); + } + if (topSparkleRef.current) + topSparkleRef.current.style.opacity = String(topSparkle); + if (topLineRightRef.current) { + topLineRightRef.current.style.transform = `scaleX(${topLine})`; + topLineRightRef.current.style.opacity = String(0.35 + topLine * 0.65); + } + if (bottomLineLeftRef.current) { + bottomLineLeftRef.current.style.transform = `scaleX(${bottomLine})`; + bottomLineLeftRef.current.style.opacity = String( + 0.35 + bottomLine * 0.65, + ); + } + if (bottomSparkleRef.current) + bottomSparkleRef.current.style.opacity = String(bottomSparkle); + if (bottomLineRightRef.current) { + bottomLineRightRef.current.style.transform = `scaleX(${bottomLine})`; + bottomLineRightRef.current.style.opacity = String( + 0.35 + bottomLine * 0.65, + ); + } + }; + + const updateTarget = () => { + const rect = el.getBoundingClientRect(); + const vh = window.innerHeight || 1; + targetVal.current = clamp01( + (vh * 1.15 - rect.top) / (vh * 1.15 - vh * 0.22), + ); + }; + + const tick = () => { + rafId = window.requestAnimationFrame(tick); + const next = + currentVal.current + (targetVal.current - currentVal.current) * 0.22; + currentVal.current = + Math.abs(targetVal.current - next) < 0.0008 ? targetVal.current : next; + applyProgress(currentVal.current); + }; + + const obs = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting && !started) { + started = true; + obs.disconnect(); + updateTarget(); + tick(); + window.addEventListener("scroll", updateTarget, { passive: true }); + window.addEventListener("resize", updateTarget); + } + }, + { threshold: 0.01, rootMargin: "0px 0px 20% 0px" }, + ); + obs.observe(el); + + return () => { + obs.disconnect(); + window.removeEventListener("scroll", updateTarget); + window.removeEventListener("resize", updateTarget); + if (rafId) window.cancelAnimationFrame(rafId); + }; + }, []); + + return ( +
+ {/* Top rule */} +
+
+ + ✦ + +
+
+ +
+ Feature Presentation +
+ + {/* Bottom rule (flipped) */} +
+
+ + ✦ + +
+
+
+ ); +} + +// ───────────────────────────────────────────────────────────────────────────── +// EventContent +// ───────────────────────────────────────────────────────────────────────────── + +const EventContent: React.FC = () => { + return ( +
+ {/* ── Feature Presentation bridge ──────────────────────────────────── */} + + + {/* ════════════════════════════════════════════════════════════════════ + MANIFESTO — full-bleed cinematic opening statement + ════════════════════════════════════════════════════════════════════ */} + +
+
+ The Pitch +
+

+ 100 seats. +
+ Directors, engineers, + editors, designers. +
+ Carefully selected. + Paired for the weekend. +
+ Two days to make +
+ something worth watching. +

+
+ + + {/* ── Stats strip ──────────────────────────────────────────────────── */} +
+ {[ + "YOUR FILM · CINEMA SCREEN", + "24 HRS FILMMAKING", + "100 MAKERS", + "DOGPATCH LABS · DUBLIN", + "18–19 APR 2026", + "AI FILM · v2", + ].map((item, i) => ( + + + {item} + + {i < 5 && ( +
+ )} + + ))} +
+ + {/* ════════════════════════════════════════════════════════════════════ + SECTION 01 — EVENT OVERVIEW + ════════════════════════════════════════════════════════════════════ */} +
+ + + + +
+ {/* Left — title + copy + CTA */} +
+ +

+ Story to Big Screen +
+ + With best in class talent and tools + +

+ + + +

+ Write, shoot, and finish a short film using the same tools studios use, then watch it back in a cinema with a curated audience of industry legends. +

+ + + + + + + +
+
+ Applications close 1 April 2026 +
+
+ Bring your laptop · cameras, AI tools & gear are provided +
+
+ Black-tie premiere · Sunday afternoon +
+
+ Organised by Give(a)Go & Napkin +
+
+ +
+ + {/* Right — info cards */} + + {/* Film countdown decoration */} +
+ 3 . . . 2 . . . 1 +
+ + + + + +
+
+ + {/* ════════════════════════════════════════════════════════════════════ + WHO BELONGS HERE — profile cards + ════════════════════════════════════════════════════════════════════ */} +
+ +
+ Cast call +
+ +
+ {[ + { + role: "The Filmmaker", + description: + "You've made things people watched. Now you want to make something with AI workflows and a real deadline. Not a demo, a film.", + cue: "Bring your reel.", + }, + { + role: "The Engineer", + description: + "You're fast with code and models. You want a weekend where the output isn't a dashboard. It's a three-minute piece on a cinema screen.", + cue: "Bring your stack.", + }, + { + role: "The Editor", + description: + "You think in timelines, not scripts. You've cut under deadline before. This time the rushes include things that didn't exist when you sat down.", + cue: "Bring your cut.", + }, + { + role: "The Designer", + description: + "Frames, titles, mood boards, motion. You've been designing around video. Now you're designing the video. With a team. For a screening.", + cue: "Bring your frame.", + }, + ].map((p) => ( + +
+
+ {p.role} +
+

+ {p.description} +

+
+ {p.cue} +
+
+ + ))} +
+
+ + + + {/* ════════════════════════════════════════════════════════════════════ + SECTION 02 — THE PROGRAMME + ════════════════════════════════════════════════════════════════════ */} +
+ + + + + +

+ The weekend +
In Two Acts +

+ + +
+ + + + + + +
+
+ + + + {/* ════════════════════════════════════════════════════════════════════ + SECTION — SPONSORS (Made Possible By) + ════════════════════════════════════════════════════════════════════ */} +
+ + + + + +

+ Made Possible By +

+ + + +

+ End credits for the makers backing this weekend +

+ + +
+ + + + {/* ════════════════════════════════════════════════════════════════════ + AWARDS + ════════════════════════════════════════════════════════════════════ */} +
+ + + +
+ +

+ Screened. Scored. +
+ + Awarded. + +

+

+ Films play in front of the full room and a jury. Five categories. + Results the same night. The panel is drawn from people who + commission, distribute, or build the tools films are made with. +

+
+ Judges · To be announced +
+ + +
+ {[ + { + cat: "Best Film", + desc: "The complete package: story, execution, and impact.", + }, + { + cat: "Best Direction", + desc: "The clearest creative vision brought to screen.", + }, + { + cat: "Best Use of AI", + desc: "The most inventive, unexpected application of the tools.", + }, + { + cat: "Best Score & Sound", + desc: "Audio that makes the film feel bigger than it is.", + }, + { + cat: "People's Choice", + desc: "Voted by the room on premiere night.", + }, + ].map((a) => ( +
+
+ {a.cat} +
+
+ {a.desc} +
+
+ ))} +
+ Additional awards to be announced +
+
+ +
+
+ + + + {/* ════════════════════════════════════════════════════════════════════ + V1 RECAP — proof it happened, proof it was real + ════════════════════════════════════════════════════════════════════ */} +
+ + + +
+ +
+

+ V1 proved it was possible. +

+

+ At the first edition, teams of filmmakers and engineers made + complete short films from scratch in under 24 hours. Stories + with real cinematography, AI-generated sequences, original + scores, and actual emotional weight. Then they screened them in + a room full of people who'd watched them get made. +

+ { + (e.currentTarget as HTMLElement).style.color = T.gold; + (e.currentTarget as HTMLElement).style.borderColor = + "rgba(200,170,80,0.6)"; + }} + onMouseLeave={(e) => { + (e.currentTarget as HTMLElement).style.color = + "rgba(200,170,80,0.7)"; + (e.currentTarget as HTMLElement).style.borderColor = + "rgba(200,170,80,0.25)"; + }} + > + Watch the V1 recap ↗ + +
+ + + + {/* YouTube thumbnail */} + V1 Recap + {/* Dark overlay */} +
+ {/* Centred play + label */} +
+ {/* Play button */} +
+ + + +
+
+ AI Filmmaking Hackathon v1 · Recap +
+
+ {/* Film grain overlay */} +
+ + +
+ + {/* V1 Winner Films */} +
+ +
+ + V1 Winning Films + +
+
+ + {/* Film strip wrapper */} +
+ {/* Sprocket strip — top */} + {["top", "bottom"].map((pos) => ( +
+ {Array.from({ length: 100 }).map((_, i) => ( +
+ ))} +
+ ))} + {/* Cards with padding for the sprocket strips */} +
+ {[ + { + award: "Best Film", + title: "Watch Short Film", + team: "V1 · 2025", + href: "https://www.youtube.com/watch?v=-AWdaaZwG2g", + thumb: "https://img.youtube.com/vi/-AWdaaZwG2g/hqdefault.jpg", + }, + { + award: "Best Use of AI", + title: "Watch Short Film", + team: "V1 · 2025", + href: "https://www.youtube.com/watch?v=Cqe3y_rpYe4", + thumb: "https://img.youtube.com/vi/Cqe3y_rpYe4/hqdefault.jpg", + }, + { + award: "People's Choice", + title: "Watch Short Film", + team: "V1 · 2025", + href: "https://www.youtube.com/watch?v=qfPQ3Kw1img", + thumb: "https://img.youtube.com/vi/qfPQ3Kw1img/hqdefault.jpg", + }, + ].map(({ award, title, team, href, thumb }, i) => ( + + { + (e.currentTarget as HTMLElement).style.borderColor = + "rgba(200,170,80,0.4)"; + const overlay = ( + e.currentTarget as HTMLElement + ).querySelector(".film-card-overlay") as HTMLElement; + if (overlay) overlay.style.opacity = "1"; + }} + onMouseLeave={(e) => { + (e.currentTarget as HTMLElement).style.borderColor = + T.border; + const overlay = ( + e.currentTarget as HTMLElement + ).querySelector(".film-card-overlay") as HTMLElement; + if (overlay) overlay.style.opacity = "0"; + }} + > + {/* YouTube thumbnail as card background */} + {award} + {/* Dark overlay for legibility */} + + + {/* V1 Voices — quote cards (commented out until we have confirmed testimonials) */} +
+ + {/* ── Footer CTA ───────────────────────────────────────────────────── */} +
+ + +
+ for everyone who had a film in their head and finally had no more + reasons not to make it. +
+ + +
+ +
+
+ + {/* ── Responsive overrides ─────────────────────────────────────────── */} + +
+ ); +}; + +export default EventContent; diff --git a/components/Hero.tsx b/components/Hero.tsx index 51212b2..8b5c308 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -1,59 +1,119 @@ -import React, { useRef, useLayoutEffect, useEffect } from 'react'; -import gsap from 'gsap'; -import * as THREE from 'three'; +import React, { useRef, useLayoutEffect, useEffect, useState } from "react"; +import gsap from "gsap"; +import * as THREE from "three"; +import TeleprompterModal from "./TeleprompterModal"; -interface HeroProps { - isDarkMode: boolean; -} +const Hero: React.FC = () => { + const [isTeleprompterOpen, setIsTeleprompterOpen] = useState(false); -const Hero: React.FC = ({ isDarkMode }) => { const containerRef = useRef(null); const canvasRef = useRef(null); const contentRef = useRef(null); - + const textOverlayRef = useRef(null); + const fadeOverlayRef = useRef(null); + const scrollCueRef = useRef(null); + // Tracks first render time for startup projector-fade effect + const startTimeRef = useRef(null); + // Store refs for cleanup and animation const sceneRef = useRef(null); const rendererRef = useRef(null); const cameraRef = useRef(null); const segmentsRef = useRef([]); const scrollPosRef = useRef(0); + const autoScrollSpeedRef = useRef(0.5); + const isUserScrollingRef = useRef(false); + const lastUserScrollTimeRef = useRef(0); + + // Texture cache for performance + const textureLoaderRef = useRef( + new THREE.TextureLoader(), + ); + const textureCacheRef = useRef>(new Map()); + + // Video elements cache for reuse + const videoElementsRef = useRef>(new Map()); + + // Track recently used video URLs across segments to avoid close repetition + const recentVideoUrlsRef = useRef([]); + + // Shared grid line material (one for all segments) + const sharedLineMaterialRef = useRef(null); + // Grid line materials for potential animation + const lineMaterialsRef = useRef([]); + // Videos are deferred until after the initial image load pass completes + const videosEnabledRef = useRef(false); // --- CONFIGURATION --- - // Tuned to match the reference design's density and scale - const TUNNEL_WIDTH = 24; - const TUNNEL_HEIGHT = 16; - const SEGMENT_DEPTH = 6; // Short depth for "square-ish" floor tiles - const NUM_SEGMENTS = 14; - const FOG_DENSITY = 0.02; - - // Grid Divisions - const FLOOR_COLS = 6; // Number of columns on floor/ceiling - const WALL_ROWS = 4; // Number of rows on walls - - // Derived dimensions + const TUNNEL_WIDTH = 37.5; + const TUNNEL_HEIGHT = 25.0; + const SEGMENT_DEPTH = 6; + const NUM_SEGMENTS = 8; + const FOG_DENSITY = 0.022; + + const FLOOR_COLS = 6; + const WALL_ROWS = 4; + const COL_WIDTH = TUNNEL_WIDTH / FLOOR_COLS; const ROW_HEIGHT = TUNNEL_HEIGHT / WALL_ROWS; - // Unsplash images - Mix of portraits, landscapes, and abstracts + // Cloudinary videos + const videoUrls = [ + "https://res.cloudinary.com/dwgjwc96q/video/upload/v1769368553/PXL_20250329_140459146_kqw0rn.mp4", + "https://res.cloudinary.com/dwgjwc96q/video/upload/v1769368527/PXL_20250816_110111789_1_jcfgsa.mp4", + "https://res.cloudinary.com/dwgjwc96q/video/upload/v1769368537/PXL_20250816_111902752_1_wsjey1.mp4", + "https://res.cloudinary.com/dwgjwc96q/video/upload/v1769368545/PXL_20250816_114424016_vuzphm.mp4", + "https://res.cloudinary.com/dwgjwc96q/video/upload/v1769368536/PXL_20250816_120022662_bijv8t.mp4", + "https://res.cloudinary.com/dwgjwc96q/video/upload/v1769368532/PXL_20250816_162740267_1_fa3uxb.mp4", + "https://res.cloudinary.com/dwgjwc96q/video/upload/v1769368550/PXL_20251025_115448039_jgyjr1.mp4", + ]; + const imageUrls = [ - "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=600&fit=crop", // Portrait - "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?q=80&w=600&fit=crop", // Portrait - "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=600&fit=crop", // People - "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=600&fit=crop", // Portrait - "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=600&fit=crop", // Portrait - "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=600&fit=crop", // Portrait - "https://images.unsplash.com/photo-1488161628813-99c974c76949?q=80&w=600&fit=crop", // People - "https://images.unsplash.com/photo-1521119989659-a83eee488058?q=80&w=600&fit=crop", // Abstract/Dark - "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=600&fit=crop", // Tech - "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=600&fit=crop", // Portrait - "https://images.unsplash.com/photo-1664575602276-acd073f104c1?q=80&w=600&fit=crop", // Abstract - "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=600&fit=crop", // Abstract - "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=600&fit=crop", // Portrait - "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=600&fit=crop", // Portrait + "/images-optimized/DSC03927.webp", + "/images-optimized/DSC03932.webp", + "/images-optimized/DSC03983.webp", + "/images-optimized/DSC03985.webp", + "/images-optimized/DSC04276.webp", + "/images-optimized/DSC04376.webp", + "/images-optimized/DSC04911.webp", + "/images-optimized/DSC04928.webp", + "/images-optimized/DSC04931.webp", + "/images-optimized/DSC04934.webp", + "/images-optimized/DSC04936.webp", + "/images-optimized/IMG_0090.webp", + "/images-optimized/IMG_0132.webp", + "/images-optimized/IMG_0164.webp", + "/images-optimized/IMG_0344.webp", + "/images-optimized/IMG_0354.webp", + "/images-optimized/IMG_0381.webp", + "/images-optimized/IMG_0382.webp", + "/images-optimized/IMG_0399.webp", + "/images-optimized/IMG_0403.webp", + "/images-optimized/IMG_0407.webp", + "/images-optimized/IMG_0436.webp", + "/images-optimized/IMG_0445.webp", + "/images-optimized/IMG_0506.webp", + "/images-optimized/IMG_0578.webp", + "/images-optimized/IMG_0659.webp", + "/images-optimized/IMG_0665.webp", + "/images-optimized/IMG_0675.webp", + "/images-optimized/IMG_0687.webp", + "/images-optimized/IMG_0694.webp", + "/images-optimized/IMG_0698.webp", + "/images-optimized/IMG_0743.webp", + "/images-optimized/IMG_0758.webp", + "/images-optimized/IMG_0868.webp", + "/images-optimized/IMG_0871.webp", + "/images-optimized/IMG_0879.webp", + "/images-optimized/IMG_0977.webp", + "/images-optimized/IMG_1248.webp", + "/images-optimized/IMG_1375.webp", + "/images-optimized/PXL_20250329_140247478.webp", + "/images-optimized/PXL_20250329_140938227.MP.webp", + "/images-optimized/PXL_20250329_141611004.webp", ]; - // Helper: Create a segment with grid lines and filled cells - const createSegment = (zPos: number) => { + const createSegment = (zPos: number, fadeDelay = 0, withMedia = true) => { const group = new THREE.Group(); group.position.z = zPos; @@ -61,309 +121,1085 @@ const Hero: React.FC = ({ isDarkMode }) => { const h = TUNNEL_HEIGHT / 2; const d = SEGMENT_DEPTH; - // --- 1. Grid Lines --- - // Start with default light mode colors; these will be updated by useEffect immediately on mount - const lineMaterial = new THREE.LineBasicMaterial({ color: 0xb0b0b0, transparent: true, opacity: 0.5 }); + if (!sharedLineMaterialRef.current) { + sharedLineMaterialRef.current = new THREE.LineBasicMaterial({ + color: 0xc6993a, + transparent: true, + opacity: 0.22, + }); + } + const lineMaterial = sharedLineMaterialRef.current; const lineGeo = new THREE.BufferGeometry(); const vertices: number[] = []; - // A. Longitudinal Lines (Z-axis) - // Floor & Ceiling (varying X) for (let i = 0; i <= FLOOR_COLS; i++) { - const x = -w + (i * COL_WIDTH); - // Floor line + const x = -w + i * COL_WIDTH; vertices.push(x, -h, 0, x, -h, -d); - // Ceiling line vertices.push(x, h, 0, x, h, -d); } - // Walls (varying Y) - excluding top/bottom corners already drawn for (let i = 1; i < WALL_ROWS; i++) { - const y = -h + (i * ROW_HEIGHT); - // Left Wall line + const y = -h + i * ROW_HEIGHT; vertices.push(-w, y, 0, -w, y, -d); - // Right Wall line vertices.push(w, y, 0, w, y, -d); } - // B. Latitudinal Lines (Ring at z=0) - // Floor (Bottom edge) vertices.push(-w, -h, 0, w, -h, 0); - // Ceiling (Top edge) vertices.push(-w, h, 0, w, h, 0); - // Left Wall (Left edge) vertices.push(-w, -h, 0, -w, h, 0); - // Right Wall (Right edge) vertices.push(w, -h, 0, w, h, 0); - lineGeo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); + lineGeo.setAttribute( + "position", + new THREE.Float32BufferAttribute(vertices, 3), + ); const lines = new THREE.LineSegments(lineGeo, lineMaterial); group.add(lines); - // Initial population of images - populateImages(group, w, h, d); + if (withMedia) populateImages(group, w, h, d, fadeDelay); return group; }; - // Helper: Populate images in a segment - const populateImages = (group: THREE.Group, w: number, h: number, d: number) => { - const textureLoader = new THREE.TextureLoader(); + const pickSlots = (count: number, total: number): Set => { + const result = new Set(); + if (count <= 0 || total <= 0) return result; + const clamped = Math.min(count, total); + const bucketSize = total / clamped; + for (let b = 0; b < clamped; b++) { + const start = Math.floor(b * bucketSize); + const end = Math.floor((b + 1) * bucketSize); + result.add(start + Math.floor(Math.random() * (end - start))); + } + return result; + }; + + const populateImages = ( + group: THREE.Group, + w: number, + h: number, + d: number, + fadeDelay = 0, + allowVideos = true, + ) => { const cellMargin = 0.4; + const usedUrls = new Set(); - const addImg = (pos: THREE.Vector3, rot: THREE.Euler, wd: number, ht: number) => { - const url = imageUrls[Math.floor(Math.random() * imageUrls.length)]; - const geom = new THREE.PlaneGeometry(wd - cellMargin, ht - cellMargin); - const mat = new THREE.MeshBasicMaterial({ transparent: true, opacity: 0, side: THREE.DoubleSide }); - textureLoader.load(url, (tex) => { - tex.minFilter = THREE.LinearFilter; - mat.map = tex; - mat.needsUpdate = true; - gsap.to(mat, { opacity: 0.85, duration: 1 }); - }); + let videoOffset = Math.floor(Math.random() * videoUrls.length); + let imageOffset = Math.floor(Math.random() * imageUrls.length); + + const addVideo = ( + pos: THREE.Vector3, + rot: THREE.Euler, + wd: number, + ht: number, + ) => { + const recentGlobal = recentVideoUrlsRef.current; + let url = ""; + + for (let i = 0; i < videoUrls.length; i++) { + const candidate = videoUrls[(videoOffset + i) % videoUrls.length]; + if (!usedUrls.has(candidate) && !recentGlobal.includes(candidate)) { + url = candidate; + videoOffset += i + 1; + break; + } + } + + if (!url) { + for (let i = 0; i < videoUrls.length; i++) { + const candidate = videoUrls[(videoOffset + i) % videoUrls.length]; + if (!usedUrls.has(candidate)) { + url = candidate; + videoOffset += i + 1; + break; + } + } + } + + if (!url) { + url = videoUrls[videoOffset % videoUrls.length]; + videoOffset++; + } + + usedUrls.add(url); + recentVideoUrlsRef.current = [...recentGlobal, url].slice( + -videoUrls.length, + ); + + let video = videoElementsRef.current.get(url); + + if (!video) { + video = document.createElement("video"); + video.src = url; + video.crossOrigin = "anonymous"; + video.loop = true; + video.muted = true; + video.playsInline = true; + video.autoplay = false; + video.preload = "none"; + videoElementsRef.current.set(url, video); + } + + const playVideo = () => { + if (video.readyState >= 2) { + if (video.paused) video.play().catch(() => {}); + } else { + video.addEventListener( + "loadedmetadata", + () => { + const randomStart = Math.random() * (video.duration || 0); + video.currentTime = randomStart; + video.play().catch(() => {}); + }, + { once: true }, + ); + video.load(); + } + }; + + setTimeout(playVideo, fadeDelay * 1000 + Math.random() * 800 + 200); + + const videoTexture = new THREE.VideoTexture(video); + videoTexture.minFilter = THREE.LinearFilter; + videoTexture.magFilter = THREE.LinearFilter; + videoTexture.encoding = THREE.sRGBEncoding; + videoTexture.generateMipmaps = false; + + const videoAspect = + video.videoWidth && video.videoHeight + ? video.videoWidth / video.videoHeight + : 9 / 16; + const cellAspect = (wd - cellMargin) / (ht - cellMargin); + + if (videoAspect < cellAspect) { + const scale = cellAspect / videoAspect; + videoTexture.repeat.set(1, 1 / scale); + videoTexture.offset.set(0, (1 - 1 / scale) / 2); + } else { + const scale = videoAspect / cellAspect; + videoTexture.repeat.set(1 / scale, 1); + videoTexture.offset.set((1 - 1 / scale) / 2, 0); + } + + const mat = new THREE.MeshBasicMaterial({ + map: videoTexture, + transparent: true, + opacity: 0, + side: THREE.FrontSide, + }); + + const geom = new THREE.PlaneGeometry(wd - cellMargin, ht - cellMargin); + const mesh = new THREE.Mesh(geom, mat); + mesh.position.copy(pos); + mesh.rotation.copy(rot); + mesh.name = "slab_video"; + mesh.userData.video = video; + group.add(mesh); + + gsap.to(mat, { opacity: 0.85, duration: 1, delay: fadeDelay }); + }; + + const addImg = ( + pos: THREE.Vector3, + rot: THREE.Euler, + wd: number, + ht: number, + ) => { + const hasVideos = videoUrls.length > 0; + const useVideo = allowVideos && hasVideos && Math.random() > 0.5; + + if (useVideo) { + addVideo(pos, rot, wd, ht); + return; + } + + let url = ""; + for (let i = 0; i < imageUrls.length; i++) { + const candidate = imageUrls[(imageOffset + i) % imageUrls.length]; + if (!usedUrls.has(candidate)) { + url = candidate; + imageOffset += i + 1; + break; + } + } + + if (!url) { + url = imageUrls[imageOffset % imageUrls.length]; + imageOffset++; + } + + usedUrls.add(url); + const mat = new THREE.MeshBasicMaterial({ + transparent: true, + opacity: 0, + side: THREE.FrontSide, + }); + + const createMeshWithTexture = (tex: THREE.Texture) => { + if (!tex.image || !tex.image.width || !tex.image.height) { + const geom = new THREE.PlaneGeometry( + wd - cellMargin, + ht - cellMargin, + ); + const m = new THREE.Mesh(geom, mat); + m.position.copy(pos); + m.rotation.copy(rot); + m.name = "slab_image"; + group.add(m); + return; + } + + const texAspect = tex.image.width / tex.image.height; + const cellAspect = wd / ht; + + let finalWidth = wd - cellMargin; + let finalHeight = ht - cellMargin; + + if (texAspect > cellAspect) { + finalHeight = finalWidth / texAspect; + } else { + finalWidth = finalHeight * texAspect; + } + + const geom = new THREE.PlaneGeometry(finalWidth, finalHeight); const m = new THREE.Mesh(geom, mat); m.position.copy(pos); m.rotation.copy(rot); m.name = "slab_image"; group.add(m); + }; + + const cachedTexture = textureCacheRef.current.get(url); + if (cachedTexture) { + mat.map = cachedTexture; + mat.needsUpdate = true; + createMeshWithTexture(cachedTexture); + gsap.to(mat, { opacity: 0.85, duration: 0.5, delay: fadeDelay }); + } else { + textureLoaderRef.current.load(url, (tex) => { + tex.minFilter = THREE.LinearFilter; + tex.magFilter = THREE.LinearFilter; + tex.generateMipmaps = false; + tex.encoding = THREE.sRGBEncoding; + + textureCacheRef.current.set(url, tex); + + mat.map = tex; + mat.needsUpdate = true; + createMeshWithTexture(tex); + gsap.to(mat, { opacity: 0.85, duration: 1, delay: fadeDelay }); + }); + } }; - // Logic: Iterate slots, but skip if the previous slot was filled. - // Threshold adjusted to 0.80 (20%) to compensate for skipped slots and maintain density. + const isMobile = window.innerWidth < 768; + const floorCount = isMobile ? 2 : 2; + const ceilingCount = isMobile ? 1 : 1; + const wallCount = isMobile ? 1 : 1; + + const floorSlots = pickSlots(floorCount, FLOOR_COLS); + const ceilingSlots = pickSlots(ceilingCount, FLOOR_COLS); + const leftWallSlots = pickSlots(wallCount, WALL_ROWS); + const rightWallSlots = pickSlots(wallCount, WALL_ROWS); - // Floor - let lastFloorIdx = -999; for (let i = 0; i < FLOOR_COLS; i++) { - // Must be at least 2 slots away from last image to avoid adjacency (i > last + 1) - if (i > lastFloorIdx + 1) { - if (Math.random() > 0.80) { - addImg(new THREE.Vector3(-w + i*COL_WIDTH + COL_WIDTH/2, -h, -d/2), new THREE.Euler(-Math.PI/2,0,0), COL_WIDTH, d); - lastFloorIdx = i; - } - } + if (floorSlots.has(i)) { + addImg( + new THREE.Vector3(-w + i * COL_WIDTH + COL_WIDTH / 2, -h, -d / 2), + new THREE.Euler(-Math.PI / 2, 0, 0), + COL_WIDTH, + d, + ); + } } - - // Ceiling - let lastCeilIdx = -999; + for (let i = 0; i < FLOOR_COLS; i++) { - if (i > lastCeilIdx + 1) { - if (Math.random() > 0.88) { // Keep ceiling sparser - addImg(new THREE.Vector3(-w + i*COL_WIDTH + COL_WIDTH/2, h, -d/2), new THREE.Euler(Math.PI/2,0,0), COL_WIDTH, d); - lastCeilIdx = i; - } - } + if (ceilingSlots.has(i)) { + addImg( + new THREE.Vector3(-w + i * COL_WIDTH + COL_WIDTH / 2, h, -d / 2), + new THREE.Euler(Math.PI / 2, 0, 0), + COL_WIDTH, + d, + ); + } } - - // Left Wall - let lastLeftIdx = -999; + for (let i = 0; i < WALL_ROWS; i++) { - if (i > lastLeftIdx + 1) { - if (Math.random() > 0.80) { - addImg(new THREE.Vector3(-w, -h + i*ROW_HEIGHT + ROW_HEIGHT/2, -d/2), new THREE.Euler(0,Math.PI/2,0), d, ROW_HEIGHT); - lastLeftIdx = i; - } - } + if (leftWallSlots.has(i)) { + addImg( + new THREE.Vector3(-w, -h + i * ROW_HEIGHT + ROW_HEIGHT / 2, -d / 2), + new THREE.Euler(0, Math.PI / 2, 0), + d, + ROW_HEIGHT, + ); + } } - - // Right Wall - let lastRightIdx = -999; + for (let i = 0; i < WALL_ROWS; i++) { - if (i > lastRightIdx + 1) { - if (Math.random() > 0.80) { - addImg(new THREE.Vector3(w, -h + i*ROW_HEIGHT + ROW_HEIGHT/2, -d/2), new THREE.Euler(0,-Math.PI/2,0), d, ROW_HEIGHT); - lastRightIdx = i; - } - } + if (rightWallSlots.has(i)) { + addImg( + new THREE.Vector3(w, -h + i * ROW_HEIGHT + ROW_HEIGHT / 2, -d / 2), + new THREE.Euler(0, -Math.PI / 2, 0), + d, + ROW_HEIGHT, + ); + } } - } + }; // --- INITIAL SETUP --- useEffect(() => { if (!canvasRef.current || !containerRef.current) return; - // THREE JS SETUP + if ("scrollRestoration" in history) history.scrollRestoration = "manual"; + window.scrollTo(0, 0); + const scene = new THREE.Scene(); sceneRef.current = scene; + // Pure black background — cinematic dark tunnel + scene.background = new THREE.Color(0x000000); + scene.fog = new THREE.FogExp2(0x000000, FOG_DENSITY); const width = window.innerWidth; const height = window.innerHeight; - const camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 1000); - camera.position.set(0, 0, 0); + const camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 100); + camera.position.set(0, 0, 0); cameraRef.current = camera; - const renderer = new THREE.WebGLRenderer({ - canvas: canvasRef.current, - antialias: true, + const updateResponsiveSceneScale = (aspect: number) => { + const scaleX = THREE.MathUtils.clamp(aspect * 1.2, 0.55, 1); + scene.scale.set(scaleX, 1, 1); + }; + updateResponsiveSceneScale(width / height); + + const renderer = new THREE.WebGLRenderer({ + canvas: canvasRef.current, + antialias: false, alpha: false, - powerPreference: "high-performance" + powerPreference: "high-performance", }); renderer.setSize(width, height); - renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); + renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5)); rendererRef.current = renderer; - // Generate segments const segments: THREE.Group[] = []; + + const collectLineMaterials = () => { + lineMaterialsRef.current = sharedLineMaterialRef.current + ? [sharedLineMaterialRef.current] + : []; + }; + + // Phase 1: Build ALL grid shells synchronously (no media). + // The first 2 segments (nearest to camera) get images immediately + // (~8-10 small WebP images — fast, no videos, no jank). + const IMMEDIATE_SEGMENTS = 1; for (let i = 0; i < NUM_SEGMENTS; i++) { - const z = -i * SEGMENT_DEPTH; - const segment = createSegment(z); - scene.add(segment); - segments.push(segment); + const withMedia = i < IMMEDIATE_SEGMENTS; + const seg = createSegment(-i * SEGMENT_DEPTH, 0, false); + scene.add(seg); + segments.push(seg); + if (withMedia) { + populateImages( + seg, + TUNNEL_WIDTH / 2, + TUNNEL_HEIGHT / 2, + SEGMENT_DEPTH, + 0, + false, + ); + } } segmentsRef.current = segments; + collectLineMaterials(); + + // Phase 2: Fill remaining segments after the startup fade lifts, + // one at a time with staggered delays (images only — no videos yet). + const MEDIA_START_DELAY = 1200; + const MEDIA_STAGGER = 200; + const deferredTimers: ReturnType[] = []; + + for (let i = IMMEDIATE_SEGMENTS; i < segments.length; i++) { + const timer = setTimeout( + () => { + const seg = segments[i]; + const hasMedia = seg.children.some( + (c) => c.name === "slab_image" || c.name === "slab_video", + ); + if (!hasMedia) { + populateImages( + seg, + TUNNEL_WIDTH / 2, + TUNNEL_HEIGHT / 2, + SEGMENT_DEPTH, + 0.4, + false, + ); + } + }, + MEDIA_START_DELAY + (i - IMMEDIATE_SEGMENTS) * MEDIA_STAGGER, + ); + deferredTimers.push(timer); + } + + // Phase 3: After all initial images are placed, enable videos. + // Future recycled segments will use the normal image/video mix. + const videoEnableTimer = setTimeout( + () => { + videosEnabledRef.current = true; + }, + MEDIA_START_DELAY + + (segments.length - IMMEDIATE_SEGMENTS) * MEDIA_STAGGER + + 500, + ); + deferredTimers.push(videoEnableTimer); // Animation Loop let frameId: number; + let cachedVh = window.innerHeight; + let cachedScrollY = window.scrollY; + let lastFadeOpacity = -1; + let lastScrollCueOp = -1; + let lastTextOp = -1; + let videoThrottleCounter = 0; + + const onScrollCapture = () => { + cachedScrollY = window.scrollY; + }; + const onResizeCapture = () => { + cachedVh = window.innerHeight; + }; + window.addEventListener("scroll", onScrollCapture, { passive: true }); + window.addEventListener("resize", onResizeCapture); + + const disposeSegmentSlabs = (segment: THREE.Group) => { + for (let i = segment.children.length - 1; i >= 0; i--) { + const c = segment.children[i]; + if (c.name !== "slab_image" && c.name !== "slab_video") continue; + if ((c as THREE.Mesh).userData?.video) { + ((c as THREE.Mesh).userData.video as HTMLVideoElement).pause(); + } + segment.remove(c); + if (c instanceof THREE.Mesh) { + c.geometry.dispose(); + if (c.material.map) c.material.map.dispose(); + c.material.dispose(); + } + } + }; + const animate = () => { frameId = requestAnimationFrame(animate); - if (!cameraRef.current || !sceneRef.current || !rendererRef.current) return; + if (!cameraRef.current || !sceneRef.current || !rendererRef.current) + return; + + const vh = cachedVh; + const scrollY = cachedScrollY; - const targetZ = -scrollPosRef.current * 0.05; + // ── Startup projector fade ───────────────────────────────────────── + if (startTimeRef.current === null) startTimeRef.current = Date.now(); + const elapsed = Date.now() - startTimeRef.current; + const startupOp = Math.max(0, 1 - elapsed / 900); + + // ── Scroll-driven blackout ───────────────────────────────────────── + const scrollBlackout = Math.max( + 0, + Math.min(1, (scrollY - vh * 0.52) / (vh * 0.3)), + ); + + const totalBlackout = Math.max(startupOp, scrollBlackout); + + // Only touch DOM when value actually changed (avoid style recalc) + const roundedFade = Math.round(totalBlackout * 1000) / 1000; + if (roundedFade !== lastFadeOpacity) { + lastFadeOpacity = roundedFade; + if (fadeOverlayRef.current) { + fadeOverlayRef.current.style.opacity = String(roundedFade); + } + } + + // ── Skip Three.js render when hero is fully blacked out ──────────── + const heroFullyHidden = scrollBlackout >= 1; + + // ── Scroll cue ──────────────────────────────────────────────────── + const scrollCueOp = + Math.round(Math.max(0, 1 - scrollY / (vh * 0.12)) * 100) / 100; + if (scrollCueOp !== lastScrollCueOp) { + lastScrollCueOp = scrollCueOp; + if (scrollCueRef.current) { + scrollCueRef.current.style.opacity = String(scrollCueOp); + } + } + + // ── Auto-scroll ──────────────────────────────────────────────────── + const now = Date.now(); + const timeSinceLastScroll = now - lastUserScrollTimeRef.current; + if ( + timeSinceLastScroll > 100 && + !isUserScrollingRef.current && + !heroFullyHidden + ) { + scrollPosRef.current += autoScrollSpeedRef.current; + } + + const targetZ = -(scrollPosRef.current + scrollY) * 0.05; const currentZ = cameraRef.current.position.z; - cameraRef.current.position.z += (targetZ - currentZ) * 0.1; + const delta = targetZ - currentZ; + if (Math.abs(delta) > 0.001) { + cameraRef.current.position.z += delta * 0.1; + } + + // ── Scroll-driven text fade ──────────────────────────────────────── + const textOp = + Math.round( + Math.max(0, Math.min(1, 1 - (scrollY - vh * 0.15) / (vh * 0.27))) * + 100, + ) / 100; + if (textOp !== lastTextOp) { + lastTextOp = textOp; + if (textOverlayRef.current) { + textOverlayRef.current.style.opacity = String(textOp); + } + if (contentRef.current) { + contentRef.current.style.pointerEvents = + textOp < 0.05 ? "none" : "auto"; + } + } + + // ── Skip expensive Three.js work when fully hidden ───────────────── + if (heroFullyHidden) return; - // Bidirectional Infinite Logic + // ── Pause/resume videos based on distance (throttled, not every frame) + videoThrottleCounter++; + if (videoThrottleCounter >= 30) { + videoThrottleCounter = 0; + const camZNow = cameraRef.current.position.z; + const videoVisibleRange = SEGMENT_DEPTH * 6; + for (let si = 0; si < segmentsRef.current.length; si++) { + const segment = segmentsRef.current[si]; + const dist = Math.abs(segment.position.z - camZNow); + const children = segment.children; + for (let ci = 0; ci < children.length; ci++) { + const c = children[ci]; + if ((c as THREE.Mesh).userData?.video) { + const v = (c as THREE.Mesh).userData.video as HTMLVideoElement; + if (dist > videoVisibleRange) { + if (!v.paused) v.pause(); + } else { + if (v.paused && v.src) v.play().catch(() => {}); + } + } + } + } + } + + // ── Bidirectional infinite segment recycling ─────────────────────── const tunnelLength = NUM_SEGMENTS * SEGMENT_DEPTH; - const camZ = cameraRef.current.position.z; - - segmentsRef.current.forEach((segment) => { - // 1. Moving Forward + const segs = segmentsRef.current; + + for (let si = 0; si < segs.length; si++) { + const segment = segs[si]; if (segment.position.z > camZ + SEGMENT_DEPTH) { - let minZ = 0; - segmentsRef.current.forEach(s => minZ = Math.min(minZ, s.position.z)); - segment.position.z = minZ - SEGMENT_DEPTH; - - // Re-populate - const toRemove: THREE.Object3D[] = []; - segment.traverse((c) => { if (c.name === 'slab_image') toRemove.push(c); }); - toRemove.forEach(c => { - segment.remove(c); - if (c instanceof THREE.Mesh) { - c.geometry.dispose(); - if (c.material.map) c.material.map.dispose(); - c.material.dispose(); - } - }); - const w = TUNNEL_WIDTH / 2; const h = TUNNEL_HEIGHT / 2; const d = SEGMENT_DEPTH; - populateImages(segment, w, h, d); + let minZ = 0; + for (let j = 0; j < segs.length; j++) { + if (segs[j].position.z < minZ) minZ = segs[j].position.z; + } + segment.position.z = minZ - SEGMENT_DEPTH; + disposeSegmentSlabs(segment); + populateImages( + segment, + TUNNEL_WIDTH / 2, + TUNNEL_HEIGHT / 2, + SEGMENT_DEPTH, + 0, + videosEnabledRef.current, + ); + } else if (segment.position.z < camZ - tunnelLength - SEGMENT_DEPTH) { + let maxZ = -999999; + for (let j = 0; j < segs.length; j++) { + if (segs[j].position.z > maxZ) maxZ = segs[j].position.z; + } + segment.position.z = maxZ + SEGMENT_DEPTH; + disposeSegmentSlabs(segment); + populateImages( + segment, + TUNNEL_WIDTH / 2, + TUNNEL_HEIGHT / 2, + SEGMENT_DEPTH, + 0, + videosEnabledRef.current, + ); } - - // 2. Moving Backward - if (segment.position.z < camZ - tunnelLength - SEGMENT_DEPTH) { - let maxZ = -999999; - segmentsRef.current.forEach(s => maxZ = Math.max(maxZ, s.position.z)); - segment.position.z = maxZ + SEGMENT_DEPTH; - - // Re-populate - const toRemove: THREE.Object3D[] = []; - segment.traverse((c) => { if (c.name === 'slab_image') toRemove.push(c); }); - toRemove.forEach(c => { - segment.remove(c); - if (c instanceof THREE.Mesh) { - c.geometry.dispose(); - if (c.material.map) c.material.map.dispose(); - c.material.dispose(); - } - }); - const w = TUNNEL_WIDTH / 2; const h = TUNNEL_HEIGHT / 2; const d = SEGMENT_DEPTH; - populateImages(segment, w, h, d); - } - }); + } rendererRef.current.render(sceneRef.current, cameraRef.current); }; + animate(); - const onScroll = () => { scrollPosRef.current = window.scrollY; }; - window.addEventListener('scroll', onScroll); + const onScroll = () => { + isUserScrollingRef.current = true; + lastUserScrollTimeRef.current = Date.now(); + clearTimeout((window as any).scrollTimeout); + (window as any).scrollTimeout = setTimeout(() => { + isUserScrollingRef.current = false; + }, 150); + }; + window.addEventListener("scroll", onScroll, { passive: true }); + const handleResize = () => { const w = window.innerWidth; const h = window.innerHeight; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); + updateResponsiveSceneScale(w / h); }; - window.addEventListener('resize', handleResize); + window.addEventListener("resize", handleResize); return () => { - window.removeEventListener('scroll', onScroll); - window.removeEventListener('resize', handleResize); + deferredTimers.forEach(clearTimeout); + window.removeEventListener("scroll", onScroll); + window.removeEventListener("scroll", onScrollCapture); + window.removeEventListener("resize", handleResize); + window.removeEventListener("resize", onResizeCapture); cancelAnimationFrame(frameId); + if ((window as any).scrollTimeout) + clearTimeout((window as any).scrollTimeout); renderer.dispose(); + textureCacheRef.current.forEach((texture) => texture.dispose()); + textureCacheRef.current.clear(); + videoElementsRef.current.forEach((video) => { + video.pause(); + video.src = ""; + video.load(); + }); + videoElementsRef.current.clear(); }; - }, []); // Run once on mount - - // --- THEME UPDATE EFFECT --- - useEffect(() => { - if (!sceneRef.current) return; - - // Define theme colors - const bgHex = isDarkMode ? 0x050505 : 0xffffff; - const fogHex = isDarkMode ? 0x050505 : 0xffffff; - - // Light mode: Light Grey lines (0xb0b0b0), higher opacity - // Dark mode: Medium Grey lines (0x555555) for visibility, slightly adjusted opacity - const lineHex = isDarkMode ? 0x555555 : 0xb0b0b0; - const lineOp = isDarkMode ? 0.35 : 0.5; - - // Apply to scene - sceneRef.current.background = new THREE.Color(bgHex); - if (sceneRef.current.fog) { - (sceneRef.current.fog as THREE.FogExp2).color.setHex(fogHex); - } - - // Apply to existing grid lines - segmentsRef.current.forEach(segment => { - segment.children.forEach(child => { - if (child instanceof THREE.LineSegments) { - const mat = child.material as THREE.LineBasicMaterial; - mat.color.setHex(lineHex); - mat.opacity = lineOp; - mat.needsUpdate = true; - } - }); - }); - }, [isDarkMode]); + }, []); - // Text Entrance Animation + // Text entrance — delayed to let the startup fade reveal the scene first useLayoutEffect(() => { const ctx = gsap.context(() => { - gsap.fromTo(contentRef.current, - { opacity: 0, y: 30, scale: 0.95 }, - { opacity: 1, y: 0, scale: 1, duration: 1.2, ease: "power3.out", delay: 0.5 } + gsap.fromTo( + contentRef.current, + { opacity: 0, y: 18, scale: 0.98 }, + { + opacity: 1, + y: 0, + scale: 1, + duration: 1.0, + ease: "power3.out", + delay: 0.35, + }, ); }, containerRef); return () => ctx.revert(); }, []); + const scrollToInfoSections = () => { + const target = document.getElementById("cinematic-transition"); + if (!target) return; + const startY = window.scrollY; + const targetY = target.getBoundingClientRect().top + window.scrollY - 24; + const distance = targetY - startY; + const duration = 1400; + const start = performance.now(); + const easeInOutCubic = (t: number) => + t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; + + const step = (now: number) => { + const elapsed = now - start; + const p = Math.min(elapsed / duration, 1); + const eased = easeInOutCubic(p); + window.scrollTo(0, startY + distance * eased); + if (p < 1) requestAnimationFrame(step); + }; + + requestAnimationFrame(step); + }; + return ( -
-
- -
+ <> + + +
+
+ {/* Three.js canvas */} +
+ +
+ + {/* Cinema-style fade overlay — startup projector effect + scroll blackout. + z:15 so it covers both canvas and text overlay during startup. */} +
+ + {/* Hero text + CTAs */} +
+
+ {/* Presented by tag */} +
+ Give(a)Go{" "} + × Napkin +
+ +

+ AI Filmmaking + + Hackathon{" "} + + v2 + + +

+ + + + setIsTeleprompterOpen(false)} + isDarkMode={false} + /> +
+
+ + {/* Sponsor strip — z:20 keeps it above the startup fade overlay (z:15) */} +
+ {/* Top fade */} +
+ {/* Bar */} +
+ {/* Label */} +
+ Supported by +
+ + {(() => { + const logos: { + src: string; + alt: string; + filter?: string; + scale: number; + }[] = [ + { + src: "/partners/elevenlabs-logo-white.svg", + alt: "ElevenLabs", + scale: 1, + }, + { src: "/partners/wan.png", alt: "Wan", scale: 1 }, + { + src: "/partners/fal-ai.svg", + alt: "fal.ai", + filter: "brightness(0) invert(1)", + scale: 1, + }, + { + src: "/partners/wolfpack-digital-light.png", + alt: "Wolfpack Digital", + scale: 1.15, + }, + { src: "/partners/redbull.png", alt: "Red Bull", scale: 1 }, + { + src: "/partners/dogpatch-labs.png", + alt: "Dogpatch Labs", + filter: "brightness(0) invert(1)", + scale: 1, + }, + ]; + const LogoCell = ({ + s, + borderRight, + }: { + s: (typeof logos)[0]; + borderRight: boolean; + }) => ( +
+ {s.alt} +
+ ); + return ( + <> + {/* Desktop: single row of logos */} +
+ {logos.map((s, i) => ( + + ))} +
+ {/* Mobile: auto-scrolling marquee */} +
+ {/* Left fade mask */} +
+ {/* Right fade mask */} +
+ {/* Scrolling track — logos duplicated for seamless loop */} +
+ {[...logos, ...logos].map((s, i) => ( +
+ {s.alt} +
+ ))} +
+
+ + ); + })()} +
+
-
-
- -

- Clone yourself. -

- -

- Build the digital version of you to scale your expertise and availability, infinitely -

- -
- - + {/* Scroll cue — fades once user starts scrolling */} +
+ + Scroll + +
-
+ ); }; -export default Hero; \ No newline at end of file +export default Hero; diff --git a/components/LumaModal.tsx b/components/LumaModal.tsx new file mode 100644 index 0000000..9dbe673 --- /dev/null +++ b/components/LumaModal.tsx @@ -0,0 +1,89 @@ +import React, { useEffect } from "react"; + +interface LumaModalProps { + isOpen: boolean; + onClose: () => void; +} + +const LumaModal: React.FC = ({ isOpen, onClose }) => { + useEffect(() => { + if (!isOpen) return; + const handleKey = (e: KeyboardEvent) => { + if (e.key === "Escape") onClose(); + }; + document.body.style.overflow = "hidden"; + window.addEventListener("keydown", handleKey); + return () => { + document.body.style.overflow = ""; + window.removeEventListener("keydown", handleKey); + }; + }, [isOpen, onClose]); + + if (!isOpen) return null; + + return ( +
+
e.stopPropagation()} + > + +