polish(remotion): shiny titanium finish on AppShowcase3D phone

Polished-metal look: low-roughness (0.15) titanium + contrasty studio Environment
(light bases + bright softbox strips) so the rounded edges catch hot reflection
streaks that sweep as the phone rotates; shinier side buttons. Re-rendered all
aspects + preview, redeployed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

services/remotion/src/compositions/AppShowcase3D.tsx

@@ -151,7 +151,7 @@ const Phone: React.FC<{ screen: THREE.Texture; accent: string }> = ({ screen, ac
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const W = 2.02, H = 4.34, D = 0.26, rim = 0.05, bezel = 0.05;
-  const TITANIUM = "#bcb9b1"; // warm natural titanium
+  const TITANIUM = "#c6c3ba"; // warm natural titanium
 
   const enter = spring({ frame: frame - 4, fps, config: { damping: 14, stiffness: 70, mass: 0.9 } });
   const scale = interpolate(enter, [0, 1], [0.7, 1]);
@@ -165,7 +165,7 @@ const Phone: React.FC<{ screen: THREE.Texture; accent: string }> = ({ screen, ac
     <group position={[0, floatY, 0]} rotation={[tiltX, sway, 0]} scale={scale}>
       {/* titanium frame */}
       <RoundedBox args={[W, H, D]} radius={0.33} smoothness={10} castShadow>
-        <meshStandardMaterial color={TITANIUM} metalness={1} roughness={0.42} envMapIntensity={1.6} />
+        <meshStandardMaterial color={TITANIUM} metalness={1} roughness={0.15} envMapIntensity={2.3} />
       </RoundedBox>
       {/* glossy black glass front — edge-to-edge minus a thin titanium rim */}
       <RoundedBox args={[W - rim * 2, H - rim * 2, 0.06]} radius={0.29} smoothness={10} position={[0, 0, D / 2 - 0.028]}>
@@ -184,9 +184,9 @@ const Phone: React.FC<{ screen: THREE.Texture; accent: string }> = ({ screen, ac
         </mesh>
       </group>
       {/* side buttons (titanium) */}
-      <mesh position={[W / 2 + 0.006, 0.6, 0]}><boxGeometry args={[0.035, 0.52, 0.13]} /><meshStandardMaterial color={btn} metalness={1} roughness={0.45} /></mesh>
+      <mesh position={[W / 2 + 0.006, 0.6, 0]}><boxGeometry args={[0.035, 0.52, 0.13]} /><meshStandardMaterial color={btn} metalness={1} roughness={0.3} /></mesh>
-      <mesh position={[W / 2 + 0.006, -0.05, 0]}><boxGeometry args={[0.035, 0.3, 0.13]} /><meshStandardMaterial color={btn} metalness={1} roughness={0.45} /></mesh>
+      <mesh position={[W / 2 + 0.006, -0.05, 0]}><boxGeometry args={[0.035, 0.3, 0.13]} /><meshStandardMaterial color={btn} metalness={1} roughness={0.3} /></mesh>
-      <mesh position={[-W / 2 - 0.006, 0.75, 0]}><boxGeometry args={[0.035, 0.36, 0.13]} /><meshStandardMaterial color={btn} metalness={1} roughness={0.45} /></mesh>
+      <mesh position={[-W / 2 - 0.006, 0.75, 0]}><boxGeometry args={[0.035, 0.36, 0.13]} /><meshStandardMaterial color={btn} metalness={1} roughness={0.3} /></mesh>
     </group>
   );
 };
@@ -197,17 +197,24 @@ const Scene: React.FC<{ accent: string; secondary: string; phoneX: number; phone
   return (
     <group rotation={[0, orbit, 0]}>
       {/* light, clean keynote studio */}
-      <ambientLight intensity={0.8} />
+      <ambientLight intensity={0.7} />
       {/* key light (no harsh cast shadow — ContactShadows grounds the phone instead) */}
-      <directionalLight position={[3, 6, 6]} intensity={2.4} color="#ffffff" />
+      <directionalLight position={[3, 6, 6]} intensity={2.2} color="#ffffff" />
-      <directionalLight position={[-5, 3, 2]} intensity={0.8} color={mixHex("#ffffff", secondary, 0.3)} />
+      <directionalLight position={[-5, 3, 2]} intensity={0.7} color={mixHex("#ffffff", secondary, 0.3)} />
-      {/* sharp rim from behind for a metallic edge highlight */}
+      {/* sharp rim from behind for a hot metallic edge highlight */}
-      <spotLight position={[-3, 5, -4]} angle={0.6} penumbra={0.8} intensity={120} color="#ffffff" />
+      <spotLight position={[-3.5, 5, -3]} angle={0.6} penumbra={0.7} intensity={180} color="#ffffff" />
-      <pointLight position={[4, -1, 4]} intensity={10} color={mixHex("#ffffff", accent, 0.4)} />
+      <pointLight position={[4, -1, 4]} intensity={12} color={mixHex("#ffffff", accent, 0.4)} />
-      <Environment resolution={256}>
+      {/* Contrasty studio env → bright softbox STREAKS on the titanium (the "shine").
-        <Lightformer intensity={2} position={[0, 4, 4]} scale={[12, 6, 1]} color="#ffffff" />
+          A darker fill behind the bright strips gives metal the light/dark contrast that
-        <Lightformer intensity={1.2} position={[-5, 1, 2]} scale={[3, 9, 1]} color="#dfe6f0" />
+          reads as polished metal; the visible studio stays light (2D gradient behind canvas). */}
-        <Lightformer intensity={1.2} position={[5, 2, 1]} scale={[3, 9, 1]} color="#f2f4f7" />
+      <Environment resolution={512}>
+        {/* light bases (keep the titanium silvery, not dark) front + back */}
+        <Lightformer form="rect" intensity={1.7} position={[0, 0, -6]} scale={[24, 24, 1]} color="#c3cad6" />
+        <Lightformer form="rect" intensity={1.5} position={[0, 0, 8]} scale={[24, 24, 1]} color="#eef2f7" />
+        {/* bright softbox strips → hot reflection streaks on the rounded edges */}
+        <Lightformer form="rect" intensity={9} position={[-2.6, 2.4, 4]} scale={[1.0, 9, 1]} color="#ffffff" />
+        <Lightformer form="rect" intensity={7} position={[2.9, 0.5, 3.5]} scale={[0.8, 8, 1]} color="#ffffff" />
+        <Lightformer form="rect" intensity={3} position={[0, 6, 2]} scale={[14, 3, 1]} color="#ffffff" />
       </Environment>
 
       <group position={[phoneX, phoneY, 0]} scale={phoneScale}>