diff --git a/public/template-media/AppShowcase3D-16x9.png b/public/template-media/AppShowcase3D-16x9.png index 77b89d9..9b42fbb 100644 Binary files a/public/template-media/AppShowcase3D-16x9.png and b/public/template-media/AppShowcase3D-16x9.png differ diff --git a/public/template-media/AppShowcase3D-1x1.png b/public/template-media/AppShowcase3D-1x1.png index 2fd6e08..e12b2c3 100644 Binary files a/public/template-media/AppShowcase3D-1x1.png and b/public/template-media/AppShowcase3D-1x1.png differ diff --git a/public/template-media/AppShowcase3D-9x16.png b/public/template-media/AppShowcase3D-9x16.png index 49999d8..12bb969 100644 Binary files a/public/template-media/AppShowcase3D-9x16.png and b/public/template-media/AppShowcase3D-9x16.png differ diff --git a/services/remotion/src/compositions/AppShowcase3D.tsx b/services/remotion/src/compositions/AppShowcase3D.tsx index c3ffa28..d8a5c64 100644 --- a/services/remotion/src/compositions/AppShowcase3D.tsx +++ b/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 {/* titanium frame */} - + {/* glossy black glass front — edge-to-edge minus a thin titanium rim */} @@ -184,9 +184,9 @@ const Phone: React.FC<{ screen: THREE.Texture; accent: string }> = ({ screen, ac {/* side buttons (titanium) */} - - - + + + ); }; @@ -197,17 +197,24 @@ const Scene: React.FC<{ accent: string; secondary: string; phoneX: number; phone return ( {/* light, clean keynote studio */} - + {/* key light (no harsh cast shadow — ContactShadows grounds the phone instead) */} - - - {/* sharp rim from behind for a metallic edge highlight */} - - - - - - + + + {/* sharp rim from behind for a hot metallic edge highlight */} + + + {/* Contrasty studio env → bright softbox STREAKS on the titanium (the "shine"). + A darker fill behind the bright strips gives metal the light/dark contrast that + reads as polished metal; the visible studio stays light (2D gradient behind canvas). */} + + {/* light bases (keep the titanium silvery, not dark) front + back */} + + + {/* bright softbox strips → hot reflection streaks on the rounded edges */} + + +