3D SaaS Onboarding & Feature Tours

Write a React Three Fiber component that renders a realistic 3D browser window mockup for a SaaS product tour. Requirements: (1) Browser chrome: a rounded rectangle frame (use Shape + ExtrudeGeometry, depth: 0.08) with a top bar containing three colored circles (close/minimize/maximize — red, yellow, green spheres) and a URL bar (a white rounded rectangle with a Drei Text label). Material: MeshStandardMaterial with a dark gray color (#1E1E2E) and slight metalness: 0.3, roughness: 0.7. (2) Viewport: a PlaneGeometry(aspect_width, aspect_height) inset into the browser frame. Accept a prop screenshotTexture: THREE.Texture — apply as map on MeshBasicMaterial. Add a subtle inner shadow by rendering a slightly smaller dark plane behind the screenshot. (3) Screen glow: a SpotLight positioned in front of the screen, pointing at the viewport, with a soft cyan color (#00E5FF), intensity: 0.3, angle: 0.4, penumbra: 0.8. (4) Drop shadow: a ContactShadows component below the browser window. (5) Float animation: wrap in Drei <Float speed={0.8} rotationIntensity={0.1} floatIntensity={0.3}> for a subtle idle animation. (6) Props: screenshotUrl: string (load with useTexture), width: number (default 4), aspectRatio: number (default 16/9), title: string (shown in URL bar). (7) Export as BrowserMockup3D. Full TypeScript.

Write a React Three Fiber component that reveals annotated feature callouts on a 3D SaaS UI mockup as the user scrolls. Requirements: (1) Use @react-three/drei ScrollControls with pages={3} and damping={0.2}. Inside, use useScroll() to get scroll offset. (2) Three feature annotations at scroll offsets 0.2, 0.5, and 0.8. Each annotation: (a) A world-space anchor point on the 3D browser mockup (e.g., a button, a chart, a nav item). (b) An animated line from the anchor to a label position: use a Line2 component, animate its dashOffset from 1→0 using useFrame when the annotation becomes active (within scroll range ±0.15). This creates a "drawing" line effect. (c) A Drei Html panel at the label position: styled card with feature title, 1-sentence description, and a "Learn more" link. Animate the panel opacity and translateY from hidden to visible with CSS transition when active. (3) Camera: useFrame reads scroll.offset, lerps camera.position along a predefined path: [0,0,8] → [2,1,5] → [-1,0.5,4] → [0,0,6]. (4) Active annotation: when a scroll range is active, spring-animate a highlight ring (TorusGeometry, thin) around the anchor point on the mockup. (5) Completion: at scroll offset > 0.9, trigger an onTourComplete() callback and show a CTA panel. Full TypeScript.