LANDING-DESIGN.md — Plan animations & effets visuels
À utiliser en Phase 4 quand Claude Code intègre le TSX.
Référence : docs/LANDING-COPY.md pour le contenu textuel.
Source composants : ReactBits, Framer Motion, ou custom.
HERO
| Effet | Composant | Application |
|---|
| Background animé | Aurora ou Particles | Effet subtil derrière le texte hero |
| Animation titre | SplitText ou BlurText | "Lancez votre SaaS en jours, pas en mois" |
| Compteurs animés | CountUp | "170+ modèles", "65 vulns fixées", "17 prompts" |
| Curseur custom | SplashCursor | Sur toute la page (déjà en place) |
FEATURES
| Effet | Composant | Application |
|---|
| Cards 3D hover | TiltCard ou SpotlightCard | Chaque feature card |
| Apparition scroll | AnimatedList | Features qui apparaissent au scroll |
COMPARAISON
| Effet | Composant | Application |
|---|
| Headers colorés | GradientText | Headers de colonnes du tableau |
| Apparition données | FadeContent | ✅/❌ qui apparaissent au scroll |
PRICING
| Effet | Composant | Application |
|---|
| Card Pro highlight | GlowBorder | Bordure animée sur la card Pro (tier populaire) |
| Boutons CTA | Magnet | Effet magnétique sur les boutons d'achat |
GLOBAL
| Effet | Composant | Application |
|---|
| Scroll fluide | SmoothScroll ou ScrollReveal | Toutes les sections |
| Curseur | BlobCursor ou SplashCursor | Un seul des deux, pas les deux |
Notes d'implémentation
- Toujours
viewport={{ once: true }} sur les animations scroll (convention design.md)
- Respecter les conventions du design system HeartCo (voir
.claude/rules/design.md)
- Les animations ne doivent pas impacter les Core Web Vitals (lazy load, will-change)
- Mobile : désactiver TiltCard et Magnet (touch incompatible), garder CountUp et FadeContent
