Crowdwall – Community hero with a scrolling photo wall

What it is

A hero section for communities, social apps and creator platforms: a badge, a headline, a line of text and a call to action, centred over an endless wall of portrait photos. The photos run in rows and every other row slides the opposite way, so the wall keeps moving against itself.

What's included

• CommunityHero, the section, and PhotoMarquee, the photo wall on its own (both Server Components)
• 48 demo portraits, dealt out to the rows so the same face is never on two rows at once
• A demo page with a light, dark and system theme switch
• A README with every prop, the theming and how to use your own photos

Highlights

• Rows in alternating directions, all one way, or a direction for each row
• Light, dark or auto: theme="auto" follows your site's dark: variant
• Pure CSS motion: one transform-only keyframe animation, no animation library or timers
• A seamless loop that never jumps, and side and bottom fades that melt into any background
• Accessible: alt text read once per photo, duplicates hidden from screen readers, a still wall for reduced motion
• Responsive from 360px to 2560px, with no layout shift

Stack

Next.js 16 (App Router), React 19, Tailwind CSS 4, TypeScript, lucide-react

Requirements

• A Next.js project with Tailwind CSS 4

How to use it

Copy components/sections/community-hero/ into your project, add the marquee animation to your global CSS (the README shows how), put your photos in public/images/community/ and render <CommunityHero {...communityHero} />. Props set the rows, speed, directions, theme and the call to action.