제품·서비스 소개 / MOTION STUDY

화면 아래에서 올라오는 스마트폰

화면 아래에서 올라오는 스마트폰을 만드는 공개 요청문입니다. 원문과 결과를 함께 살펴볼 수 있습니다.

원본 보기 ↗

원본 영상 · 무음으로 자동 재생됩니다. 소리는 영상의 음량 버튼으로 켤 수 있습니다.

원본에서 보기 ↗

자료 상태원문 프롬프트

실행·재현미검증

MP4 출력미검증

자료 확인일2026-10-07

수집한 작품입니다. 이 안내로 같은 결과를 재현했거나 영상 파일 출력을 확인했다는 뜻은 아닙니다. 브라우저 애니메이션과 MP4 영상 출력은 별도로 확인해야 합니다.

어떤 원리로
움직일까요?

공개된 자료만으로 구현 원리를 확정할 수 없습니다. 원본 결과와 요청문을 살펴보고, 구현을 시작하기 전에 사용할 기술과 효과를 에이전트에게 설명해 달라고 요청하세요.

자료에 표시된 도구Remotion · React

공개 자료에서 확보한 원문 요청문입니다.

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

이제,
내 버전으로.

소재와 조건을 바꾸면 실행에 쓸 요청문이 완성됩니다.

만들 대상영상 길이 (초)분위기핵심 문구브랜드 색상사용 도구

내 프로젝트 요청문

입력 내용이 바로 반영됩니다.

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

[참고 작품]
제목: 화면 아래에서 올라오는 스마트폰
핵심 효과: 화면 아래에서 올라오는 스마트폰을 만드는 공개 요청문입니다. 원문과 결과를 함께 살펴볼 수 있습니다.
원본: https://www.remotion.dev/prompts/apple-style-device-rise-animation
참고 구현 기술: Remotion, React

[내 프로젝트 조건]
만들 대상: 내 서비스 소개
목표 길이: 15초
분위기: 절제된 제품 광고
핵심 문구: 반복 업무를 줄이세요
브랜드 색상: 검정, 흰색
사용 도구: Claude Code

[결과 요구사항]
1. 필요한 파일과 설치 과정을 먼저 알려 주세요.
2. 핵심 효과를 구현한 뒤 글자, 색상, 속도를 쉽게 바꿀 수 있게 해 주세요.
3. 브라우저에서 실행되는 결과를 먼저 확인해 주세요.
4. MP4 출력은 별도 단계입니다. 출력 도구와 해상도, 프레임 수, 파일 생성 여부를 확인하고, 지원하지 않으면 정확히 알려 주세요.
5. 직접 실행하지 않은 항목은 검증 완료로 표시하지 마세요.

[준비할 자료]
- 사용 권한이 있는 로고와 이미지
- 표시할 문구와 브랜드 색상
- 사용할 음악이 있다면 권리를 확보한 음원

[실행 및 확인 순서]
1. 요청문을 에이전트에 전달하고 구현 계획을 확인합니다.
2. 필요한 자료를 추가하고 로컬 실행 방법을 확인합니다.
3. 브라우저에서 오류 없이 실행되는지 확인합니다.
4. 영상 파일이 필요하면 별도 출력 단계를 요청합니다.

[작품별 확인 사항]


[문제 해결]
- 실행 오류를 먼저 해결한 뒤 시각 효과를 조정합니다.

[수정 요청문]
핵심 효과가 잘 드러나지 않습니다. 현재 결과와 요청 조건의 차이를 확인하고, 동작 타이밍과 화면 구성을 한 항목씩 수정해 주세요. 수정 후 실행 결과를 다시 확인해 주세요.

실행할 때 확인할 것

필요한 자료의 사용 권한과 파일 경로를 확인합니다.
브라우저에서 오류 없이 실행되는지 확인합니다.
참고 작품의 핵심 효과와 내 결과를 비교합니다.
MP4 파일이 필요하면 실제 파일 생성과 재생을 확인합니다.

결과가 예상과 다를 때

오류 메시지와 실행 환경을 함께 전달하고 수정을 요청합니다.

한 번에 한 가지 효과를 수정한 뒤 결과를 다시 확인합니다.

화면 아래에서 올라오는 스마트폰

어떤 원리로움직일까요?

이제,내 버전으로.

내 프로젝트 요청문

실행할 때 확인할 것

어떤 원리로
움직일까요?

이제,
내 버전으로.