GratuitVidéo
Fenêtre d'application et zoom
- 365365 téléchargements
- 125125 mentions J'aime
- 188188 sauvegardes
Compatible avec
+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Arrière-plans animés discrets pour pages web v1.0.0
Utilisez cette ressource pour ajouter un arrière-plan animé discret derrière le contenu d'une page
Nouveau
- 485 téléchargements
- 113 mentions J'aime
- 189 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install animated-web-backgroundsSans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.
Première fois : connectez la CLI avec
npx --yes palatekit@latest loginL'agent choisit la technique la plus légère qui convient (dégradé CSS, shader GLSL avec Three.js ou particules canvas), l'écrit avec son code complet et la fait boucler sans couture. Il respecte la préférence de réduction de mouvement et met l'animation en pause hors écran. Vous obtenez une page HTML autonome dont le fond vit sans gêner la lecture du texte.
Mise à jour le 2 novembre 2026
Aperçus
Caractéristiques
- Fonctionne dans
- Guides d'installation
- Génère avec
- Le modèle de votre agent
- Utilise
- Three.js (uniquement pour la version shader)
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitVidéo
Un seul grand chiffre
- 463463 téléchargements
- 223223 mentions J'aime
- 100100 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
PalateKit Motion, la bibliothèque
- 338338 téléchargements
- 198198 mentions J'aime
- 249249 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Trois barres face à face
- 348348 téléchargements
- 133133 mentions J'aime
- 182182 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Avant / après au curseur
- 322322 téléchargements
- 248248 mentions J'aime
- 238238 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Carrousel de trois cartes
- 418418 téléchargements
- 157157 mentions J'aime
- 101101 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Échange en bulles
- 564564 téléchargements
- 127127 mentions J'aime
- 161161 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Liste qui se coche
- 442442 téléchargements
- 233233 mentions J'aime
- 160160 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- SKILL.md, traduit en français : choix de l'approche, règles de conception, trois techniques avec code, boucle sans couture, pièges
- references/background-recipes.md : mesh multi-blobs, aurore Three.js avec parallaxe, champ de constellation optimisé (en anglais)
- Gestionnaire de réduction de mouvement et de pause hors écran, et méthode de vérification par captures
Pour qui
- Donner de la vie à l'arrière-plan d'une page d'accueil ou d'une section héros
- Créer un fond animé pour une page de connexion ou un écran vide
- Remplacer une vidéo de fond lourde par un dégradé léger en CSS
Pas pour qui
- Produire une vidéo d'arrière-plan rendue en MP4
- Créer des scènes 3D interactives complètes
Étiquettes
- arrière-plan
- dégradé
- shader
- particules
- css
À propos
Vous dites
« Ajoute à ma page d'accueil un fond en dégradé violet et bleu qui bouge lentement, sans gêner la lecture du titre. »
Skill publiée par iart-ai sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Les couleurs de votre marque et Le type de page ou de section à habiller
- Dépendances
- Three.js (uniquement pour la version shader)
Comment l'utiliser
- Installez la skill dans le dossier de skills de votre agent.
- Décrivez le rendu voulu (dégradé, aurore, constellation) et les couleurs de votre marque.
- Ouvrez le fichier HTML dans un navigateur et vérifiez la lisibilité du texte.
Aperçu du contenu
Fichiers
- LICENSE1,1 Ko
- NOTICE-PALATEKIT.md0,4 Ko
- references/background-recipes.md8,9 Ko
- SKILL.md13,2 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- iart-ai
- Source
- github.com/iart-ai/motion-design-skills/tree/3c129f769d90a1328c209c386492333c9ac62312/skills/motion-background
- Licence
- MIT
Notice
Version modifiée de « motion-background » (iart-ai, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Le fond ralentit-il la page ?
La skill demande de plafonner la résolution du rendu à 2, de mettre l'animation en pause hors écran et de préférer le CSS quand un dégradé suffit.
Faut-il installer Three.js ?
Seulement pour la version shader, chargée depuis un CDN. Les versions CSS et canvas n'ont aucune dépendance. Les petits scripts d'aide cités (scripts/) ne sont pas livrés et sont facultatifs.