Effets — Liova Lab

Section 03

Effets Micro

Gradient animé, scramble, counter, typewriter, progress shimmer, blob, ripple, flip — les détails qui font la différence.

Gradient animé — background-position

CRÉATIF

Scramble — cliquer

GÉNÉRIQUE

Counter — cliquer

0%

Typewriter

Blob CSS

Ripple

Cliquer

Flip card — survol

Front

Survoler pour révéler le verso

Back

rotateY(180deg) + backface-visibility: hidden

Progress bars — shimmer animé

Performance · 75%

Qualité · 88%

Innovation · 42%

Section 10

Hover Magnétique

Les éléments attirent le curseur. translate() proportionnel à la distance du centre.

border pill

cercle accent

brutaliste

border-radius 16px

Section 12

Aurora / Gradient Mesh

Orbes flous animés, dégradés en couches, mesh cards — l'esthétique des interfaces haut de gamme.

Gradient Mesh

Orbes radial-gradient floutés à 80px, animés en translate sur des durées différentes. L'effet de profondeur émerge naturellement.

Deep Ocean

Gradient bleu profond en couches — linear-gradient imbriqués

Cosmic

Violet sombre vers opacité nulle — l'illusion de transparence

Ember

Rouge vers fade — chaleur contenue dans les coins

Section 20

Effets de Section

Curtain reveal, parallax, scale cascade, color morph — les transitions qui donnent vie à la page.

Curtain reveal — scaleX/Y au scroll

Défiler dans la section pour déclencher l'ouverture

Wipe →

scaleX depuis la droite

← Wipe

scaleX depuis la gauche

Wipe ↑

scaleY depuis le bas

Parallax 3 couches

PARALLAX

Défiler pour l'effet de profondeur

Scale cascade au scroll

01

Entrée par le bas

opacity 0→1 + scale .88→1 avec easing overshoot.

02

Easing spring

cubic-bezier(.34,1.2,.64,1) — le léger dépassement donne une sensation physique.

03

Stagger 120ms

Chaque carte entre avec un délai décalé — la cascade perçue.

Background color morph — cliquer

Cliquer pour changer

Couleur vivante

La transition background à 1.2s donne une impression de "respiration". Stripe l'utilise pour guider l'attention.

Section 22

Effets Visuels

Neon glow, hue-rotate, particules, liquid displacement, SVG morphing.

Neon glow cards — 6 couleurs

◈

Bleu électrique

box-shadow multicouche avec color-mix().

◉

Rouge ardent

Fonctionne mieux sur fond #060606.

◎

Violet profond

inset shadow pour halo intérieur.

◇

Vert terminal

Référence interfaces années 80.

◆

Ambre chaud

Contraste WCAG AAA accessible.

◐

Rose cyber

Tendance synthwave 2024.

Hue-rotate — filtre CSS animé

COULEUR VIVANTE

Particules — cliquer pour burst

Cliquer n'importe où

Liquid displacement — SVG feTurbulence

Survoler les éléments

Liquide

Distorsion

Filter

SVG

FLUID

SVG Morph — SMIL animate

Cercle→Rect→Pentagone

Ovale→Pentagone→Étoile

Hexagone→Losange→Carré

Section 25

CSS Avancé

@property, mix-blend-mode, animation-timeline — les nouvelles frontières du CSS natif sans JS.

@property — Conic gradient border animé

@property

CSS custom property typée — permet d'animer conic-gradient comme une vraie valeur.

Vitesse variable

Chaque carte peut tourner à sa propre cadence via animation-duration différente.

Ultra rapide

1.8s par tour — la même technique scalée pour signaler une activité ou un état de chargement.

background-clip: text — Shimmer animé

LIOVA LAB

mix-blend-mode: difference — Curseur inversé

DÉPLACEZ
LE CURSEUR

Le blob blanc avec mix-blend-mode:difference inverse les couleurs sous lui — technique des agences comme Basement Studio.

animation-timeline: view() + scroll() — Cartes empilées

01 / Entrée

View Timeline

Cette carte entre avec animation-timeline:view() — elle s'anime à mesure qu'elle entre dans le viewport, aucun JS requis.

02 / Sticky

Scroll Stacking

position:sticky + animation-timeline:scroll(root) assombrit et rétrécit les cartes du dessous au fur et à mesure du scroll.

03 / Depth

Profondeur CSS Pure

Chaque carte a un z-index et un top croissants — l'effet de pile est entièrement déclaratif.

04 / Support

Progressive Enhancement

Wrappé dans @supports (animation-timeline:scroll()) — les navigateurs sans support voient les cartes normalement.

Section 42

Spotlight Hover

Halo de lumière qui suit la souris à l'intérieur de chaque carte via --mx/--my CSS vars + radial-gradient. Le style Apple / Vercel / Linear des interfaces sombres premium.

⚗

Lab CSS

41 sections de design system — expérimentations et effets avancés en CSS natif pur.

✦

Design System

Composants cohérents — cards, formulaires, navigation, loaders, tooltips.

◈

Images & Médias

Glitch, tilt 3D, curtain reveal, lazy blur, distorsion scroll, glace brisée.

⬜

Boutons & CTA

52 styles — brutaliste, glass, magnétique, neumorphique, glow élastique.

Aa

Typographie

Variable fonts, kinetic, gooey letters, 3D extrudé interactif, surligneur scroll.

⊞

Layouts

Grilles asymétriques, masonry, perspective 3D, card stacking au scroll.

Section 43

Mouse Trail

Traînée de particules colorées qui suit les mouvements de la souris — Canvas 2D léger avec durée de vie, vélocité et fondu.

Déplacez la souris ici →

Section 52

View Transitions API

La nouvelle frontière du CSS natif 2024/2025 — morphing fluide entre états via document.startViewTransition() + view-transition-name. Cliquer une carte pour voir la transition.

Aurora Borealis

Effets de lumière CSS

Glassmorphism

Surfaces translucides

SVG Morphing

Formes interactives

La transition hero image → pleine page est rendue fluide par view-transition-name sur l'élément image, créant un morphing automatique entre les deux états.

Requiert Chrome 111+ / Safari 18+. Fallback gracieux sur les autres navigateurs.

Section 41

Changement de fond par section

La couleur de fond transite doucement selon la section visible — piloté par IntersectionObserver + CSS transition: background-color. Cette page en est la démo live : scrollez pour voir le fond évoluer.

Default

#080808

Micro

#090810

Aurora

#08100c

Neon

#100808

CSS Avancé

#06091a

Les teintes sont intentionnellement subtiles — légères chromies qui orientent l'ambiance sans être agressives.

Implémentation

body { transition: background-color 1.4s cubic-bezier(.4,0,.2,1) }

const obs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if(e.isIntersecting) {
      const bg = e.target.dataset.bg;
      if(bg) document.body.style.backgroundColor = bg;
    }
  });
}, { threshold: 0.35 });

document.querySelectorAll('[data-bg]').forEach(el => obs.observe(el));

S54

Texte en cascade

Les caractères tombent un par un depuis le haut, avec un délai croissant. Cliquer pour rejouer.

S55

Boutons illuminés

Quatre techniques d'éclairage sur bouton — sweep, halo, beam tournant, pulse continu.

gradient slide

box-shadow expansif

conic-gradient @property

animation infinie

Effets Micro

Front

Back

Marquee

Hover Magnétique

Aurora / Gradient Mesh

Gradient Mesh

Deep Ocean

Cosmic

Ember

Effets de Section

Wipe →

← Wipe

Wipe ↑

Entrée par le bas

Easing spring

Stagger 120ms

Couleur vivante

Effets Visuels

Bleu électrique

Rouge ardent

Violet profond

Vert terminal

Ambre chaud

Rose cyber

COULEUR VIVANTE

CSS Avancé

@property

Vitesse variable

Ultra rapide

DÉPLACEZLE CURSEUR

View Timeline

Scroll Stacking

Profondeur CSS Pure

Progressive Enhancement

Spotlight Hover

Mouse Trail

View Transitions API

Changement de fond par section

Texte en cascade

Boutons illuminés

DÉPLACEZ
LE CURSEUR