Editorial React UI components (21)
Magazine-style React sections: column grids, big imagery, serif headlines and a content-first rhythm. Built for blogs, publications and story-driven landing pages. Copy-paste, Tailwind v4.
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 Story NarrativeHistoire de l'entreprise en format narratif avec timeline integree verticale.aboutAbout TimelineTimeline de l'histoire de l'entreprise avec milestones.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 Text ImageBento asymetrique alternant grands blocs texte et blocs visuels. Layout editorial premium.blogBlog Hero FeaturedGrande carte hero d'article avec overlay gradient, chips de tags, temps de lecture et auteur.blogBlog Hover PreviewListe minimaliste de titres d'articles. Au hover, un preview card (image + extrait) apparait pres du curseur.blogBlog Interactive TOCArticle de blog avec table des matieres interactive en sidebar et surlignage au scroll.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.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 FilmstripBande filmstrip horizontale draggable avec perforations de film en CSS. Aspect ratio fixe, barre de progression et drag elastique.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.portfolioPortfolio Cursor FollowListe de projets avec image preview qui suit le curseur via useSpring. L'image apparait et disparait avec AnimatePresence. Interaction Awwwards-level.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.