Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
Hover✨ Premium

Cloth Simulation

Un canvas de 20×15 nœuds reliés par des contraintes de distance simule un textile souple : les nœuds du haut sont ancrés, les autres tombent sous la gravité et répondent à la souris dans un rayon de 50 px. Net sur écran Retina, boucle suspendue hors écran, tissu statique sous mouvement réduit.

CanvasClothInteractive

Mis à jour le

Cloth Simulation — aperçu ▶ Compte gratuit : aperçu en direct + 1 effet offert

Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →

Voir dans le catalogue

3 exemples d'usage

Rideau de révélation sur une page coming soon — le tissu couvre le titre hero, le visiteur le déplace pour le lire — Cloth Simulation exemple 1

① Rideau de révélation sur une page coming soon — le tissu couvre le titre hero, le visiteur le déplace pour le lire

QuandLe visiteur arrive sur une page d'attente ; le tissu occupe tout le fond et brouille le titre en surimpression. En déplaçant la souris, il fait onduler le tissu et révèle progressivement le message.
PourquoiUn rideau interactif transforme l'attente en moment de découverte ; le visiteur s'engage activement avec la page avant même de lire le contenu.
RéglagesRacine en position:absolute;inset:0;z-index:2;background:transparent — le clearRect du canvas laisse passer le texte en dessous ; le titre (z-index:1) reste lisible à travers les mailles de 15 px.
Bannière interactive dans le header d'une fondation — le tissu remplace la photo d'en-tête statique — Cloth Simulation exemple 2

② Bannière interactive dans le header d'une fondation — le tissu remplace la photo d'en-tête statique

QuandLa bannière de la fondation ondule doucement sous la barre de navigation ; le visiteur peut déformer le tissu avec sa souris avant de lire la mission et les statistiques de l'organisation.
PourquoiUne bannière tissu vivante en tête de page remplace une image hero statique et coûteuse ; elle évoque le mouvement et la vie sans charger de fichier lourd.
RéglagesConteneur 150 px de haut avec overflow:hidden — le canvas (H=300) est clippé pour ne montrer que les premières rangées du tissu ; background #0c0c28 (indigo profond) pour ancrer le tissu dans la charte bleue de la fondation.
Visuel produit interactif dans une fiche textile e-commerce — le tissu remplace la photo statique du produit — Cloth Simulation exemple 3

③ Visuel produit interactif dans une fiche textile e-commerce — le tissu remplace la photo statique du produit

QuandLe visiteur survole la zone d'aperçu de la fiche produit ; le tissu se déforme sous son curseur, donnant une sensation de matière et de souplesse qui remplace partiellement le toucher du produit.
PourquoiDans une fiche de linge de maison ou de textile, manipuler virtuellement le tissu est plus évocateur qu'une photo fixe ; cela différencie l'interface et augmente le temps passé sur la fiche.
RéglagesConteneur 220×220 px avec overflow:hidden et background #100608 (bordeaux sombre) ; les fils indigo sur fond bordeaux évoquent un textile jacquard sombre ; canvas canvas.height conservé à 300 px pour la physique.

Comment ça marche

La racine .fx-0388-root contient un canvas .fx-0388-canvas de 100 % × 300 px. À l'initialisation, le script mesure la largeur du canvas, applique devicePixelRatio pour la résolution interne et construit une grille de 15 × 20 = 300 nœuds, chacun positionné à 15 px d'écart. Les 20 nœuds de la première rangée sont épinglés (pinned: true) ; les 280 autres sont libres.

À chaque trame, pour chaque nœud libre : la gravité ajoute 0,2 px/trame vers le bas, la souris (ou le doigt) dans un rayon de 50 px ajoute une force d'attraction proportionnelle à l'écart, et l'élasticité rappelle chaque nœud vers sa position de repos. Les vélocités sont amorties à 0,98 par trame. Le tout est mis à l'échelle par dt / 16,67 (temps écoulé borné à 50 ms) pour que la simulation reste stable après un onglet en arrière-plan.

Un IntersectionObserver observe la racine : la boucle s'arrête hors écran. Sous mouvement réduit, les nœuds s'affichent en grille statique sans boucle. Les événements mousemove et touchmove positionnent la souris en coordonnées CSS (le canvas étant en CSS pixels grâce à ctx.scale(dpr, dpr)).

Accessibilité

  • Mouvement réduit : sous prefers-reduced-motion: reduce, la boucle ne démarre pas et le tissu s'affiche en grille statique à ses positions initiales. L'effet est visible et lisible.
  • Toucher : touch-action: none sur le canvas empêche le défilement de la page quand le doigt glisse dessus. L'effet répond au toucher sur mobile. Si le canvas occupe toute la largeur d'une page mobile, envisagez touch-action: pan-y pour conserver le défilement vertical.
  • Rôle décoratif : le canvas ne porte aucun texte ni rôle ARIA. Si le tissu représente un produit ou un drapeau, exposez le nom en texte à côté.
  • Clavier : aucune interaction clavier n'est prévue — l'effet est destiné à la souris et au toucher.

Compatibilité navigateur

Canvas 2D (devicePixelRatio, IntersectionObserver, ResizeObserver, matchMedia), aucune dépendance. IntersectionObserver disponible depuis Chrome 51, Firefox 55 et Safari 12.1 ; ResizeObserver depuis Chrome 64, Firefox 69 et Safari 13.1. Non mesuré dans Firefox et WebKit.

Chrome 64+✓ Complet (mesuré)
Firefox 69+✓ Complet (non mesuré)
Safari 13.1+✓ Complet (non mesuré)
Edge 79+✓ Complet (moteur Chromium)
Mobile iOS 13.4+✓ Complet (non mesuré)
Android Chrome 64+✓ Complet (mesuré sur Chromium)

Sans JavaScript, le canvas reste vide. Sans ResizeObserver, la taille du canvas ne se recale pas si le cadre change de largeur. Sans IntersectionObserver, la boucle tourne aussi hors écran.

Le code

Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :

index.html — structure 
<div class="fx-0388-root"><div class="physics-container"><canvas class="fx-0388-canvas"></canvas><span class="info-label">Texte d'aide</span></div></div>

Paiement unique, sans abonnement — le code est à toi pour toujours

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
Couleur des fils (JS — ctx.strokeStyle = 'rgba(99,102,241,0.5)') rgba(99,102,241,0.5) (indigo semi-transparent) Remplacez par la couleur de votre textile. Une valeur d'alpha entre 0,3 et 0,7 donne la transparence de grille.
Gravité (JS — n.vy += 0.2 * scale) 0,2 px/trame 0,05 donne un tissu presque sans pesanteur (voile en apesanteur), 0,5 un tissu lourd qui tombe vite.
Rayon de réaction à la souris (JS — Math.sqrt(dx*dx+dy*dy) < 50) 50 px 80 px pour un effet plus doux et large, 25 px pour une réaction plus ponctuelle.
Rappel élastique (JS — n.vx += 0.01 * (n.ox - n.x) * scale) 0,01 0,03 ramène le tissu plus vite à sa position de repos (moins de déformation persistante).
Résolution du maillage (JS — COLS = 20, ROWS = 15, SEG = 15) 20×15 nœuds espacés de 15 px Augmentez COLS et ROWS pour un maillage plus fin (plus coûteux). Réduisez SEG pour serrer les nœuds.

FAQ

Oui, progressivement. Le terme n.vx += 0.01 * (n.ox - n.x) rappelle chaque nœud vers sa position de repos. L'amortissement (vx *= 0.98) ralentit les oscillations. Augmentez le coefficient de rappel pour un retour plus rapide.
Non dans cette version. Les contraintes de distance maintiennent chaque segment à sa longueur de référence. Pour simuler une déchirure, il faudrait supprimer les contraintes dépassant un seuil de tension maximal.
Le canvas se redessine à chaque trame avec ctx.clearRect(0, 0, W, H). Pour un fond coloré, ajoutez ctx.fillStyle = '#votre-couleur'; ctx.fillRect(0, 0, W, H); juste avant le dessin des fils, et mettez la propriété CSS background de .fx-0388-root à la même couleur.