UI 모핑 모션 디자인 템플릿
요소가 음악과 동기화되어 다양한 상태로 변형되는 루프형 UI 모션 디자인을 만들기 위한 종합 프롬프트 템플릿입니다.
프롬프트
<inputs>
다음 정보를 입력해 주세요: 도형이 변환될 8~12개의 UI 상태(예: 버튼, 로더, 플레이어, 슬라이더, 토글, 탭, 차트, 명령 팔레트, 토스트), 순수 흑백 또는 단일 강조 색상, 그리고 약 120 BPM의 로열티 프리 곡(예: Mixkit, 상업적 사용 가능).
</inputs>
<direction>
Dribbble 수준의 UI 모션. 하나의 도형으로만 구성하며 절대 잘라내지 않습니다. 모든 상태에서 동일한 요소가 크기, 반경 및 색상을 변형하고, 콘텐츠는 짧은 블러 효과와 함께 교체됩니다. 커서가 실제 클릭 및 드래그로 모든 변경 사항을 제어합니다. 밝은 웜 그레이 캔버스, 흑백 컴포넌트, 깔끔한 UI 폰트(Geist)를 사용합니다. 스프링 물리 효과를 적용하되, 오버슈트는 최소화합니다. 카메라 줌을 통해 각 상태가 화면을 가득 채우도록 합니다. 마지막 프레임이 첫 번째 프레임과 동일하여 완벽한 루프를 형성합니다.
금지 사항: 탄성 이징, 파티클 폭발, 글로우 효과, UI 크롬의 그라데이션, 아이콘 스트로크 불일치, 정적인 시간 구간, 템플릿처럼 보이는 모든 요소.
</direction>
<structure>
120 BPM, 7마디, 매 비트마다 무언가가 발생합니다.
버튼 → 로더 → 체크 표시 → 다이내믹 아일랜드 → 재생/일시정지 모핑이 포함된 음악 플레이어 → 진행 바 스크럽 → 최대치를 넘겨 드래그하면 늘어나는 볼륨 슬라이더로 변환 → 비트에 맞춰 토글 스위치 작동 → 노브가 액체 형태 탭 인디케이터로 변함 → 탭이 열리며 자체적으로 그려지는 차트가 나타나고 호버 시 툴팁 표시 → ⌘K 명령 팔레트로 축소 → 타이핑하여 필터링 → Enter 키 입력 → 토스트 알림 → 다시 버튼으로 복귀.
</structure>
<build>
1. 하나의 HTML 파일, 정사각형 1440x1440 해상도. 모든 스타일은 seek(t) 함수 내에서 시간에 따라 계산됩니다: CSS 전환, 타이머, 프레임 간 상태 유지 없음.
2. 스프링은 닫힌 형태의 단계 응답(closed-form step responses)을 사용합니다. 대상 값이 여러 번 변경되는 경우, 각 변경에 대한 스프링의 합으로 계산하여 순수한 시간 함수로 유지합니다.
3. 탭 인디케이터의 두 가장자리는 서로 다른 스프링을 따르므로, 선행 엣지가 후행 엣지보다 먼저 늘어납니다. 토글 노브에도 동일한 기법을 적용합니다.
4. 드래그는 직접 조작 방식으로 처리합니다: 커서를 누르고 있는 동안 값은 위치에서 계산됩니다. 릴리스 시 현재 위치에서 스프링 백(back) 효과가 발생합니다.
5. numpy를 사용하여 곡의 비트 그리드를 분석하고 다운비트에서 시작합니다. 측정된 피크에 따라 모든 UI 사운드를 배치합니다.
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 창작 파트너입니다. 이곳의 모든 프롬프트는 더 빠르고 더 나은 창작을 돕기 위해 엄선되었습니다.