커서를 향해 기울어지는 3D 배지와 금빛 입자 해금 화면

Full Prompt

원문 프롬프트를 강화하여 결과에 좀 더 의도성을 반영한 프롬프트입니다.

• 길이를 15초로 정하고 128 BPM 8마디로 나눠 마디마다 기법 하나를 배정했습니다.
• 「커서 쪽으로 기운다」를 시간의 함수로 풀기 위해 커서 경로를 미리 정하고, 기울기는 오버슈트 없는 감쇠 스프링으로 계산하도록 했습니다.
• 「튀지 않게」를 바운스 이징 금지와 과감쇠 기울기로 구체화했습니다.
• 금빛 입자는 폭발이 아니라 배지 가장자리에서 솟아 중력으로 떨어지는 움직임으로 정했습니다.
• 서체는 공통 규칙에 따라 Pretendard 한 종, 글자는 한국어로 고정했습니다. 프레임의 원래 서체와 다를 수 있으니 확인이 필요합니다.
• 색은 프레임에서 뽑은 세 가지와 흑백으로 제한하고, 첫 프레임과 마지막 프레임을 배경만 남은 같은 상태로 맞췄습니다.

15초짜리 배지 해금 화면 모션을 만든다. 목표는 연결된 Figma 프레임의 배치, 자산, 조명을 한 점도 바꾸지 않고 움직임만 더해서, 배지가 무게를 가진 단단한 3D 물체로 보이게 하는 것이다.
콘셉트: 「무게가 있는 물체가 빛을 받아 커서 쪽으로 돌아본다」. 배경과 글자가 먼저 자리를 잡고, 배지는 그 자리에서 떠올라 커서를 따라 기울며, 금빛 입자는 배지 가장자리에서 나와 중력을 따라 흐른다. 모든 장면은 앞 장면에서 변형돼 나온다. 컷은 없다.
타이포와 색: 서체는 Pretendard 한 종만. 화면 글자는 전부 한국어. 색은 프레임에서 뽑은 세 가지(배경, 배지 금색, 글자 흰색)와 흑백만 쓴다.
금지: 파티클 폭발, 글로우, 렌즈 플레어, 카메라 흔들림, RGB 분리, 크로스페이드, 범용 그라디언트, 바운스 이징, 0.5초 넘게 멈춘 화면.
박자: 128 BPM, 8마디(15초). 마디마다 기법 하나. 1마디 배경 요소가 제자리로 미끄러져 들어옴, 2마디 배지가 아래에서 떠오르며 회전, 3마디 글자가 순서대로 나타남, 4마디 배지가 가상 커서 쪽으로 기울기 시작, 5~6마디 금빛 입자가 솟았다가 떨어짐, 7마디 커서가 반대편으로 움직이고 배지가 뒤따라 기움, 8마디 배지와 입자가 물러나 배경만 남음. 첫 프레임과 마지막 프레임은 같게.
빌드 방법: 1920x1080 HTML 한 파일, 모든 상태는 window.seek(t) 안에서 시간의 함수로. 커서 경로는 시간 함수로 미리 정하고, 기울기는 오버슈트 없는 감쇠 스프링으로 계산한다. 입자는 고정 시드로 위치를 t에서 직접 구한다. CSS 애니메이션과 타이머는 쓰지 않는다.
검토: 본 렌더 전에 0.5초 간격 스틸로 Figma 프레임과의 일치, 겹침, 빈 프레임, 박자 어긋남, 가독성을 확인하고 고친다.
시작: 먼저 박자별 스토리보드를 적고, 묻지 말고 바로 만든다.

원문 프롬프트

Using the linked Figma frame build a badge unlock screen. Match the design exactly. Use the file's assets, lighting, type and layout and add only the motion. Animate the badge so it feels premium and celebratory. Build its scene and then celebrate with gold particles. Treat the badge as a solid 3D object that tilts toward the
cursor following the rules of physics. Keep it fast and smooth, it should not be bouncy.

출처Ritu @BThreeAgency (새 탭에서 열림)·Opus 5.5