Receitas de movimento do Vena
Um coração feito de luz. Duzentos mil pontos formam um corpo que reage, pulsa e convida você a chegar mais perto.
Criado por Rafael Augusto com NativeScript-Vue e Jolt RC.11. O SceneKit desenha 160 mil pontos do torso e 40 mil do coração, com uma camada extra de brilho. O Jolt controla uniforms dos shaders, foco e movimento da interface. A cena de partículas é exclusiva do iOS. Ritmos de exemplo; sem medição cardíaca ou conexão com HealthKit.
Explore as duas receitas · Ver o projeto
Um ritmo só seu.
opening coordena título, legenda, opção de pular e strokeEnd de um sinal vetorial. revealInterface traz cabeçalho, card, rodapé e dica em uma timeline. WelcomeOverlay espera as views carregarem, ignora conclusão após descarte e permite pular. A formação do coração é coordenada separadamente em App.vue. O vídeo mostra a abertura normal; movimento reduzido e descarte são descritos a partir do código.
NativeScript-Vue 3 e Jolt RC.11. Chame opening com quatro views nativas carregadas; title, caption e skip começam com opacity 0. rule recebe um traçado de 190×30. WelcomeOverlay.vue mostra a proteção ao concluir/pular e o descarte. revealInterface recebe um MotionScope próprio e quatro views montadas. Descarte o handle de opening e o scope da interface ao sair. Este arquivo anima texto, traçado e entrada da interface; o coração de partículas depende de HeartScene e seus assets. Preserve movimento reduzido. A gravação é iOS.
Um coração feito de luz.
Um coração feito de luz. · GitHub
Um motionValue repete de 0 a 1 em 60000 / bpm milissegundos e se vincula ao uniform beat. Valores separados de ripple e heartTap mantêm as ondas de toque independentes do ritmo automático. Springs animam foco, posição do ponteiro e órbita. O shader da GPU deforma a nuvem; o JavaScript não atualiza cada ponto a cada frame. O vídeo mostra pulsação e mudanças de foco. Suspensão/retorno, movimento reduzido e configuração do helper de ponteiro foram revisados no código, sem testes específicos no vídeo.
Somente iOS: NativeScript-Vue 3, Jolt RC.11, seu pacote nativo e SceneKit. A classe HeartScene depende de shaders.ts, anatomy.ts, cloud-data.ts, heart-space.ts, pointer.ios.ts, simulator-pointer.ios.ts e torso.bin/heart.bin. Veja o repositório fixado para registro da view e conexão de sceneReady. O Jolt controla uniforms float/float2/float3; o SceneKit renderiza a nuvem. Preserve hit testing na pose animada, relógios separados de pulsação/toque, condições de renderização, movimento reduzido, suspensão/retorno, remoção de listeners e descarte de propriedades/scopes. Hover no simulador usa um helper Swift de desenvolvimento; não é toque no celular. Preserve os créditos BodyParts3D © DBCLS CC BY 4.0 e MakeHuman CC0. Esta receita não fornece renderizador Android ou Web.
Código e integração
- src/App.vue
- src/components/WelcomeOverlay.vue
- src/scene/shaders.ts
- src/scene/anatomy.ts
- src/scene/cloud-data.ts
- src/scene/heart-space.ts
- src/scene/pointer.ios.ts
- src/scene/simulator-pointer.ios.ts
- src/assets/anatomy
- README.md
Créditos
Coração: BodyParts3D © The Database Center for Life Science (DBCLS), CC BY 4.0, preparado pelo OrganUI. O Vena amostrou o exterior em 40 mil pontos, omitiu cavidades, alterou escala, posição e cores e adicionou deformação e iluminação artísticas. Torso: MakeHuman hm08, CC0; posicionado, recortado e amostrado em 160 mil pontos. O site corta e comprime a gravação e recorta frames; não modifica os assets anatômicos. Créditos completos, fontes e alterações. O DBCLS não endossa esta demo.