# Keynote-style iPhone mockup rising in

> A 4-second Apple-keynote-style shot: a large iPhone mockup drawn in code rises from below the frame with a perspective tilt, then iOS-style notification cards slide in. The prompt spells out every size, color, shadow, easing, and the transform order.

- Page: https://meetreference.com/v/apple-keynote-iphone-mockup-rising-into/
- Exact prompt as plain text: https://meetreference.com/v/apple-keynote-iphone-mockup-rising-into/prompt.txt
- Made with: Claude Code
- Model: Claude Opus 4.5
- Built with: Remotion
- Style: Product launches; apple keynote, device mockup, iphone, notifications, light gray, minimal
- Length and format: 4 sec, 16:9 (1280x720 source)
- Shared by @gaucho_booleano in Remotion Prompt Showcase (Website), Feb 25, 2026: https://www.remotion.dev/prompts/apple-style-device-rise-animation
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. Work in Claude Code with Claude Opus 4.5, or the closest equivalent you have.
2. Set up what the prompt expects: A Remotion project (npx create-video@latest).
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Change the wallpaper ("#e8f5e9 to #a5d6a7"), the background ("#f5f5f7"), and the tilt ("starts at ~35 degrees and settles to ~8 degrees"). Keep the "IMPORTANT - Centering the device" block and the transform order as written.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
  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).
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A keynote-style device shot on a pale gray stage: a black-bezel iPhone mockup with a Dynamic Island and a soft green wallpaper, cropped by the bottom edge, collects three iOS-style notification cards.

- Color: Pale gray background, near-black bezel, a mint-to-green gradient screen, and white cards with violet app icons and dark gray text.
- Type: Small iOS-style text: a 9:41 status bar, then notification cards with bold app names (Messages, Calendar, Reminders) over one-line previews such as "Pick up groceries".
- Framing: The phone is centered and cut off by the bottom of the frame, so only its upper half shows. A soft shadow sits behind it, and the rest of the frame is empty.
- Structure: Only the top of the phone above the bottom edge, the phone higher and larger with a blank screen, Messages and Calendar cards appearing, a Reminders card joining them, then all three held to the end.

Storyboard, nine frames spread across the video: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/storyboard.webp

- Frame 1 at 0.2s: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f1.webp
- Frame 2 at 0.7s: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f2.webp
- Frame 3 at 1.1s: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f3.webp
- Frame 4 at 1.6s: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f4.webp
- Frame 5 at 2.0s: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f5.webp
- Frame 6 at 2.5s: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f6.webp
- Frame 7 at 2.9s: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f7.webp
- Frame 8 at 3.4s: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f8.webp
- Frame 9 at 3.8s: https://meetreference.com/media/apple-keynote-iphone-mockup-rising-into/f9.webp

## Links

- Watch: https://www.remotion.dev/prompts/apple-style-device-rise-animation
- Original post: https://www.remotion.dev/prompts/apple-style-device-rise-animation