Catégorie 03
Gradient, scramble, marquee, magnétisme, aurora mesh, curtain reveal, neon, liquid filter, SVG morph.
Gradient animé, scramble, counter, typewriter, progress shimmer, blob, ripple, flip — les détails qui font la différence.
Survoler pour révéler le verso
rotateY(180deg) + backface-visibility: hidden
Performance · 75%
Qualité · 88%
Innovation · 42%
Défilement infini — hover pour pause. Trois vitesses, deux directions.
Dupliquer le contenu × 2 + translateX(-50%) = loop parfaite
Les éléments attirent le curseur. translate() proportionnel à la distance du centre.
Orbes flous animés, dégradés en couches, mesh cards — l'esthétique des interfaces haut de gamme.
Orbes radial-gradient floutés à 80px, animés en translate sur des durées différentes. L'effet de profondeur émerge naturellement.
Gradient bleu profond en couches — linear-gradient imbriqués
Violet sombre vers opacité nulle — l'illusion de transparence
Rouge vers fade — chaleur contenue dans les coins
Curtain reveal, parallax, scale cascade, color morph — les transitions qui donnent vie à la page.
Défiler dans la section pour déclencher l'ouverture
scaleX depuis la droite
scaleX depuis la gauche
scaleY depuis le bas
opacity 0→1 + scale .88→1 avec easing overshoot.
cubic-bezier(.34,1.2,.64,1) — le léger dépassement donne une sensation physique.
Chaque carte entre avec un délai décalé — la cascade perçue.
Cliquer pour changer
La transition background à 1.2s donne une impression de "respiration". Stripe l'utilise pour guider l'attention.
Neon glow, hue-rotate, particules, liquid displacement, SVG morphing.
box-shadow multicouche avec color-mix().
Fonctionne mieux sur fond #060606.
inset shadow pour halo intérieur.
Référence interfaces années 80.
Contraste WCAG AAA accessible.
Tendance synthwave 2024.
Survoler les éléments
Cercle→Rect→Pentagone
Ovale→Pentagone→Étoile
Hexagone→Losange→Carré
@property, mix-blend-mode, animation-timeline — les nouvelles frontières du CSS natif sans JS.
CSS custom property typée — permet d'animer conic-gradient comme une vraie valeur.
Chaque carte peut tourner à sa propre cadence via animation-duration différente.
1.8s par tour — la même technique scalée pour signaler une activité ou un état de chargement.
Le blob blanc avec mix-blend-mode:difference inverse les couleurs sous lui — technique des agences comme Basement Studio.
Cette carte entre avec animation-timeline:view() — elle s'anime à mesure qu'elle entre dans le viewport, aucun JS requis.
position:sticky + animation-timeline:scroll(root) assombrit et rétrécit les cartes du dessous au fur et à mesure du scroll.
Chaque carte a un z-index et un top croissants — l'effet de pile est entièrement déclaratif.
Wrappé dans @supports (animation-timeline:scroll()) — les navigateurs sans support voient les cartes normalement.