Tous les effets
Les 664 effets CSS & JavaScript d'Effect.Labs, regroupés par catégorie. Survolez pour interagir, cliquez sur le code-viewer pour copier.
🔘 Boutons (27)
Voir la page complèteGradient Shift
Le gradient se déplace au survol créant un effet de mouvement fluide.
Ripple Effect
Effet d'ondulation au clic inspiré de Material Design.
Magnetic Button
Le bouton suit le curseur avec un effet d'attraction magnétique.
Border Draw
Les bordures se dessinent progressivement au survol.
Shine Sweep
Un reflet lumineux traverse le bouton au survol.
Glow Pulse
Halo lumineux qui pulse continuellement pour attirer l'attention.
3D Press
Effet de bouton physique avec profondeur et feedback au clic.
Liquid Fill
Remplissage progressif comme un liquide qui monte.
Icon Slide
Icône qui apparaît en glissant au survol.
Neon Glow
Effet néon cyberpunk avec lueur intense au survol.
Rotating Border
Bordure en gradient qui tourne continuellement.
Morph
Transformation de forme avec effet élastique.
Particle Trail
Trainee de particules colorees qui suivent le curseur au survol.
Split Text
Le texte se separe lettre par lettre au survol puis se reforme.
Fill Slide Up
Remplissage de bas en haut avec courbe ease-quart. Inspiré de Daily Delights.
Press Feedback
Micro-interaction tactile avec compression au clic pour un feedback utilisateur optimal.
Bezier Elastic
Animation avec courbe cubic-bezier élastique pour un effet rebond naturel.
Slide Reveal
Le texte glisse vers le haut pour révéler un nouveau texte coloré.
CTA Gradient Border
Bordure gradient animée parfaite pour les call-to-action premium. Inspiré de CTA Gallery.
Neon Pulse
Box-shadow neon pulsant avec animation continue pour un effet cyberpunk intense.
Gummy Elastic
Effet élastique au clic avec courbe cubic-bezier pour un rebond naturel et fun.
Glitch Effect
Effet glitch avec pseudo-elements et decalage chromatique style retro gaming.
RGB Split
Separation des canaux RGB au hover pour un effet aberration chromatique.
3D Depth Press
Effet profondeur avec ombre portée et feedback physique au clic.
Neumorphic
Effet soft UI/neumorphism avec ombres douces et inversion au clic.
Gradient Border Animated
Bordure degradée tournante avec animation continue utilisant @property CSS.
Slide Reveal Icon
Icône qui apparaît progressivement au hover avec expansion fluide.
✏️ Texte & Typo (46)
Voir la page complèteAnimated Gradient
Gradient qui se déplace à travers le texte en boucle.
Typing Effect
Simulation d'écriture avec curseur clignotant.
Glitch Effect
Distorsion numérique style cyberpunk.
Slide Reveal
Texte qui apparaît par le bas. Cliquez pour rejouer.
Wave Effect
Chaque lettre ondule avec un délai progressif.
Stroke Animation
Remplissage progressif du texte outlined.
Shadow Pop
Ombre qui grandit au survol pour effet 3D.
Blur Reveal
Texte qui se déflou progressivement. Cliquez pour rejouer.
Neon Flicker
Effet néon avec scintillement réaliste.
Split Color
Texte bicolore avec séparation animée.
Neon Flicker Text
Texte avec lueur néon qui scintille comme une vraie enseigne.
3D Extrude Text
Texte avec effet d'extrusion 3D au survol.
Variable Font Weight
Animation de l'epaisseur de la police au survol.
Scramble Text
Effet de brouillage de caracteres au survol.
Wave Animation V2
Animation d'onde avec delai progressif par lettre.
Highlight Marker
Effet surligneur qui apparait au survol.
3D Shadow Depth
Ombre 3D avec profondeur qui s'etend au survol.
Flip Characters
Chaque caractere se retourne au survol.
Outline to Fill
Texte contour qui se remplit au survol.
Gradient Flow
Gradient multicolore qui defile en continu.
Neon Glow
Effet neon lumineux avec scintillement.
Blur to Sharp
Texte flou qui devient net au survol.
Letter Spacing
Espacement des lettres qui s'agrandit au survol.
Clip Path Reveal
Texte qui se revele progressivement. Cliquez pour rejouer.
Letter Fade In
Each letter fades in with a staggered delay for smooth reveal.
Letter Slide Up
Letters slide up from below one by one for a smooth entrance.
Letter Rotate In
Letters rotate into view with a 3D flip effect.
Word by Word
Words appear one at a time for dramatic text reveals.
Scramble Text
Text scrambles through random characters then resolves like a decoder.
Wave Animation
Letters wave up and down continuously with offset timing.
Bounce In Letters
Letters bounce in with elastic easing for playful animations.
Typewriter Delete
Types text, deletes it, then types new text in a cycle.
Split Hover
Letters scatter on hover and reform when mouse leaves.
Gradient Letter Flow
Gradient color flows through each letter sequentially.
Scatter to Word
Les caractères volent depuis des positions aléatoires et s'assemblent en un mot au chargement ou au clic.
Wave Text
Chaque lettre oscille verticalement avec un timing décalé créant une vague continue.
Elastic Bounce Letters
Le texte s'étire et rebondit avec une physique de ressort à l'apparition.
Magnetic Cursor Text
Les caractères individuels sont attirés vers la position du curseur.
Gravity Drop Text
Les lettres tombent du haut avec la gravité et rebondissent sur la ligne de base.
Text Whirlpool
Les caractères orbitent en motif circulaire puis se stabilisent en texte lisible.
Typewriter Glitch
Machine à écrire classique avec des interruptions glitch aléatoires (échanges de caractères, scintillements).
Breathing Text
Le texte se dilate et se contracte subtilement comme une respiration, décalé par mot.
Text Shuffle Reveal
Les caractères cyclent rapidement à travers des lettres aléatoires avant de se fixer sur la bonne.
Parallax Depth Text
Texte multi-couches se déplaçant à des vitesses différentes au mouvement de souris, créant de la 3D.
Liquid Stretch Text
Les lettres s'étirent comme du caramel au survol avec un retour élastique.
Text Explosion
Cliquer pour disperser les caractères avec physique, cliquer à nouveau pour les rassembler.
📝 Formulaires (20)
Voir la page complèteFloating Label
Le label flotte vers le haut lorsque l'input est focus ou rempli.
Underline Focus
Ligne animee qui s'etend depuis le centre au focus.
Border Animation
Bordure qui se dessine progressivement autour de l'input.
Shake Validation
L'input tremble pour indiquer une erreur de validation.
Success Checkmark
Coche animee qui apparait quand l'input est valide.
Password Strength
Indicateur anime de la force du mot de passe.
Search Expand
Champ de recherche qui s'etend au clic.
Input with Icon
Icone qui s'anime au focus de l'input.
Textarea Auto-grow
Zone de texte qui s'agrandit automatiquement.
Submit Button States
Bouton avec etats loading, success et error animes.
Floating Label V2
Label qui flotte elegamment au-dessus de l'input avec fond colore.
Underline Animation
Ligne qui s'etend depuis le centre lors du focus.
Glow Input
Input avec effet de lueur au focus.
Checkbox Animated
Checkbox avec coche animee qui apparait progressivement.
Toggle iOS Style
Toggle switch avec animation elastique style iOS.
Radio Ripple
Boutons radio avec effet ripple lors de la selection.
Password Strength V2
Indicateur de force compact avec barre coloree.
Select Animated
Menu deroulant avec fleche animee au focus.
Character Counter
Textarea avec compteur de caracteres integre.
Search Expand V2
Champ de recherche compact qui s'etend au focus.
⏳ Chargement (28)
Voir la page complèteClassic Spinner
Cercle qui tourne, simple et efficace.
Bouncing Dots
Trois points qui rebondissent en cascade.
Pulse Ring
Anneaux qui pulsent en expansion.
Progress Bar
Barre de progression indéterminée.
Cube Flip
Cube 3D qui se retourne.
Wave Bars
Barres en forme d'onde audio.
Orbit
Point qui orbite autour d'un centre.
Skeleton Screen
Placeholder shimmer pour contenu.
DNA Helix
Double hélice en rotation 3D.
Cube Grid
Grille 3x3 de cubes en sequence.
Morphing Shape
Forme qui se transforme en rotation.
Circular Progress
Cercle SVG qui se remplit progressivement.
Bouncing Squares
Carres rebondissants en cascade.
Text Loading
Texte avec points animes.
Gradient Ring
Anneau gradient tournant.
Heartbeat
Effet battement de coeur.
Infinity Loop
Boucle infinie animee.
Glitch Text
Effet glitch retro sur texte.
Card Skeleton
Placeholder de carte classique avec avatar, titre et lignes de texte animees par un shimmer glissant.
List Skeleton
Liste d'elements avec avatars et lignes de texte en chargement progressif.
Image Grid Skeleton
Grille 2x2 de placeholders d'images avec shimmer decale pour un effet cascade.
Profile Skeleton
Page profil en chargement : grand avatar, nom, bio et rangee de statistiques.
Article Skeleton
Squelette d'article de blog : image hero, titre, paragraphes et informations auteur.
Dashboard Skeleton
Mini tableau de bord avec cartes de stats, zone graphique et lignes de tableau en chargement.
Pulse Loading
Meme structure de carte mais avec une animation pulse/respiration au lieu du shimmer classique.
Wave Shimmer
Shimmer ondulant qui coule comme de l'eau, avec un mouvement fluide et organique.
Rainbow Shimmer
Squelette avec un shimmer degrade arc-en-ciel colore qui balaye les elements.
Skeleton to Content
Cliquez pour basculer entre l'etat squelette et le contenu reel avec une transition fluide.
🎨 Backgrounds (40)
Voir la page complèteMesh Gradient
Plusieurs gradients radiaux qui se déplacent lentement.
Floating Particles
Particules qui flottent vers le haut en continu.
Gradient Wave
Gradient diagonal animé en boucle fluide.
Aurora Borealis
Effet aurore boréale avec lumières dansantes.
Grid Pattern
Grille technique avec vignette centrale.
Noise Texture
Texture grain pour un look cinématographique.
Light Rays
Rayons lumineux en rotation continue.
Animated Blobs
Formes organiques flottantes avec blur.
Geometric Shapes
Formes geometriques flottantes animees.
Starry Night
Ciel etoile scintillant avec etoiles filantes.
Aurora Effect
Effet aurore boreale avec gradients colores animés.
Noise/Grain Texture
Texture granuleuse SVG pour un effet cinematographique.
Animated Mesh Gradient
Gradient mesh anime avec transitions fluides.
Star Field
Champ d'etoiles en mouvement continu.
Gradient Animation Loop
Gradient multicolore en boucle infinie.
Network Lines
Lignes de reseau connectees geometriques.
Holographic Effect
Effet holographique avec couleurs arc-en-ciel.
Dot Grid Pattern
Grille de points elegante et minimaliste.
Floating Shapes
Formes flottantes colorees avec effet blur.
Spotlight Follow
Spotlight qui suit le curseur de la souris.
Aurora Mesh
Aurore boreale maillée avec des dégradés verts, cyans et violets qui se mélangent et ondulent lentement.
Sunset Mesh
Dégradé maillé aux teintes chaudes de coucher de soleil — orange, rose, rouge et violet en mouvement.
Neon Mesh
Maillage néon vibrant avec des taches de bleu électrique, rose vif et vert lime qui pulsent.
Pastel Mesh
Dégradé maillé doux avec des tons lavande, menthe et pêche qui flottent en harmonie.
Monochrome Mesh
Maillage élégant en camaïeu de bleu et d'indigo, subtil et profond.
Interactive Mesh
Dégradé maillé interactif dont les taches de couleur suivent le curseur de la souris.
Gradient Morph
Le maillage mute entre deux palettes de couleurs complètement différentes toutes les quelques secondes.
Noise Mesh
Dégradé maillé recouvert d'une texture de bruit SVG subtile pour un rendu organique et texturé.
Glass Mesh Card
Un composant carte avec un fond maillé vibrant et un effet de verre dépoli par-dessus.
Glass Mesh Card
Carte avec fond maillé coloré et superposition en glassmorphisme avec flou et transparence.
Animated Border Mesh
Bordure animée composée d'un dégradé maillé multicolore en rotation autour de l'élément.
Color Breathing Gradient
Gradient qui respire en animant l'angle et les teintes via @property en espace OKLCH.
Duotone Image Filter
Transforme le contenu en duotone au survol avec mix-blend-mode et grayscale.
Halftone Effect
Filtre SVG avec feComponentTransfer et feMorphology pour un motif halftone anime au survol.
Chromatic Aberration Text
Separation des canaux RGB au survol creant un effet prismatique avec pseudo-elements.
Color Mix Crossfade
Deux couleurs fondues via color-mix() montrant les chemins de melange oklch vs srgb.
Neon Glow Pulse
Elements avec halo neon pulse via multiples couches de box-shadow animees.
Gradient Spotlight
Gradient radial suit le curseur revelant des couleurs vives sous une surface muette.
Thermal Vision
Carte thermique avec zones chaudes/froides qui reagissent a l'interaction hover.
Color Space Morph
Gradient transitionnant entre espaces colorimétriques sRGB vs OKLCH montrant les differences de midpoints.
Relative Color Palette
Palette entiere derivee d'une seule couleur de base via OKLCH et proprietes custom calculees.
💎 Glass & Morphism (32)
Voir la page complèteGlass Card
Survol pour l'effet
Glass Card
Carte glassmorphism classique avec backdrop-filter, fond semi-transparent et bordure subtile. Des orbes colorées flottent en arrière-plan.
Frosted Panel
Les blobs bougent derrière le verre givré
Frosted Panel
Panneau givré avec des blobs de gradient animés en arrière-plan, montrant l'effet de flou en temps réel.
Glass Morphing Button
Bouton en verre qui se transforme et s'agrandit au survol avec un effet de backdrop blur.
Facturé annuellement
- Composants illimités
- Support prioritaire
- Mises à jour à vie
- Fichiers source inclus
Glass Pricing Card
Carte tarifaire en verre avec bordure dégradée, prix, liste de fonctionnalités et bouton d'action.
Confirmation
Voulez-vous sauvegarder les modifications apportées à ce projet ?
Frosted Modal
Fenêtre modale avec effet verre givré. L'arrière-plan contient des éléments colorés visibles à travers le flou.
Succès
Vos modifications ont été enregistrées.
Information
Nouvelle mise à jour disponible.
Attention
Votre session expire bientôt.
Glass Notification
Notifications toast en verre avec icône, texte et bouton de fermeture. Trois variantes : succès, info et avertissement.
Layered Glass
Plusieurs panneaux de verre superposés à différents niveaux de flou, créant un effet de profondeur.
Glass Input
Champs de formulaire avec effet verre, flou d'arrière-plan et lueur violette au focus.
Aurora Glass
Aurore boréale animée
Aurora Glass
Carte en verre avec des couleurs d'aurore boréale animées derrière la surface givrée.
Neu Button
Boutons neumorphiques avec double ombre (claire et foncée). L'état pressé utilise des ombres internes pour simuler l'enfoncement.
Profil Utilisateur
Carte avec avatar en creux, texte et barre de progression neumorphique.
Neu Card
Carte en relief avec avatar en creux (inset shadow), barre de progression colorée et ombres douces au survol.
Neu Toggle
Interrupteurs neumorphiques avec piste en creux et bouton en relief. Animation bounce au changement d'état.
Neu Input
Champs de saisie en creux avec ombre interne. Lueur violette subtile au focus et icône de recherche intégrée.
Neu Slider
Curseurs avec piste en creux et poignée en relief. La barre de remplissage utilise un gradient violet.
Neu Clock
Horloge analogique neumorphique avec cadran en creux, aiguilles animées en temps réel et repères des heures.
Midnight Drive
Synthwave FM
Neu Music Player
Lecteur musical complet avec pochette rotative, barre de progression et boutons de contrôle en relief.
Neu Calculator
Calculatrice complète avec écran en creux, touches en relief et touche égal avec gradient violet.
Claymorphism
Design argile avec bordures douces, ombres colorées et aspect 3D tactile.
Claymorphism Card
Variante colorée du neumorphisme avec effet argile : bords arrondis, ombres internes et fond pastel.
Tableau de bord
+12.5%Neu Dashboard
Mini tableau de bord avec statistiques en relief, badge en creux et graphique à barres dans un cadre neumorphique.
Liquid Glass Card
Carte translucide avec refraction et highlights speculaires via SVG feTurbulence et feSpecularLighting.
Glass Morphing Button
Bouton qui transite entre un etat solide et un etat verre liquide au survol avec displacement SVG.
Liquid Lens Magnifier
Lentille de verre survolable qui refracte et amplifie le contenu sous-jacent avec distorsion de bord.
Glass Ripple Touch
Cliquez sur la surface en verre pour creer des ondulations concentriques qui se propagent.
Iridescent Glass Panel
Panneau de verre avec reflets chromatiques arc-en-ciel qui reagissent a l'angle de la souris.
Glass Depth Stack
Panneaux de verre empiles a differentes profondeurs avec blur parallaxe entre les couches.
Liquid Glass Toggle
Toggle switch avec un bouton-bulle en verre liquide qui s'ecrase et refracte la lumiere.
Rain on Glass
Gouttes d'eau animees glissant sur une surface en verre givree avec trainee de refraction.
Glass Shatter & Reform
Cliquez pour briser le panneau de verre en fragments, puis reassemblez-le magnetiquement.
Bubble Glass Grid
Grille de bulles en verre qui fusionnent et se separent au survol avec des transitions fluides.
Glass Caustics
Motifs caustiques lumineux projetes sous une couche de verre, simulant la refraction de la lumiere.
🌀 Effets Visuels (30)
Voir la page complèteRGB Split
Séparation chromatique style corruption.
VHS Effect
Effet cassette VHS rétro avec scanlines.
Pixelate Effect
Pixelisation au survol style 8-bit.
Melting Text
Texte qui fond et se déforme.
Wave Distortion
Ondulation et torsion du texte.
Noise Overlay
Texture grain animée style film.
CRT Screen
Effet écran cathodique rétro.
Glitch Blocks
Blocs de corruption aléatoires.
Broken Glass
Effet verre brisé avec éclats et fissures.
Static Noise
Interférence TV statique style analogique.
Holographic Card
Reflets arc-en-ciel au survol style carte Pokémon.
Iridescent Surface
Surface changeante style nacre ou bulle de savon.
Prismatic Text
Texte avec aberration chromatique et dispersion.
Chrome Reflection
Surface métallique chromée avec reflet.
Oil Slick
Effet flaque d'huile avec reflets multicolores.
Hologram Projection
Projection holographique flottante avec scanlines.
Rainbow Refraction
Lumière réfractée à travers un prisme.
Crystal Effect
Gemme cristalline avec reflets internes.
Holographic Badge
Badge autocollant avec effet foil holographique rotatif.
Laser Beam
Faisceau laser anime avec refraction arc-en-ciel.
> LOADING DATA...
> READY_
CRT Monitor Effect
Effet moniteur CRT avec scanlines, courbure d'écran et lueur phosphore verte.
VHS Tracking
Distorsion de tracking VHS animée avec déplacement horizontal et bleeding couleur.
ASCII Art Renderer
Texte affiché en caractères ASCII avec police monospace et look terminal vert sur noir.
Pixel Dissolve
Élément qui se pixelise et se dissout au survol avec transition par étapes CSS.
LED Matrix Display
Texte rendu en afficheur LED dot-matrix avec lueur rouge et grille de points.
Retro Terminal
Terminal vert sur noir avec animation de frappe, curseur clignotant et scanlines CRT.
Gameboy Palette
Contenu rendu dans la palette 4 nuances de vert du Gameboy avec filtre CSS.
Dot Matrix Printer
Texte apparaissant ligne par ligne comme imprimé par une imprimante matricielle.
Welcome to Windows 95!
Windows 95 UI Kit
Boutons et fenêtre avec bordures biseautées 3D authentiques style Win95.
Synthwave Scene
Scène rétro animée avec grille en perspective, soleil néon et palette rose/cyan/violet.
💧 Liquid & Morphing (30)
Voir la page complèteMetaballs
Blobs organiques qui fusionnent ensemble avec un effet de tension de surface.
Water Ripple
Effet d'ondulation realiste simule avec propagation des vagues.
Liquid Button
Bouton avec effet de remplissage liquide anime au survol.
Dripping Text
Texte avec effet de gouttes qui tombent continuellement.
Bubble Rise
Bulles translucides qui montent avec des mouvements organiques.
Lava Lamp
Blobs flottants style lampe a lave avec deformations organiques.
Mercury Drops
Gouttes metalliques avec reflets realistes et rebonds elastiques.
Wave Surface
Surface d'eau animee avec plusieurs couches de vagues.
Splash Effect
Effet d'eclaboussure interactif avec particules et gouttelettes.
Fluid Gradient
Gradient anime qui coule comme un liquide avec mouvement organique.
Blob Morph
Forme organique qui se metamorphose continuellement entre differentes silhouettes fluides via l'animation du border-radius.
Icon Morph
Icone hamburger qui se transforme en croix de fermeture avec des transitions CSS fluides au clic.
Shape Shifter
Forme qui cycle entre cercle, carre, triangle, hexagone et etoile grace aux transitions clip-path.
Button Morph
Bouton qui se metamorphose en spinner de chargement, puis en coche de validation au clic.
Text Morph
Texte qui se metamorphose entre plusieurs mots avec un effet de flou et opacite pour une transition douce.
Specialiste en design d'interfaces interactives avec plus de 8 ans d'experience en conception web premium.
Card Morph
Carte compacte qui s'agrandit et se transforme en panneau detaille au clic avec des transitions fluides.
SVG Path Morph
Forme SVG qui se metamorphose entre etoile, coeur et cercle en animant l'attribut de chemin.
Liquid Morph
Gouttes liquides qui fusionnent et se separent grace a l'astuce CSS filter blur + contrast pour un effet organique.
Avatar Morph
Avatar circulaire qui se transforme en carte rectangulaire avec informations utilisateur au survol.
Toggle Morph
Interrupteur dont le curseur change de forme en glissant : le cercle se deforme en pilule avant de reprendre sa forme initiale.
AI & Intelligence
AI Shape Morph
Formes SVG qui s'interpolent fluidement entre differentes silhouettes avec des transitions organiques.
Generative Flow Field
Champ de flux genere par bruit Perlin avec des particules qui suivent les lignes de force.
Neural Net Viz
Graphe anime de neurones avec des connexions pulsantes et des activations dynamiques.
AI Color Shift
Palette de couleurs generee dynamiquement en OKLCH avec transitions fluides entre harmonies.
Swarm Intelligence
Particules en essaim avec comportement emergent : cohesion, separation et alignement.
Generative Glitch
Art glitch generatif avec decoupage aleatoire et effets chromatiques animes.
Predictive Grid Morph
Grille interactive qui se deforme au survol avec une prediction de trajectoire de la souris.
Deep Dream Pattern
Patterns fractals animes inspires du deep dream avec des motifs auto-similaires en mouvement.
AI Typo Morph
Lettres qui se transforment fluidement entre differents mots avec un effet de morphing typographique.
Mesh Distortion AI
Mesh gradient deformable avec interactions de souris et deformations organiques reactives.
🖼️ SVG & Art (10)
Voir la page complèteLine Draw
Chemin SVG qui se dessine progressivement avec stroke-dasharray et dashoffset.
Logo Draw
Animation de dessin de logo complexe avec plusieurs elements en sequence.
Morphing Shape
Forme qui se transforme en differentes geometries avec animation CSS.
SVG Fill Animation
Forme qui se remplit de couleur progressivement du bas vers le haut.
Animated Icons
Icones avec animations subtiles: checkmark et X qui se dessinent.
Path Following
Element qui suit un chemin SVG defini avec animateMotion.
SVG Text Draw
Texte dont le contour se dessine puis se remplit de couleur.
Pulse / Heartbeat
Coeur SVG avec animation de battement et ondes de pulsation.
Rotating Gears
Engrenages imbriques qui tournent en sens inverse.
Wave Path
Ligne ondulante animee avec gradient et effet de mouvement.
📜 Scroll & Parallax (64)
Voir la page complèteScroll Basics
Premier element
Apparait en montant avec un fondu
Deuxieme element
Animation progressive au scroll
Troisieme element
Utilise animation-timeline: view()
Quatrieme element
Chaque element s'anime individuellement
Cinquieme element
Tout en CSS, zero JavaScript
Fade Up
Elements qui apparaissent en montant avec un fondu progressif via animation-timeline: view().
Scale In
L'element grossit progressivement
Effet zoom
De scale(0.7) a scale(1)
Apparition douce
Combine opacity et transform
CSS natif
Aucun JavaScript nécessaire
Performance
Utilise les proprietes GPU
Scale In
Elements qui grossissent depuis une taille reduite avec animation-timeline: view().
Slide In
Elements glissant depuis la gauche et la droite en alternance via view().
Couche arriere
Le fond se deplace plus lentement
Couche avant
Le contenu avance normalement
Effet profondeur
Cree une sensation de 3D
Parallax
Effet de parallaxe ou l'arriere-plan bouge a vitesse differente via scroll(nearest).
Progress Reveal
Texte qui se remplit progressivement avec un gradient anime par scroll(nearest) et @property.
Stagger Cards
Cartes apparaissant en cascade avec animation-delay incremental et view().
Horizontal Scroll
Defilement horizontal avec scroll-snap pour une navigation fluide entre les elements.
Design
Code
Performance
3D
Rapide
Sécurisé
Rotate In
Cartes apparaissant avec rotation et scale via view() et animation-delay.
Blur Reveal
Effet de mise au point progressif
Effet Cinema
De flou total a nettete parfaite
CSS Natif
Animation via view() sans JavaScript
Blur Reveal
Effet de mise au point progressive avec blur(20px) anime vers blur(0) via view().
Counter Scroll
Compteurs animes qui s'incrementent lorsqu'ils entrent dans la vue du conteneur.
Scroll-Driven Animation
Animation native CSS pilotee par le scroll
Apparition progressive
L'element apparait en entrant dans la vue
Entry range
animation-range: entry 0% entry 100%
Zero JavaScript
Tout est gere par le CSS
Performance GPU
Animations optimisees pour le GPU
Scroll-Driven Fade
Animation CSS native pilotee par le scroll avec animation-timeline: view() et entry range.
View Timeline Scale
L'element s'agrandit selon sa position dans la vue
Scale progressif
De scale(0.7) a scale(1) fluidement
Cover range
animation-range: entry 0% cover 50%
CSS pur
Aucune dependance JavaScript
Fluide
Animation continue liee au scroll
View Timeline Scale
Elements qui s'agrandissent progressivement via animation-timeline: view() et cover range.
Scroll Progress Bar
Barre de progression sticky liee au scroll du conteneur via scroll(nearest).
Parallax Layers CSS
Couches se deplacant a vitesses differentes via scroll(nearest) pour un effet de profondeur.
Rotate On Scroll
Element effectuant une rotation de 720 degres liee au scroll via scroll(nearest).
Slide In CSS Native
Slide gauche/droite natif CSS avec animation-timeline: view() et cover range.
Blur to Clear
Transition progressive de flou vers nettete
Cover Range
animation-range: entry 0% cover 50%
Cinematographique
Effet de rack focus pur CSS
Blur to Clear
Transition de blur(10px) a blur(0) pour un effet cinematographique via view().
Stagger Reveal CSS
Grille d'items avec animation-delay incremental CSS natif et view() pour un effet cascade.
Clip Path Reveal
Revelation progressive de gauche a droite
Direction Verticale
Le contenu se revele de haut en bas
Montee Inversee
Apparition depuis le bas du cadre
Clip Path Reveal
Revelation progressive via clip-path: inset() anime par view() et cover range.
Color Change
Changement de couleur progressif (violet, rose, cyan, vert) lie au scroll via scroll(nearest).
Barre de progression
Scrollez pour voir la barre se remplir. Utilise animation-timeline: scroll() pour lier l'animation au défilement du conteneur.
Progress Bar
Barre de progression liée au scroll via animation-timeline: scroll(). Se remplit de 0% à 100% en CSS pur.
Premier élément
Apparaît en glissant depuis le bas
Deuxième élément
Se révèle au scroll avec animation-timeline: view()
Troisième élément
Chaque carte s'anime individuellement
Quatrième élément
animation-range contrôle le timing
Cinquième élément
Tout en CSS, zéro JavaScript
Fade In Reveal
Éléments qui apparaissent progressivement via animation-timeline: view() et animation-range: entry.
Parallax CSS
Chaque couche bouge à une vitesse différente
Parallax Layers
Couches parallaxes avec des vitesses différentes, pilotées uniquement par scroll() en CSS natif.
Design System
Apparaît avec un effet de zoom
User Experience
Scale de 0.7 à 1 au scroll
Responsive
animation-range: entry 0% entry 50%
Scale on Scroll
Cartes qui grandissent de 70% à 100% en entrant dans la vue via animation-timeline: view().
Color Shift
Le fond change de couleur au scroll
Color Shift
Gradient de fond qui évolue à travers 5 palettes de couleurs en scrollant, via animation-timeline: scroll().
Apparition mot par mot au scroll
animation-timeline: view()
Pas de JavaScript requis
CSS natif uniquement
Text Reveal
Mots qui glissent depuis le bas et se révèlent progressivement au défilement avec view().
Rotate on Scroll
Forme géométrique avec rotation à 720° liée au scroll. Les bordures tournent en sens inverse.
Slide In Cards
Cartes qui glissent alternativement depuis la gauche et la droite avec view() et animation-range: entry.
Zoom & Blur
Cercle qui zoome et se défloute au centre du scroll, puis continue à zoomer et se refloute en sortant.
Carte 1
Scroll vertical
Carte 2
→ mouvement horizontal
Carte 3
animation-timeline
Carte 4
scroll(nearest)
Carte 5
CSS pur
Horizontal Scroll
Scroll vertical converti en défilement horizontal des cartes via animation-timeline: scroll().
Chapitre 1 : Introduction
Bienvenue dans cette démonstration de barre de progression liée au scroll. La barre en haut de ce conteneur progresse en fonction de votre position de défilement.
Cet effet utilise la propriété CSS animation-timeline: scroll() qui lie une animation @keyframes directement à la position de défilement du conteneur.
Chapitre 2 : Fonctionnement
La propriété scroll-timeline crée un timeline nommé sur le conteneur scrollable. L'animation progress-bar utilise ensuite ce timeline pour animer la propriété transform: scaleX().
Le résultat est une barre de progression fluide qui représente exactement le pourcentage de contenu lu, sans aucun JavaScript.
Chapitre 3 : Applications
Idéal pour les articles de blog, les pages de documentation, les tutoriels ou tout contenu long où l'utilisateur souhaite visualiser sa progression de lecture.
Compatible avec les navigateurs modernes supportant les Scroll-Driven Animations (Chrome 115+, Edge 115+).
Chapitre 4 : Conclusion
Les animations liées au scroll ouvrent de nouvelles possibilités pour l'expérience utilisateur, le tout en CSS pur sans impact sur les performances JavaScript.
Progress Bar
Barre de progression de lecture pilotée par animation-timeline: scroll(), zéro JavaScript.
Scroll Fade Gallery
Images qui apparaissent en fondu et s'agrandissent à l'entrée du viewport via animation-timeline: view().
Horizontal Scroll Section
Section défilant horizontalement lors du scroll vertical, pur CSS avec scroll-timeline.
Sticky Reveal Stack
Cartes s'empilant et se révélant une par une au scroll avec view() timeline.
Text Line Reveal
Chaque mot se colore progressivement lors du scroll via animation-range et view().
Un second bloc qui apparaît aussi en zoom cinématique.
Zoom Into Content
Contenu démarrant dézoomé qui s'agrandit à 100% au scroll, effet d'ouverture cinématique.
Rotation on Scroll
Élément tournant proportionnellement à la position de scroll, effet cadran/boussole.
Path Drawing on Scroll
Tracé SVG se dessinant via stroke-dashoffset animé par le scroll, pur CSS.
Parallax Layers
Parallaxe multi-couches entièrement contrôlé par scroll() timeline, sans JS.
Snap Gallery with Progress
Galerie snap-scrolling avec barre de progression et dots liés au scroll, pur CSS.
Progress Bar
Barre de progression horizontale qui se remplit proportionnellement au defilement du contenu.
Parallax Layers
Trois couches visuelles se deplacent a des vitesses differentes pour creer un effet de profondeur immersif.
Design Systeme
Construisez une base solide avec des tokens, composants et patterns reutilisables pour une coherence visuelle parfaite.
Motion Design
Donnez vie a vos interfaces avec des animations fluides et significatives qui guident l'attention de l'utilisateur.
Micro-interactions
Les petits details font la difference. Chaque hover, clic et transition contribue a une experience memorable.
Accessibilite
Un design inclusif garantit que chaque utilisateur peut naviguer et interagir avec votre contenu sans friction.
Performance
Optimisez chaque animation pour maintenir 60fps et offrir une experience fluide sur tous les appareils.
Reveal on Scroll
Les elements apparaissent avec un fondu et un glissement vertical lorsqu'ils entrent dans la zone visible.
Sticky Horizontal
Defilement horizontal automatique simulant une navigation par panneaux, ideal pour presenter des etapes ou des projets.
Text Highlight on Scroll
Chaque mot s'illumine progressivement au fur et a mesure du defilement, creant un effet de lecture guidee.
Zoom on Scroll
Un element grossit progressivement avec le defilement, passant d'un petit objet a une vue plein ecran.
Scrollez pour animer les compteurs
Number Counter Scroll
Les compteurs s'animent de zero a leur valeur cible proportionnellement a la position de defilement.
Timeline Scroll
Chronologie verticale interactive avec une ligne qui se dessine progressivement et des elements qui apparaissent au defilement.
Image Sequence
Simulation d'animation image par image pilotee par le scroll, similaire aux pages produit Apple.
Scroll Snap Sections
Sections pleine hauteur avec accrochage magnetique et indicateur de pagination lateral.
Sticky Scroll
Premiere Section
L'image reste fixe pendant que le contenu defile. Technique ideale pour presenter des fonctionnalites.
Deuxieme Section
Chaque section de texte declenche un changement visuel dans l'image sticky.
Troisieme Section
Les transitions douces guident l'utilisateur a travers le contenu de maniere fluide.
Quatrieme Section
Pattern utilise dans le journalisme interactif et les sites de produits.
Sticky Image Change
Image sticky qui change pendant que le contenu defile avec des panneaux reveles via view().
Horizontal Scroll
Section a defilement horizontal avec snap pour naviguer entre les etapes du workflow.
Card Stack
Cartes qui s'empilent avec position sticky et animation view() dans le conteneur.
Etape 1: Conception
Definissez votre vision et planifiez votre projet.
Etape 2: Developpement
Transformez vos idees en code propre et efficace.
Etape 3: Tests
Assurez la qualite et la fiabilite du produit.
Etape 4: Lancement
Deployez votre projet et celebrez votre succes.
Progress Reveal
Barre de progression sticky avec items reveles progressivement via scroll(nearest) et view().
Architecture Moderne
Applications evolutives bien pensees.
- Microservices
- API RESTful
- Cloud Native
Performance Optimale
Optimisez chaque aspect de votre app.
- Lazy Loading
- Code Splitting
- Caching
Sécurité Renforcee
Protegez vos donnees et utilisateurs.
- 2FA
- Chiffrement E2E
- Audits
Split Screen Sticky
Visuel sticky avec SVG rotatif et contenu revele par scroll via view() et scroll(nearest).
Zoom In Sticky
Element qui zoome progressivement de scale(1) a scale(2.2) via scroll(nearest).
Text Highlight Scroll
Mots colores sequentiellement au scroll avec JS scope au conteneur.
Layered Parallax
5 couches se deplacant a vitesses differentes via scroll(nearest) pour un effet parallax complet.
Scroll Snap
Section 1
Faites defiler pour passer a la suivante
Section 2
Le scroll s'arrete automatiquement
Section 3
Experience fluide et controlee
Section 4
Dernière section
Vertical Snap
Sections s'ancrant automatiquement au debut via scroll-snap-type: y mandatory.
Slide 1
Faites glisser horizontalement
Slide 2
Navigation intuitive
Slide 3
Parfait pour les galeries
Slide 4
Experience mobile optimisee
Slide 5
Dernière diapositive
Horizontal Snap
Defilement horizontal avec ancrage automatique via scroll-snap-type: x mandatory.
Projet Alpha
Interface moderne avec animations fluides.
DesignProjet Beta
Application web progressive performante.
DevProjet Gamma
Plateforme e-commerce immersive.
E-commerceProjet Delta
Dashboard analytique temps reel.
AnalyticsProjet Epsilon
Application mobile cross-platform.
MobileProjet Zeta
Systeme de gestion de contenu.
CMSCard Snap Carousel
Carrousel de cartes s'alignant au centre avec scroll-snap-align: center.
Section Principale
Hauteur complete
Section Moyenne
Demi-hauteur
Section Moyenne
Demi-hauteur
Petite
Compacte
Section Finale
Retour hauteur complete
Mixed Content Snap
Sections de tailles differentes avec scroll-snap-type: y proximity pour flexibilite.
Etape 1
Commencez votre parcours
01Etape 2
Progression en cours
02Etape 3
A mi-chemin
03Etape 4
Presque termine
04Etape 5
Mission accomplie!
05Snap + Progress
Snap vertical avec barre de progression et dots indicateurs via JS scope au conteneur.
Lancement
Demarrez avec style et elegance
Innovation
Des idees qui transforment
Precision
Chaque detail compte
Excellence
Le resultat final parfait
Smooth Snap
Snap avec animations declenchees par IntersectionObserver scope au conteneur.
🔄 Transitions (50)
Voir la page complèteFade Through
La page s'efface progressivement vers le noir puis revele la nouvelle page.
Slide Over
Le nouveau contenu glisse par-dessus l'ancien de gauche a droite.
Circle Reveal
Un cercle s'agrandit depuis le centre pour reveler la nouvelle page.
Curtain Open
Deux panneaux s'ouvrent comme des rideaux de theatre.
Diagonal Wipe
Une ligne diagonale balaye l'ecran pour reveler le nouveau contenu.
Pixelate Dissolve
L'ecran se decompose en pixels qui apparaissent et disparaissent.
Flip Page
La page se retourne comme dans un livre.
Zoom Through
Zoom vers le centre de l'ecran puis zoom arriere sur la nouvelle page.
Blinds Effect
Des stores horizontaux se ferment puis s'ouvrent pour reveler la nouvelle page.
Morph Transition
Une forme se transforme et s'agrandit pour couvrir l'ecran puis retrecit.
Crossfade Transition
Fondu enchaine fluide entre deux etats. Simule le crossfade natif de la View Transitions API.
Slide Transition
Le contenu glisse vers la gauche tandis que le nouveau contenu arrive par la droite, comme une navigation entre pages.
Scale Morph
L'element change de taille, de forme et de couleur avec une courbe d'animation elastique.
Fade & Slide Up
Le contenu sort en fondu vers le haut et le nouveau contenu monte depuis le bas. Ideal pour les profils et cartes.
Flip Transition
La carte effectue une rotation 3D pour reveler un contenu different au verso. Effet classique et elegant.
Zoom Transition
Effet de zoom avant qui agrandit la vue pour passer a un nouvel etat detaille. Parfait pour les galeries.
Circular Reveal
Le nouveau contenu se revele avec un cercle qui s'agrandit via clip-path. Ideal pour les bascules de theme.
Stagger List
Les elements de liste sortent un par un avec des delais decales, puis les nouveaux elements apparaissent progressivement.
Page Turn
Simule un effet de page qui tourne en 3D pour reveler la page suivante. Inspire des liseuses et livres numeriques.
Dark Mode
Thème sombre actif
Light Mode
Thème clair actif
Circular Reveal
Toggle de thème avec révélation circulaire via clip-path: circle() depuis le bouton en haut à droite.
Mode Sombre
Cliquez pour un fondu doux vers le thème clair
Mode Clair
Cliquez pour revenir au thème sombre
Smooth Fade
Transition entre thèmes par fondu croisé d'opacité avec morphing d'icône soleil/lune.
Wipe Transition
Glissement latéral
Wipe Transition
Glissement latéral
Slide Wipe
Balayage horizontal avec clip-path: inset() et ligne de séparation lumineuse qui traverse l'écran.
CSS Variables
Transition via custom properties
Color Morph
Transition de thème entièrement pilotée par CSS custom properties avec transition sur chaque variable.
Icon Toggle
Bouton de thème avec morphing rotatif entre les icônes soleil et lune. Rotation et scale combinés.
Cliquez sur cette carte pour basculer entre thème sombre et clair avec des transitions fluides.
Card Theme
Carte complète avec avatar, texte et boutons dont chaque élément transitionne entre les deux thèmes.
Gradient Shift
Cliquez pour changer l'ambiance
Gradient Shift
Fond gradient qui passe de teintes froides nocturnes à des tons chauds dorés en 0.8s.
Adaptive UI
Interface miniature complète (nav, contenu, blocs) qui bascule entre thème sombre et clair au clic.
Composant
Composant
Split Compare
Comparaison côte-à-côte des deux thèmes avec séparateur lumineux central et label « VS ».
Pixel Transition
Cliquez pour pixeliser
Dark ModePixel Transition
Cliquez pour pixeliser
Light ModePixelate Transition
Transition pixelisée : des blocs colorés apparaissent en cascade aléatoire pour révéler le nouveau thème.
Popover Bloom
L'element s'ouvre en fleur depuis son point d'ancrage avec scale + opacity via @starting-style.
Dialog Curtain
Modal qui s'ouvre comme des rideaux de scene, se separant depuis le centre.
Stage Curtain Dialog
Le contenu apparait apres l'ouverture des rideaux.
Toast Cascade
Notifications toast empilees avec entree fluide, reordonnancement et sortie gracieuse.
Card Vanish
La carte se dissout en particules au retrait et se materialise depuis les particules a l'entree.
List Item Slide
Les elements glissent depuis le cote avec delais echelonnes et se replient a la suppression.
Accordion Fold
Sections de contenu qui se plient/deplient comme du papier avec transformations 3D perspective.
Morph Transition
L'element morphe de forme/position en passant de display:none a display:block avec allow-discrete.
Portal Open
Le contenu apparait a travers un masque circulaire en expansion, comme un portail qui s'ouvre.
Flip Card Entry
Les elements pivotent depuis la face arriere avec rotation 3D pour reveler le contenu.
Fade Through Color
Les elements passent par une couleur de marque (pas juste l'opacite) lors de l'entree/sortie.
Motion Design
Staggered Reveal
Elements apparaissant en cascade avec un delai progressif pour un effet coordonne.
Elastic Spring
Animation ressort avec rebond physique et deformation elastique realiste.
Orchestrated Motion
Animation coordonnee multi-elements type After Effects avec timing synchronise.
Kinetic Wave
Propagation d'onde a travers une grille de points avec delai progressif.
Inertia Momentum
Mouvement avec inertie et deceleration naturelle : glissez le cube et regardez-le ralentir.
SVG Path Follow
Element qui suit un chemin SVG complexe avec une animation fluide le long de la courbe.
Character Cascade
Texte avec animation caractere par caractere, chaque lettre apparait individuellement.
3D Flip Sequence
Sequence de flips 3D enchaines avec delai entre chaque carte pour un effet domino.
Shape Morph Transition
Transition fluide entre formes geometriques : cercle, blob organique, carre, et retour.
Timeline Choreography
Sequence timeline multi-etapes synchronisee avec des barres de progression animees.
👆 Hover & Interactions (48)
Voir la page complèteScale & Rotate
Agrandissement avec légère rotation.
Background Slide
Le fond glisse de gauche à droite.
Border Gradient
Bordure gradient qui apparaît au survol.
Shine Effect
Reflet lumineux qui traverse l'élément.
Underline Expand
Ligne qui s'étend depuis le centre.
Icon Bounce
L'icône rebondit au survol.
Color Shift
Transition de couleur fluide.
Blur Reveal
L'élément flou devient net au survol.
Shadow Inset
Ombre intérieure lumineuse.
Tilt 3D
Inclinaison perspective au survol.
Shutter Reveal
Effet volets qui s'ouvrent au survol.
Glitch Hover
Effet glitch RGB au survol.
Fill Up
Remplissage de bas en haut avec courbe ease-quart. Inspiré de Daily Delights.
Filter Animated
Animation de filtres CSS optimisée GPU avec will-change.
Spotlight Effect
Effet projecteur qui suit le curseur sur l'élément.
Magnetic Pull
L'élément est attiré par le curseur avec effet magnétique.
Elastic Scale
Agrandissement avec courbe élastique et rebond naturel.
Gradient Shift
Gradient animé qui accélère au survol pour un effet dynamique.
Like Heart
Bouton like avec animation pop, anneau de propagation et explosion de particules colorées au clic.
Bookmark Toggle
Bouton de sauvegarde avec animation de chute, remplissage du fond et transition de couleur.
Submit Button
Bouton envoi avec morphing circulaire, spinner de chargement et animation de check de succès.
Ripple Click
Effet Material Design ripple au clic. L'onde se propage depuis le point de contact et s'estompe.
Cliquez pour simuler
Pull to Refresh
Simulation pull-to-refresh mobile avec indicateur rotatif, déplacement du contenu et spinner de chargement.
Notification Bell
Cloche avec animation de vibration, badge compteur avec pop-in et toast de notification glissant.
Star Rating
Système de notation avec animation pop et rotation sur chaque étoile. Labels dynamiques selon la note.
Switch with Icons
Interrupteurs avec icônes intégrées dans la poignée, animation bounce et changement de couleur.
Copy to Clipboard
Bouton copier avec transition d'icônes (copie → check), couleur de succès et tooltip « Copié ».
Confetti Button
Bouton qui déclenche une pluie de confettis colorés avec gravité et rotation réalistes.
Paint Brush
Pinceau lumineux qui laisse une traînée colorée.
Repel Particles
Particules qui fuient le curseur.
Text Scramble
Texte qui se décode au survol.
Elastic Drag
Élément draggable avec retour élastique.
Scratch Reveal
Grattez pour révéler le contenu caché.
Morph on Click
Forme qui se transforme à chaque clic.
Live Typing
Chaque caractère apparaît avec animation.
Sound Visualizer
Barres qui réagissent dynamiquement.
Magnetic Letters
Lettres attirées ou repoussées par le curseur.
Gravity Drag
Éléments qui tombent avec gravité une fois relâchés.
Gravity Simulation
Balles soumises à la gravité avec rebond.
Elastic String
Corde élastique qui réagit au curseur.
Magnetic Field
Particules attirées par un champ magnétique.
Newton's Cradle
Pendules avec transfert d'énergie cinétique.
Liquid Simulation
Gouttes qui se combinent et se séparent.
Spring Physics
Animation élastique avec effet ressort.
Collision Detection
Balles qui rebondissent les unes sur les autres.
Cloth Simulation
Simulation de tissu interactif.
Newton's Cradle
Pendule de Newton avec transfert d'energie.
Rope Physics
Corde interactive avec simulation physique.
🧊 3D & Profondeur (30)
Voir la page complèteRotating Cube
Cube 3D interactif qui suit le mouvement de la souris.
Card Flip 3D
Retournement complet de carte avec effet 3D realiste.
Perspective Tilt
Element qui s'incline en 3D selon la position du curseur.
3D Carousel
Carrousel circulaire avec rotation 3D continue.
Folding Panel
Panneau qui se deplie comme du papier au survol.
3D Button Press
Bouton avec effet de pression 3D realiste.
Layered Parallax 3D
Couches multiples avec effet de profondeur 3D.
Rotating Text
Texte avec rotation 3D animee en continu.
Isometric Grid
Grille isometrique avec cubes 3D interactifs.
Cube Auto-Rotation
Cube 3D avec rotation automatique continue.
Parallax Depth Layers
Couches empilees avec effet de profondeur 3D.
Fold Effect Card
Carte qui se plie vers l'interieur au survol.
Door Open Effect
Porte 3D qui s'ouvre pour reveler le contenu.
Page Turn Effect
Effet de pages qui se tournent au survol.
Prism Rotation
Prisme hexagonal avec rotation automatique.
Floating Elements 3D
Elements flottants avec rotation 3D animee.
3D Button Press V2
Bouton 3D avec effet de pression perspective.
Carousel 3D V2
Carrousel circulaire avec 5 elements en rotation.
Shadow Perspective
Carte avec ombre 3D realiste qui reagit au survol.
Mouse Parallax Scene
Scene multi-couches (etoiles, lune, montagnes, arbres) reagissant au curseur a des vitesses differentes.
Depth Card
Hover to explore
Depth Card
Carte avec elements superposes (fond, texte, icone) se separant en 3D au survol avec translate3d.
Floating Elements
Elements UI flottant et oscillant comme en apesanteur avec des durees d'animation differentes.
Perspective Scroll
Contenu a differentes profondeurs Z creant un effet de vol spatial avec CSS perspective et translateZ.
Layered Paper
Pile de feuilles de papier avec ombres realistes et legere rotation, qui se deploient au survol.
Isometric Grid
Grille isometrique interactive ou les blocs se levent et s'abaissent selon la proximite du curseur.
Depth of Field
Avant/arriere-plan avec flou qui change de focus au survol, simulant la profondeur de champ.
3D Room
Contenu place sur le sol et les murs d'une piece CSS perspective qui tourne au glissement.
Floating Shadows
Elements avec ombres se deplacant independamment comme si une source lumineuse dynamique bougeait.
Parallax Tilt Gallery
Galerie d'images ou chaque element s'incline independamment selon la distance du curseur.
🖱️ Curseurs (26)
Voir la page complèteDot Follower
Point central avec anneau qui suit avec délai.
Glow Effect
Halo lumineux qui suit le curseur.
Cursor Trail
Traînée de points qui suit le mouvement.
Magnetic Effect
L'élément est attiré vers le curseur.
Spotlight Reveal
Le curseur révèle le contenu caché.
Emoji Cursor
Remplace le curseur par un emoji.
Contenu Illuminé
Le curseur éclaire le contenu
Cursor Spotlight
Effet projecteur qui illumine le contenu au passage.
Cursor Ripple
Crée des ondulations au mouvement du curseur.
Cursor Text
Affiche les coordonnées ou un texte personnalisé.
Cursor Morph
Le curseur change de forme selon l'élément survolé.
Custom Circle Cursor
Curseur cercle avec effet de contraste et agrandissement au survol.
Cursor Trail Effect
Trainee du curseur avec 5 points et opacite degradee.
Cursor Expand
Le curseur s'agrandit differemment selon le type d'element.
Magnetic Cursor
L'element suit le curseur avec un effet magnetique subtil.
Spotlight Cursor
Effet de projecteur qui suit le curseur avec un gradient radial.
Cursor Text Reveal
Le curseur revele le texte avec un effet de clip-path circulaire.
Magnetic Elements
Les éléments se déplacent vers le curseur quand il est proche, avec un retour élastique.
Contenu secret découvert !
Trouvez les trésors cachésCursor Spotlight
Un halo de lumière suit le curseur et révèle le contenu caché sous un voile sombre.
Trail Particles
Le curseur laisse une traînée de particules lumineuses qui s'estompent avec la physique.
Cursor Ripple Field
Le mouvement du curseur crée des cercles qui s'étendent comme des gouttes de pluie.
Custom Cursor States
Le curseur change de forme selon le contexte : cercle, losange ou cercle en pointillés.
Cursor Tilt Effect
La carte s'incline en 3D vers la position du curseur avec un reflet lumineux dynamique.
Cursor Text Scramble
Le texte proche du curseur se brouille puis se reconstitue progressivement.
Elastic Cursor
Un curseur personnalisé qui s'étire dans la direction du mouvement et rebondit à l'arrêt.
Cursor Color Sampler
Le curseur capte la couleur de la zone survolée et l'utilise comme halo lumineux.
Gravity Well Cursor
Les éléments proches du curseur subissent une attraction gravitationnelle créant un champ de distorsion.
🃏 Cartes & Layouts (33)
Voir la page complète3D Tilt Effect
La carte s'incline selon la position de la souris.
Glassmorphism
Effet verre dépoli avec backdrop-filter blur.
Spotlight Effect
Lumière qui suit le curseur sur la carte.
Animated Border
Bordure gradient animée en continu.
Flip Card
Retournement 3D au survol.
Hover Lift
Élévation et scale au survol avec ombre portée.
Morphing Shape
Border-radius qui change continuellement.
Glow Pulse
Halo lumineux qui pulse en continu.
Stacked Cards
Les cartes s'ecartent en eventail au survol.
Card Morph
La carte s'agrandit et revele son contenu au clic.
Parallax Layers
Effet de profondeur avec plusieurs couches en 3D.
Shine Effect
Reflet brillant qui traverse la carte au survol.
Neumorphic
Style soft UI avec ombres douces et reliefs subtils.
Claymorphism
Style argile 3D avec effet de profondeur organique.
Contenu cache qui apparait au survol de la carte.
Content Reveal
Le contenu cache se revele progressivement au survol.
Image Zoom
L'image s'agrandit dans la carte au survol.
Holographic
Effet holographique arc-en-ciel anime en continu.
Basic Bento
Grille bento simple avec animations au survol sur chaque cellule. Effet scale et glow.
Bento with Images
Cellules avec backgrounds gradient et overlay qui apparait au survol.
Animated Bento
Les cellules apparaissent en cascade avec un effet stagger au chargement.
Interactive Bento
Cliquez sur une cellule pour l'agrandir. Cliquez a nouveau pour la reduire.
Bento with Stats
Affichage de statistiques avec animation des nombres au survol.
Performance
Optimise pour des temps de chargement ultra-rapides.
Modulaire
Architecture flexible.
Layout
Grilles adaptatives.
3D Ready
Support WebGL integre.
Sécurisé
Protection avancee.
Hover Reveal Bento
Le contenu se revele au survol avec une transition fluide.
Bento Card Stack
Cartes empilees qui se deploient en eventail au survol.
Responsive Bento
Grille qui se reorganise elegamment. Redimensionnez le conteneur pour voir l'effet.
Grid to List Toggle
Items morphing entre grid et list layout avec CSS grid transitions fluides.
Card Expand to Full
Carte qui s'expanse de sa position vers le plein ecran avec transition position/taille.
Tab Content Morph
Panneau d'onglets avec morphing crossfade et transition de position du contenu.
Masonry to Grid
Items qui animent d'un layout masonry organique vers une grille stricte et inversement.
Sidebar to Overlay
Sidebar qui se transforme en overlay plein ecran avec reflow fluide du contenu.
Split Screen Morph
Layout deux panneaux morphant entre 50/50, 70/30 et panneau unique avec transitions CSS flex.
Stacked to Spread
Cartes empilees en pile qui se repartissent en grille avec animation elastique cubic-bezier.
Gallery to Slideshow
Galerie d'images morphant en slideshow plein ecran avec animation de position et navigation.
🎠 Galerie & Média (36)
Voir la page complèteBasic Slider
Slider horizontal simple avec fleches de navigation.
Fade Slider
Transition en fondu entre les slides.
Auto-play Slider
Defilement automatique avec barre de progression.
Thumbnail Slider
Navigation par miniatures sous le slider principal.
Card Carousel
Plusieurs cartes visibles, defilement horizontal.
3D Carousel
Rotation 3D en perspective avec profondeur.
Vertical Slider
Defilement vertical haut/bas.
Parallax Slider
Effet parallaxe sur l'arriere-plan des slides.
Infinite Loop
Defilement infini sans fin visible.
Basic Lightbox
Cliquez sur une image pour l'ouvrir dans un modal avec effet de fade.
Zoom Lightbox
L'image s'agrandit depuis sa position de miniature.
Gallery Grid
Grille style masonry qui ouvre un lightbox.
Lightbox with Thumbnails
Bandeau de miniatures en bas du lightbox.
Fullscreen Lightbox
Mode plein ecran veritable, Echap pour fermer.
Lightbox with Caption
Legende animee qui apparait sous l'image.
Swipe Gallery
Galerie tactile avec geste de balayage.
Hover Zoom
L'image s'agrandit au survol dans son conteneur.
Magnifying Glass
Loupe circulaire qui suit le curseur.
Lens Zoom
Loupe carree qui agrandit la zone sous le curseur.
Pan Zoom
Deplacez la souris pour explorer l'image zoomee.
Click to Zoom
Cliquez pour alterner entre vue normale et zoomee.
Zoom with Overlay
Vue zoomee dans un panneau separe.
Product Zoom
Style e-commerce avec miniatures et survol.
Smooth Ken Burns
Animation lente de zoom et deplacement continu.
Basic Marquee
Defilement horizontal simple et fluide.
Reverse Marquee
Texte defilant dans la direction opposee.
Vertical Marquee
Defilement vertical pour annonces.
Image Marquee
Images defilantes horizontalement.
Speed Variation
Differentes vitesses de defilement.
Hover Pause
Pause au survol de la souris.
Gradient Fade
Fondu en gradient sur les bords.
Alternating Rows
Rangees alternant les directions.
Logo Ticker
Bandeau de logos de partenaires.
Marquee with Icons
Texte melange avec icones et symboles.
📊 Data & Visualisation (28)
Voir la page complèteAnimated Counter
Compteur qui s'anime vers la valeur cible.
Progress Ring
Anneau de progression circulaire anime.
Bar Chart Animated
Graphique en barres avec effet de croissance.
Line Chart Draw
Ligne qui se dessine progressivement.
Pie Chart Reveal
Camembert avec segments qui apparaissent.
Gauge Meter
Jauge animee style speedometre.
Stat Cards
Cartes statistiques avec compteurs animes.
Comparison Bars
Barres horizontales pour comparer des valeurs.
Donut Chart
Graphique donut avec animation sequentielle.
Sparkline
Mini graphique en ligne pour tendances.
Counter Animation CSS
Compteur anime en pure CSS avec @property.
Circular Progress SVG
Cercle de progression avec animation.
Animated Bar Chart
Graphique a barres avec croissance animee.
Donut Chart CSS
Graphique donut avec conic-gradient.
Gauge Meter CSS
Jauge circulaire en pure CSS.
Step Progress Indicator
Indicateur d'etapes avec animation.
Star Rating Animated
Etoiles interactives avec animation.
Line Chart Drawing
Graphique lineaire SVG avec dessin anime.
Counter Odometer
Chiffres qui défilent comme un compteur kilométrique, chaque digit dans son conteneur avec scroll vertical.
Animated Donut Chart
Donut chart avec segments animés via conic-gradient et @property CSS pour des transitions fluides.
Live Sparkline
Sparkline SVG inline avec ajout de points animé et transitions de path fluides.
Gauge Meter
Jauge semi-circulaire avec rotation fluide de l'aiguille via CSS transform: rotate().
Bar Chart Race
Barres horizontales qui se réordonnent avec transitions CSS sur width et order.
Morphing Pie Chart
Segments de pie qui morphent entre deux états de données avec transitions conic-gradient.
Animated Stat Counter
Compteurs qui s'incrémentent avec easing, formatage avec virgules, via requestAnimationFrame.
Progress Steps
Indicateur multi-étapes avec lignes de connexion animées et transitions de couleur d'état.
| Asset | Price | Change |
|---|---|---|
| BTC | $67,432 | +2.4% |
| ETH | $3,521 | +1.8% |
| SOL | $142 | -0.5% |
| ADA | $0.62 | +3.1% |
| DOT | $7.84 | -1.2% |
Data Table Row Animation
Lignes de tableau qui glissent, s'illuminent au hover, et se réordonnent en douceur.
Heatmap Cell Animation
Cellules de grille changeant de couleur selon l'intensité avec transitions CSS fluides.
✨ Atmosphère (50)
Voir la page complèteStarfield
Champ d'étoiles en mouvement vers le spectateur avec effet de profondeur et traînées lumineuses.
Snow Fall
Flocons de neige tombant avec tailles variées, oscillation horizontale et opacité aléatoire.
Fire Effect
Particules de feu montantes avec dégradé de couleur (jaune→orange→rouge) et dissipation progressive.
Smoke
Fumée s'élevant avec expansion progressive, dérive latérale douce et disparition en transparence.
Attraction Field
Particules attirées vers le curseur avec force proportionnelle à la distance. Liens entre particules proches.
Explosion
Cliquez pour déclencher une explosion de particules colorées avec gravité, friction et dissipation.
Fireflies
Lucioles flottantes avec pulsation lumineuse individuelle, mouvement erratique et halo de lumière.
Rain
Gouttes de pluie tombant en diagonale avec splash à l'impact et accumulation au sol.
Galaxy Spiral
Galaxie spirale avec bras en rotation, étoiles de couleurs variées et noyau lumineux central.
Trail Effect
Traînée de particules colorées suivant le curseur avec rotation, réduction et disparition progressive.
Ambient Light Glow
Élément émettant un halo lumineux ambiant coloré via box-shadow multi-couches avec spread progressif.
Day/Night Cycle
Transition fluide à travers un cycle complet jour/nuit avec dégradés animés et soleil en mouvement.
Fog Layer
Brouillard semi-transparent animé dérivant à travers le contenu via pseudo-éléments et translateX.
Fireflies
Lucioles flottant aléatoirement avec lueur douce pulsante sur fond sombre, purement CSS.
Northern Lights
Aurore boréale animée avec dégradés multi-couches, mouvement fluide et rotation de teinte.
Dust Motes
Particules de poussière flottant dans un rayon de lumière avec animations aléatoires subtiles.
Heat Haze
Distorsion subtile ondulante simulant l'air chaud via filtre SVG feTurbulence animé.
Underwater Caustics
Motifs lumineux animés comme sous la surface de l'eau avec dégradés coniques et bulles montantes.
Snow Fall
Chute de neige réaliste avec flocons de tailles et vitesses variées, dérive légère du vent, pur CSS.
Light Leak
Fuites de lumière et flares animés style film avec dégradés et mix-blend-mode screen.
Confetti Explosion
Explosion de confettis au clic.
Morphing Blob
Forme organique qui se déforme en continu.
Ripple Effect
Onde qui se propage depuis le point de clic.
Particle Explosion
Particules qui explosent dans toutes les directions.
Liquid Button
Effet liquide qui remplit le bouton.
Matrix Rain
Effet pluie de code style Matrix.
Fireworks
Cliquez pour lancer des feux d'artifice.
Snow Fall
Flocons de neige qui tombent doucement.
Starfield
Effet de voyage dans l'espace.
Lightning
Eclairs aleatoires avec effet de flash.
Frequency Bars
Barres audio classiques qui reagissent au rythme.
Circular Visualizer
Barres disposees en cercle pour un effet radial.
Wave Form
Onde sinusoidale animee en continu.
Pulse Ring
Anneaux qui pulsent vers l'exterieur au rythme.
Particle Burst
Particules qui explosent sur les beats.
Spectrum Gradient
Barres avec gradient de couleurs dynamique.
3D Bars
Barres avec perspective 3D et ombres.
Blob Morph
Blob organique qui se deforme au son.
Line Graph
Ligne continue animee avec remplissage.
Neon Glow Bars
Barres avec effet neon lumineux.
Effets Sonores
Click Sound Button
Bouton avec feedback sonore genere par Web Audio API au clic.
Hover Sound Card
Carte qui emet un son subtil au survol grace a Web Audio API.
Typing Sound Input
Champ de texte avec son de frappe clavier genere synthetiquement a chaque touche.
Notification Chime
Notification avec son de cloche synthetise et animation d'apparition.
Slider Tick Sound
Slider avec ticks sonores a chaque changement de valeur par pas de 10.
Toggle Switch Sound
Switch on/off avec sons differencies pour chaque etat.
Scroll Ambient Sound
Son d'ambiance dont la frequence varie en fonction de la position de scroll.
Drag Feedback Sound
Son de friction continu pendant le drag, variant avec la vitesse de deplacement.
Success/Error Tone
Sons de validation/erreur synthetises avec des accords majeurs et mineurs.
Ambient Soundscape
Paysage sonore interactif : activez/desactivez des couches de sons d'ambiance.
🔧 Utilitaires (10)
Voir la page complèteFaites defiler ce contenu pour voir la barre de progression en action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Scroll Progress Bar
Indicateur de progression de lecture avec gradient anime en haut du contenu.
Back to Top Button
Bouton anime qui apparait au scroll avec effet de rebond.
Theme Toggle
Interrupteur de theme avec animation fluide soleil/lune.
Countdown Timer
Compte a rebours style flip-clock avec animation de retournement.
Copy to Clipboard
Bouton de copie avec confirmation animee et feedback visuel.
Rating Stars
Systeme de notation avec etoiles animees et effet de remplissage.
Like / Heart Button
Bouton coeur avec animation de battement et explosion de particules.
Bookmark Toggle
Icone de signet avec animation de sauvegarde elastique.
Notification Badge
Badge de notification avec animations pulse, bounce et shake.
Aucun effet trouvé pour cette recherche