Composants React à effets au survol (18)
Des sections React qui réagissent au pointeur : cartes magnétiques, tilt 3D, spotlights au curseur et masques de révélation. Construites avec les motion values et springs de Framer Motion. Copy-paste, Tailwind v4.
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.bentoBento Spotlight SweepFaisceau spotlight qui balaye la grille, illuminant les cartes a son passage. Effet cinematique.blogBlog Card StackArticles empiles avec rotation alternee. Au hover, les cards se deplient en eventail avec animation fluide.blogBlog Hover PreviewListe minimaliste de titres d'articles. Au hover, un preview card (image + extrait) apparait pres du curseur.careersCareers Hover RevealListe de postes minimaliste. Au hover, un panneau se revele avec description, requirements et bouton postuler. Slide depuis la droite avec AnimatePresence.ctaCTA Magnetic BurstCTA section premium avec bouton magnetique (spring physics), burst de particules au hover, double ring pulsant et spotlight qui suit la souris. Style agence haut de gamme.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.galleryGallery 3D WallMur de photos en perspective 3D avec tilt reactif au curseur. Les images reagissent au mouvement de la souris creant une experience immersive.heroHero 3D TiltHero avec carte 3D qui s'incline au survol de la souris. Effet perspective immersif.heroHero Cursor MaskHero à double couche avec effet masque curseur : une version dark et une version light superposées. La version light est révélée via un clipPath circle animé qui suit la souris (useSpring). Inspiré de la technique Olivier Larose. Effet wow garanti au premier survol.heroHero Particle GridGrille de points en arriere-plan. Les points proches du curseur grossissent et brillent. Layout split avec texte a gauche.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.navbarNavbar DockNavigation style dock macOS fixee en bas. Les icones grossissent au hover avec effet de vague : les voisins grossissent aussi mais moins. useMotionValue + useSpring.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 Cursor FollowListe de projets avec image preview qui suit le curseur via useSpring. L'image apparait et disparait avec AnimatePresence. Interaction Awwwards-level.pricingPricing Toggle MorphToggle mensuel/annuel avec slider spring physique (useSpring). Prix en crossfade vertical (AnimatePresence popLayout). Badge 'Save X%' pop au passage annuel. Cards 3 colonnes avec layout Framer et CTA whileHover.