Catalogue
Chaque composant, en situation
40 composants Magic UI et Aceternity, installés par la CLI shadcn et nourris par du contenu d'atelier réel. Choisissez sur pièces : la carte, le fond ou le bouton que vous voyez ici est celui que vous obtenez.
Fonds et ouvertures
Fonds et ouvertures
Fond aurore
Quand l'utiliser — Ouverture d'une page à forte ambition visuelle, quand la marque tolère un fond animé doux plein cadre.
À éviter — Une page de contenu dense : l'aurore capte l'œil et retarde la lecture.
npx shadcn@latest add @aceternity/aurora-background L'Atelier du Grain
Le bois se raconte au fer chaud
Depuis 2014, nous gravons planches et coffrets à Lyon, pièce par pièce.
Fonds et ouvertures
Faisceaux de fond
Quand l'utiliser — Fond sombre technique pour une section « savoir-faire » ou « atelier », en arrière-plan discret.
À éviter — Sur fond clair : les faisceaux perdent tout contraste.
npx shadcn@latest add @aceternity/background-beams Savoir-faire
Chaque trait est réglé à la main
Nos graveurs ajustent profondeur et vitesse pour chaque essence de bois.
Fonds et ouvertures
Grille rétrofuturiste
Quand l'utiliser — Un bandeau d'appel qui veut un fond technique et rythmé, sans photo disponible.
À éviter — Un univers artisanal très doux : la grille tire vers le gaming/tech.
npx shadcn@latest add @magicui/retro-grid Atelier
Du plan à la pièce gravée
Réservez un créneau, apportez votre idée, repartez avec l'objet.
Fonds et ouvertures
Trame de points
Quand l'utiliser — Texture discrète derrière un bloc de texte ou une carte, pour éviter un aplat vide.
À éviter — Superposée à une photo chargée : la trame devient illisible.
npx shadcn@latest add @magicui/dot-pattern Matière
Le veinage guide chaque geste
Nous choisissons le fil du bois avant de graver, jamais après.
Fonds et ouvertures
Grille scintillante
Quand l'utiliser — Fond vivant pour une section chiffres ou preuve, en aplat sombre.
À éviter — Comme fond de formulaire : le scintillement distrait la saisie.
npx shadcn@latest add @magicui/flickering-grid En chiffres
Dix ans de gravure, un seul atelier
Plus de 4 000 pièces gravées à la main depuis l'ouverture.
Fonds et ouvertures
Particules
Quand l'utiliser — Ambiance légère derrière un titre, sur fond sombre, pour une ouverture soignée.
À éviter — En grande quantité sur mobile : coûte cher en calcul pour peu d'effet perçu.
npx shadcn@latest add @magicui/particles L'Atelier du Grain
La sciure retombe, l'objet reste
Un geste transmis depuis trois générations de menuisiers.
Fonds et ouvertures
Météores
Quand l'utiliser — Accent ponctuel derrière une carte ou un appel, jamais en fond de page entier.
À éviter — Un site sobre et institutionnel : l'effet est trop spectaculaire.
npx shadcn@latest add @magicui/meteors Édition limitée
Douze coffrets de Noël, douze essences
Chêne, noyer, frêne : une série numérotée jusqu'au 24 décembre.
Fonds et ouvertures
Projecteur
Quand l'utiliser — Hero sombre qui veut diriger le regard vers le titre sans photo.
À éviter — Fond clair : le halo blanc disparaît.
npx shadcn@latest add @aceternity/spotlight Nouveauté
La collection Veinage arrive en boutique
Six pièces qui exposent le fil du bois plutôt que de le cacher.
Textes
Textes
Texte animé
Quand l'utiliser — Accroche courte qui doit marquer l'entrée sur une page, une fois, au chargement.
À éviter — Un texte long : chaque mot qui apparaît ralentit la lecture.
npx shadcn@latest add @magicui/text-animate Gravé pour durer, choisi pour être offert.
Textes
Mots en rotation
Quand l'utiliser — Montrer la variété d'une offre en un seul titre : « Nous gravons [des planches / des boîtes / des porte-clés] ».
À éviter — Information essentielle à la conversion : le mot change trop vite pour être lu par tous.
npx shadcn@latest add @magicui/word-rotate Nous gravons
des planches
Textes
Machine à écrire
Quand l'utiliser — Citation ou promesse courte dans une section preuve, pour un rythme de lecture posé.
À éviter — Un H1 : le texte reste invisible pour les moteurs de recherche pendant l'animation.
npx shadcn@latest add @magicui/typing-animation |
Textes
Mots qui basculent
Quand l'utiliser — Variante plus organique de la rotation de mots, pour une accroche en colonne éditoriale.
À éviter — Deux exemplaires sur la même page : l'effet de bascule devient répétitif.
npx shadcn@latest add @aceternity/flip-words Chaque pièce est
Textes
Texte dégradé animé
Quand l'utiliser — Mettre en valeur un mot-clé (nom de collection, offre) dans un titre plus large.
À éviter — Sur un long paragraphe : le dégradé fatigue la lecture.
npx shadcn@latest add @magicui/animated-gradient-text Collection Veinage
Le bois massif, révéléTextes
Texte à étincelles
Quand l'utiliser — Souligner une nouveauté ou une édition limitée dans un titre court.
À éviter — Un ton sobre et professionnel : les étincelles tirent vers le festif.
npx shadcn@latest add @magicui/sparkles-text Textes
Texte aurore
Quand l'utiliser — Titre de section sur fond sombre qui veut une touche colorée sans image.
À éviter — Sur fond clair chargé : le dégradé perd en lisibilité.
npx shadcn@latest add @magicui/aurora-text Textes
Texte généré mot à mot
Quand l'utiliser — Promesse ou manifeste d'atelier en ouverture de la page « savoir-faire ».
À éviter — Un texte que le visiteur doit scanner vite : l'apparition progressive ralentit.
npx shadcn@latest add @aceternity/text-generate-effect Preuve et listes
Preuve et listes
Bandeau défilant
Quand l'utiliser — Lister les essences de bois, les points de vente ou les mentions de presse en continu.
À éviter — Une information que le visiteur doit absolument lire : elle défile hors de contrôle.
npx shadcn@latest add @magicui/marquee Essences travaillées
Preuve et listes
Cartes défilantes
Quand l'utiliser — Avis clients ou citations d'atelier, en boucle continue, pour une section preuve vivante.
À éviter — Plus de six cartes : la boucle devient longue et perd en impact.
npx shadcn@latest add @aceternity/infinite-moving-cards La gravure de mon prénom sur la planche à pain, exactement comme imaginé.
Camille R.cliente, coffret cadeauLivré en dix jours, emballé avec un soin qu'on ne trouve plus.
Antoine D.client, porte-clés atelierLe veinage du noyer choisi à la main, ça se voit.
Sophie L.cliente, boîte à bijoux
Preuve et listes
Avatars en cercle
Quand l'utiliser — Montrer l'équipe de l'atelier ou un groupe de clients en un coup d'œil, à côté d'un chiffre.
À éviter — Avec des photos de mauvaise qualité : les cercles serrés les rendent illisibles.
npx shadcn@latest add @magicui/avatar-circles Toute l'équipe de l'atelier
Preuve et listes
Liste animée
Quand l'utiliser — Simuler un flux d'activité (commandes, avis) pour montrer une boutique vivante.
À éviter — Des informations qu'il faut comparer entre elles : l'empilement masque les précédentes.
npx shadcn@latest add @magicui/animated-list Nouvelle commande
Coffret « Noyer » — gravure prénom
Preuve et listes
Compteur animé
Quand l'utiliser — Chiffre clé (pièces gravées, années d'existence) qui doit marquer à l'arrivée sur la section.
À éviter — Plusieurs compteurs très proches : préférer une section chiffres dédiée avec espacement.
npx shadcn@latest add @magicui/number-ticker 0 pièces gravées
Preuve et listes
Défilement lié au scroll
Quand l'utiliser — Bandeau de mots-clés qui réagit à la vitesse de défilement du visiteur, pour une section marque forte.
À éviter — Sur une page qu'on consulte au clavier ou au lecteur d'écran : l'effet n'apporte rien et alourdit.
npx shadcn@latest add @magicui/scroll-based-velocity Cartes et grilles
Cartes et grilles
Grille bento
Quand l'utiliser — Présenter une offre à plusieurs entrées (planches, coffrets, ateliers) avec une hiérarchie visuelle claire.
À éviter — Moins de trois cartes : la grille inégale perd son intérêt.
npx shadcn@latest add @magicui/bento-grid 
Planches gravées
Prénom, date ou citation, sur chêne ou noyer.
Coffrets cadeaux
Une pièce gravée, présentée dans son écrin.
Ateliers à Lyon
Deux heures pour graver votre première pièce.
Cartes et grilles
Carte magique
Quand l'utiliser — Carte de service ou de tarif qui doit réagir subtilement à la souris, en desktop.
À éviter — Sur une grille dense de dix cartes ou plus : l'effet individuel se perd et pèse en performance.
npx shadcn@latest add @magicui/magic-card À partir de 35€
Gravure sur mesure
Apportez un dessin ou un texte, nous réglons la profondeur pour votre bois.
Cartes et grilles
Carte en relief 3D
Quand l'utiliser — Mettre en scène un objet phare (coffret, planche) avec un relief qui suit la souris.
À éviter — Sur mobile en priorité : l'effet de relief est pensé pour le pointeur, pas le tactile.
npx shadcn@latest add @aceternity/3d-card 
Cartes et grilles
Cartes au point
Quand l'utiliser — Galerie de réalisations où l'on veut isoler une pièce au survol, les autres s'estompant.
À éviter — Moins de trois cartes : l'effet de flou comparatif n'a pas de sens.
npx shadcn@latest add @aceternity/focus-cards 
Cartes et grilles
Carte élastique
Quand l'utiliser — Grande carte d'appel unique (offre du moment) qui veut un mouvement doux au survol.
À éviter — Répétée plusieurs fois sur une page : le mouvement élastique devient fatigant.
npx shadcn@latest add @aceternity/wobble-card L'atelier ouvert au public
Chaque samedi, venez graver votre première pièce avec l'équipe.
Réserver un samedi
Boutons
Boutons
Bordure mouvante
Quand l'utiliser — Bouton unique sur fond sombre qui veut un liseré lumineux permanent, sans survol nécessaire.
À éviter — Sur fond clair : le contraste de la bordure lumineuse se perd.
npx shadcn@latest add @aceternity/moving-border Défilement et récit
Défilement et récit
Trait de suivi
Quand l'utiliser — Article ou page « notre méthode » longue, pour matérialiser la progression de lecture.
À éviter — Une page courte : le trait n'a pas la place de se déployer.
npx shadcn@latest add @aceternity/tracing-beam Étape 1
Choisir le bois
Chêne, noyer ou frêne, selon l'usage de la pièce.
Étape 2
Dessiner le motif
Prénom, date ou trait personnalisé, validé avec vous.
Étape 3
Graver au fer
Profondeur et vitesse réglées pièce par pièce.
Étape 4
Finir à l'huile
Un passage d'huile naturelle protège le bois durablement.
Défilement et récit
Révélation collée au scroll
Quand l'utiliser — Expliquer trois à quatre étapes d'un savoir-faire avec un visuel qui change en fixe pendant le défilement.
À éviter — Plus de cinq étapes : la section devient trop longue à parcourir.
npx shadcn@latest add @aceternity/sticky-scroll-reveal Le choix du bois
Chaque planche est sélectionnée pour son veinage avant d'entrer en atelier.
Le dessin du motif
Nous ajustons taille et police pour qu'elles suivent le fil du bois.
La gravure au fer
Le fer chauffe à 180°, la main guide le trait en une seule passe.
Défilement et récit
Frise chronologique
Quand l'utiliser — Retracer l'histoire de l'atelier ou les étapes d'une commande sur mesure.
À éviter — Moins de trois jalons : une simple liste suffit.
npx shadcn@latest add @aceternity/timeline Dix ans d'atelier
De l'établi familial à la boutique de Lyon, chaque étape a gardé le geste.
2014
2014
Ouverture de l'atelier dans un garage, premières planches gravées.
2018
2018
Déménagement rue Sainte-Hélène, arrivée de Julie et Marc.
2024
2024
4000e pièce gravée, lancement de la collection Veinage.
Défilement et récit
Galerie en parallaxe
Quand l'utiliser — Galerie de réalisations en colonnes qui défilent à des vitesses différentes, pour une page portfolio.
À éviter — Moins de six images : les trois colonnes paraissent vides.
npx shadcn@latest add @aceternity/parallax-scroll 
Défilement et récit
Barre de progression
Quand l'utiliser — Page longue (méthode, histoire de l'atelier) où situer le visiteur dans sa lecture aide.
À éviter — Une page courte tenant sur un écran : la barre n'a rien à indiquer.
npx shadcn@latest add @magicui/scroll-progress Progression de lecture
La vraie barre est posée en haut de cette page : elle avance avec votre défilement. Aperçu figé ci-dessous.
Défilement et récit
Fondu flou
Quand l'utiliser — Révéler une citation ou un bloc de preuve à l'arrivée dans le viewport, en douceur.
À éviter — Sur un élément déjà visible au chargement : l'effet ne se joue jamais.
npx shadcn@latest add @magicui/blur-fade « On n'achète pas un objet gravé, on transmet une histoire. »
Médias
Médias
Vidéo en fenêtre
Quand l'utiliser — Vignette cliquable vers une vidéo d'atelier, sans alourdir le chargement de la page.
À éviter — Une vidéo essentielle à la compréhension : préférer une lecture directe, sans clic.
npx shadcn@latest add @magicui/hero-video-dialog Médias
Fenêtre navigateur
Quand l'utiliser — Montrer une capture du site ou de la boutique en ligne dans un cadre de navigateur reconnaissable.
À éviter — Pour un visuel mobile : utiliser le cadre iPhone à la place.
npx shadcn@latest add @magicui/safari Médias
Cadre téléphone
Quand l'utiliser — Montrer une capture de la boutique en version mobile, à côté du cadre navigateur desktop.
À éviter — Une capture pensée pour grand écran : le cadre déforme la lecture.
npx shadcn@latest add @magicui/iphone Un composant vous manque ?
Cherchez d'abord dans le catalogue de la factory avant d'en installer un nouveau : ce qui existe se réutilise, ne se réécrit pas.