import React, { useEffect, useRef, useState } from 'react'; import { motion, useInView, useScroll, useTransform, AnimatePresence } from 'framer-motion'; import { Menu, X, ArrowRight, Clapperboard, Camera, Wand2, SlidersHorizontal, Quote, Sparkles, Film, } from 'lucide-react'; const navLinks = ['Work', 'Technology', 'Pricing', 'Studio']; const heroImage = 'https://images.unsplash.com/photo-1478720568477-152d9b164e26?w=1600&auto=format&fit=crop'; const heroVideo = 'https://www.snapder.com/templates/media/lumen-hero.mp4'; const galleryImages = [ { src: 'https://images.unsplash.com/photo-1478720568477-152d9b164e26?w=900&auto=format&fit=crop', caption: 'Rendered — dusk exterior, tracking shot', speed: 60, }, { src: 'https://images.unsplash.com/photo-1440404653325-ab127d49abc1?w=900&auto=format&fit=crop', caption: 'Rendered — practical lighting, close coverage', speed: -40, }, { src: 'https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?w=900&auto=format&fit=crop', caption: 'Rendered — handheld, low key', speed: 90, }, { src: 'https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?w=900&auto=format&fit=crop', caption: 'Rendered — wide establishing, golden hour', speed: -70, }, ]; const pinnedFeatures = [ { key: 'scene', icon: Wand2, title: 'Prompt to Scene', body: 'Write a paragraph. Lumen blocks the actors, sets the lighting, and frames the shot — a fully directed scene, not a slideshow of images.', }, { key: 'camera', icon: Camera, title: 'Directed Camera Motion', body: 'Call out a dolly-in, a slow pan, a rack focus — in plain language. Lumen moves the camera the way a director would, not a random drift.', }, { key: 'color', icon: SlidersHorizontal, title: 'Studio-Grade Color', body: 'Every render is graded to match a reference still you choose, so the look is consistent from the first frame to the last cut.', }, ]; const stats = [ { value: 12400, suffix: '+', label: 'scenes rendered to date' }, { value: 40, suffix: '', label: 'countries with an active studio' }, { value: 98, suffix: '%', label: 'shots delivered without a manual retouch' }, ]; const fadeUp = { hidden: { opacity: 0, y: 26 }, visible: (i = 0) => ({ opacity: 1, y: 0, transition: { duration: 0.6, delay: i * 0.09, ease: [0.16, 1, 0.3, 1] }, }), }; function useCountUp(target, startWhenInView, duration = 1600) { const [value, setValue] = useState(0); useEffect(() => { if (!startWhenInView) return; let raf; const start = performance.now(); const tick = (now) => { const p = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setValue(Math.round(target * eased)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [startWhenInView, target, duration]); return value; } function Navbar() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return (

LUMEN

{navLinks.map((l) => ( {l} ))}

{open && (

{navLinks.map((l) => ( {l} ))}

)}

); } function CinematicHero() { const wrapRef = useRef(null); const { scrollYProgress } = useScroll({ target: wrapRef, offset: ['start start', 'end start'] }); const textScale = useTransform(scrollYProgress, [0, 0.85], [1, 26]); const textOpacity = useTransform(scrollYProgress, [0, 0.6, 0.85], [1, 1, 0]); const imageReveal = useTransform(scrollYProgress, [0.15, 0.85], [0, 1]); const overlayFade = useTransform(scrollYProgress, [0.6, 0.9], [1, 0]); const contentFade = useTransform(scrollYProgress, [0, 0.15], [1, 0]); const contentY = useTransform(scrollYProgress, [0, 0.2], [0, -40]); return (

); } function GalleryColumn({ image }) { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] }); const y = useTransform(scrollYProgress, [0, 1], [image.speed, -image.speed]); return (

{image.caption}

); } function ParallaxGallery() { return (

Every still, a decision

Nothing in frame by accident.

{galleryImages.map((img) => ( ))}

); } const pinnedRanges = [ [0, 0.08, 0.28, 0.36], [0.32, 0.4, 0.6, 0.68], [0.64, 0.72, 0.92, 1], ]; function PinnedCard({ feature, range, isLast, scrollYProgress }) { const [inStart, inEnd, outStart, outEnd] = range; const opacity = useTransform( scrollYProgress, [inStart, inEnd, outStart, outEnd], [0, 1, 1, isLast ? 1 : 0] ); const y = useTransform(scrollYProgress, [inStart, inEnd], [36, 0]); const Icon = feature.icon; return (

{feature.title}

{feature.body}

); } function PinnedFeatures() { const wrapRef = useRef(null); const { scrollYProgress } = useScroll({ target: wrapRef, offset: ['start start', 'end end'] }); return (

How a scene gets made

Three passes.
One directed shot.

{pinnedFeatures.map((f, i) => ( ))}

); } function StatCard({ stat, index, inView }) { const value = useCountUp(stat.value, inView); return (

{value.toLocaleString()} {stat.suffix}

{stat.label}

); } function StatsStrip() { const ref = useRef(null); const inView = useInView(ref, { once: true, margin: '-60px' }); return (

{stats.map((s, i) => ( ))}

); } function Testimonial() { return (

"We used Lumen to previs an entire third act before a single camera was booked. The coverage matched what we shot two weeks later, almost cut for cut."

Mina Torres

Director of Photography, Northlight Films

); } function ClosingCTA() { return (

Your next scene is a prompt away.

Request access and direct your first shot this week.

); } function Footer() { return ( ); } export default function App() { return (

); }

Nothing in frame by accident.

{feature.title}

Three passes. One directed shot.

Your next scene is a prompt away.

Three passes.
One directed shot.