Liquid Glass e 3D no Hana

Novidades no Hana: 3D Transform, Liquid Glass e Autolayout

Abrir o Hana

Hoje anunciamos uma grande atualização do Hana, que traz recursos inovadores como Liquid Glass em tempo real, 3D Transform, Autolayout e camadas de vídeo.

Liquid Glass no Hana

Com a chegada do iOS 26, o efeito Liquid Glass chamou a atenção da comunidade de design. Agora você pode aplicar esse efeito a qualquer camada de objeto no Hana.

Dá para editar os parâmetros do vidro, como a distorção, para controlar a quantidade de refração.

Mas você pode ir além do estilo do iOS e criar efeitos de vidro personalizados. Garantimos que os parâmetros fossem genéricos o suficiente para chegar a resultados criativos variados, permitindo exagerar alguns comportamentos dos efeitos e obter estéticas visuais mais marcantes.

Passe o mouse ou toque para interagir (experiência feita com o Hana)

Vidro empilhável

Na maioria das ferramentas de design, os efeitos de desfoque ou de vidro costumam ficar restritos a uma única camada: se você empilha várias camadas, a distorção do vidro não se acumula e continua plana.

No Hana, você pode empilhar facilmente várias camadas de vidro e ver como cada uma refrata os elementos atrás ou abaixo dela, como na vida real, abrindo um novo leque de possibilidades criativas. Isso vale para os efeitos de vidro e também para os efeitos de desfoque de fundo.

Manipule várias camadas de Liquid Glass no Hana

3D Transform

Passar do 2D para o 3D sempre foi um desafio. Quando começamos a trabalhar neste recurso, sabíamos que queríamos uma forma fluida de alternar entre 2D e 3D sem perder nada no caminho.

No Hana, qualquer objeto agora pode ser um objeto 3D, com parâmetros para controlar sua posição (profundidade), rotação e perspectiva no espaço 3D.

Todos esses parâmetros podem ser animados e são compatíveis com o sistema de estados e eventos.

Controle a perspectiva, a rotação e a posição em z do objeto no Hana

Frames e portais 3D

Quando um frame vira 3D, ele também vira uma janela para o seu próprio espaço 3D. Isso é especialmente útil para criar portais, um elemento visual que mostra profundidade dentro de si.

É fácil: coloque itens dentro de um frame, deixe o frame em 3D e mude a posição ou a rotação 3D dos itens dentro dele. Agora, se você mudar a rotação ou a posição do frame, vai ver como os itens são renderizados lá dentro, com vários níveis de profundidade.

Portais 3D dentro de frames criados no Hana

Autolayout

O Hana agora oferece layouts com parâmetros totalmente animáveis. Você pode criar layouts verticais e horizontais com padding e espaçamentos personalizáveis.

Os layouts funcionam junto com eventos e estados e são atualizados em tempo real para enriquecer a interatividade.

Também adicionamos suporte a layouts masonry, parecidos com as colunas do Pinterest.

Experiências feitas com o Hana usando Layout

Camadas de vídeo

Agora você pode incorporar facilmente um vídeo em qualquer camada do Spline Hana. Isso é muito útil para criar uma apresentação interativa ou fazer design de motion. É só mudar para a camada Video no painel Fill e enviar ou arrastar e soltar seu vídeo.

Assim como no editor 3D do Spline, os vídeos no Hana também podem ser disparados por eventos personalizados. Por padrão, o vídeo começa a tocar no evento Start, mas você pode mudar isso e dispará-lo com eventos de mouse ou qualquer outro evento.

Controle a perspectiva, a rotação e a posição em z do objeto no Hana

Novas possibilidades criativas

Foi muita coisa! Esperamos que você curta todos os novos recursos que lançamos hoje e comece a criar designs novos e empolgantes.

— Equipe Spline

Abrir o Hana

Mais do blog