Prompt de Design de Movimento para Interface de Vidro Líquido da Apple

<role> Você é um designer sênior de motion UI e tecnólogo criativo. Você cria animações de UI em código, precisas por quadro, e as renderiza em vídeo você mesmo. </role> <inputs> Estilo: Apple Liquid Glass. Plataformas de referência: iOS 26, iPadOS 26, macOS Tahoe 26. Formato: 1440x1440, 60fps, loop contínuo. Música: "Digital Clouds" por Alejandro Magaña (A. M.), do Mixkit, gratuita sob a Licença Mixkit. Se o arquivo não estiver anexado, peça-o a mim e nada mais. Tempo: cerca de 120 BPM, 8 compassos, e algo acontece em cada batida. Meça o tempo real do arquivo. Se diferir de 120, mantenha o mapa de batidas em batidas e derive cada tempo da grade medida. Paleta: materiais de sistema em modo claro. - Rótulos: #1D1D1F. Rótulos secundários: #6E6E73. Superfícies opacas: branco. - Um acento, #0A84FF, usado apenas para estados ligado, ativo e selecionado. - A Ilha Dinâmica é o único elemento preto puro. Canvas: um papel de parede estilo macOS Tahoe. - Grandes campos de cor suaves: azul profundo #1B3A8C, verde-azulado #2BB3B1, violeta #7B5CFF, e um destaque pêssego quente #FFB38A. - Deriva lenta de paralaxe: no máximo 12px por compasso. - Saturado o suficiente para o vidro refratá-lo visivelmente, calmo o suficiente para ficar atrás do texto. Fonte: SF Pro Display para 20px ou mais, SF Pro Text abaixo de 20px, se instalada localmente. Caso contrário, use Inter do Fontsource: 600 para títulos, 500 para rótulos, 400 para corpo. Use rastreamento de -1% em tamanhos de exibição e números tabulares para qualquer número que mude. Ícones: um conjunto estilo SF Symbols desenhado como SVG, peso médio combinado com o texto adjacente, um tamanho óptico consistente por estado. Símbolos necessários: play, pausa, alto-falante com 3 ondas, casa, coração, barras de gráfico, pessoa, lupa, nota, marca de verificação. Ponteiro: um ponteiro adaptativo do iPadOS. - Um círculo cinza translúcido de 22px (#8E8E93 a 45%). - Ele se encaixa (magnetismo) em qualquer controle sobre o qual passa e se torna a forma de destaque desse controle. - Ele se torna uma barra-I em campos de texto. - Ele encolhe 10% ao pressionar. </inputs> <direção> Motion de UI em nível de sessão da Apple keynote e WWDC Liquid Glass. Um elemento, nunca cortado. Cada estado é o mesmo elemento transformando seu tamanho, raio de canto, material e cor, enquanto seu conteúdo troca com um desfoque curto. O ponteiro dirige cada mudança com cliques, seguras e arrastos reais. Material: - Liquid Glass é uma lente, não plástico fosco. Ele refrata o papel de parede, e a curvatura é mais forte na borda. - Fosqueamento leve e um tom branco de 10–16%. - Uma borda especular de 1px iluminada do canto superior esquerdo, com um contra-destaque mais fraco no canto inferior direito. O destaque muda conforme o elemento se move. - Uma sombra de contato suave: 0 10 30 a 12% preto. - Vidro nunca fica sobre vidro. Conteúdo sobre vidro usa preenchimentos vibrantes ou sólidos. - Cantos são concêntricos: raio interno = raio externo − espaçamento. - Quando formas de vidro se dividem ou se fundem, elas se juntam como gotículas (união suave), nunca com crossfade. Linguagem de movimento: - Molas estilo Apple em todos os lugares: - Transformações: resposta 0.45, amortecimento 0.86. - Pressionamentos: resposta 0.25, amortecimento 0.72. - Encaixe do ponteiro: resposta 0.3, amortecimento 0.9. - Overshoot é de no máximo 3%. - Ao pressionar, o vidro levanta e incha (escala 1.06–1.12, borda mais brilhante). Nunca encolhe. - Um botão de alternância segurado se transforma em uma lente de vidro clara e ampliada que estica na direção do movimento. - A seleção da barra de abas é uma gotícula de vidro que amplia os ícones sob ela enquanto é arrastada. - Controles deslizantes engrossam quando segurados e fazem efeito elástico além dos limites. Câmera: - Cada estado preenche cerca de 60% do quadro, e o papel de parede está sempre visível ao redor do vidro. - Movimentos de câmera usam resposta 0.6, amortecimento 1.0. - O papel de parede escala a 70% do zoom da câmera para profundidade. O último quadro é o primeiro quadro, posição e velocidade do ponteiro incluídas. Proibido: easing saltitante ou elástico, overshoot acima de 3%, explosões de partículas, brilhos de neon, gradientes coloridos no chrome da UI (a borda especular do vidro é o único gradiente), sombras pesadas, vidro sobre vidro, raios de canto incompatíveis, pesos de ícones incompatíveis, emojis, crossfades entre estados, tempo morto maior que meia batida, qualquer coisa que pareça um modelo ou um clone do Dribbble. </direção> <estrutura> 120 BPM, 8 compassos, 32 batidas. Mapa de batidas, uma linha por batida: 1. Um botão cápsula de vidro "Continuar" flutua no papel de parede. O ponteiro desliza para dentro. 2. O ponteiro se encaixa no botão e se torna seu destaque. 3. Clique: o vidro levanta e incha, a borda clareia. 4. A cápsula se contrai em um círculo e se torna um anel de atividade girando. 5. O anel completa, preenchendo com o acento. 6. Ele se transforma em uma marca de verificação que se desenha. 7. O círculo estica em uma Ilha Dinâmica preta, compacta: arte do álbum à esquerda, uma forma de onda ao vivo à direita. 8. Clique: a ilha expande em Agora Reproduzindo ("Digital Clouds", "A. M.", progresso 0:42 / 1:41). 9. Clique em play: o ícone de play se transforma em pausa, com uma transformação de caminho em vez de uma troca. 10. Segure a barra de progresso: ela engrossa, e os rótulos de tempo se afastam. 11. Avance com manipulação direta. O tempo conta em números tabulares. 12. Solte: a barra volta a ficar fina com mola, e a reprodução continua da nova posição. 13. A ilha se dissolve em um controle deslizante de volume de vidro com um ícone de alto-falante. 14. Arraste para cima: o preenchimento segue o ponteiro, e as ondas do alto-falante aparecem uma a uma. 15. Arraste além do máximo: todo o controle deslizante faz efeito elástico e estica, borda dianteira primeiro. 16. Solte: ele volta com mola ao seu comprimento em 100%. 17. O controle deslizante se transforma em uma alternância (trilho mais botão), desligado. Seu rótulo é "Foco". 18. Segure: o botão se transforma em uma lente de vidro clara e ampliada que mostra o trilho através dela. 19. Ligue na batida: a lente estica na direção do movimento, e o trilho preenche com acento. 20. O botão se destaca como uma gotícula e se torna a lente de seleção de uma barra de abas de vidro flutuante com 4 abas: Início, Saúde, Atividade, Perfil. 21. Arraste a lente pelas abas. A borda dianteira estica à frente da borda traseira, e os ícones ampliam sob a lente. 22. A lente se assenta em "Atividade", e seu ícone fica com acento. 23. A barra de abas cresce para cima em um cartão de widget de vidro intitulado "Atividade", com raios concêntricos. 24. Um gráfico de barras de 7 dias (S T Q Q S S D) sobe em um escalonamento da esquerda para a direita. 25. Passe o mouse sobre quinta-feira: uma bolha de dica de vidro mostra "8.412 passos", ancorada à barra. 26. Passe o mouse sobre sexta-feira: a dica desliza e conta até "11.036 passos". 27. ⌘Espaço: o cartão colapsa em uma barra Spotlight do Tahoe com um ícone de lupa. 28. Digite "no": a lista de resultados filtra (Nova Nota, Rede, Notícias), e as linhas entram e saem com mola. 29. Digite "v": "Nova Nota" sobe para o topo como uma linha selecionada com acento. 30. Enter: a linha pressiona e levanta. 31. A barra Spotlight cai em um banner de notificação de vidro do topo: um ícone de Notas, "Nota criada", "agora". 32. O banner se contrai de volta na cápsula "Continuar". O ponteiro retorna à sua posição e velocidade do quadro 1. </estrutura> <construção> 1. Um arquivo HTML em 1440x1440. Tudo é calculado a partir do tempo dentro de seek(t): sem transições CSS, sem temporizadores, sem estado entre quadros. 2. Molas são respostas de passo amortecidas de forma fechada com parâmetros Apple: ω = 2π/resposta, ζ = fração de amortecimento. - Um valor que é redirecionado muitas vezes é a soma de uma mola por redirecionamento, então permanece uma função pura do tempo. - Solturas começam do valor atual e da velocidade atual. 3. Bordas assimétricas: a lente de abas, o botão de alternância e o estiramento do controle deslizante têm cada um sua borda dianteira em resposta 0.28 e sua borda traseira em resposta 0.42. 4. Arrastos são manipulação direta. - Enquanto segurado, o valor é uma função da posição do ponteiro, com efeito elástico além dos limites: deslocamento = limite + (1 − 1/(x·0.55/d + 1))·d. - Ao soltar, ele volta com mola de onde estava. 5. Vidro é renderizado em uma passada WebGL2, não com CSS backdrop-filter: - O papel de parede é desenhado em uma textura com uma cadeia de mip pré-computada desfocada. - Cada forma de vidro é um SDF de retângulo arredondado. Fusão e divisão usam smooth-min com k = 24px. - A refração desloca a amostra ao longo do gradiente SDF. O deslocamento é mais forte dentro de 14px da borda e escalado pela espessura da lente. - Fosqueamento é um viés de nível de mip. - Aberração cromática é de no máximo 1px, apenas na borda. - A borda especular vem da normal SDF contra uma luz do canto superior esquerdo. - A Ilha Dinâmica é um SDF opaco na mesma passada. - Texto, ícones, gráficos e o ponteiro são camadas SVG/DOM nítidas acima do canvas, sob a mesma matriz de câmera. 6. Trocas de conteúdo dentro de um contêiner em transformação: - Saída leva 120ms: desfoque 6px, escala 0.96, fade. - Entrada começa 60ms depois com sua própria mola. - Texto de saída e entrada nunca se sobrepõem. 7. Áudio: - Analise a música com numpy (envelope de onset mais autocorrelação) para a grade de batidas, e comece em um downbeat medido. - Sintetize sons de UI sutis da Apple com numpy: toques suaves para cliques, tiques para detentes de scrub, um detente baixo no volume máximo, um clique de teclado por letra digitada, e um chim suave de duas notas para a notificação. - Coloque cada som em seu pico medido, mixado cerca de 18dB abaixo da faixa. 8. Renderize com Playwright em 1440x1440 com 4 subquadros por quadro (240fps). - Misture para 60fps com ffmpeg: tmix=frames=4, select='not(mod(n\,4))', setpts=N/60/TB. - Codifique H.264 yuv420p, crf 16, com AAC 192k e faststart. 9. Antes da renderização completa, renderize um still por batida (32) como uma folha de contato. Corrija qualquer coisa fora da grade, apertada, ilegível sobre o papel de parede, ou com raios não concêntricos. </construção> <pegadinhas> - O vidro e as camadas DOM devem compartilhar uma matriz de câmera por quadro, ou o conteúdo se desvia do seu vidro. - Vidro sobre um patch brilhante do papel de parede mata a legibilidade. Adicione um escurecimento adaptativo sob o texto baseado na luminância amostrada do papel de parede, em vez de um tom mais pesado. - A Ilha Dinâmica nunca é vidro. - Ícones cruzando uma transformação mantêm seu tamanho óptico. Escale o contêiner, não os glifos. - A dica permanece ancorada à sua barra através do movimento da câmera, não à tela. - Caracteres digitados no Spotlight entram com a barra-I do ponteiro; o cursor pisca em meias batidas. - Nunca coloque will-change em nada que a câmera escala, ou o texto renderiza borrado. - Faça o último quadro idêntico ao primeiro, ponteiro incluído, ou o loop gagueja. </pegadinhas> <início> Se o arquivo de música estiver faltando, peça-o. Então meça o BPM e o downbeat, e me mostre o mapa de batidas como uma tabela (batida, tempo, estado, ação do ponteiro, som), ajustado à grade medida, antes de escrever qualquer código. Aguarde meu OK. </início>