---
title: "Horizon Hero — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ansh Jswl · Sections. Full-bleed video hero"
canonical: "https://framer.elliotli.dev/component/horizon-hero"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Horizon Hero

# Horizon Hero

Full-bleed video hero

[View on Framer](https://framer.com/marketplace/components/horizon-hero/?via=elliot-li)

![Horizon Hero preview image 1](https://framer.elliotli.dev/og/component/horizon-hero/97138f8d04e1cb5b/1600x895.jpg)

## Summary

Full-bleed video hero

## Description

**Reveal Hero — Full-Bleed Video Hero Section**

Give your homepage an opening moment that makes people stop scrolling. Reveal Hero is a fully responsive, no-code hero section for Framer — combining a full-bleed background video, a floating glass nav bar, and a bold two-tone headline into one polished, ready-to-publish component.

**Designed to feel editorial, not templated**

A rounded, full-bleed video canvas anchors the page, a pill-shaped nav bar floats above it, and a large right-aligned headline pairs a heavy display typeface with a soft body font for contrast — premium straight out of the box, and fully yours to restyle.

**What's included**

-   **Full-bleed video or image background** — Drop in your own looping video and poster image. Falls back gracefully under reduced motion.
    
-   **Floating glass nav bar** — An elevated pill nav with an animated underline on hover and active state, fully keyboard-accessible.
    
-   **Two-tone headline** — Split your title into three parts so the middle word can carry its own accent color.
    
-   **Editable copy and CTA** — Eyebrow text, body copy, and call-to-action (with link) are all property controls — no code needed.
    
-   **Responsive by default** — Type and spacing scale down at tablet widths. Below 680px, the nav collapses into a built-in animated hamburger menu.
    
-   **One accent color, applied everywhere** — Updates the nav underline, headline accent, and focus outlines together.
    
-   **Accessible** — ARIA labeling, visible focus rings, and automatic video-disable under `prefers-reduced-motion`.
    

**Fully customizable, zero code editing**

Every text field, nav link, accent color, and background asset is controlled from Framer's property panel — just drop it in, swap your media, and adjust copy.

**Ideal for**

Agencies, studios, wellness and hospitality brands, boutique launches, portfolios, and any homepage that wants a strong, motion-forward first impression.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5202

## Details

- **Author**: Ansh Jswl
- **Price**: $5.00
- **Published**: 2026-07-25
- **Updated**: 2026-07-25
- **Added**: 2026-07-25
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes