Depth Text

Depth Text

Type

Component

Plateforme

Framer

Créé en

2026

Type

Component

Plateforme

Framer

Créé en

2026

11
1

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