@brickslab./ui-webAnimation

Viewer 3D basé sur <model-viewer> avec halo lumineux, sélecteur de modèles par pastilles colorées et rotation automatique pause/lecture. Le runtime model-viewer est chargé globalement par le catalogue.

Aperçu

Viewer interactif — rotation et sélection de modèles (contrôle externe)

Nebula

Découvrez vos modèles 3D dans une expérience immersive et fluide.

Découvrir

showPauseButton=false · viewerWidth / haloSize personnalisés

Sans bouton pause

Le contrôle de rotation est masqué.

Explorer

Props

Prop	Type	Défaut	Requis	Description
`models`	`NebulaModelOption[]`	—	✓	Liste des modèles 3D disponibles (.glb). Chaque entrée contient src (URL) et color (couleur du sélecteur).
`title`	`string`	`"Nebula"`	—	Titre principal affiché dans le panneau texte.
`description`	`string`	`"Découvrez vos modèles 3D..."`	—	Texte descriptif affiché sous le titre.
`ctaLabel`	`string`	`"Découvrir"`	—	Libellé du lien d'appel à l'action.
`ctaLink`	`string`	`"#"`	—	URL cible du lien CTA.
`isRotating`	`boolean`	`true`	—	Contrôle la rotation automatique du modèle. À gérer en externe avec onRotateChange.
`onRotateChange`	`(rotating: boolean) => void`	—	—	Callback déclenché quand l'utilisateur clique sur le bouton pause/lecture.
`selectedModel`	`string`	—	—	URL du modèle actif (src). À gérer en externe avec onModelChange.
`onModelChange`	`(src: string) => void`	—	—	Callback déclenché quand l'utilisateur sélectionne un modèle via les pastilles.
`viewerWidth`	`string`	`"650px"`	—	Largeur du container du viewer.
`haloSize`	`string`	`"500px"`	—	Taille du halo lumineux en arrière-plan.
`showPauseButton`	`boolean`	`true`	—	Affiche ou masque le bouton pause/lecture.
`className`	`string`	—	—	Classe CSS additionnelle sur le wrapper racine.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  models={[]}
  title="Nebula"
  description="Découvrez vos modèles 3D..."
  ctaLabel="Découvrir"
  ctaLink="#"
  isRotating={true}
  onRotateChange={true}
  selectedModel="..."
  // +5 autres props disponibles
/>

modelstitledescriptionctaLabelctaLinkisRotatingonRotateChangeselectedModelonModelChangeviewerWidthhaloSizeshowPauseButtonclassName

Override titre/sous-titre: taille + couleur

Exemple cible pour personnaliser la taille et la couleur via les variables CSS (tokens) autour du composant.

<div
  style={{
    "--fontsize-3xl": "2.25rem",
    "--fontsize-xl": "1.125rem",
    "--color-fg": "#111827",
    "--color-muted": "#4B5563",
    "--color-brand": "#CC4A48",
  } as React.CSSProperties}
>
  <MyComponent
    title="Votre titre"
    description="Votre sous-titre"
  />
</div>

Utilisation

tsx

import { NebulaViewer, type NebulaModelOption } from "@brickslab./ui-web";
import { useState } from "react";

const models: NebulaModelOption[] = [
  { src: "https://modelviewer.dev/shared-assets/models/Astronaut.glb",      color: "#7C3AED" },
  { src: "https://modelviewer.dev/shared-assets/models/RobotExpressive.glb", color: "#0EA5E9" },
];

export default function Page() {
  const [isRotating, setIsRotating]       = useState(true);
  const [selectedModel, setSelectedModel] = useState(models[0].src);

  return (
    <NebulaViewer
      title="Nebula"
      description="Découvrez vos modèles 3D dans une expérience immersive et fluide."
      ctaLabel="Découvrir"
      ctaLink="#"
      models={models}
      isRotating={isRotating}
      onRotateChange={setIsRotating}
      selectedModel={selectedModel}
      onModelChange={setSelectedModel}
    />
  );
}