Typographie

Section 04

La typo par défaut : 28px, font-weight 600, color #888. Dès qu'on impose une hiérarchie, tout change.

Générique IA

Titre de section

Corps de texte standard avec line-height 1.7 et color #888. C'est le point de départ de l'IA sans guidance.

Accent border-left

Le design est une question
de contraste.

Outline stroke

OUTLINE
FILLED

Big + small

96 points de satisfaction client cette année

Section 11

Kinetic Typography

La typo en mouvement : lettres qui s'envolent, lignes qui entrent, caractères qui dansent au survol.

Blow apart — survol pour exploser

EXPLOSION

Line reveal — scroll pour déclencher

Le bon design

est celui que l'on

ne remarque pas.

Char hover — chaque lettre réagit

Section 23

Typographie Avancée

Letter-spacing, stagger par mot, split halves, texte sur chemin SVG — quand la typo devient cinéma.

Letter-spacing — transition douce (survol)

EXPANSION

CONTRACTION

→ EXPANSION : condensé → aéré | CONTRACTION : aéré → condensé

Stagger par mot — scroll-triggered

Lebondesignestceluiquel'onneremarquepas.

Chaque mot entre avec translateY + opacity, délai de 80ms entre chaque

Split halves — moitiés séparées au survol

SPLIT SPLIT

TEXT TEXT

clip-path: inset(0 0 50% 0) pour le haut, inset(50% 0 0 0) pour le bas

Texte sur chemin SVG — textPath

<textPath href="#curveId"> — le texte épouse n'importe quelle courbe SVG

Section 26

Variable Font & Reveal

font-variation-settings avec stagger par caractère + clip-path: polygon() word reveal — animation typographique 100% CSS/JS vanilla.

font-variation-settings — Axe wght staggeré

Survolez pour animer chaque lettre vers wght 900 avec un délai croissant.

LIOVA LAB

clip-path: polygon() — Word reveal au scroll

Design intentionnel.

Scroll pour révéler.

Chaque mot part de polygon(0 100%,100% 100%,...) — entièrement caché sous sa ligne — et remonte vers polygon(0 0,100% 0,...) avec un délai décalé.

Section 45

Texte Gooey

Les lettres fusionnent entre elles au survol grâce au filtre SVG feGaussianBlur + feColorMatrix — effet liquide organique impossible à faire sans SVG filter.

Lettres qui fusionnent

LIOVA

Variant — filtre 2

DESIGN

Technique

filter: url(#gooey)
feGaussianBlur stdDeviation="10"  /* flou les bords */
feColorMatrix values="... 0 0 0 28 -12"  /* seuil brutal → fusion */

Section 46

Texte 3D Extrudé

Épaisseur 3D calculée depuis la position de la souris — multiples text-shadow en cascade créent l'illusion d'un relief qui suit le regard.

LIOVA

DESIGN

Section 47

Surligneur au scroll

Effet surligneur qui se dessine de gauche à droite sur des mots clés au fur et à mesure que l'utilisateur scrolle — IntersectionObserver + scaleX sur ::after.

    Le design intentionnel commence là où l'IA s'arrête.
    Chaque détail — la courbe d'une ombre, le délai de transition,
    la largeur d'un trait — est une décision consciente
    qui sépare le générique du mémorable.
  

    Le CSS moderne permet d'atteindre une expressivité visuelle
    que seul WebGL offrait il y a cinq ans.
    Les propriétés @property,
    animation-timeline
    et View Transitions
    redéfinissent les limites du navigateur.
  

Section 40

Soulignement animé

Six variantes d'underline CSS — scaleX depuis la gauche, depuis le centre, gradient, épaississement progressif, double ligne décalée, swap statique vers doré. Un classique des sites créatifs.

Depuis la gauche

scaleX(0→1) · origin:left

Depuis le centre

scaleX · origin:center

Gradient animé

accent → purple

Épaississement

height 1.5px → 8px

Double ligne

::before + ::after décalés

Swap statique

static → gold scaleX

Application — navigation horizontale

Pattern courant sur les sites créatifs — 0 JS, pur CSS ::after

Application — corps de texte

Le design d'interface moderne s'inspire du monde éditorial pour gagner en élégance. Des effets subtils comme le soulignement animé transforment l'expérience sans surcharger l'interface — c'est là tout l'art de la micro-interaction.