Apple Writing Effect
•2 min•238 mots
Créez un effet d'écriture "Bonjour" inspiré d'Apple en utilisant Motion for React.
Chargement en cours ...
Installation
pnpm dlx shadcn@latest add @envindavsorg/apple-hello-effect
Utilisation
import {
AppleHelloEnglishEffect,
AppleHelloFrenchEffect,
AppleHelloSpanishEffect
} from "@/components/apple-hello-effect";<AppleHelloEnglishEffect
speed={1}
onAnimationComplete={() => console.log("Animation complete!")}
/>
<AppleHelloFrenchEffect
speed={1}
onAnimationComplete={() => console.log("Animation complete!")}
/>
<AppleHelloSpanishEffect
speed={1}
onAnimationComplete={() => 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