"use client"; import React, { useMemo, useState } from "react"; import { motion } from "framer-motion"; import { Canvas } from "@react-three/fiber"; import { SpotLight } from "@react-three/drei"; import { cn } from "@/lib/utils"; const METAL_NOISE = 'url("data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%221.5%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E")'; const GRAIN_NOISE = 'url("data:image/svg+xml,%3Csvg viewBox=%220 0 256 256%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22g%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23g)%22/%3E%3C/svg%3E")'; type RoomProps = { backWall?: { tl: [number, number]; tr: [number, number]; br: [number, number]; bl: [number, number] }; lightsOn?: boolean; intensity?: number; lightColor?: string; spots?: number[]; vignette?: number; isFlickering?: boolean; className?: string; }; function Room({ backWall = { tl: [22, 10], tr: [78, 10], br: [78, 70], bl: [22, 70], }, lightsOn = true, intensity = 1, lightColor = "230,240,255", spots = [35, 50, 65], vignette = 0.55, isFlickering = false, className = "", }: RoomProps) { const { tl, tr, br, bl } = backWall; const poly = useMemo( () => (pts: readonly (readonly [number, number])[]) => `polygon(${pts.map(([x, y]) => `${x}% ${y}%`).join(", ")})`, [] ); const EASE = "cubic-bezier(0.16, 1, 0.3, 1)"; return (

`radial-gradient(ellipse 25% 40% at ${x}% 68%, rgba(${lightColor},0.15) 0%, transparent 70%)`).join(", ") }} />

`radial-gradient(ellipse 35% 30% at ${x}% 80%, rgba(${lightColor},0.06) 0%, transparent 60%)`).join(", ") }} />

{spots.map((pos, i) => (

))}

{[35, 50, 65].map((pos, i) => (

))}

); } export const VolumetricStudio = ({ className, children }: { className?: string; children?: React.ReactNode; }) => { const [lightsOn, setLightsOn] = useState(false); const [isFlickering, setIsFlickering] = useState(true); React.useEffect(() => { let mounted = true; const runFlicker = async () => { const sleep = (ms: number) => new Promise(r => setTimeout(r, ms)); await sleep(600); if (!mounted) return; setLightsOn(true); await sleep(100); setLightsOn(false); await sleep(300); setLightsOn(true); await sleep(50); setLightsOn(false); await sleep(200); setLightsOn(true); await sleep(40); setLightsOn(false); await sleep(60); setLightsOn(true); await sleep(40); setLightsOn(false); await sleep(400); if (!mounted) return; setIsFlickering(false); setLightsOn(true); }; runFlicker(); return () => { mounted = false; }; }, []); return (

{children}

); };

Volumetric Studio

API Reference