Liquid Glass dans SwiftUI : trois patterns issus du lancement de Return sur iOS 26

Le Liquid Glass d’Apple est une API SwiftUI d’une seule ligne : .glassEffect().¹ Return, mon minuteur de méditation, l’utilise neuf fois sur iOS, macOS et tvOS.² L’une de ces utilisations applique le modifier à une Shape personnalisée qui transforme les chiffres du minuteur eux-mêmes en liquid glass, glyphe par glyphe.

La question intéressante est de savoir ce qui se passe quand vous allez au-delà du one-liner. Les Human Interface Guidelines d’Apple posent une règle de superposition stricte : le Liquid Glass appartient à la couche fonctionnelle (contrôles, navigation, UI transitoire) et jamais à la couche contenu.³ La plupart des neuf utilisations de Return sont des applications classiques de la couche fonctionnelle : sélecteurs, boutons, bandeaux de contrôle, badges d’état pause. Les utilisations intéressantes sont les trois qui infléchissent les règles sans les enfreindre.

Cet essai parcourt trois patterns que j’ai livrés, les règles qu’ils respectent, les pièges qui m’ont rattrapé, et la surface de l’API que j’ai délibérément choisi de ne pas utiliser.

TL;DR

• iOS 26 livre Liquid Glass sous la forme .glassEffect(_:in:). La variante par défaut est .regular et la forme par défaut est Capsule.¹
• Return utilise trois patterns qui vont au-delà du one-liner : verre sur une Shape personnalisée (texte du minuteur via les chemins de glyphes Core Text), le pattern du miroir (reflet en dessous via une copie inversée et masquée) et les superpositions HUD de la couche fonctionnelle.
• Règle HIG d’Apple : Liquid Glass pour la couche fonctionnelle, matériaux standards pour la couche contenu.³
• Je n’ai délibérément pas utilisé GlassEffectContainer. L’API de morphing n’a pas de cas d’usage dans Return (aucun élément en verre ne se transforme en un autre), et je n’ai pas mesuré l’écart de performance de rendu ; il s’agit d’un compromis non mesuré, pas d’une recommandation.¹
• Pièges : le verre sur un arrière-plan plat se lit comme plat ; le rendu sans tremblement des chiffres nécessite des cellules de largeur fixe ; le HStack de tvOS ignore la valeur d’environnement de direction de mise en page ; reduce-motion doit être respecté sur l’animation de morphing.

L’API d’une ligne et la règle de superposition

Apple livre Liquid Glass avec une surface réduite, présentée comme un pilier majeur du design à la WWDC 2025 :¹¹³

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()                              // default: .regular variant, Capsule shape

Text("Hello, World!")
    .glassEffect(in: .rect(cornerRadius: 16))   // custom shape

Text("Hello, World!")
    .glassEffect(.regular.tint(.orange).interactive())  // tint + touch reactivity

Trois leviers : variante (.regular ou .clear), forme (n’importe quelle Shape) et une chaîne GlassEffectStyle (teinte, interactivité). C’est toute l’API pour une vue unique. Le rendu multi-vues est géré par un GlassEffectContainer séparé, sur lequel je reviendrai.

Les HIG sont plus serrées que l’API. Les Human Interface Guidelines d’Apple définissent deux couches dans chaque interface iOS 26+ :³

1. La couche contenu : le document, la liste, la photo ou le média que la personne consulte. Utilisez des matériaux standards ici (.regularMaterial, .thinMaterial existants, etc.).
2. La couche fonctionnelle : contrôles, navigation, barres d’onglets, barres latérales, superpositions transitoires. Utilisez Liquid Glass ici.

Instruction spécifique d’Apple : « N’utilisez pas Liquid Glass dans la couche contenu. Liquid Glass fonctionne mieux lorsqu’il offre une distinction claire entre les éléments interactifs et le contenu, et l’inclure dans la couche contenu peut entraîner une complexité inutile et une hiérarchie visuelle confuse. »³

La règle paraît restrictive jusqu’à ce que vous la rapportiez à une vraie application. Return est un minuteur de méditation. Sa couche contenu, c’est l’imagerie de respiration et la vidéo en boucle qui tourne derrière tout. Sa couche fonctionnelle regroupe le sélecteur de durée, la pile de boutons start/pause/stop, la rangée de boutons de réglages secondaires et (sur tvOS) le badge d’état pause. Huit des neuf utilisations du verre dans Return sont des applications classiques de la couche fonctionnelle : trois variantes de sélecteur de durée pour les chemins de code iOS et macOS, le toggle start/pause, le bouton stop, la rangée des boutons de réglages, l’indicateur de pause tvOS, et une superposition de contrôle transitoire supplémentaire.⁴

La neuvième est le cas limite délibéré (Liquid Glass sur les chiffres du minuteur eux-mêmes), que la section suivante détaille.

Pattern 1 : verre sur une Shape personnalisée

Les chiffres du minuteur dans Return ne sont pas du texte dessiné par-dessus un arrière-plan en verre. Le verre est le texte. .glassEffect(.clear, in:) accepte n’importe quelle Shape,⁹ et une Shape est un protocole produisant un Path.¹⁰ L’astuce consiste donc à : convertir la chaîne du minuteur en un chemin de glyphes via Core Text,¹¹ puis passer ce chemin-en-tant-que-Shape à .glassEffect.⁵⁶

import SwiftUI
@preconcurrency import CoreText

struct GlassTextShape: Shape {
    let text: String
    let font: CTFont

    func path(in rect: CGRect) -> Path {
        guard !text.isEmpty else { return Path() }
        let combinedPath = CGMutablePath()

        let attrString = NSAttributedString(string: text, attributes: [.font: font])
        let line = CTLineCreateWithAttributedString(attrString)
        guard let runs = CTLineGetGlyphRuns(line) as? [CTRun], !runs.isEmpty else {
            return Path()
        }

        for run in runs {
            let glyphCount = CTRunGetGlyphCount(run)
            guard glyphCount > 0 else { continue }
            var glyphs = [CGGlyph](repeating: 0, count: glyphCount)
            var positions = [CGPoint](repeating: .zero, count: glyphCount)
            let range = CFRange(location: 0, length: glyphCount)
            CTRunGetGlyphs(run, range, &glyphs)
            CTRunGetPositions(run, range, &positions)

            for i in 0..<glyphCount {
                guard let glyphPath = CTFontCreatePathForGlyph(font, glyphs[i], nil) else { continue }
                let transform = CGAffineTransform(translationX: positions[i].x, y: positions[i].y)
                combinedPath.addPath(glyphPath, transform: transform)
            }
        }

        // Core Text y-axis is flipped vs SwiftUI; flip then re-bound and center.
        var swiftPath = Path(combinedPath).applying(CGAffineTransform(scaleX: 1, y: -1))
        let flippedBounds = swiftPath.boundingRect
        let offsetX = rect.midX - flippedBounds.midX
        let offsetY = rect.midY - flippedBounds.midY
        return swiftPath.applying(CGAffineTransform(translationX: offsetX, y: offsetY))
    }
}

Code de production réel issu de Return/Return/GlassTextShape.swift.⁵ La fonction path(in:) utilise Core Text pour mettre en page la chaîne, parcourt chaque CTRun, extrait le CGPath de chaque glyphe et les unit dans un seul CGMutablePath. Les deux étapes non évidentes viennent après l’union : le système de coordonnées de Core Text place l’origine en bas à gauche, tandis que le Path de SwiftUI la place en haut à gauche, donc le chemin doit être inversé via CGAffineTransform(scaleX: 1, y: -1). Ensuite, le boundingRect du chemin inversé a des valeurs y négatives, donc une translation le recentre dans le rect que SwiftUI fournit à la Shape. Sautez l’une ou l’autre transformation et les glyphes s’affichent à l’envers ou hors écran.

Puis l’application tient sur une seule ligne :

Rectangle()
    .fill(.clear)
    .glassEffect(.clear, in: textShape)
    .frame(width: cellWidth, height: cellHeight)

Le Rectangle transparent sert de placeholder pour la zone tactile ; le visuel réel correspond à la forme produite par textShape. Avec une shape de chemin de glyphes, le matériau Liquid Glass ne remplit que les contours des glyphes. Le résultat : chaque chiffre du minuteur est une forme liquid-glass distincte, qui réfracte l’animation qui défile derrière.⁶

La nuance HIG. La règle énoncée par Apple est Liquid Glass pour la couche fonctionnelle, matériaux standards pour la couche contenu, avec une exception explicite : les contrôles interactifs transitoires dans la couche contenu (curseurs, toggles) peuvent prendre Liquid Glass lorsqu’ils sont activés.³ Les chiffres du minuteur dans Return constituent un affichage d’état, pas un contrôle : ils se mettent à jour une fois par seconde via Timer.publish(every: 1, ...) et n’ont pas de gesture de tap (le bouton start/pause situé en dessous est ce qui bascule l’état). Mettre du Liquid Glass dessus est donc un cas limite délibéré, plus proche du « contrôle interactif transitoire » par intention que par interactivité littérale, puisque les chiffres sont le point focal visuel que les utilisateurs regardent pendant toute la session. J’infléchis la règle, je ne l’enfreins pas. Un relecteur qui lit les HIG strictement pourrait soutenir que cela devrait être un matériau standard ; je soutiens que le minuteur est une surface de contrôle de temps écoulé dans la même famille qu’un indicateur de progression. La documentation d’Apple ne tranche pas le cas directement.

Pourquoi une Shape personnalisée plutôt que Text + arrière-plan. Du Text rendu au-dessus d’un arrière-plan en verre se lit comme du texte sur du verre. Du Text rendu en tant que verre se lit comme une catégorie visuelle différente. L’utilisateur perçoit les chiffres comme un premier plan fonctionnel, plus précisément comme un élément transitoire qui existe pour être regardé à travers, pas regardé.

Pattern 2 : le pattern du miroir

Return affiche un reflet du minuteur en dessous, qui se fond. Code de production réel :⁶

VStack(spacing: 0) {
    GlassTimerText(text: displayTime, fontSize: fontSize)
        .accessibilityLabel("Time remaining: \(accessibleDescription)")

    if showReflection {
        GlassTimerText(text: displayTime, fontSize: fontSize)
            .scaleEffect(x: 1, y: -1)
            .mask(
                LinearGradient(
                    stops: [
                        .init(color: .white.opacity(0.2), location: 0),
                        .init(color: .clear, location: 0.6)
                    ],
                    startPoint: .top,
                    endPoint: .bottom
                )
            )
            .offset(y: -8)
            .accessibilityHidden(true)
    }
}

Trois transformations composent le miroir, toutes des primitives SwiftUI standards :¹⁴

1. scaleEffect(x: 1, y: -1) retourne la seconde copie à l’envers.
2. .mask(LinearGradient(...)) fait passer le reflet de 20 % d’opacité en haut à totalement transparent à 60 % vers le bas.
3. .offset(y: -8) remonte le reflet de 8 points pour qu’il jouxte l’original au lieu de laisser une jointure visible.

Le modifier .accessibilityHidden(true) sur le reflet est porteur. VoiceOver ne doit pas annoncer deux fois le temps en miroir ; l’accessibilityLabel et l’accessibilityAddTraits(.updatesFrequently) de l’original sont déjà attachés à l’instance principale GlassTimerText au-dessus, et le reflet est purement décoratif.

Pourquoi cela fonctionne avec Liquid Glass spécifiquement. Le reflet hérite du matériau verre de GlassTimerText. Tout arrière-plan sur lequel l’original repose (un dégradé de cercle de respiration, une vidéo, une scène teintée) se réfracte à travers les deux copies. Le miroir n’a besoin d’aucun code spécifique au verre ; le matériau verre gère la réfraction gratuitement. Tout l’effet tient en trois modifiers et un dégradé.

Le coût en accessibilité. Les utilisateurs en reduce-motion voient toujours le miroir, mais l’animation du matériau verre entre les mises à jour de temps est supprimée ailleurs via @Environment(\.accessibilityReduceMotion).⁷ Le reflet lui-même est statique ; seul le morphing entre les transitions de chiffres s’anime.

Pattern 3 : superpositions HUD en verre pour les contrôles transitoires

Les huit autres utilisations du verre dans Return sont des applications classiques de la couche fonctionnelle.⁴ Chacune suit le même pattern :

durationPicker
    .frame(height: 50)
    .frame(maxWidth: 320)
    .glassEffect()
    .padding(.horizontal, 20)
    .transition(.opacity.combined(with: .scale(scale: 0.95)))

Le .transition(.opacity.combined(with: .scale(scale: 0.95))) est la partie porteuse. Liquid Glass sur les contrôles transitoires ne semble juste que lorsque les contrôles transitent. Un HUD en verre statique qui reste en permanence à l’écran se lit comme un habillage. Un HUD en verre qui apparaît en fade+scale lorsque l’utilisateur tape et qui disparaît quand il regarde ailleurs se lit comme une surface de contrôle momentanée.

La documentation d’Apple sur glassEffect le note implicitement : le modifier « capture le contenu pour l’envoyer au container afin qu’il le rende » et « réagit aux interactions tactiles et au pointeur en temps réel. »¹ Les hooks d’animation ne sont pas dans l’API, mais le pipeline de rendu suppose que les éléments en verre bougent. Les éléments en verre statiques manquent cette affordance.

Return utilise le pattern pour le sélecteur de durée (qui glisse vers le haut quand l’utilisateur tape), le bouton toggle start/pause (toujours visible mais qui scale à la pression), le bouton stop (visible uniquement en milieu de session), la rangée du bouton de réglages (un bandeau de contrôle horizontal sous le sélecteur de durée) et le badge d’état pause tvOS (visible uniquement quand une session est en pause sur Apple TV). Les cinq contextes respectent la règle de la couche fonctionnelle des HIG.³

La question du GlassEffectContainer

Apple recommande GlassEffectContainer chaque fois qu’une application utilise .glassEffect() sur plusieurs vues, pour deux raisons : meilleures performances de rendu (les effets de verre sont batchés) et la possibilité de transformer les formes les unes dans les autres pendant les transitions.¹

Je ne l’ai pas utilisé. Le raisonnement est spécifique à l’application, pas une réfutation des conseils d’Apple. Return a neuf vues en verre, dont aucune n’a besoin de se transformer entre elles.⁴⁶ Le sélecteur de durée ne s’anime jamais en bouton start. Le texte du minuteur ne s’anime jamais en rangée de bouton de réglages. Chaque élément en verre est indépendant. L’API de morphing n’aurait aucun cas d’usage à déclencher, et les règles d’espacement du container contraindraient des mises en page qui aujourd’hui n’ont besoin d’aucune coordination.

L’argument des performances de rendu, je ne peux pas le réfuter pleinement sans mesure. La documentation d’Apple avertit que « trop » d’effets en verre hors d’un container peuvent dégrader les performances.¹ Les neuf vues de Return ne partagent jamais l’écran à la fois (le sélecteur de durée n’apparaît que dans l’état menu, le bouton stop uniquement en pause de session). À toute frame donnée, je compte trois ou quatre éléments en verre visibles, ce qui s’est révélé fluide sur tous les appareils que j’ai testés sur iOS, iPadOS, macOS, watchOS et tvOS, mais je n’ai pas exécuté de trace Instruments comparant container-wrapped à modifier-only. Donc la formulation honnête : Return ignore GlassEffectContainer sur la base d’une expérience utilisateur observée comme bonne, pas d’une équivalence de performance mesurée.

La règle que j’en ai tirée : GlassEffectContainer est pour les applications où plusieurs éléments en verre sont visibles et s’animent simultanément. L’exemple d’Apple est le rendu d’ensembles de symboles avec glassEffectUnion(id:namespace:) : quatre symboles météo qui fusionnent et se séparent fluidement comme une seule unité.¹ C’est un cas d’usage classique. Si une fonctionnalité future de Return nécessite que des éléments en verre se transforment ou partagent les règles d’espacement d’un container, le container est le bon outil à ajouter alors. Pour l’application d’aujourd’hui, je n’ai pas encore atteint ce cas.

Les pièges qui m’ont rattrapé

Trois vrais bugs issus de la production :

Tremblement des chiffres en verre. SF Pro Rounded a des chiffres à largeur variable en rendu proportionnel. À mesure que le minuteur décomptait, la longueur de la chaîne affichée changeait, et le HStack environnant se réorganisait chaque seconde, faisant trembler tout le minuteur. La correction : des cellules de largeur fixe pour chaque caractère. Chaque chiffre obtient une cellWidth de fontSize * 0.6, chaque deux-points obtient fontSize * 0.3, et le HStack devient une grille stable.⁶

HStack(spacing: 0) {
    ForEach(Array(text.enumerated()), id: \.offset) { _, char in
        let isColon = char == ":"
        let cellWidth = isColon ? colonCellWidth : digitCellWidth
        GlassDigitCell(character: String(char), font: ctFont,
                       cellWidth: cellWidth, cellHeight: cellHeight)
    }
}

Les cellules ne sont pas un standard Apple ; ce sont un contournement pour le rendu à largeur proportionnelle à des tailles de police fixes petites. SF Pro Rounded d’Apple avec .monospacedDigit() résoudrait le même problème sur Text, mais le modifier n’est pas disponible sur un rendu en verre basé sur une Shape personnalisée. La mise en page à cellules fixes en est le substitut.

Surcharge de la direction de mise en page sur tvOS. Le même GlassTimerText tournait sur iOS, iPadOS, macOS et tvOS. Sur tvOS spécifiquement, le HStack se reflétait sous un environnement de langue de droite à gauche alors même que la version iOS respectait la surcharge dans l’environnement. La correction : épingler la direction de mise en page à la fois via la valeur d’environnement et via le modifier explicite flipsForRightToLeftLayoutDirection(false), appliqué directement au HStack des cellules de chiffres (le VStack parent applique séparément la surcharge d’environnement pour que la copie du reflet en hérite) :⁶

HStack(spacing: 0) { ... }
    .flipsForRightToLeftLayoutDirection(false)
    .environment(\.layoutDirection, .leftToRight)

La raison : le HStack de tvOS semble ignorer la surcharge au niveau de l’environnement dans certaines versions, et flipsForRightToLeftLayoutDirection(false) est le contrat explicite « pas de miroir » qui est plus fiablement honoré.¹² Ceinture et bretelles.

Reduce-motion sur le morphing des chiffres. Liquid Glass anime les transitions de morphing entre les chaînes affichées par défaut. Les utilisateurs avec accessibilityReduceMotion activé voyaient le morphing comme un scintillement. La correction :⁶

.animation(reduceMotion ? nil : .easeInOut(duration: 0.15), value: displayTime)

Le modifier d’animation lit @Environment(\.accessibilityReduceMotion) et désactive entièrement la transition lorsque reduce-motion est activé. Les recommandations d’accessibilité d’Apple sont explicites : toute animation décorative doit respecter la préférence de mouvement de l’utilisateur.⁷

Quand ne pas utiliser Liquid Glass

Le refus fait partie du design.

Ne mettez pas Liquid Glass dans la couche contenu. Les HIG d’Apple sont explicites, et ignorer la règle produit une hiérarchie confuse : l’utilisateur ne peut pas distinguer ce qui est interactif de ce qui est du contenu.³ Si un effet de verre décore une ligne de liste ou une carte photo, le design lutte contre la plateforme.

N’utilisez pas le verre sur un arrière-plan plat. Liquid Glass réfracte ce qui est derrière lui. Si « ce qui est derrière lui » est une seule couleur unie, la réfraction n’a rien à courber, et le résultat se lit comme un rectangle teinté plat. Soit vous mettez le verre sur un contenu varié (un dégradé, une image, une vidéo), soit vous n’utilisez pas de verre du tout. L’écran de minuteur de Return fait tourner une imagerie de couverture basée sur le thème et une vidéo en boucle comme arrière-plan via VideoBackgroundView,⁴ précisément pour que les éléments en verre au-dessus aient toujours de la texture à réfracter.

Soyez prudent avec le verre sur du contenu à haute fréquence. Le rendu du matériau verre est lié au GPU, et l’animation de morphing par défaut entre les changements de forme du verre est elle-même une animation. Un minuteur qui se met à jour une fois par seconde tient bien dans mes tests ; une forme d’onde ou un visualiseur audio à 60 Hz n’est pas prouvé et probablement en conflit avec l’animation de morphing. Je n’ai pas mesuré la limite supérieure ; traitez ceci comme une heuristique, pas un seuil mesuré. La documentation d’Apple n’en publie pas.

Ne livrez pas de verre sans tester reduce-motion. Toute animation en verre doit être conditionnée par accessibilityReduceMotion.⁷ Le morphing par défaut entre les formes en verre est un effet cinétique, pas seulement un fondu.

Ce que Liquid Glass signifie pour les applications livrant sur iOS 26+

La thèse est petite. Liquid Glass est une API d’une seule ligne uniquement lorsque l’application respecte déjà la règle de superposition des HIG. Une application SwiftUI qui place les contrôles dans la couche fonctionnelle et le contenu dans la couche contenu peut adopter Liquid Glass avec les modifiers .glassEffect() et paraître native par défaut.

Les applications qui mélangent les deux couches (contrôles à l’intérieur des lignes de liste, barres de navigation traitées comme du contenu, habillage décoratif sur les cartes photo) adopteront Liquid Glass et paraîtront fausses. Le matériau est correct ; l’architecture en dessous ne l’est pas.

Le pattern Shape personnalisée (Pattern 1) étend la règle proprement. Tout ce qui est fonctionnellement un contrôle peut prendre Liquid Glass, même si cela ne ressemble pas à un « contrôle » au sens conventionnel. Un minuteur est un contrôle, un vumètre est un contrôle, un indicateur de progression est un contrôle. Liquid Glass sur chacun d’eux est conforme aux spécifications.

Associez ce billet à mes écrits précédents sur le lancement de la couche de données de la même application via App Intents et via un serveur MCP. La couche visuelle est la troisième surface de la même pile : entités typées pour l’IA système, format de fichier pour les agents inter-LLM, et Liquid Glass pour l’humain devant l’appareil.⁸

FAQ

Puis-je utiliser .glassEffect() sur des plateformes non-iOS 26 ?

Le modifier .glassEffect() est iOS 26+, iPadOS 26+, macOS 26+, watchOS 26+, tvOS 26+, visionOS 26+. Les plateformes pré-26 disposent de .background(.regularMaterial) et similaires, qui produisent des effets de verre dépoli mais pas la nouvelle réfraction Liquid Glass.¹

Est-ce que GlassEffectContainer change le visuel ?

Les éléments en verre enveloppés dans un container peuvent fondre leurs formes ensemble lorsque leurs règles d’espacement provoquent un chevauchement. Sans container, chaque .glassEffect() est indépendant. Pour les applications où les éléments en verre doivent fusionner fluidement pendant l’animation, GlassEffectContainer est le bon outil. Pour les applications où chaque élément en verre reste distinct, un container est une surcharge.¹

Pourquoi ne pas utiliser Text directement avec .foregroundStyle(.thinMaterial) ?

thinMaterial est un matériau standard, pas Liquid Glass. Le visuel est une superposition de verre dépoli, pas l’effet réfractif verre-avec-courbure-de-lumière de Liquid Glass.³ Pour du texte qui doit ressembler spécifiquement au nouveau matériau, .glassEffect(.clear, in: customShape) est le chemin pris en charge.

Comment capturer une capture d’écran Liquid Glass pour le marketing ?

Les effets de verre sont rendus par le GPU à l’exécution, donc les captures d’écran sont prises depuis le simulateur ou l’appareil avec l’effet déjà appliqué. L’imagerie de référence officielle Liquid Glass d’Apple provient de leurs pages de documentation HIG et des sessions WWDC 2025.³

Est-ce que GlassTextShape fonctionne pour du texte arbitraire ou seulement pour des chiffres ?

Toute chaîne que Core Text peut mettre en page fonctionne. Return l’utilise pour des chiffres et un deux-points, mais la même Shape fonctionne pour les lettres, les symboles, les emoji (avec la bonne police) ou les chaînes mixtes. Les performances sont bornées par le nombre de glyphes ; un long paragraphe rendu en verre serait coûteux, mais un minuteur de six caractères est trivial.

Trois patterns, une règle, et une API que j’ai délibérément ignorée. Liquid Glass est la troisième surface d’une application iOS 26+, posée sur des entités typées et des formats de fichier partagés. L’API d’une seule ligne est réelle. La règle des HIG en dessous est ce qui fait fonctionner cette unique ligne.

Références