Runtime Web finito
Equivalente experimental na Web: consulte partículas, superfícies e imagens. Disponível desde a RC.10.
Suporte Web desde a RC.10: estes efeitos também estão disponíveis nos métodos do runtime e dos escopos de /web. Estas APIs estão incluídas na RC.10.
Disponível desde a RC.9: gestos, zoom de imagens, scroll coordenado, refresh e reorder.
Desde a RC.8: montagem Vue/Nuxt, entradas por identidade e scroll horizontal LTR/RTL.
Também na RC.7: escopos, ponteiro/viewport e configuração contínua no Vue, além de geometria de overlays, elementos compartilhados, receitas e diagnóstico. A adoção no Mavis permanece separada.
Desde a RC.7: cores, bordas, pintura contínua, tamanho real, FLIP e cenas com seek ampliam este runtime. As APIs Web continuam experimentais; a paridade completa segue na #236.
Desde a 0.1.0-rc.5, a entrada experimental @rafaelaugusto/jolt/web usa o compilador portátil do Jolt e WAAPI diretamente em elementos HTML, independentemente de Vue, React ou NativeScript. Veja a instalação. O Mavis concluiu a migração inicial de press/reveal e o exemplo compartilhado da aplicação; a adoção dos novos recursos Web continua no Mavis.
A RC.6 inclui movimento contínuo na Web, com valores, followers e drag/snap, além de mapeamentos numéricos, atualização de geometria e scroll vertical. As APIs Web continuam experimentais.
A entrada por ponteiro e teclado está em Press na Web; a gravação abaixo permanece como referência do runtime finito.
Movimento suportado
x e y usam pixels CSS, rotate usa graus, scaleX/scaleY usam fatores e opacity fica limitada a 0–1. scale expande para os dois eixos; um eixo explícito prevalece sobre o atalho. Springs com destino definido, tweens, keyframes numéricos, presets internos/personalizados compatíveis, transições por propriedade, delay e stagger usam o compilador existente. As receitas numéricas nativas são compartilhadas sem importar o runtime nativo.
Cada runtime pertence a um documento. Configuração, presets, tokens de ownership, efeitos e cleanup ficam nesse contexto. Dois contextos não podem controlar simultaneamente o mesmo elemento. A entrada Web pode ser importada sem DOM; criar o runtime exige um documento ativo com WAAPI. Não há instalação global de driver.
// Entrada Web experimental publicada.
import { createWebRuntime } from '@rafaelaugusto/jolt/web'
const motion = createWebRuntime(document)
motion.set(card, { scale: 1.1 })
const move = motion.animate(card, { x: 240, opacity: 1 }, 'snappy')
motion.animate(card, { scale: 0.96 }, { layer: 'press', duration: 120 })
// A escala visual é 1.056. Soltar apenas press preserva a escala da aplicação.
motion.animate(card, { scale: 1 }, { layer: 'press', duration: 120 })
move.pause()
move.progress = 0.5
move.play()
const completed = await move.finished
motion.release(card)
motion.dispose()Controles, composição e cleanup
Cada chamada controla seus canais lógicos e um relógio de origem. Translação/rotação se somam; escala/opacidade se multiplicam. Um efeito visual composto por superfície reproduz o resultado. Substituir x preserva os outros canais e as contribuições privadas. O handle antigo não retoma os canais substituídos, mesmo ao fazer seek ou concluir depois. Falhas de preparação ou de orçamento de keyframes preservam o playback anterior.
progress abrange a timeline finita inteira, incluindo delays e repetições. Seek pausado para 1 continua pausado e permite voltar; a reprodução conclui ao retomar. stop() mantém os valores amostrados atuais e resolve finished como false. A conclusão natural mantém os valores finais e resolve como true; uma substituição parcial faz a chamada anterior resolver como false quando seus canais restantes terminam. Handles encerrados permanecem encerrados. Efeitos e relógios são removidos na conclusão; os valores finais ficam até release() restaurar os estilos inline originais. Alterações inline externas são preservadas na liberação.
Targets removidos são liberados automaticamente, inclusive dentro de shadow roots. Adapters de framework ainda devem liberar as superfícies no fim de seu lifecycle. dispose() também remove observers, listeners de preferência e frames pendentes. Uma timeline de documento não resolvida mantém a pose até a ativação; ready resolve na ativação ou no descarte. Playback finito normal não usa loop de frames da biblioteca nem escrita JavaScript de estilos por frame.
Tempo e movimento reduzido
A interrupção projeta o início resolvido do relógio de origem no relógio de performance do documento no instante do comando. O mesmo timestamp ancora a composição e a nova reprodução. Posição e velocidade vêm do modelo de origem. Movimento pausado ou pendente transfere velocidade zero. Isso evita usar o tick de renderização antigo durante uma tarefa longa. Apresentação do browser e precisão numérica da curva são verificadas separadamente, incluindo interrupção a 2.000 px/s após uma tarefa JavaScript ocupada no WebKit.
reducedMotion: 'user' acompanha a preferência ao vivo do navegador. Ativar a redução conclui os canais ativos de transform nos valores finais; opacidade continua. Desativar permite movimentos futuros sem repetir os canais concluídos. 'always' e 'never' substituem a preferência por contexto. timeScale afeta tracks futuras. Repetições finitas normais/reversas aceitam 0–1.000 repetições; playback infinito fica fora desta etapa. O orçamento padrão é 6.001 keyframes preparados por track/superfície composta, configurável de 2 a 60.001; ultrapassá-lo rejeita a transação.
Política da superfície e limites
O runtime controla transform e opacity de uma caixa HTML montada e transformável. A ordem é base 2D estática × translate × rotate × scale, preservando transform-origin. Transforms CSS individuais, bases 3D, animações/transições existentes e estilos de movimento inline com !important não são suportados. Libere e recrie antes de mudanças CSS externas; alterações arbitrárias de stylesheet/variáveis CSS não são monitoradas. Use uma superfície interna dedicada quando outro código controla o estilo do elemento externo.
Mudanças suportadas de tamanho e pivô 2D podem preservar esse ownership com a API de geometria da RC.6; outras mudanças externas continuam exigindo release/recriação.
Este guia cobre playback finito. Veja movimento contínuo para valores, springs e drag/snap, e suporte Web para mapeamentos, geometria e scroll vertical. Pan/pinch/rotação, zoom de imagens, coordenação de scroll, cabeçalhos/refresh e reorder interativo estão em Gestos e scroll na Web. Propriedades exclusivas do nativo e outros adapters de framework ficam fora deste guia. Ela ainda não estabelece uma API estável de referências portáteis nem completa a integração do Mavis. WAAPI por si só não comprova aceleração pelo compositor ou garante FPS.
Referência nativa e validação
O comportamento do playback nativo permanece igual. Estas gravações nativas revisadas, em inglês, ilustram composição; não mostram o fixture Web nem uma tela compartilhada do Mavis rodando nativamente.
Com Node 22, execute npm run web:runtime:typecheck, npm run web:runtime:test e npm run web:runtime após instalar as dependências e Chromium/Firefox/WebKit do Playwright. O fixture abre em http://127.0.0.1:4282; pare o servidor antes dos testes. O relatório de evidências detalha relógios, referências nativas compartilhadas, rollback, cleanup e comandos de gravação.
O adapter Vue DOM opcional agora oferece refs declaradas e lifecycle de entrada/saída.