Catégorie 02

Typographie &
Mouvement.

Styles de base, kinetic type, letter-spacing, word stagger, split halves, texte sur chemin SVG.

S04 · Styles S11 · Kinetic S23 · Avancée S26 · Variable
Section 04

Typographie

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
DESIGN · MOTION · TYPOGRAPHIE · INTERACTION · EXPÉRIENCE · DESIGN · INTENTION · CONTRASTE · ÉQUILIBRE · MOUVEMENT ·

<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é.