domgrav

DomGrav : bibliothèque JavaScript gravitationnelle pour animations web 2026

par

DomGrav est une bibliothèque JavaScript open-source qui applique des forces physiques (gravité, rebond, friction, collisions) directement sur les éléments HTML du DOM. Elle permet de créer des animations web interactives et réalistes, sans moteur 3D lourd, via une API simple compatible avec les principaux frameworks front-end.

Envie d’insuffler un peu de peps à vos pages sans passer des nuits blanches à coder un moteur maison ? Avec DomGrav, la moindre balise HTML se transforme en objet soumis à la gravité, aux chocs ou aux effets ressort, et ce, en quelques lignes de JavaScript moderne. Suivez le guide pour l’adopter efficacement en 2026.

DomGrav en bref : qu’est-ce que c’est et pourquoi l’utiliser ?

Origine du projet et licence open-source

Imaginé pour les passionnés d’interfaces riches, DomGrav se range dans la catégorie “physics for UI”. Concrètement, elle vous laisse manier vos div ou vos boutons comme s’il s’agissait de petites particules dans un moteur 2D.

Distribuée sous licence open-source (généralement MIT, à confirmer sur le dépôt GitHub), la librairie vous donne carte blanche :

  • Utilisation gratuite — même en environnement commercial ;
  • Fork, modifs, redistribution — la route est ouverte à vos idées ;
  • Code transparent — pratique pour les audits et la contribution communautaire.

Derrière, on trouve une communauté active réunie sur GitHub (issues, pull requests) et souvent un salon Discord ou Slack pour échanger en direct.

Principales fonctionnalités (gravité, collision, friction…)

DomGrav se concentre sur la physique appliquée au DOM. À votre disposition :

  • Gravité modulable, verticale ou dirigée ;
  • Ressorts (spring) pour des effets d’élasticité ou de drag-and-drop qui claquent ;
  • Frottements / amortissement afin d’adoucir les déplacements ;
  • Collisions entre éléments DomGrav ou avec les bords d’un conteneur ;
  • Boundaries personnalisables : zone, obstacles, cadre de la fenêtre ;
  • Callbacks & événements à chaque frame, choc, mise en sommeil, etc. ;
  • Transforms CSS via translate3d pour un rendu fluide côté GPU.

Cas d’usage typiques sur des sites web modernes

Du simple gimmick visuel au mini-jeu complet, les terrains de jeu ne manquent pas :

  • Une landing page où logos et icônes dégringolent avant de se stabiliser ;
  • Un nuage de particules DOM — bulles, avatars ou tags qui flottent doucement ;
  • Des animations au scroll : chaque section se comporte comme un bloc en chute libre ;
  • De petits jeux HTML — casse-briques ou puzzles sans toucher à Canvas ;
  • Des boutons et CTA rebondissants qui attirent le clic tout en douceur.

Installation de DomGrav : npm, CDN ou import ES Module

Prérequis techniques

Rien d’exotique : DomGrav vise les stacks front modernes. Vérifiez simplement :

  • Un environnement JavaScript ES6+ (Webpack, Vite, Parcel, etc.) ;
  • Un navigateur qui parle requestAnimationFrame et comprend les class ES6 ;
  • Facultatif mais pratique : un bundler si vous bossez sous React, Vue ou Angular.

Commandes d’installation pas à pas

Classique : on installe, on importe, on s’amuse.

npm install domgrav
# ou
yarn add domgrav
# ou
pnpm add domgrav

Puis dans votre code :

import { DomGrav } from 'domgrav';
// ou
import DomGrav from 'domgrav';

Pas de bundler ? Un simple script CDN fait l’affaire :

<script src="https://cdn.jsdelivr.net/npm/domgrav/dist/domgrav.min.js"></script>
<script>
  const engine = new DomGrav();
</script>

Et si vous préférez un import ESM directement dans le navigateur :

<script type="module">
  import DomGrav from 'https://cdn.jsdelivr.net/npm/domgrav/dist/domgrav.esm.js';
  const engine = new DomGrav();
</script>

Structure de fichier recommandée

Un projet bien rangé, c’est moins de migraines :

  • src/physics/domgrav.js — l’initialisation du moteur ;
  • src/components — vos composants React/Vue/Angular qui consomment la physique ;
  • src/styles/physics.css — les petits réglages de style (position, z-index…).
Lire :  Point rouge iPhone : signification, risques et comment l’enlever

Premiers pas : créer votre première animation gravitationnelle

Initialiser le moteur DomGrav

Un “Hello World” version gravité :

import DomGrav from 'domgrav';

const engine = new DomGrav({
  gravity: { x: 0, y: 0.8 },
  friction: 0.02,
  bounds: 'window'
});

engine.start();

Appliquer la gravité à un élément HTML

Un petit bloc à faire chuter :

<div id="box" class="box">DomGrav</div>

On lui donne la vie :

const boxEl = document.getElementById('box');

const boxBody = engine.addBody(boxEl, {
  mass: 1,
  restitution: 0.7,
  friction: 0.05,
  position: { x: 100, y: 0 },
  velocity: { x: 1, y: 0 }
});

Dès la page chargée, la div tombe, rebondit, puis finit par se calmer.

Astuces de debug et console

Besoin de comprendre ce qui cloche ? Quelques pistes :

  • Activez le debug mode si disponible : 
    const engine = new DomGrav({ debug: true });
  • Inspectez la position et la vélocité à chaque frame : 
    engine.on('afterUpdate', () => {
  console.log(boxBody.position, boxBody.velocity);
});
  • Pensez aux outils de performance intégrés du navigateur pour vérifier FPS et reflows.

API DomGrav détaillée : méthodes, options et événements

Paramètres de forces (gravity, spring, friction)

La sensation globale se joue ici :

const engine = new DomGrav({
  gravity: { x: 0, y: 1 },
  friction: 0.01,
  timeStep: 16.7,
  maxSubSteps: 5
});

Les ressorts, quant à eux, relient deux points — ou deux éléments — pour un effet élastique :

engine.addSpring(boxBody, {
  target: { x: 200, y: 100 },
  stiffness: 0.1,
  damping: 0.2
});

Gestion des collisions et des limites

Un conteneur veut servir de cage ? C’est par ici :

const engine = new DomGrav({
  bounds: {
    type: 'rect',
    element: document.querySelector('.container'),
    restitution: 0.8
  }
});

Et pour que les éléments se bousculent entre eux :

engine.enableCollisions({
  mode: 'aabb',
  restitution: 0.6,
  friction: 0.1
});

En résumé, la gravité se règle via l’option gravity, tandis que les chocs se gèrent avec bounds ou enableCollisions selon vos besoins.

Callbacks & événements personnalisés

Besoin de réagir au moindre choc ? Branchez-vous sur les événements :

engine.on('collision', ({ bodyA, bodyB }) => {
  console.log('Collision détectée', bodyA, bodyB);
});

engine.on('sleep', (body) => {
  console.log('Au repos :', body.id);
});

engine.on('beforeUpdate', (dt) => {
  // votre logique ici
});

engine.on('afterUpdate', () => {
  // synchronisation avec d’autres animations
});

Performance & optimisation : animer le DOM sans sacrifier les FPS

Choix DOM vs Canvas : impacts sur le rendu

DomGrav a fait un pari : rester dans le DOM. Résultat :

  • Points forts : accès direct aux styles CSS, SEO intact, composants React/Vue branchés sans friction.
  • Points faibles : chaque élément animé déclenche reflow/repaint ; au-delà de quelques centaines d’items, Canvas ou WebGL reprennent l’avantage.

Utilisation de requestAnimationFrame et throttling

Le moteur s’aligne sur le rafraîchissement de l’écran grâce à requestAnimationFrame, histoire d’éviter les saccades. Pour tenir la cadence :

  • Throttlez les événements lourds (scroll, resize) ;
  • Coupez les animations si l’utilisateur préfère un mouvement réduit (prefers-reduced-motion) ;
  • Limitez la scène à 50–100 corps côté mobile pour rester confortablement autour de 60 FPS.

Mesures réelles : benchmarks vs autres librairies (GSAP, three.js)

DomGrav ne veut pas remplacer GSAP ou three.js, il joue plutôt la carte de la complémentarité :

  • GSAP excelle dans les timelines et les transitions précises ;
  • Anime.js reste la référence pour le morphing SVG et les micro-animations ;
  • three.js s’impose dès qu’on passe en 3D.
Lire :  Config Livebox : accès, Wi-Fi, sécurité et solutions

Les experts Chrome et Mozilla le rappellent : le secret, c’est surtout de réduire le nombre d’éléments animés et de miser sur transform. DomGrav respecte ces règles et tient généralement 50–60 FPS avec quelques dizaines de corps sur une machine standard.

Intégration avec React, Vue et Angular

Pattern Hook / composant wrapper React

Un petit hook maison fait le lien :

import { useEffect, useRef } from 'react';
import DomGrav from 'domgrav';

const engine = new DomGrav({ gravity: { x: 0, y: 1 } });

function useDomGravBody(options) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    const body = engine.addBody(ref.current, options);
    return () => engine.removeBody(body);
  }, [options]);

  return ref;
}

export function FallingBox() {
  const boxRef = useDomGravBody({ mass: 1, restitution: 0.8 });

  return <div ref={boxRef} className="box">DomGrav</div>;
}

Directive Vue pour DomGrav

Côté Vue 3, une directive suffit :

import DomGrav from 'domgrav';

const engine = new DomGrav({ gravity: { y: 1 } });

export const vDomgrav = {
  mounted(el, binding) {
    const options = binding.value || {};
    el.__domgravBody = engine.addBody(el, options);
  },
  unmounted(el) {
    if (el.__domgravBody) {
      engine.removeBody(el.__domgravBody);
    }
  }
};
<template>
  <div v-domgrav="{ mass: 1, restitution: 0.6 }">Vue + DomGrav</div>
</template>

Service Angular et lifecycle hooks

Angular, même combat, mais en mode service injectable :

import { Injectable, ElementRef } from '@angular/core';
import DomGrav from 'domgrav';

@Injectable({ providedIn: 'root' })
export class DomGravService {
  private engine = new DomGrav({ gravity: { y: 1 } });

  addBody(el: ElementRef, options: any) {
    return this.engine.addBody(el.nativeElement, options);
  }

  removeBody(body: any) {
    this.engine.removeBody(body);
  }
}
import { Component, ElementRef, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { DomGravService } from './domgrav.service';

@Component({
  selector: 'app-falling-box',
  template: '<div #box class="box">Angular</div>'
})
export class FallingBoxComponent implements OnInit, OnDestroy {
  @ViewChild('box') box!: ElementRef;
  private body: any;

  constructor(private domGrav: DomGravService) {}

  ngAfterViewInit() {
    this.body = this.domGrav.addBody(this.box, { mass: 1, restitution: 0.8 });
  }

  ngOnDestroy() {
    if (this.body) {
      this.domGrav.removeBody(this.body);
    }
  }
}

FAQ DomGrav : dépannage, sécurité et feuille de route

Compatibilité navigateurs et fallback

DomGrav se sent à l’aise sur Chrome, Firefox, Edge ou Safari récents. Sur des versions antiques, le moteur peut refuser de démarrer. Dans ce cas :

  • Prévoyez un rendu statique sans animation ;
  • Testez la présence de requestAnimationFrame avant de lancer DomGrav.

DomGrav tourne aussi sur mobile, mais la règle est simple : moins il y a d’éléments, plus ça glisse.

Sécurité et sandboxing

Côté sécurité, la librairie reste une couche front : pas de données sensibles ni de requêtes serveur. On garde tout de même de bons réflexes :

  • Télécharger depuis une source officielle (npm ou CDN reconnu) ;
  • Suivre les mises à jour GitHub ;
  • Éviter d’injecter du contenu non filtré dans le DOM animé.

Roadmap, issues GitHub et contribution

Curieux de participer ? Tout se passe sur GitHub :

  • Les Issues recensent bugs et idées ;
  • Un éventuel ROADMAP.md ou l’onglet Projects détaille la suite ;
  • Envie d’aider ? Fork, branche, tests, documentation, puis pull request.

Comparatif rapide : DomGrav vs GSAP, Anime.js et three.js

Quel outil pour quelle mission ?

  • DomGrav : la physique 2D réaliste appliquée au DOM, parfait pour les interfaces interactives.
  • GSAP : la référence pour les timelines et transitions ultra-précises.
  • Anime.js : idéal pour les effets ponctuels, le morphing SVG.
  • three.js : la Rolls de la 3D WebGL, à réserver aux scènes lourdes.

En clair, choisissez votre outil selon le besoin, et combinez-les si nécessaire : le Web ne s’y est jamais mieux porté.

Lire :  Faire un sondage sur messenger

Checklist accessibilité & SEO lors d’animations DOM avec DomGrav

Un site qui bouge, oui, mais pas au détriment de vos utilisateurs :

  • Désactivez ou simplifiez l’animation si prefers-reduced-motion est activé ;
  • Bannissez les mouvements brusques ou clignotements agressifs ;
  • Gardez une structure HTML sémantique pour le SEO et les aides techniques ;
  • Vérifiez que les éléments interactifs restent accessibles au clavier ;
  • Évitez de faire danser des paragraphes entiers : le texte doit rester lisible.

DomGrav est-il compatible avec React, Vue ou Angular ?

Absolument. L’approche la plus simple consiste à :

  • Instancier un moteur DomGrav unique ;
  • Brancher vos éléments via un hook, une directive ou un service ;
  • Purger les bodies lors du démontage des composants pour éviter les fuites.

Comment installer DomGrav sur un projet web ? (récapitulatif)

En résumé, pour installer DomGrav :

  • npm install domgrav (ou yarn add, pnpm add) ;
  • Ou bien un script CDN directement dans votre HTML ;
  • Puis import DomGrav, créez un moteur et associez-lui vos éléments.

Conclusion : comment tirer le meilleur de DomGrav en 2026

DomGrav, c’est un coup de boost pour vos interfaces : un soupçon de gravité, une pincée de rebond et vos pages prennent vie sans passer par la case WebGL. Installez-le proprement, jouez avec la gravité, les collisions, la friction, puis greffez-le à vos composants React, Vue ou Angular. Testez, mesurez, ajustez… et regardez votre site se transformer en terrain de jeu interactif. Bon vol !

Questions fréquentes sur DomGrav

Qu’est-ce que DomGrav et à quoi sert-il ?

DomGrav est une bibliothèque JavaScript open-source qui applique des forces physiques comme la gravité, les collisions et la friction sur les éléments HTML. Elle permet de créer des animations interactives et réalistes directement dans le DOM, sans nécessiter de moteur 3D complexe.

Comment installer DomGrav ?

DomGrav peut être installé via npm avec npm install domgrav, ou via un CDN en ajoutant un script dans votre HTML. Il est également compatible avec les imports ES Modules pour les navigateurs modernes.

Quels sont les cas d’usage de DomGrav ?

DomGrav est idéal pour des animations web interactives comme des landing pages dynamiques, des nuages de particules, des effets au scroll, des mini-jeux HTML ou des boutons rebondissants qui attirent l’attention.

DomGrav est-il compatible avec les frameworks front-end ?

Oui, DomGrav est compatible avec les principaux frameworks front-end comme React, Vue et Angular. Il peut être intégré facilement via un bundler ou des imports ES Modules.

DomGrav est-il gratuit et open-source ?

Oui, DomGrav est distribué sous licence open-source, généralement MIT. Cela signifie qu’il est gratuit à utiliser, même dans des projets commerciaux, et que vous pouvez modifier ou redistribuer son code.

Quels effets physiques sont disponibles dans DomGrav ?

DomGrav propose des effets physiques tels que la gravité, les collisions, les frottements, les ressorts, et des zones de limites personnalisables. Ces effets permettent de créer des animations réalistes et fluides pour les éléments HTML.

Laisser un commentaire