Apple-Style Device Rise Animation

Tool used

Claude Code

Model used

Opus 4.5

Prompt

  Create a 1280x720 (720p) video with a LARGE iPhone mockup that rises dramatically from the bottom of the screen 
  with an Apple keynote-style animation. The device should be massive and cinematic - taking up approximately 60-70%
   of the frame height.

  Video setup:
  - Width: 1280px
  - Height: 720px
  - FPS: 30
  - Duration: 4 seconds

  The animation should:
  1. Start positioned below the visible area (translateY: 400px down)
  2. Rise upward with a smooth deceleration (ease-out cubic)
  3. Include a perspective tilt that starts at ~35 degrees and settles to ~8 degrees
  4. Scale from 0.8 to 1.0 during the animation
  5. Total animation duration: 1.5 seconds

  Device specifications:
  - Width: 320px, Height: 650px (proportioned for 720p)
  - Realistic iPhone frame with dark bezel (#1a1a1a)
  - Border radius: 45px for the outer frame, 35px for the inner screen
  - Dynamic Island: 90px wide, 28px tall, centered at top
  - Status bar with "9:41" time and battery icon
  - Gradient wallpaper (light green tones: #e8f5e9 to #a5d6a7)
  - Large dramatic shadow: "0 60px 120px rgba(0,0,0,0.4)"
  - Subtle inner glow: "0 0 0 1px rgba(255,255,255,0.1) inset"

  IMPORTANT - Centering the device:
  - Position: absolute
  - bottom: -250px
  - left: "50%"
  - transformOrigin: "center bottom"
  - Transform must include translateX(-50%) FIRST to center horizontally, then the other transforms

  Transform order: translateX(-50%) → translateY() → rotateX() → scale()

  After the device settles, animate iOS-style notification cards sliding down from above with staggered timing (0.3s
   apart), each with blur backdrop and rounded corners.

  Use Remotion's interpolate() with Easing.out(Easing.cubic) for all animations. Background should be a clean light
  gray (#f5f5f7).