Composants React animés au scroll (21)
Des sections React pilotées par le scroll : révélations, étapes sticky, parallax et effets de progression via le useScroll de Framer Motion. Copie le TSX et l'animation liée au scroll vient avec. Tailwind v4, responsive.
aboutAbout Numbers AnimatedAbout en chiffres avec compteurs animes au scroll : employes, clients, pays, projets.aboutAbout Parallax ImageLayout 2 colonnes avec image parallax au scroll, titre serif italic, stats clés et éléments décoratifs flottants animés en boucle.aboutAbout Scroll RevealLe texte de la mission se revele mot par mot au scroll. Chaque mot passe de opacity 0.15 a 1 progressivement. Effet Dior.com. useScroll + useTransform.bentoBento Scroll RevealBento grid asymetrique en 6 cellules avec animations d'entree differenciees au scroll, scale, x, y selon la position. Hover lift avec accent border. Contenu mixte : stat, chart barres, tag cloud, quote.blogBlog Interactive TOCArticle de blog avec table des matieres interactive en sidebar et surlignage au scroll.careersCareers Hover RevealListe de postes minimaliste. Au hover, un panneau se revele avec description, requirements et bouton postuler. Slide depuis la droite avec AnimatePresence.careersCareers Interactive MapOffres d'emploi sur une carte du monde avec pins cliquables par localisation.customer-storiesCustomer Stories Scroll3 cards horizontales case study avec reveal diagonal clipPath au scroll, border accent animée au hover, stats count-up et citation courte. Style Linear / Apple.featuresFeatures Spotlight PinSection features à deux colonnes : liste gauche scrollable avec indicateur actif (border-left accent, fond léger) et panneau droit sticky dont le visuel change dynamiquement via useScroll + AnimatePresence. Style Linear.app.heroHero Elastic ColumnsGrille 3 colonnes de cards portrait avec effet parallax décalé au scroll, colonne gauche remonte, droite descend, centre fixe. Titre centré superposé avec vignette radiale. Idéal portfolio, agence, SaaS visuellement ambitieux.heroHero Perspective ZoomHero cinématique avec entrée 3D : le contenu démarre incliné (rotateX 15°, scale 0.9) et se redresse progressivement au scroll. Inclut un mockup dashboard avec son propre effet de tilt.metricsMetrics Animated BarsBarres de progression horizontales qui se remplissent au scroll avec un spring physique (élastique). Chaque barre : label, description, pourcentage animé synchronisé. Layout split gauche (titre) / droite (barres).newsletterNewsletter SpotlightSection newsletter avec spotlight radial qui suit la souris via useMotionTemplate. Dot-grid subtil en fond, glow sur l'input au focus, bouton avec spinner SVG anime puis checkmark au succes. Social proof avec avatars empiles.portfolioPortfolio Stacked ScrollCartes de projets empilees qui se depilent au scroll via position sticky. Chaque carte apparait par-dessus la precedente avec un scale progressif.processProcess Path DrawSVG path qui se dessine entre les etapes au scroll (stroke-dashoffset anime via useScroll). Cercles numerotes relies par un trait.processProcess Sticky StepsLayout 2 colonnes : sidebar gauche sticky avec numero d'etape actif en crossfade (AnimatePresence) et barre de progression scroll-driven (scaleY). Droite : etapes qui se revelent au whileInView. Style Apple/Linear.product-showcaseProduct Showcase ExplodedVue eclatee d'un produit : plusieurs couches se separent au scroll (translateY/X differents). Au repos, tout est assemble.servicesServices Scroll CardsCarousel de cards de services draggable horizontalement avec Framer Motion. Les cards hors viewport s'estompent en opacité et scale. Une barre de progression indique la position de défilement.statsStats Slot MachineLes chiffres des statistiques défilent comme des colonnes de slot machine au scroll. Chaque digit individuel est une colonne 0-9 animée avec spring physics (rebond final satisfaisant). Stagger de droite à gauche pour un effet cascade élégant.timelineTimeline Draw PathTimeline verticale ou un path SVG sinueux se dessine progressivement au scroll (motion.path + pathLength lie a useScroll). Les jalons-cercles s'illuminent quand la ligne les atteint, les blocs texte font un reveal directionnel (x offset). Ambiance premium minimaliste, zero couleur tape-a-l-oeil.videoVideo Scroll PlayProgression simulee au scroll avec barre circulaire SVG qui se remplit. Le contenu change selon la progression.