<role>
You are a senior UI motion designer and creative technologist. You build UI animations in code, frame-accurate, and render them to video yourself.
</role>
<inputs>
Style: Apple Liquid Glass. Reference platforms: iOS 26, iPadOS 26, macOS Tahoe 26.
Format: 1440x1440, 60fps, seamless loop.
Song: "Digital Clouds" by Alejandro Magaña (A. M.), from Mixkit, free under the Mixkit License. If the file is not attached, ask me for it and nothing else.
Tempo: about 120 BPM, 8 bars, and something happens on every beat. Measure the real tempo from the file. If it differs from 120, keep the beat map in beats and derive every time from the measured grid.
Palette: light mode system materials.
- Labels: #1D1D1F. Secondary labels: #6E6E73. Opaque surfaces: white.
- One accent, #0A84FF, used only for on, active and selected states.
- The Dynamic Island is the only pure-black element.
Canvas: a macOS Tahoe style wallpaper.
- Large, soft color fields: deep blue #1B3A8C, teal #2BB3B1, violet #7B5CFF, and a warm peach highlight #FFB38A.
- Slow parallax drift: 12px per bar at most.
- Saturated enough that the glass visibly refracts it, calm enough to sit behind text.
Font: SF Pro Display for 20px and above, SF Pro Text below 20px, if installed locally. Otherwise use Inter from Fontsource: 600 for titles, 500 for labels, 400 for body. Use -1% tracking at display sizes and tabular numbers for any number that changes.
Icons: one SF Symbols-like set drawn as SVG, medium weight matched to the adjacent text, one consistent optical size per state. Symbols needed: play, pause, speaker with 3 waves, house, heart, chart bars, person, magnifier, note, checkmark.
Pointer: an iPadOS adaptive pointer.
- A 22px translucent gray circle (#8E8E93 at 45%).
- It snaps (magnetism) into any control it hovers and becomes that control's highlight shape.
- It becomes an I-beam in text fields.
- It shrinks 10% on press.
</inputs>
<direction>
Apple keynote and WWDC Liquid Glass session-level UI motion. One element, never cut. Every state is the same element morphing its size, corner radius, material and color, while its content swaps with a short blur. The pointer drives every change with real clicks, holds and drags.
Material:
- Liquid Glass is a lens, not frosted plastic. It refracts the wallpaper, and the bending is strongest at the rim.
- Light frosting and a 10–16% white tint.
- A 1px specular rim lit from the top-left, with a fainter counter-highlight bottom-right. The highlight shifts as the element moves.
- A soft contact shadow: 0 10 30 at 12% black.
- Glass never sits on glass. Content on glass uses vibrant or solid fills.
- Corners are concentric: inner radius = outer radius − padding.
- When glass shapes split or merge, they join like droplets (smooth union), never crossfade.
Motion language:
- Apple-like springs everywhere:
- Morphs: response 0.45, damping 0.86.
- Presses: response 0.25, damping 0.72.
- Pointer snap: response 0.3, damping 0.9.
- Overshoot is at most 3%.
- On press, glass lifts and swells (scale 1.06–1.12, brighter rim). It never shrinks.
- A toggle knob on hold turns into a clear, enlarged glass lens that stretches in its direction of travel.
- The tab bar selection is a glass droplet that magnifies the icons under it while dragged.
- Sliders thicken when grabbed and rubber-band past their limits.
Camera:
- Each state fills about 60% of the frame, and the wallpaper is always visible around the glass.
- Camera moves use response 0.6, damping 1.0.
- The wallpaper scales at 70% of the camera zoom for depth.
The last frame is the first frame, pointer position and velocity included.
Banned: bouncy or elastic easing, overshoot over 3%, particle bursts, neon glows, colored gradients on UI chrome (the glass specular rim is the only gradient), heavy drop shadows, glass on glass, mismatched corner radii, mismatched icon weights, emoji, crossfades between states, dead time longer than half a beat, anything that looks like a template or a Dribbble clone.
</direction>
<structure>
120 BPM, 8 bars, 32 beats. Beat map, one line per beat:
1. A glass capsule button "Continue" floats on the wallpaper. The pointer glides in.
2. The pointer snaps into the button and becomes its highlight.
3. Click: the glass lifts and swells, the rim brightens.
4. The capsule contracts into a circle and becomes a spinning activity ring.
5. The ring completes, filling in accent.
6. It morphs into a checkmark that draws itself.
7. The circle stretches into a black Dynamic Island, compact: album art on the left, a live waveform on the right.
8. Click: the island expands into Now Playing ("Digital Clouds", "A. M.", progress 0:42 / 1:41).
9. Click play: the play icon morphs into pause, with a path morph rather than a swap.
10. Grab the progress bar: it thickens, and the time labels shift out of the way.
11. Scrub forward with direct manipulation. The time counts in tabular numbers.
12. Release: the bar springs thin, and playback continues from the new position.
13. The island dissolves into a glass volume slider with a speaker icon.
14. Drag up: the fill follows the pointer, and the speaker waves appear one by one.
15. Drag past max: the whole slider rubber-bands and stretches, leading edge first.
16. Release: it springs back to its length at 100%.
17. The slider morphs into a toggle (track plus knob), off. Its label is "Focus".
18. Hold: the knob turns into a clear, enlarged glass lens that shows the track through it.
19. Flip on the beat: the lens stretches in its travel direction, and the track fills with accent.
20. The knob detaches as a droplet and becomes the selection lens of a floating glass tab bar with 4 tabs: Home, Health, Activity, Profile.
21. Drag the lens across the tabs. The leading edge stretches ahead of the trailing edge, and the icons magnify under the lens.
22. The lens settles on "Activity", and its icon turns accent.
23. The tab bar grows upward into a glass widget card titled "Activity", with concentric radii.
24. A 7-day bar chart (M T W T F S S) rises in a left-to-right stagger.
25. Hover Thursday: a glass tooltip bubble shows "8,412 steps", anchored to the bar.
26. Hover Friday: the tooltip slides over and counts to "11,036 steps".
27. ⌘Space: the card collapses into a Tahoe Spotlight bar with a magnifier icon.
28. Type "ne": the results list filters (New Note, Network, News), and rows spring in and out.
29. Type "w": "New Note" rises to the top as a selected accent row.
30. Enter: the row presses and lifts.
31. The Spotlight bar drops into a glass notification banner from the top: a Notes icon, "Note created", "now".
32. The banner contracts back into the "Continue" capsule. The pointer returns to its frame-1 position and velocity.
</structure>
<build>
1. One HTML file at 1440x1440. Everything is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
2. Springs are closed-form damped step responses with Apple parameters: ω = 2π/response, ζ = dampingFraction.
- A value that is retargeted many times is the sum of one spring per retarget, so it stays a pure function of time.
- Releases start from the current value and the current velocity.
3. Asymmetric edges: the tab lens, the toggle knob and the slider stretch each have their leading edge on response 0.28 and their trailing edge on response 0.42.
4. Drags are direct manipulation.
- While held, the value is a function of pointer position, with rubber-banding past limits: offset = limit + (1 − 1/(x·0.55/d + 1))·d.
- On release it springs back from wherever it was.
5. Glass is rendered in a WebGL2 pass, not with CSS backdrop-filter:
- The wallpaper is drawn to a texture with a precomputed blurred mip chain.
- Every glass shape is a rounded-rect SDF. Merging and splitting use smooth-min with k = 24px.
- Refraction offsets the sample along the SDF gradient. The offset is strongest within 14px of the edge and scaled by lens thickness.
- Frost is a mip-level bias.
- Chromatic aberration is at most 1px, at the rim only.
- The specular rim comes from the SDF normal against a top-left light.
- The Dynamic Island is an opaque SDF in the same pass.
- Text, icons, charts and the pointer are crisp SVG/DOM layers above the canvas, under the same camera matrix.
6. Content swaps inside a morphing container:
- Exit takes 120ms: blur 6px, scale 0.96, fade.
- Enter starts 60ms later with its own spring.
- Exit and enter text never overlap.
7. Audio:
- Analyze the song with numpy (onset envelope plus autocorrelation) for the beat grid, and start on a measured downbeat.
- Synthesize Apple-subtle UI sounds with numpy: soft taps for clicks, ticks for scrub detents, a low detent at max volume, a keyboard click per typed letter, and a gentle two-note chime for the notification.
- Place each sound on its measured peak, mixed about 18dB under the track.
8. Render with Playwright at 1440x1440 with 4 subframes per frame (240fps).
- Blend to 60fps with ffmpeg: tmix=frames=4, select='not(mod(n\,4))', setpts=N/60/TB.
- Encode H.264 yuv420p, crf 16, with AAC 192k and faststart.
9. Before the full render, render one still per beat (32) as a contact sheet. Fix anything off the grid, cramped, illegible over the wallpaper, or with non-concentric radii.
</build>
<gotchas>
- The glass and the DOM layers must share one camera matrix per frame, or the content drifts off its glass.
- Glass over a bright wallpaper patch kills legibility. Add an adaptive dim under the text based on sampled wallpaper luminance, rather than a heavier tint.
- The Dynamic Island is never glass.
- Icons crossing a morph keep their optical size. Scale the container, not the glyphs.
- The tooltip stays anchored to its bar through the camera move, not to the screen.
- Typed characters in Spotlight enter with the pointer's I-beam; the caret blinks on half-beats.
- Never put will-change on anything the camera scales, or text renders blurry.
- Make the last frame identical to the first, pointer included, or the loop stutters.
</gotchas>
<start>
If the song file is missing, ask for it. Then measure the BPM and the downbeat, and show me the beat map as a table (beat, time, state, pointer action, sound), snapped to the measured grid, before writing any code. Wait for my OK.
</start>
한국어 번역
<role>
당신은 시니어 UI 모션 디자이너이자 크리에이티브 테크놀로지스트입니다. 코드로 프레임 단위까지 정확한 UI 애니메이션을 만들고, 직접 영상으로 렌더링합니다.
</role>
<inputs>
스타일: Apple Liquid Glass. 참고 플랫폼: iOS 26, iPadOS 26, macOS Tahoe 26.
포맷: 1440x1440, 60fps, 이음새 없는 루프.
곡: Mixkit의 Alejandro Magaña (A. M.) "Digital Clouds", Mixkit License로 무료. 파일이 첨부되지 않았다면 그것만 요청하고 다른 것은 요청하지 마세요.
템포: 약 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% 트래킹을, 변하는 모든 숫자에는 등폭 숫자를 사용하세요.
아이콘: SVG로 그린 하나의 SF Symbols 유사 세트, 인접 텍스트에 맞춘 미디엄 웨이트, 상태별로 하나의 일관된 광학 크기. 필요한 심볼: play, pause, speaker with 3 waves, house, heart, chart bars, person, magnifier, note, checkmark.
포인터: 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%.
- 누르면 유리가 떠오르며 부풀어 오릅니다 (스케일 1.06–1.12, 림이 더 밝아짐). 절대 줄어들지 않습니다.
- 홀드 중인 토글 노브는 투명하게 확대된 유리 렌즈가 되어 이동 방향으로 늘어납니다.
- 탭 바 선택은 유리 물방울로, 드래그하는 동안 그 아래 아이콘을 확대합니다.
- 슬라이더는 잡으면 두꺼워지고 한계를 넘으면 러버밴드됩니다.
카메라:
- 각 상태는 프레임의 약 60%를 채우고, 유리 주변으로 배경화면이 항상 보입니다.
- 카메라 이동은 response 0.6, damping 1.0을 사용합니다.
- 배경화면은 깊이감을 위해 카메라 줌의 70%로 스케일됩니다.
마지막 프레임은 첫 프레임과 같습니다, 포인터 위치와 속도 포함.
금지: 통통 튀는 또는 탄성 이징, 3% 초과 오버슈트, 파티클 폭발, 네온 글로우, UI 크롬의 컬러 그라디언트 (유리 스페큘러 림만 유일한 그라디언트), 무거운 드롭 섀도, 유리 위의 유리, 서로 맞지 않는 모서리 반경, 서로 맞지 않는 아이콘 웨이트, 이모지, 상태 간 크로스페이드, 반 박자보다 긴 데드 타임, 템플릿이나 Dribbble 클론처럼 보이는 모든 것.
</direction>
<structure>
120 BPM, 8마디, 32박자. 비트 맵, 박자당 한 줄:
1. 유리 캡슐 버튼 "Continue"가 배경화면 위에 떠 있습니다. 포인터가 미끄러지듯 들어옵니다.
2. 포인터가 버튼 안으로 스냅되어 버튼의 하이라이트가 됩니다.
3. 클릭: 유리가 떠오르며 부풀고 림이 밝아집니다.
4. 캡슐이 원으로 수축하며 회전하는 액티비티 링이 됩니다.
5. 링이 완성되며 액센트로 채워집니다.
6. 스스로 그려지는 체크마크로 모핑됩니다.
7. 원이 검은 Dynamic Island로 늘어나며, 컴팩트 상태: 왼쪽에 앨범 아트, 오른쪽에 라이브 파형.
8. 클릭: 아일랜드가 Now Playing으로 확장됩니다 ("Digital Clouds", "A. M.", progress 0:42 / 1:41).
9. 재생 클릭: play 아이콘이 pause로 모핑되며, 교체가 아닌 패스 모프입니다.
10. 진행 바를 잡으면 두꺼워지고 시간 레이블이 비켜납니다.
11. 직접 조작으로 앞으로 스크럽합니다. 시간은 등폭 숫자로 카운트됩니다.
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 바로 접힙니다.
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의 스무스 민을 사용합니다.
- 굴절은 SDF 그라디언트를 따라 샘플을 오프셋합니다. 오프셋은 가장자리 14px 이내에서 가장 강하고 렌즈 두께에 따라 스케일됩니다.
- 프로스트는 밉 레벨 바이어스입니다.
- 색수차는 최대 1px, 가장자리에서만.
- 스페큘러 림은 왼쪽 위 광원에 대한 SDF 노멀에서 나옵니다.
- Dynamic Island는 같은 패스의 불투명 SDF입니다.
- 텍스트, 아이콘, 차트, 포인터는 캔버스 위의 선명한 SVG/DOM 레이어이며, 같은 카메라 행렬을 따릅니다.
6. 모핑하는 컨테이너 안에서 콘텐츠가 교체됩니다:
- 퇴장은 120ms가 걸립니다: 블러 6px, 스케일 0.96, 페이드.
- 등장은 60ms 뒤에 자체 스프링으로 시작합니다.
- 퇴장과 등장 텍스트는 절대 겹치지 않습니다.
7. 오디오:
- 비트 그리드를 위해 numpy로 곡을 분석하고(온셋 엔벨로프 + 자기상관), 측정된 다운비트에서 시작합니다.
- numpy로 Apple처럼 은은한 UI 사운드를 합성합니다: 클릭에는 부드러운 탭, 스크럽 디텐트에는 틱, 최대 볼륨에서는 낮은 디텐트, 입력한 글자마다 키보드 클릭, 알림에는 부드러운 두 음 차임.
- 각 사운드를 측정된 피크에 배치하고 트랙보다 약 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과 다운비트를 측정하고, 코드를 쓰기 전에 측정된 그리드에 맞춘 비트 맵을 표(비트, 시간, 상태, 포인터 동작, 사운드)로 보여주세요. 제 확인을 기다리세요.
</start>
