✧ ShapeMorph WebGL

Composant React haute performance pour le morphing de formes vectorielles et de particules en WebGL2 / WebGL1 avec physique organique, circulation continue sur les tracés et désintégration fluide par curl noise.

✨ Fonctionnalités

• ⚡ Rendu GPU WebGL2 pur (avec fallback WebGL1) — aucun SVG DOM coûteux
• 🌊 Transitions Organiques — Morphing avec dispersion paramétrable (Curl Noise & Sinusoidal Envelope)
• 🚶 Circulation Naturelle — Particules ondulant le long des tracés avec déhanchement aléatoire et particules « vagabondes »
• 🌧 Physiques Intégrées — Pluie avec apparition hors écran & fondu d'opacité, vortex Spiral/Rasengan, propulsion Rocket, horizon dynamique
• 🎨 Formes Prêtes & SVG Custom — 9 formes intégrées + support direct de n'importe quel SVG (d="..." ou fichier .svg)
• 📋 Générateur de code intégré — Bouton « Copier le code » dans la démo pour intégrer vos réglages en 1 clic
• 📦 Prêt pour NPM et GitHub — Packagé sous forme de composant exportable ESM & UMD ou dossier autonome

📦 Installation & Utilisation

Méthode 1 : Via NPM (recommandé pour les projets)

npm install shapemorph-webgl
# ou
yarn add shapemorph-webgl
# ou
pnpm add shapemorph-webgl

import React from 'react';
import ShapeMorph from 'shapemorph-webgl';
import 'shapemorph-webgl/style.css';

export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', background: '#07090e' }}>
      <ShapeMorph
        shape="globe"
        particleCount={1800}
        transitionDuration={1800}
        dispersion={1.0}
      />
    </div>
  );
}

Méthode 2 : Copie directe du dossier shapeMorph

Copiez simplement le dossier src/shapeMorph dans votre projet :

import React from 'react';
import ShapeMorph from './shapeMorph';

export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', background: '#07090e' }}>
      <ShapeMorph shape="rocket" particleCount={2000} dispersion={1.2} />
    </div>
  );
}

🛠 Commandes du Projet

# Lancer la démo interactive avec le générateur de code
npm run dev

# Lancer les tests unitaires (Vitest)
npm test

# Compiler la démo et le package de distribution
npm run build

# Compiler uniquement la bibliothèque pour NPM
npm run build:lib

🚀 Guide de Déploiement (GitHub & NPM)

1. Mettre en ligne sur GitHub

git init
git add .
git commit -m "feat: initial release of ShapeMorph WebGL"

# Connecter à votre dépôt GitHub
git remote add origin https://github.com/VOTRE_PSEUDO/shapemorph-webgl.git
git branch -M main
git push -u origin main

2. Publier sur NPM

# 1. Connectez-vous à votre compte NPM
npm login

# 2. Vérifiez que la compilation fonctionne
npm run build:lib

# 3. Publiez le package sur le registre public NPM
npm publish --access public

⚙️ Propriétés (Props Reference)

| Prop | Type | Défaut | Description | |---|---|---|---| | shape | string | 'rain' | Nom de la forme active ou clé dans shapes | | shapes | object | {} | Dictionnaire de formes personnalisées (SVG ou JSON pré-compilé) | | shapeMaxWidth | string \| number | null | Largeur max de la forme (ex: "70%", 0.7, "50%") | | shapeMaxHeight | string \| number | null | Hauteur max de la forme (ex: "80%", 0.8, "60%") | | scale | number \| string | 0.85 | Facteur d'échelle de la forme (0.85 = 85% de la zone WebGL) | | path | string | null | Chaîne de path SVG (d="...") ou code SVG brut | | src | string | null | URL vers un fichier SVG externe (ex: '/shapes/custom.svg') | | particleCount | number | 1500 | Nombre de particules WebGL actives (200 à 5000+) | | transitionDuration | number | 1800 | Durée de la transition de morphing (en ms) | | dispersion | number | 1.0 | Intensité de désintégration organique (0.0 = direct, 1.0 = doux, 2.2 = vortex) | | speed | number | 1.0 | Vitesse de circulation et d'animation physique | | size | number | 1.0 | Échelle d'épaisseur des brins et particules | | intensity | number | 1.2 | Puissance du halo lumineux (glow) | | opacity | number | 1.0 | Opacité globale du canvas | | color | [r,g,b,a] | [0.92, 0.98, 1.0, 0.95] | Couleur primaire des particules (RGBA normalisé 0-1) | | glowColor | [r,g,b,a] | [0.2, 0.75, 1.0, 0.85] | Couleur de diffusion lumineuse (RGBA normalisé 0-1) | | autoPlay | boolean | false | Démarre la lecture automatique de la séquence | | holdDuration | number | 2000 | Temps de pause sur chaque forme en mode séquence (ms) | | loop | boolean | true | Boucler la séquence indéfiniment | | sequence | Array | null | Liste ordonnée de formes pour la séquence automatique | | onShapeChange | function | null | Callback appelé à chaque changement de forme (shapeId) => {} |

⚡ CLI de Précompilation (shapemorph-compile)

Pour une performance maximale (0ms de lag, 0 appel DOM), vous pouvez pré-compiler tous vos fichiers SVG en un fichier JSON statique.

# Compiler tous les SVG du dossier src/assets/shapes
npx shapemorph-compile

# Options personnalisées :
npx shapemorph-compile -i src/assets/shapes -o src/assets/shapes/compiledShapes.json -r 2000

Utilisation du JSON dans votre projet :

import React from 'react';
import ShapeMorph from 'shapemorph-webgl';
import compiledData from './assets/shapes/compiledShapes.json';

const CUSTOM_SHAPES = compiledData.preparedShapes;

export default function App() {
  return (
    <ShapeMorph
      shape="brain"
      shapes={CUSTOM_SHAPES}
      particleCount={800} // Compatible avec n'importe quel particleCount au runtime !
      shapeMaxWidth="75%"
      shapeMaxHeight="75%"
    />
  );
}

🕹 API Impérative (ref)

import React, { useRef } from 'react';
import ShapeMorph from 'shapemorph-webgl';

export default function MyViewer() {
  const morphRef = useRef(null);

  return (
    <div>
      <button onClick={() => morphRef.current?.goTo('globe')}>Globe</button>
      <button onClick={() => morphRef.current?.goTo('rocket')}>Rocket</button>
      <button onClick={() => morphRef.current?.next()}>Suivant</button>
      <button onClick={() => morphRef.current?.setDispersion(1.8)}>Dispersion +</button>

      <ShapeMorph ref={morphRef} shape="rain" />
    </div>
  );
}

📜 Licence

MIT License © Euler