Composants
Composants et effets testés, accessibles et disponibles en React, Vue et JavaScript natif.
Blur
EffetBêtaNouveauUne profondeur de champ pour n'importe quel contenu : net autour d'un point, flou en s'en éloignant. Le point suit le pointeur, le défilement ou votre application.
Images & médiasCSSCarousel
ComposantBêtaNouveauUn carrousel de cartes, de photos ou de slides plein écran, que l'on glisse, lance ou fait défiler, avec une physique fidèle au doigt.
Carrousels & listesCSSFallingText
ComposantBêtaFait tomber les lettres d'un titre jusqu'à leur place : elles rebondissent un peu, puis se posent.
TexteGSAPGlowBorder
EffetBêtaUne bordure lumineuse qui glisse autour de l'élément et réagit au pointeur et au focus clavier.
SurfacesCSSGlowCrack
EffetBêtaUne fissure stylisée qui laisse passer la lumière, sur une carte, une image, un bouton ou dans les lettres d'un titre.
SurfacesSVGCSSGradientShapes
ComposantBêtaNouveauUn fond en dégradé animé où des formes douces s’éclairent en contre-jour ; la lumière suit le pointeur et les formes peuvent porter du contenu.
FondsWebGLCSSHologram
ComposantBêtaNouveauProjette un texte, une icône ou un logo en hologramme crédible, que le pointeur perturbe.
TexteWebGLCanvas 2DInfiniteWheel
ComposantBêtaNouveauUne roue d'icônes horizontale ou verticale, en boucle continue, avec relief progressif, glissement, inertie et centrage doux.
Carrousels & listesCSSMagnetic
EffetBêtaAttire un élément vers le pointeur, puis le relâche avec un retour élastique.
PointeurCSSMarquee
ComposantBêtaFait défiler en boucle des logos, des mots ou des cartes, à vitesse constante et sans couture visible.
Carrousels & listesCSSPaper
ComposantBêtaNouveauUne feuille de papier qui se froisse, se plie ou s’envole en avion, et garde la mémoire de ses plis.
SurfacesWebGLCanvas 2DCSSParticleText
ComposantBêtaForme un texte avec un nuage de particules en volume qui réagit au pointeur.
TexteWebGLCanvas 2DProjectedText
ComposantBêtaNouveauUn mot répété et projeté dans un tunnel, un couloir ou un vortex, en boucle sans couture ou au défilement.
TexteWebGLScrollTint
EffetBêtaLa couleur d'un élément suit sa place à l'écran : un dégradé couvre la zone visible, et chaque élément en prend la teinte au défilement.
DéfilementCSSShapeshift
ComposantBêtaNouveauUne transition entre images, textes ou thèmes par une onde de pièces qui se retournent.
Images & médiasWebGLCanvas 2D
Primitives
Les mécaniques sans rendu sur lesquelles reposent les composants : une boucle d'animation, le suivi du pointeur, la progression au défilement, un contexte WebGL partagé.