Бесшовная 60 кадров в секунду анимация интерфейса в стиле Apple Liquid Glass для iOS 26 и macOS Tahoe, собранная в коде

Промпт

ПРОМПТ:
<role>
Вы — старший дизайнер UI-моушена и креативный технолог. Вы создаёте UI-анимации в коде с точностью до кадра и самостоятельно рендерите их в видео.
</role>

<inputs>
Стиль: Apple Liquid Glass. Референсные платформы: iOS 26, iPadOS 26, macOS Tahoe 26.

Формат: 1440x1440, 60fps, бесшовный луп.

Песня: "Digital Clouds" Alejandro Magaña (A. M.), с Mixkit, бесплатно по Mixkit License. Если файл не прикреплён, запросите его и больше ничего.

Темп: около 120 BPM, 8 тактов, что-то происходит на каждой доле. Измерьте реальный темп по файлу. Если он отличается от 120, сохраняйте карту долей в долях и выводите всё время из измеренной сетки.

Палитра: системные материалы светлого режима.
- Метки: #1D1D1F. Вторичные метки: #6E6E73. Непрозрачные поверхности: белые.
- Один акцентный цвет, #0A84FF, используется только для состояний включения, активности и выбора.
- Dynamic Island — единственный абсолютно чёрный элемент.

Холст: обои в стиле macOS Tahoe.
- Большие мягкие цветовые поля: глубокий синий #1B3A8C, бирюзовый #2BB3B1, фиолетовый #7B5CFF и тёплый персиковый блик #FFB38A.
- Медленный параллаксный дрейф: не более 12px на такт.
- Достаточно насыщенные, чтобы стекло заметно преломляло их, но достаточно спокойные, чтобы находиться за текстом.

Шрифт: SF Pro Display для 20px и выше, SF Pro Text ниже 20px, если они установлены локально. В противном случае используйте Inter из Fontsource: 600 для заголовков, 500 для меток, 400 для основного текста. Используйте межбуквенный интервал -1% в крупных размерах и табличные цифры для любых изменяющихся чисел.

Иконки: один набор в стиле SF Symbols, отрисованный в SVG, средней насыщенности, соответствующей соседнему тексту, с одним согласованным оптическим размером для каждого состояния. Нужны символы: воспроизведение, пауза, динамик с 3 волнами, дом, сердце, столбцы диаграммы, человек, лупа, заметка, галочка.

Указатель: адаптивный указатель iPadOS.
- Полупрозрачный серый круг диаметром 22px (#8E8E93 с прозрачностью 45%).
- Он примагничивается к любому элементу управления, на который наводится, и принимает форму подсветки этого элемента.
- В текстовых полях превращается в I-beam.
- При нажатии уменьшается на 10%.
</inputs>

<direction>
Моушен UI уровня сессий Apple keynote и WWDC Liquid Glass. Один элемент, никаких резких склеек. Каждое состояние — это один и тот же элемент, изменяющий размер, радиус углов, материал и цвет, пока его содержимое сменяется с коротким размытием. Указатель управляет каждым изменением с помощью реальных кликов, удержаний и перетаскиваний.

Материал:
- 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% от масштаба камеры для создания глубины.

Последний кадр совпадает с первым, включая положение и скорость указателя.

Запрещено: пружинящее или эластичное сглаживание, перерегулирование более 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.", прогресс 0:42 / 1:41).
9. Нажатие воспроизведения: иконка воспроизведения превращается в паузу с помощью морфинга контура, а не замены.
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. Наведение на Thursday: стеклянная подсказка показывает "8,412 steps", привязанная к столбцу.
26. Наведение на Friday: подсказка скользит поверх и считает до "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. Один HTML-файл размером 1440x1440. Всё вычисляется из времени внутри 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. Стекло рендерится в проходе WebGL2, а не с помощью CSS backdrop-filter:
- Обои отрисовываются в текстуру с заранее вычисленной размытой цепочкой mip-уровней.
- Каждая стеклянная форма — SDF скруглённого прямоугольника. Объединение и разделение используют smooth-min с k = 24px.
- Преломление смещает выборку вдоль градиента SDF. Смещение максимально в пределах 14px от края и масштабируется толщиной линзы.
- Матирование задаётся смещением уровня mip.
- Хроматическая аберрация составляет не более 1px и присутствует только у канта.
- Спекулярный кант создаётся из нормали SDF относительно света сверху слева.
- Dynamic Island — непрозрачный SDF в том же проходе.
- Текст, иконки, диаграммы и указатель — чёткие SVG/DOM-слои над canvas, под той же матрицей камеры.

6. Содержимое меняется внутри морфинг-контейнера:
- Выход занимает 120ms: размытие 6px, масштаб 0.96, исчезновение.
- Вход начинается через 60ms с собственной пружиной.
- Текст выхода и входа никогда не перекрывается.

7. Аудио:
- Проанализируйте песню с помощью numpy (огибающая атак и автокорреляция), чтобы определить сетку долей, и начните с измеренной сильной доли.
- Синтезируйте тонкие UI-звуки в стиле Apple с помощью numpy: мягкие щелчки для нажатий, тики для шагов перемещения, низкий детент на максимальной громкости, щелчок клавиатуры для каждой введённой буквы и мягкий двухнотный джингл для уведомления.
- Разместите каждый звук на измеренном пике, примерно на 18dB ниже трека.

8. Рендерьте с помощью Playwright в разрешении 1440x1440 с 4 подкадрами на кадр (240fps).
- Смешайте в 60fps с помощью ffmpeg: 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-beam указателя; каретка мигает на половинах долей.
- Никогда не задавайте will-change для элементов, масштабируемых камерой, иначе текст будет размытым.
- Сделайте последний кадр идентичным первому, включая указатель, иначе луп будет дёргаться.
</gotchas>

<start>
Если файл песни отсутствует, запросите его. Затем измерьте BPM и сильную долю и покажите мне карту долей в виде таблицы (доля, время, состояние, действие указателя, звук), привязанную к измеренной сетке, прежде чем писать код. Дождитесь моего OK.
</start>

<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>

• Нужно своё фото: прикрепите изображение к запросу — промпт работает с ним.