import React, { useRef, useMemo } from 'react'; import { useCurrentFrame, interpolate, Easing } from 'remotion'; import * as THREE from 'three'; import { useLoader, useFrame as useThreeFrame } from '@react-three/fiber'; // Define iPhone proportions - Increased Height const IPHONE_HEIGHT = 5.0; // Made bigger const IPHONE_WIDTH = IPHONE_HEIGHT / 2.05; const IPHONE_DEPTH = IPHONE_HEIGHT / 18; const SCREEN_BORDER = IPHONE_WIDTH * 0.035; const CORNER_RADIUS = IPHONE_WIDTH * 0.12; // Logo dimensions based on the provided image aspect ratio (1200x1425) const LOGO_ASPECT_RATIO = 1200 / 1425; const LOGO_HEIGHT = IPHONE_WIDTH * 0.2; // Adjust size as needed const LOGO_WIDTH = LOGO_HEIGHT * LOGO_ASPECT_RATIO; interface IphoneModelProps { wallpaperUrl: string; } export const IphoneModel: React.FC = ({ wallpaperUrl }) => { const groupRef = useRef(null!); const frame = useCurrentFrame(); const wallpaperTexture = useLoader(THREE.TextureLoader, wallpaperUrl); wallpaperTexture.flipY = false; // Keep flipY false for correct orientation wallpaperTexture.colorSpace = THREE.SRGBColorSpace; // Load the Apple logo texture const logoTexture = useLoader(THREE.TextureLoader, "https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/Lb4kp8ACeB"); logoTexture.flipY = true; // *** FIX: Flip Y for the logo texture *** logoTexture.colorSpace = THREE.SRGBColorSpace; const bodyGeometry = useMemo(() => { const shape = new THREE.Shape(); const w = IPHONE_WIDTH / 2; const h = IPHONE_HEIGHT / 2; const r = CORNER_RADIUS; shape.moveTo(-w + r, -h); shape.lineTo(w - r, -h); shape.quadraticCurveTo(w, -h, w, -h + r); shape.lineTo(w, h - r); shape.quadraticCurveTo(w, h, w - r, h); shape.lineTo(-w + r, h); shape.quadraticCurveTo(-w, h, -w, h - r); shape.lineTo(-w, -h + r); shape.quadraticCurveTo(-w, -h, -w + r, -h); shape.closePath(); const extrudeSettings = { steps: 2, depth: IPHONE_DEPTH, bevelEnabled: false, }; const geom = new THREE.ExtrudeGeometry(shape, extrudeSettings); geom.center(); // Center the geometry return geom; }, []); const screenGeometry = useMemo(() => { const screenWidth = IPHONE_WIDTH - SCREEN_BORDER * 2; const screenHeight = IPHONE_HEIGHT - SCREEN_BORDER * 2; const screenCornerRadius = Math.max(0, CORNER_RADIUS - SCREEN_BORDER); const shape = new THREE.Shape(); const sw = screenWidth / 2; const sh = screenHeight / 2; const sr = screenCornerRadius; shape.moveTo(-sw + sr, -sh); shape.lineTo(sw - sr, -sh); shape.quadraticCurveTo(sw, -sh, sw, -sh + sr); shape.lineTo(sw, sh - sr); shape.quadraticCurveTo(sw, sh, sw - sr, sh); shape.lineTo(-sw + sr, sh); shape.quadraticCurveTo(-sw, sh, -sw, sh - sr); shape.lineTo(-sw, -sh + sr); shape.quadraticCurveTo(-sw, -sh, -sw + sr, -sh); shape.closePath(); const geom = new THREE.ShapeGeometry(shape); // Manually generate UVs for the ShapeGeometry const vertices = geom.attributes.position.array; const uvs = new Float32Array(vertices.length * 2 / 3); // UVs are 2D (u, v) for (let i = 0; i < vertices.length; i += 3) { const x = vertices[i]; const y = vertices[i + 1]; // const z = vertices[i + 2]; // z is always 0 for ShapeGeometry // Calculate UV coordinates (0 to 1) based on position relative to screen bounds const u = (x + sw) / screenWidth; const v = (y + sh) / screenHeight; // Y in Three.js maps to V in UVs uvs[i * 2 / 3] = u; uvs[i * 2 / 3 + 1] = v; } geom.setAttribute('uv', new THREE.BufferAttribute(uvs, 2)); return geom; }, []); const entranceDuration = 90; const initialYOffset = -12; // Adjusted for potentially larger model const targetYOffset = 0; const finalTiltX = 0.2; const idleSpinRate = 0.01; const progress = interpolate(frame, [0, entranceDuration], [0, 1], { extrapolateRight: 'clamp', }); const animatedPositionY = interpolate(progress, [0, 1], [initialYOffset, targetYOffset], { easing: Easing.out(Easing.cubic), }); const entranceSpinY = interpolate(progress, [0, 1], [0, Math.PI * 4], { easing: Easing.inOut(Easing.cubic), }); const animatedRotationX = interpolate(progress, [0, 1], [Math.PI / 3, finalTiltX], { easing: Easing.out(Easing.back(1.2)), }); useThreeFrame(() => { if (groupRef.current) { let currentRotationY; if (frame <= entranceDuration) { groupRef.current.position.y = animatedPositionY; groupRef.current.rotation.x = animatedRotationX; currentRotationY = entranceSpinY; } else { groupRef.current.position.y = targetYOffset; groupRef.current.rotation.x = finalTiltX; currentRotationY = (Math.PI * 4) + (frame - entranceDuration) * idleSpinRate; } groupRef.current.rotation.y = currentRotationY; groupRef.current.position.z = 2.5; // Keep Z position consistent } }); return ( {/* iPhone Body */} {/* iPhone Screen */} {/* Apple Logo on the back */} ); };

Abstract shader animation