Depth Text
Depth Text
Type
Component
Plateforme
Framer
Créé en
2026
Type
Component
Plateforme
Framer
Créé en
2026
Donnez une vraie profondeur 3D à vos titres, qui s’inclinent vers le curseur
Depth Text transforme n’importe quel titre en lettrage 3D : une pile de calques extrude votre texte en un bloc plein, qui s’incline vers le curseur et orbite doucement tout seul quand personne ne le survole. Pas de WebGL, pas d’image, juste du vrai texte éditable.
Tout est pensé pour vous laisser la main : n’importe quelle font, des couleurs de face et de profondeur qui se fondent l’une dans l’autre, et une extrusion aussi fine ou aussi massive que vous le souhaitez. Le mouvement se règle aussi finement : suivi du curseur, orbite automatique ou les deux, avec tilt, perspective et smoothing ajustables.
Profondeur et couleurs du relief
Jusqu’à 64 calques, avec un espacement réglable pour une extrusion fine ou épaisse
Les couleurs de face et de profondeur se fondent en dégradé à travers les calques
Ombre teintée optionnelle sous le texte
Suivi du curseur et orbite automatique
Follow Cursor : le texte s’incline vers le pointeur
Auto Orbit : une lente dérive en boucle quand le curseur est ailleurs, à vitesse réglable
Tilt, perspective et smoothing pour un mouvement subtil ou appuyé
Sur mobile, l’orbite prend le relais, et le réglage reduced motion est respecté
Typographie, SEO et performance
Toutes les fonts Framer : taille, graisse, letter-spacing, line-height, alignement
Texte sur plusieurs lignes avec vos propres retours à la ligne
Balise au choix (H1, H2, H3, P ou Span), le texte n’apparaît qu’une fois dans le HTML
100 % CSS 3D, sans dépendance, l’animation se met en pause hors du viewport
Depth Text transforme n’importe quel titre en lettrage 3D : une pile de calques extrude votre texte en un bloc plein, qui s’incline vers le curseur et orbite doucement tout seul quand personne ne le survole. Pas de WebGL, pas d’image, juste du vrai texte éditable.
Tout est pensé pour vous laisser la main : n’importe quelle font, des couleurs de face et de profondeur qui se fondent l’une dans l’autre, et une extrusion aussi fine ou aussi massive que vous le souhaitez. Le mouvement se règle aussi finement : suivi du curseur, orbite automatique ou les deux, avec tilt, perspective et smoothing ajustables.
Profondeur et couleurs du relief
Jusqu’à 64 calques, avec un espacement réglable pour une extrusion fine ou épaisse
Les couleurs de face et de profondeur se fondent en dégradé à travers les calques
Ombre teintée optionnelle sous le texte
Suivi du curseur et orbite automatique
Follow Cursor : le texte s’incline vers le pointeur
Auto Orbit : une lente dérive en boucle quand le curseur est ailleurs, à vitesse réglable
Tilt, perspective et smoothing pour un mouvement subtil ou appuyé
Sur mobile, l’orbite prend le relais, et le réglage reduced motion est respecté
Typographie, SEO et performance
Toutes les fonts Framer : taille, graisse, letter-spacing, line-height, alignement
Texte sur plusieurs lignes avec vos propres retours à la ligne
Balise au choix (H1, H2, H3, P ou Span), le texte n’apparaît qu’une fois dans le HTML
100 % CSS 3D, sans dépendance, l’animation se met en pause hors du viewport
