scroll-craft est un skill pour agents de code IA qui construit des sites pilotés par le défilement. Quand tu fais défiler, la vidéo avance image par image, les sections restent épinglées pendant que leur histoire avance, et les titres se construisent ligne par ligne. En plus du mouvement, il suit des règles fermes de typographie, d’espacement, de couleur et de profondeur.
Il est open source sous licence MIT. Il fonctionne avec Claude Code, Codex et d’autres agents de code capables de lire des instructions, de modifier des fichiers, d’exécuter des commandes et de regarder un navigateur. Il existe aussi sous forme de plugin Claude Code. Le 24 octobre 2026, le dépôt comptait près de 4 000 étoiles sur GitHub, et son README décrit la version 0.3.0.
Ce qu’il construit
- Le défilement comme timeline. La vidéo avance sous la molette, les sections s’épinglent, des rangées glissent sur le côté et la couleur de fond change à mesure que tu descends. Le pointeur de la souris peut aussi faire bouger des choses.
- Huit styles de page, comme un film en un seul plan, un magazine en chapitres, une affiche, une galerie ou une scène partagée. Chacun interdit ce que les autres exigent, pour que deux sites ne finissent pas peu à peu par devenir la même page.
- Un geste signature. Chaque site reçoit une interaction à lui qu’aucun autre site n’a.
- Un contrôle contre les répétitions. Un nouveau site doit différer de tes sites précédents sur au moins quatre points sur six, comme le style de page, la navigation, l’ouverture et la fin.
Les règles de design
- Avant de construire, il écrit une ligne par section : le sentiment qu’elle doit donner et ce qui, à l’écran, le provoque.
- Un point culminant prévu. La page a un seul sommet, avec le plus de place pour défiler et les meilleures images.
- Règles typographiques : deux familles de polices au maximum, et une longueur de ligne de 45 à 75 caractères.
- Une échelle d’espacement basée sur 4 pixels, avec plus d’espace au-dessus d’un titre qu’en dessous, et moins de marge sur un téléphone.
- Des couleurs aux rôles fixes avec une seule couleur d’accent, et pas de noir pur.
- Ta charte de marque l’emporte. Si tu lui donnes des règles de marque, elles passent avant ses propres goûts.
- Une liste de choses qu’il refuse, comme les grilles de cartes identiques, le texte en dégradé, les faux tableaux de bord, les dégradés violets d’IA et les statistiques inventées.
Comment il vérifie son travail
Un navigateur sans fenêtre fait défiler la page finie, attend à chaque position que la vidéo se stabilise et signale les problèmes :
- Du défilement qui ne change rien à l’écran.
- Du texte qui ne devient jamais entièrement visible.
- Du texte sans assez de contraste, mesuré ligne par ligne face à l’image la plus claire qui passe derrière.
- Un clip vidéo qui ne s’est jamais chargé et n’affiche que sa première image.
Ensuite, il crée une planche-contact de captures d’écran, car une machine peut prouver qu’une page fonctionne, mais pas te dire si elle a du sens.
Ce qu’il faut savoir avant
Selon le projet, il n’a jamais tourné que sous Windows. Ses scripts cherchent aussi FFmpeg et Chrome aux emplacements de macOS et de Linux, mais aucun site n’a encore été construit sur un Mac. Il lui faut Node.js 18 ou plus récent, une version complète de FFmpeg, et playwright-core avec Chrome pour les vérifications. Une KIE_AI_API_KEY n’est nécessaire que si tu veux qu’il génère des images ou de la vidéo, ce qui coûte de l’argent. Une page faite avec tes propres photos et vidéos ne coûte rien.
Il a des opinions tranchées, exprès. Il refusera les mises en page et les couleurs qui font repérer une page d’IA, et il discutera avec toi du point culminant de ta page.
Comment l’installer
Dans Claude Code, ajoute la marketplace et installe le plugin :
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-designEnsuite, décris le site que tu veux, ou appelle-le directement :
/nateherk-design:scroll-craftSi l’installateur le demande, lance /reload-plugins. Dans Codex, copie tout le dossier scroll-craft depuis plugins/nateherk-design/skills/ dans le dépôt vers le dossier .agents/skills/ de ton projet, et demande à Codex d’utiliser le skill. Avant la première construction, lance le script doctor fourni avec le skill, qui repère les problèmes d’installation habituels.