4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T153e,"use client" import { useFrame } from "@react-three/fiber" import { type ComponentRef, type RefObject, useLayoutEffect, useRef, useState } from "react" import { type Mesh, SRGBColorSpace, type Texture, VideoTexture } from "three" import { useDomPlane } from "../../hooks/use-dom-plane" import { type Pointer, usePointerUv } from "../../hooks/use-pointer-uv" import { applyUvCrop, computeObjectFit } from "../../lib/object-fit" import { webglTeleport } from "../webgl-portal/webgl-portal" export type { Pointer } type WebglVideoProps = { src: string material?: (map: Texture, pointer: Pointer) => React.ReactNode webglEnabled?: boolean segments?: number zIndex?: number /** * Re-measures the DOM rect every frame so the plane follows animated parents (motion, parallax). * Costs one layout read per frame, so only enable it when needed. */ autoReflow?: boolean } & Omit, "children" | "src"> type PlaneProps = { el: RefObject segments: number material?: (map: Texture, pointer: Pointer) => React.ReactNode pointer: Pointer uvFit: RefObject<{ x: number; y: number }> zIndex: number autoReflow: boolean } function Plane({ el, segments, material, pointer, uvFit, zIndex, autoReflow }: PlaneProps) { const mesh = useRef(null) const [texture, setTexture] = useState(null) const fitScale = useRef({ x: 1, y: 1 }) const measureBounds = useDomPlane(el, mesh, { autoReflow, fitScale }) useLayoutEffect(() => { const video = el.current if (!video) return /* * Build the texture from the DOM