UI 모션 디자인 애니메이션 프롬프트
Claude Opus 5.5를 사용하여 스프링 물리 법칙과 비트 동기화 전환을 특징으로 하는 정교하고 루프 가능한 UI 모션 디자인 영상을 HTML/Canvas로 제작하기 위한 상세 프롬프트입니다.
프롬프트
<inputs>
다음 세 가지를 질문하세요: 서로 변형되는 8-12개의 UI 컴포넌트 (예: 버튼, 로더, 음악 플레이어, 볼륨 슬라이더, 토글 스위치, 탭, 차트, 명령 팔레트, 알림), 색상 구성 (엄격한 흑백 또는 단일 강조색), 그리고 약 120 BPM의 로열티 프리 트랙 (예: Mixkit에서).
</inputs>
<direction>
Dribbble에 걸맞은 세련된 화면 모션을 만드세요. 하나의 형태만 사용하고 장면을 절대 자르지 마세요. 모든 상태는 크기와 모서리 반지름, 색상이 변하는 동일한 형태로 표현하며, 짧은 블러 효과와 함께 콘텐츠를 교체합니다. 커서는 실제 클릭과 드래그를 통해 모든 변경 사항을 주도합니다. 배경은 따뜻한 밝은 회색이며, 컴포넌트는 흑백입니다. 텍스트는 일본어(Noto Sans JP)와 영어/기호(Geist)를 사용합니다. 모든 모션은 최소한의 오버슈트를 가진 자연스러운 스프링 물리 법칙을 따릅니다. 카메라는 각 상태에서 화면을 가득 채우도록 줌 인합니다. 완벽한 루프(마지막 프레임이 첫 번째 프레임과 일치)를 구현하세요. 금지 사항: 튀는 모션, 파티클 폭발, 글로우 효과, 컴포넌트 그라데이션, 일관성 없는 아이콘 두께, 공백 구간, 템플릿 같은 미학.
</direction>
<structure>
120 BPM, 7 마디(약 14초), 매 비트마다 무언가가 발생합니다.
버튼 -> 로더 -> 체크마크 -> Dynamic Island 스타일 -> 음악 플레이어 재생/일시정지 변형 -> 스크러버 드래그 -> 볼륨 슬라이더 확장 -> 토글 스위치 동기화 -> 리퀴드 탭 선택 -> 탭이 열리며 자체적으로 그려지는 차트 -> 명령 팔레트로 축소 -> 입력/검색 -> Enter -> 알림 -> 버튼으로 복귀.
</structure>
<build>
1. 단일 HTML 파일, 1440x1440 정사각형. 모든 시각적 요소를 seek(t) 내부에서 계산합니다. CSS 전환이나 타이머를 사용하지 마세요. 프레임 간에는 상태를 유지하지 않습니다.
2. 스프링은 닫힌 형태의 단계 응답(closed-form step responses)으로 처리합니다. 타겟 변경 시 계산을 중첩합니다.
3. 탭 선택: 좌측/우측 가장자리에 별도의 스프링을 적용하며, 선행하는 가장자리가 더 빠르게 확장됩니다.
4. 드래깅: 누르고 있는 동안에는 직접 조작하고, 놓으면 스프링 복원력을 적용합니다.
5. numpy를 사용하여 오디오를 분석하고 비트 그리드를 생성합니다. 측정된 피크에 사운드를 동기화합니다.
6. Playwright로 렌더링합니다. 프레임당 4개의 서브프레임을 내보내고 ffmpeg tmix를 사용하여 60fps에서 모션 블러를 혼합합니다.
7. 전체 렌더링 전에 비트마다 한 프레임을 미리보기하여 타이밍 및 가독성 문제를 수정합니다.
</build>
<gotchas>
카메라가 줌 인된 요소에는 절대 will-change를 사용하지 마세요(텍스트 흐림 유발). 진입/퇴장하는 텍스트에는 고유한 타이밍을 부여하여 겹침을 방지하세요. 부드러운 루프를 위해 마지막 프레임이 첫 번째 프레임과 정확히 일치하도록 하세요(커서 위치/속도 포함).
</gotchas>
<start>
먼저 입력값을 요청한 후, 코드를 작성하기 전에 비트별 상태 목록을 보여주세요.
</start>
이 프롬프트 사용법
- 1
위의 전체 프롬프트를 복사하세요.
- 2
Claude Opus 5.5을 지원하는 플랫폼(예: YouMind)을 열고 프롬프트를 붙여넣으세요.
- 3
원하는 아이디어에 맞게 주제, 스타일, 세부 정보를 바꾼 뒤 생성하세요.
이것은 YouMind 프롬프트 라이브러리의 무료 AI 프롬프트입니다. 복사하고 변형해 쓸 수 있는 수천 개의 동영상 프롬프트가 더 있습니다.
더 많은 동영상 프롬프트 보기
더 많은 프롬프트 기능
AI 라이브러리
AI 프롬프트 검색
AI가 수만 개의 프롬프트를 검색해줍니다. 모델·기간·키워드로 필터링하고 노출, 북마크, 리포스트 등 인기 지표로 정렬할 수 있어요.
비전 도구
이미지를 프롬프트로
어떤 사진이든 상세한 AI 이미지 프롬프트로 변환하세요. 무료 Image to Prompt 변환기가 구도, 스타일, 조명을 분석해 몇 초 만에 같은 느낌을 재현할 수 있습니다.
크리에이터를 위해, 영원히 무료.
YouMind는 전 세계 크리에이터가 신뢰하는 AI 창작 파트너입니다. 이곳의 모든 프롬프트는 더 빠르고 더 나은 창작을 돕기 위해 엄선되었습니다.