openhero

---

✨ What is openhero?

openhero is a free gallery of cinematic full-screen video hero sections for the modern web. Pick a video, preview it at full resolution, grab the source code in one click, and drop it straight into your project - no attribution required.

Every hero section ships with production-ready HTML and Next.js code, completely free.

---

🎬 Features

Feature	Description
Video Hero Gallery	Browse 60+ cinematic backgrounds organized by category (abstract, nature, urban, sci-fi…)
Full-Screen Preview	Click any card to open a modal with the video looping in full quality
One-Click Code	Copy ready-to-use HTML or Next.js code directly from the modal
ZIP Download	Download the video + source code as a ZIP in one click
Background Library	272 curated background images across 4 categories
Submit Your Own	Upload your hero section as a ZIP for community review

---

🚀 Quick Start

1. Clone the repo

git clone https://github.com/CristianOlivera1/openhero.git
cd openhero

2. Install dependencies

pnpm install

3. Configure environment

Create a .env.local file at the root:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
IP_HASH_SALT=your-random-secret-salt

4. Run the dev server

pnpm dev

Open http://localhost:3000 to see it running.

---

🤝 Contributors

For code contributions, open a pull request with a clear description of the change.

Agamdeep Singh 💻

phuoctai 💻

Cristian Olivera Chávez 💻

Luis Fernando Juarez Peña 💻

---

📄 License

MIT - use freely in personal and commercial projects. See LICENSE for details.

Assets downloaded from openhero may have their own licenses - check the modal for per-video details.