Bold React UI components (39)
Loud, confident React sections: oversized type, strong color blocks and statement layouts that grab attention above the fold. Built for brands that want to stand out. Copy-paste, theme-aware, Tailwind v4.
aboutAbout ComparisonAvant/apres montrant la transformation de l'entreprise.aboutAbout Counter MilestonesSection about avec compteurs animes et timeline de jalons connectes.aboutAbout Interactive MapCarte SVG interactive montrant la presence et les bureaux de l'entreprise.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 VideoSection about centree sur une video de presentation avec overlay play button.authLogin SplitPage de connexion en split-screen : visuel/branding a gauche, formulaire a droite.bannersNotification StackFlux de notifications animées simulant une activité en temps réel. Cards toast avec avatar, message et timestamp relatif. Loop automatique toutes les 2s avec AnimatePresence, idéal pour la preuve sociale live.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.before-afterWebsite RedesignComparaison avant/apres d'une refonte de site web avec slider interactif draggable.bentoBento DraggableCartes bento draggable et reordonnables avec animations spring au relachement.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 Audio PlayerBlog format podcast avec barres de forme d'onde audio, lecture/pause et liste d'episodes.blogBlog Card StackArticles empiles avec rotation alternee. Au hover, les cards se deplient en eventail avec animation fluide.blogBlog Hero FeaturedGrande carte hero d'article avec overlay gradient, chips de tags, temps de lecture et auteur.careersCareers Interactive MapOffres d'emploi sur une carte du monde avec pins cliquables par localisation.contactContact Chat BubblesFormulaire deguise en conversation chat. Questions en bulles stagger, reponses en bulles utilisateur. Tres engageant.contactContact GlobeSection contact avec globe SVG stylise (lat/lng, rotation lente). Points lumineux pour les bureaux. Infos a cote.ctaCTA DarkCTA sur fond sombre avec contraste fort. Accent lumineux sur fond dark pour impact maximal.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.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 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 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.product-showcaseProduct Showcase 360Produit qui tourne au drag horizontal avec rotateY + spring. Badge 360 glow, specs en grille overlay.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.sidebarSidebar Floating DockDock flottant style macOS avec effet de grossissement au survol et animations fluides.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.testimonialsTestimonials 3D StackCards testimonials empilées comme un jeu de cartes physiques avec profondeur (Y offset + scale + ombre). La card du dessus sort en arc avec AnimatePresence, les suivantes montent. Auto-rotate toutes les 3.5s, navigation manuelle prev/next.testimonialsTestimonials Stack SwipePile de cartes temoignages a swiper style Tinder avec physique de ressort. Drag interactif gauche/droite.valuesValues Parallax CardsCartes de valeurs avec effet de profondeur parallaxe au mouvement de la souris.