Animated counter React components (13)
Stats and metrics that animate into view: count-ups, slot-machine numbers and animated bars triggered on scroll. Perfect for landing-page proof sections. Copy-paste, Framer Motion, Tailwind v4.
aboutAbout Counter MilestonesSection about avec compteurs animes et timeline de jalons connectes.aboutAbout Numbers AnimatedAbout en chiffres avec compteurs animes au scroll : employes, clients, pays, projets.aboutAbout NumbersSection a propos centree sur les chiffres cles avec grands nombres en accent.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.before-afterBefore After SliderSlider draggable avant/après avec Framer Motion drag='x'. Clip-path animé lié à la position du handle. Auto-animation de présentation au mount (30%→70%→50%). Labels badge flottants.bentoBento Magnetic CardsGrille bento asymetrique (grid-template-areas) avec 6 cellules de tailles variees. Chaque cellule reagit au hover avec un tilt magnetique (rotateX/Y ±8deg, useSpring). La cellule survole monte en z-index + scale 1.025, les autres s'estompent a 0.6. Contenu heterogene : stat, feature, quote, blob visuel, CTA.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.content-tabsContent Tabs PillTabs en pill/segment avec animation de slide, contenu texte avec stats et visuel a droite.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.heroHero 3D TiltHero avec carte 3D qui s'incline au survol de la souris. Effet perspective immersif.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).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.