# Liquid Glass et 3D dans Hana - Spline blog (https://spline.design/fr/blog/hana-3d-glass-autolayout-video)

> Nouveau dans Hana : 3D Transform, Liquid Glass et Autolayout

[Blog](https://spline.design/fr/blog)

9 juillet 2025

# Liquid Glass et 3D dans Hana

Nouveau dans Hana : 3D Transform, Liquid Glass et Autolayout

[Ouvrir Hana](https://app.spline.design)

Aujourd’hui, nous annonçons une mise à jour majeure de Hana, qui introduit des fonctionnalités révolutionnaires comme le Liquid Glass en temps réel, 3D Transform, Autolayout et les calques vidéo.

## Liquid Glass dans Hana

Avec l’arrivée d’iOS 26, l’effet Liquid Glass a captivé la communauté du design. Vous pouvez désormais appliquer cet effet à n’importe quel calque d’objet dans Hana.

Vous pouvez modifier les paramètres du verre, comme Distortion, pour contrôler l’intensité de la réfraction.

Mais vous pouvez aller au-delà du style iOS et créer des effets de verre personnalisés. Nous avons veillé à ce que les paramètres soient assez génériques pour obtenir des résultats créatifs variés : vous pouvez exagérer certains comportements des effets et obtenir une esthétique visuelle plus saisissante.

Survolez ou touchez pour interagir (expérience réalisée avec Hana)

## Du verre empilable

Dans la plupart des outils de design, les effets de flou ou de verre se limitent à un seul calque : si vous empilez plusieurs calques, la distorsion du verre ne s’accumule pas et reste plate.

Dans Hana, vous pouvez facilement empiler plusieurs couches de verre et voir comment chacune réfracte les éléments situés derrière ou en dessous, comme dans la réalité, ce qui ouvre tout un éventail de nouvelles possibilités créatives. C’est possible pour les effets de verre, mais aussi pour les effets de flou d’arrière-plan.

Manipulez plusieurs couches de Liquid Glass dans Hana

## 3D Transform

Passer de la 2D à la 3D a toujours été un défi. Quand nous avons commencé à travailler sur cette fonctionnalité, nous savions que nous voulions permettre de basculer facilement entre 2D et 3D, sans rien perdre en chemin.

Dans Hana, n’importe quel objet peut désormais devenir un objet 3D, avec des paramètres pour contrôler sa position (Depth), sa rotation et sa perspective dans l’espace 3D.

Tous ces paramètres sont animables et compatibles avec le système d’états et d’événements.

Contrôlez la perspective, la rotation et la position en z de l’objet dans Hana

## Frames et portails 3D

Quand une frame passe en 3D, elle devient aussi une fenêtre sur son propre espace 3D. C’est particulièrement utile pour créer des portails, des éléments visuels qui laissent voir de la profondeur à l’intérieur d’eux-mêmes.

C’est simple : placez des éléments dans une frame, passez la frame en 3D et modifiez la position ou la rotation 3D des éléments qu’elle contient. Si vous changez ensuite la rotation ou la position de la frame, vous verrez comment les éléments sont rendus à l’intérieur, sur plusieurs niveaux de profondeur.

Portails 3D dans des frames créées avec Hana

## Autolayout

Hana prend désormais en charge les mises en page avec des paramètres entièrement animables. Vous pouvez créer des mises en page verticales et horizontales, avec des marges intérieures et des espacements personnalisables.

Les mises en page fonctionnent avec les événements et les états, et se mettent à jour en temps réel pour renforcer l’interactivité.

Nous avons aussi ajouté la prise en charge des mises en page en mosaïque (masonry), comparables aux colonnes de Pinterest.

Expériences réalisées avec Hana à l’aide de Layout

## Calques vidéo

Vous pouvez désormais intégrer facilement une vidéo sur n’importe quel calque dans Spline Hana. C’est très pratique pour créer une présentation interactive ou faire du motion design. Passez simplement au calque Video dans le panneau Fill, puis importez votre vidéo ou glissez-déposez-la.

Comme dans l’éditeur 3D de Spline, les vidéos de Hana peuvent aussi être déclenchées par des événements personnalisés. Par défaut, une vidéo se lance avec l’événement Start, mais vous pouvez changer cela et la déclencher avec des événements de souris ou n’importe quel autre événement.

## De nouvelles possibilités créatives

Ça fait beaucoup ! Nous espérons que vous apprécierez toutes les nouveautés livrées aujourd’hui et que vous commencerez à créer de nouveaux designs passionnants.

— L’équipe Spline

## Plus d’articles du blog

[3 novembre 2026Découvrez Spline Arena](https://spline.design/fr/blog/introducing-spline-arena)[21 octobre 2026Découvrez Spline pour ChatGPT](https://spline.design/fr/blog/introducing-spline-for-chatgpt)[27 août 2026Découvrez Hana V2](https://spline.design/fr/blog/hana-v2)

[Spline](https://spline.design/fr)

L’éditeur 3D et 2D pour les équipes et leurs agents. Publiez sur le web, iOS et Android.

#### Interrogez l’IA sur Spline

#### Produits

- [Design 3D](https://spline.design/fr/3d-design)
- [Hana](https://spline.design/fr/hana)
- [Omma](https://omma.build)
- [Génération 3D par IA](https://spline.design/fr/ai-generate)
- [Spline MCP](https://spline.design/fr/mcp)
- [Spline Arena](https://spline.design/fr/arena)
- [Tarifs](https://spline.design/fr/pricing)
- [Enterprise](https://spline.design/fr/enterprise)

#### Runtimes

- [Web](https://spline.design/fr/web)
- [iOS](https://spline.design/fr/ios)
- [Android](https://spline.design/fr/android)

#### Apps

- [Télécharger](https://spline.design/fr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Télécharger Spline Mirror](https://spline.design/download-mirror)

#### Apprendre

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/fr/academy)
- [API Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Communauté

- [Communauté Spline](https://community.spline.design)
- [Blog](https://spline.design/fr/blog)
- [Nouveautés](https://spline.design/fr/changelog)
- [Éducation](https://spline.design/fr/education)
- [Contra](https://spline.design/contra)
- [Affiliation](https://spline.design/fr/affiliate)

#### Entreprise

- [Clients](https://spline.design/fr/customers)
- [Carrières](https://www.ycombinator.com/companies/spline/jobs)
- [Sécurité](https://spline.design/fr/security)

#### Mentions légales

- [Conditions générales](https://spline.design/terms)
- [Confidentialité](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.
