SITE : les 3 outils gratuits des sites qui ont l'air chers

Les trois liens et ce que fait chacun

Tous les trois sont gratuits, y compris pour le site de ton entreprise. Mais pas sous la même licence (la règle d'usage écrite par leurs auteurs) : l'étape 4 dit ce qui est interdit.

Ton site est-il en code ?

Le test. Tu modifies ton site en glissant des blocs dans un tableau de bord (Wix, Shopify, Squarespace, Framer) ? Alors il n'est pas en code. Ton site est un dossier de fichiers sur ton ordinateur, que quelqu'un a écrit ? Alors il l'est.

Pas encore de site ? Claude Code peut t'en écrire un en code, puis tu reviens ici. Shopify accepte aussi du code dans un thème, mais ce n'est plus du sans-code : c'est un autre chantier, pas ce guide.

Colle le message dans Claude Code

Avant. Claude Code installé sur ton ordinateur. Pas encore ? Commence par installer Claude Code, ce guide te montre aussi comment ouvrir le terminal.

Ce que tu fais. Ouvre le terminal dans le dossier de ton site, tape claude, puis colle ce message. Il contient les trois liens.

Je veux animer mon site avec trois outils gratuits :
- GSAP : https://gsap.com
- Lenis : https://lenis.darkroom.engineering
- React Bits : https://reactbits.dev

1. D'abord, regarde comment mon site est fait (React, Next.js, HTML simple…)
   et dis-le-moi en une phrase. Ne change rien avant.
2. Avant de toucher à quoi que ce soit, fais une copie de sauvegarde du
   dossier (ou une branche git si le dossier est suivi par git).
3. GSAP : fais entrer le titre, les images et les boutons un par un quand
   on arrive sur la page. Court et discret.
4. Lenis : un défilement doux sur tout le site, avec son fichier CSS.
5. React Bits : seulement si mon site est en React. Un seul effet :
   le titre principal qui apparaît lettre par lettre (SplitText).
   Si mon site n'est pas en React, passe cette étape et dis-le-moi.
6. Si la personne a demandé à son ordinateur de réduire les animations,
   coupe-les.

Ne change ni mes textes ni mes couleurs. À la fin, donne-moi la liste des
fichiers changés et la commande pour voir le site sur mon ordinateur.

1. Il te dit d'abord comment ton site est fait. Lis sa phrase : si c'est faux, corrige-le avant qu'il continue.
2. Il te demande ton accord pour installer les outils et modifier les fichiers. Lis chaque carte, puis accepte.
3. Lance la commande qu'il te donne à la fin et ouvre l'adresse affichée dans ton navigateur.
4. Fais défiler la page, recharge-la, regarde-la aussi sur ton téléphone. Trop d'effets ? Demande-lui d'en retirer.

Ce qui n'est pas vérifié. « Il les ajoute » : c'est plausible : Claude Code sait installer des outils et copier du code. Mais je n'ai pas lancé ce message sur un vrai site. Si une erreur s'affiche, colle-la-lui telle quelle.

Les licences en clair puis un bonus

Le bonus, si tu veux aller plus loin : 21st.dev. Un catalogue de composants d'interface (boutons, cartes, menus) écrits en React. Gratuit pour deux copies par jour, payant au-delà : je n'ai pas relevé le prix. Un lien collé ne suffit pas : prends le bouton « Copy prompt (le message que tu lui écris) » du composant et colle ce texte dans Claude Code.

Build t'apprend à parler à Claude pour qu'il fasse ce que tu veux du premier coup, puis à mettre ton site en ligne et à le vendre.