애플 리퀴드 글래스 UI 모션 디자인 프롬프트

<role> 당신은 시니어 UI 모션 디자이너이자 크리에이티브 테크놀로지스트입니다. 코드로 UI 애니메이션을 만들고, 프레임 단위로 정확하게 구현하며, 직접 비디오로 렌더링합니다. </role> <inputs> 스타일: Apple Liquid Glass. 참고 플랫폼: iOS 26, iPadOS 26, macOS Tahoe 26. 형식: 1440x1440, 60fps, 무한 루프. 음악: "Digital Clouds" by Alejandro Magaña (A. M.), Mixkit 제공, Mixkit 라이선스 하에 무료. 파일이 첨부되지 않았다면 파일을 요청하고 그 외에는 아무것도 하지 마세요. 템포: 약 120 BPM, 8마디, 모든 비트에서 무언가 발생. 파일에서 실제 템포를 측정하세요. 120과 다르면 비트 맵을 비트 단위로 유지하고 모든 시간을 측정된 그리드에서 도출하세요. 팔레트: 라이트 모드 시스템 머티리얼. - 라벨: #1D1D1F. 보조 라벨: #6E6E73. 불투명 표면: 흰색. - 액센트 하나, #0A84FF, 켜짐, 활성, 선택 상태에만 사용. - Dynamic Island는 유일한 순수 검정 요소. 캔버스: macOS Tahoe 스타일 배경화면. - 크고 부드러운 색상 필드: 딥 블루 #1B3A8C, 틸 #2BB3B1, 바이올렛 #7B5CFF, 따뜻한 피치 하이라이트 #FFB38A. - 느린 시차 드리프트: 마디당 최대 12px. - 유리가 시각적으로 굴절시킬 만큼 채도가 높고, 텍스트 뒤에 놓일 만큼 차분해야 함. 폰트: 로컬에 설치된 경우 20px 이상은 SF Pro Display, 20px 미만은 SF Pro Text. 그 외에는 Fontsource의 Inter 사용: 제목 600, 라벨 500, 본문 400. 디스플레이 크기에서 -1% 트래킹, 변경되는 숫자에는 탭ular 숫자 사용. 아이콘: SF Symbols 스타일의 SVG 세트 하나, 인접한 텍스트와 일치하는 미디엄 웨이트, 상태별로 일관된 광학 크기 하나. 필요한 심볼: 재생, 일시정지, 웨이브 3개 스피커, 집, 하트, 차트 막대, 사람, 돋보기, 노트, 체크마크. 포인터: iPadOS 어댑티브 포인터. - 22px 반투명 회색 원 (#8E8E93, 45%). - 호버하는 컨트롤에 스냅(자기력)되어 해당 컨트롤의 하이라이트 모양이 됨. - 텍스트 필드에서는 I빔이 됨. - 누르면 10% 축소. </inputs> <direction> Apple 키노트 및 WWDC Liquid Glass 세션 수준의 UI 모션. 하나의 요소, 절대 컷 없음. 모든 상태는 동일한 요소가 크기, 코너 반경, 머티리얼, 색상을 변형하며, 콘텐츠는 짧은 블러로 교체됨. 포인터가 실제 클릭, 홀드, 드래그로 모든 변화를 주도함. 머티리얼: - Liquid Glass는 렌즈이지 프로스트 플라스틱이 아님. 배경화면을 굴절시키며, 굴절이 가장 강한 곳은 가장자리. - 가벼운 프로스팅과 10-16% 흰색 틴트. - 좌상단에서 비추는 1px 스페큘러 림, 우하단에 더 희미한 카운터 하이라이트. 요소가 움직이면 하이라이트도 이동. - 부드러운 컨택트 섀도우: 0 10 30, 12% 블랙. - 유리는 유리 위에 놓이지 않음. 유리 위 콘텐츠는 비비드 또는 솔리드 필 사용. - 코너는 동심원: 내부 반경 = 외부 반경 - 패딩. - 유리 형태가 분할되거나 병합될 때는 물방울처럼(부드러운 유니온) 결합하며, 크로스페이드 금지. 모션 언어: - 모든 곳에 Apple 스타일 스프링: - 모프: response 0.45, damping 0.86. - 프레스: response 0.25, damping 0.72. - 포인터 스냅: response 0.3, damping 0.9. - 오버슈트는 최대 3%. - 누르면 유리가 들리며 부풀어 오름(scale 1.06-1.12, 림 더 밝아짐). 절대 줄어들지 않음. - 홀드 중 토글 노브는 투명하고 확대된 유리 렌즈가 되어 이동 방향으로 늘어남. - 탭 바 선택은 유리 물방울로, 드래그 중 그 아래 아이콘을 확대함. - 슬라이더는 잡으면 두꺼워지고 한계를 넘어 고무줄처럼 늘어남. 카메라: - 각 상태는 프레임의 약 60%를 채우고, 배경화면은 항상 유리 주위에 보여야 함. - 카메라 이동은 response 0.6, damping 1.0 사용. - 배경화면은 카메라 줌의 70% 비율로 스케일되어 깊이감을 줌. 마지막 프레임은 첫 프레임과 동일해야 하며, 포인터 위치와 속도까지 포함. </direction> <structure> 120 BPM, 8마디, 32비트. 비트 맵, 비트당 한 줄: 1. 유리 캡슐 버튼 "Continue"가 배경화면에 떠 있음. 포인터가 글라이드하며 들어옴. 2. 포인터가 버튼에 스냅되어 하이라이트가 됨. 3. 클릭: 유리가 들리며 부풀고, 림이 밝아짐. 4. 캡슐이 원으로 수축되고 회전하는 액티비티 링이 됨. 5. 링이 완성되며 액센트로 채워짐. 6. 체크마크로 변형되며 스스로 그려짐. 7. 원이 검은 Dynamic Island로 늘어남, 컴팩트: 왼쪽에 앨범 아트, 오른쪽에 라이브 웨이브폼. 8. 클릭: 아일랜드가 Now Playing으로 확장 ("Digital Clouds", "A. M.", 진행 0:42 / 1:41). 9. 재생 클릭: 재생 아이콘이 일시정지로 모프됨, 교체가 아닌 패스 모프. 10. 프로그레스 바를 잡음: 두꺼워지고, 시간 라벨이 비켜남. 11. 직접 조작으로 앞으로 스크럽. 시간이 탭ular 숫자로 카운트됨. 12. 릴리즈: 바가 스프링으로 얇아지고, 새 위치에서 재생이 계속됨. 13. 아일랜드가 스피커 아이콘이 있는 유리 볼륨 슬라이더로 해체됨. 14. 위로 드래그: 필이 포인터를 따라가고, 스피커 웨이브가 하나씩 나타남. 15. 최대치를 넘어 드래그: 슬라이더 전체가 고무줄처럼 늘어나며, 앞쪽 가장자리부터. 16. 릴리즈: 100% 길이로 스프링 복귀. 17. 슬라이더가 토글(트랙 + 노브)로 모프됨, 꺼짐. 라벨은 "Focus". 18. 홀드: 노브가 투명하고 확대된 유리 렌즈가 되어 트랙이 비쳐 보임. 19. 비트에 맞춰 켜짐: 렌즈가 이동 방향으로 늘어나고, 트랙이 액센트로 채워짐. 20. 노브가 물방울로 분리되어 4개 탭이 있는 플로팅 유리 탭 바의 선택 렌즈가 됨: Home, Health, Activity, Profile. 21. 렌즈를 탭들 위로 드래그. 앞쪽 가장자리가 뒤쪽 가장자리보다 먼저 늘어나고, 렌즈 아래 아이콘이 확대됨. 22. 렌즈가 "Activity"에 정착하고, 아이콘이 액센트로 변함. 23. 탭 바가 위로 성장하여 "Activity"라는 제목의 유리 위젯 카드가 됨, 동심원 반경. 24. 7일 바 차트 (M T W T F S S)가 왼쪽에서 오른쪽으로 스태거되어 올라옴. 25. 목요일 호버: 유리 툴팁 버블이 "8,412 steps"를 보여주며 바에 고정됨. 26. 금요일 호버: 툴팁이 슬라이드되어 "11,036 steps"로 카운트됨. 27. ⌘Space: 카드가 돋보기 아이콘이 있는 Tahoe Spotlight 바(bar)로 축소됨. 28. "ne" 입력: 결과 목록이 필터링되고(New Note, Network, News), 행들이 스프링으로 들어오고 나감. 29. "w" 입력: "New Note"가 선택된 액센트 행으로 맨 위로 올라옴. 30. Enter: 행이 눌리며 들림. 31. Spotlight 바가 위에서 유리 알림 배너로 떨어짐: Notes 아이콘, "Note created", "now". 32. 배너가 "Continue" 캡슐로 수축됨. 포인터가 프레임 1의 위치와 속도로 복귀. </structure> <build> 1. 1440x1440 단일 HTML 파일. 모든 것은 seek(t) 내부에서 시간으로 계산: CSS 트랜지션 없음, 타이머 없음, 프레임 간 상태 유지 없음. 2. 스프링은 Apple 파라미터를 사용한 폐형 감쇠 스텝 응답: ω = 2π/response, ζ = dampingFraction. - 여러 번 리타겟되는 값은 리타겟당 하나의 스프링 합으로, 순수 시간 함수로 유지됨. - 릴리즈는 현재 값과 현재 속도에서 시작. 3. 비대칭 가장자리: 탭 렌즈, 토글 노브, 슬라이더 스트레치 각각 앞쪽 가장자리는 response 0.28, 뒤쪽 가장자리는 response 0.42. 4. 드래그는 직접 조작. - 홀드 중 값은 포인터 위치의 함수이며, 한계를 넘으면 고무줄: offset = limit + (1 - 1/(x·0.55/d + 1))·d. - 릴리즈 시 어디에 있든 스프링 복귀. 5. 유리는 CSS backdrop-filter가 아닌 WebGL2 패스로 렌더링: - 배경화면을 텍스처로 그리고 사전 계산된 블러 밉 체인. - 모든 유리 형태는 라운드 렉트 SDF. 병합과 분할은 k = 24px의 smooth-min 사용. - 굴절은 SDF 그라디언트를 따라 샘플을 오프셋. 오프셋은 가장자리 14px 내에서 가장 강하며 렌즈 두께로 스케일. - 프로스트는 밉 레벨 바이어스. - 색수차는 가장자리에서만 최대 1px. - 스페큘러 림은 좌상단 라이트에 대한 SDF 노멀에서 계산. - Dynamic Island는 동일 패스의 불투명 SDF. - 텍스트, 아이콘, 차트, 포인터는 캔버스 위의 선명한 SVG/DOM 레이어, 동일 카메라 매트릭스 아래. 6. 모핑 컨테이너 내부의 콘텐츠 교체: - 종료 120ms: 블러 6px, scale 0.96, 페이드. - 진입은 60ms 후 자체 스프링으로 시작. - 종료와 진입 텍스트는 절대 겹치지 않음. 7. 오디오: - numpy로 노래 분석(온셋 엔벨로프 + 자기상관)하여 비트 그리드 생성, 측정된 다운비트에서 시작. - Apple 스타일의 미묘한 UI 사운드를 numpy로 합성: 클릭용 소프트 탭, 스크럽 디텐트용 틱, 최대 볼륨에서 낮은 디텐트, 입력 글자마다 키보드 클릭, 알림용 부드러운 2음 차임. - 각 사운드를 측정된 피크에 배치, 트랙 아래 약 18dB로 믹스. 8. Playwright로 1440x1440, 프레임당 4개 서브프레임(240fps) 렌더링. - ffmpeg로 60fps 블렌드: tmix=frames=4, select='not(mod(n\,4))', setpts=N/60/TB. - H.264 yuv420p, crf 16, AAC 192k, faststart로 인코딩. 9. 전체 렌더링 전에 비트당 스틸 32장을 콘택트 시트로 렌더링. 그리드에서 벗어난 것, 비좁은 것, 배경화면 위에서 읽기 어려운 것, 비동심원 반경인 것을 수정. </build> <gotchas> - 유리와 DOM 레이어는 프레임당 하나의 카메라 매트릭스를 공유해야 함, 그렇지 않으면 콘텐츠가 유리에서 벗어남. - 밝은 배경화면 패치 위의 유리는 가독성을 죽임. 더 무거운 틴트 대신 샘플링된 배경화면 휘도에 기반한 적응형 딤을 텍스트 아래 추가. - Dynamic Island는 절대 유리가 아님. - 모프를 가로지르는 아이콘은 광학 크기를 유지. 글리프가 아닌 컨테이너를 스케일. - 툴팁은 카메라 이동 중에도 화면이 아닌 해당 바에 고정. - Spotlight에서 입력된 문자는 포인터의 I빔과 함께 진입; 캐럿은 반비트로 깜빡임. - 카메라가 스케일하는 것에 will-change를 절대 넣지 마세요, 텍스트가 블러리하게 렌더링됨. - 마지막 프레임을 첫 프레임과 동일하게, 포인터 포함, 그렇지 않으면 루프가 끊김. </gotchas> <start> 노래 파일이 없으면 요청하세요. 그런 다음 BPM과 다운비트를 측정하고, 비트 맵을 표(비트, 시간, 상태, 포인터 액션, 사운드)로 측정된 그리드에 스냅하여 코드를 작성하기 전에 보여주세요. 내 OK를 기다리세요. </start>