GratuitWeb
Bouton gris 3D avec effet au survol, par cssbuttons-io
- 386386 téléchargements
- 243243 mentions J'aime
- 153153 sauvegardes
Compatible avec
- Claude Code
- Codex
- Cursor
- et 3 autres
Texte animé par lettre, mot ou ligne v1.0.0
Utilisez cette ressource pour faire apparaître un texte avec un effet animé
Nouveau
- 471 téléchargements
- 118 mentions J'aime
- 114 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install text-reveal-effectsPremière fois : connectez la CLI avec
npx --yes palatekit@latest loginL'agent ajoute à votre page un composant React (Tailwind) qui anime l'apparition d'un texte. Vous choisissez le découpage, le préréglage, la vitesse et le délai. Vous adaptez les contenus et le style à votre projet, puis vous obtenez un composant prêt à l'emploi.
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
- React
- Tailwind CSS
- clsx
- tailwind-merge
- motion
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitWeb
Bouton noir avec effet au survol « Massive Mayfly », par cssbuttons-io
- 334334 téléchargements
- 194194 mentions J'aime
- 201201 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Bouton turquoise 3D avec effet au survol, par cssbuttons-io
- 336336 téléchargements
- 145145 mentions J'aime
- 207207 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Animation de chargement verte, par fanishah
- 381381 téléchargements
- 221221 mentions J'aime
- 209209 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Bouton vert avec effet au survol, par cssbuttons-io
- 415415 téléchargements
- 153153 mentions J'aime
- 145145 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Bouton blanc, par YUGE0
- 412412 téléchargements
- 193193 mentions J'aime
- 123123 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Bouton blanc 3D animé, par cssbuttons-io
- 366366 téléchargements
- 194194 mentions J'aime
- 202202 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Carte blanche 3D avec effet au survol, par javierBarroso
- 388388 téléchargements
- 153153 mentions J'aime
- 193193 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- LISEZMOI.md, en français : mode d'emploi
- page.mdx : fichier d'origine de l'auteur
- text-effect-custom-delay.tsx : fichier d'origine de l'auteur
- text-effect-exit.tsx : fichier d'origine de l'auteur
- text-effect-line.tsx : fichier d'origine de l'auteur
Pour qui
- Titre principal d'une page d'accueil
- Slogan d'une marque
- Texte d'introduction d'un portfolio
Pas pour qui
- Un site sans React ni Tailwind CSS, sans adaptation
- Un public sensible aux animations, sans ajouter prefers-reduced-motion
Étiquettes
- texte
- apparition
- titre
- animation
- react
À propos
Vous dites
« Anime le titre de ma page d'accueil pour qu'il apparaisse mot par mot avec un flou. »
Composant publié par ibelick (Motion Primitives) sous licence MIT, fiche et mode d'emploi rédigés par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Votre projet React avec Tailwind CSS et Vos couleurs et vos textes
- Dépendances
- React, Tailwind CSS, clsx, tailwind-merge et motion
Comment l'utiliser
- Copiez text-effect.tsx dans le dossier de composants de votre projet React.
- Installez les paquets nécessaires : clsx, tailwind-merge, motion.
- Demandez à l'agent de placer le composant dans la page et de l'adapter à votre marque.
Aperçu du contenu
Fichiers
- app/docs/text-effect/page.mdx6,1 Ko
- app/docs/text-effect/text-effect-custom-delay.tsx1,2 Ko
- app/docs/text-effect/text-effect-exit.tsx1,3 Ko
- app/docs/text-effect/text-effect-line.tsx0,8 Ko
- app/docs/text-effect/text-effect-per-char.tsx0,2 Ko
- app/docs/text-effect/text-effect-per-word.tsx0,2 Ko
- app/docs/text-effect/text-effect-preset.tsx0,2 Ko
- app/docs/text-effect/text-effect-speed.tsx0,3 Ko
- app/docs/text-effect/text-effect-variants.tsx1,1 Ko
- components/core/text-effect.tsx7,4 Ko
- LICENSE1,1 Ko
- LISEZMOI.md1,2 Ko
- NOTICE-PALATEKIT.md0,5 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- ibelick (Motion Primitives)
- Source
- github.com/ibelick/motion-primitives/tree/120f64f6ca60348e251f929e9c81f11ccbe45eda/components/core/text-effect.tsx
- Licence
- MIT
Notice
Version modifiée de « text-effect » (ibelick (Motion Primitives), MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Quels paquets installer ?
React, Tailwind CSS et clsx, tailwind-merge, motion.
Fonctionne-t-il sans Next.js ?
Oui, dans tout projet React avec Tailwind CSS ; retirez seulement la directive "use client" si votre outil ne la connaît pas.