# Crowdwall – Community hero with a scrolling photo wall

> A hero section for communities and social products: a headline and call to action over an endless wall of portraits whose rows slide in alternating directions. Light, dark or auto theme, pure CSS motion, built with Next.js and Tailwind CSS.

- Kind: Component (Galleries)
- Price: Free
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: gallery, marquee, hero, community, photo-wall, social-proof, nextjs, tailwind, dark-mode, css-animation
- npm packages: lucide-react
- Published: 2026-10-03
- Updated: 2026-10-03
- Page: https://upfork.dev/products/crowdwall

## How to get it

Install it into a React + Tailwind project with the shadcn CLI:

```bash
npx shadcn@latest add @upfork/crowdwall
```

Every install uses the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It's free with an UpFork account.

## About

## 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.