Composants React UI élégants (41)
Des sections React raffinées : accents serif, espacements généreux et animations de bon goût. Le niveau de finition qu'on voit sur Linear, Vercel et les sites d'agences haut de gamme. Copy-paste, Tailwind v4, theme-aware.
aboutAbout FounderSection fondateur : photo placeholder, citation serif, bio courte et role.aboutAbout MagazineLayout editorial style magazine avec citations, grandes images et texte multi-colonnes.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 Quote WallMur de citations et principes fondateurs en layout disperse.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.aboutAbout Split PhotoGrande photo a gauche avec texte mission/vision a droite. Layout split classique.aboutAbout Story NarrativeHistoire de l'entreprise en format narratif avec timeline integree verticale.aboutAbout Timeline InteractiveTimeline avec points cliquables et ligne de progression animee. Au clic, le contenu de droite change avec AnimatePresence slide. Layout split.authLogin SplitPage de connexion en split-screen : visuel/branding a gauche, formulaire a droite.authMagic LinkConnexion sans mot de passe par magic link avec animation d'envoi et confirmation visuelle.before-afterBefore After CarouselCarrousel de paires avant/apres avec transitions synchronisees. Navigation par fleches et indicateurs.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 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 Spotlight SweepFaisceau spotlight qui balaye la grille, illuminant les cartes a son passage. Effet cinematique.bentoBento Text ImageBento asymetrique alternant grands blocs texte et blocs visuels. Layout editorial premium.blogBlog MagazineLayout magazine avec un article featured en grand et une grille d'articles en dessous.blogBlog TimelineArticles de blog sur une timeline verticale, alternant gauche/droite avec une ligne de connexion.breadcrumbBreadcrumb Path VisualFil d'Ariane visuel avec icones colorees, badges de progression et ligne de connexion entre les etapes.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 Values FirstPage carrieres mettant les valeurs d'entreprise en avant avant les offres d'emploi.contactContact Calendar EmbedSection contact avec selecteur de creneaux horaires style calendrier. L'utilisateur choisit un jour et un horaire pour un rendez-vous.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 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 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.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.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 360Produit qui tourne au drag horizontal avec rotateY + spring. Badge 360 glow, specs en grille overlay.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.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.valuesValues Parallax CardsCartes de valeurs avec effet de profondeur parallaxe au mouvement de la souris.