## Installation ```bash npx shadcn@latest add @envindavsorg/apple-hello-effect ``` Installez les dépendances suivantes : ```bash npm install motion clsx tailwind-merge ``` Ajoutez le helper cn dans votre projet : Copiez et collez le code suivant dans votre projet : Mettez à jour les chemins d'import de vos dépendances pour correspondre à la structure de votre projet et ainsi le faire fonctionner correctement. ## Utilisation ```tsx import { AppleHelloEnglishEffect, AppleHelloFrenchEffect, AppleHelloSpanishEffect } from "@/components/apple-hello-effect"; ``` ```tsx console.log("Animation complete!")} /> console.log("Animation complete!")} /> console.log("Animation complete!")} /> ``` ## Propriétés | Prop | Type | Default | Description | | --------------------- | ------------ | ----------- | --------------------------------------------------------------------------------------------------------- | | `speed` | `number` | 1 | Un multiplicateur qui affecte la durée de l'animation. Des valeurs plus élevées ralentissent l'animation. | | `onAnimationComplete` | `() => void` | `undefined` | Fonction de rappel déclenchée lorsque l'animation se termine. | ## Connaissances supplémentaires - Documentation officielle pour l'effet, avec le SVG extrait de macOS Sonoma au format SVG : https://www.figma.com/community/file/1414773009964314315/official-apple-hello-lettering - Une bibliothèque d'animation moderne pour JavaScript et React : https://motion.dev - Hébergez votre propre registre de composants : https://ui.shadcn.com/docs/registry ## Références - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength - https://motion.dev/docs/react-motion-component

Florin Cuzeac