MokuHero: Premium Sections Component by Alexander Moreno

Elevate your landing page with this high-end, scroll-driven hero section. Features a central expanding video or image and a fluid asymmetric grid. Perfect for luxury brands, boutique architecture, and premium lifestyle sites. Fully responsive and editable.

About this Component

The Ultimate Luxury Hero Component MokuHero is designed for creators who want to deliver a high-end, cinematic experience right from the first scroll. With an elegant asymmetric grid and a central media container that smoothly expands as you scroll, this component brings a premium feel to any Framer project.

Key Features:

Native Video Support: Easily upload local .mp4 or .webm files directly from the Framer canvas. No external hosting required.
Advanced Scroll Animations: Built with Framer Motion. The central media scales and adjusts its border radius perfectly on scroll, while the floating images move smoothly in parallax.
100% Customizable: Change typography, font sizes (desktop & mobile independently), and gap spacing right from the properties panel.
Fully Responsive: Seamlessly adapts to Desktop, Tablet, and Mobile views. The complex grid intelligently falls back to a clean, readable layout on smaller breakpoints.
Lightweight & Fast: Coded in React for maximum performance without bloated overrides.

Perfect for:

High-End Glamping & Nomadic Lifestyle brands
Boutique Architecture & Interior Design studios
Luxury Skincare & Wellness platforms
Premium Portfolios

How to use: Simply drag and drop the component onto your canvas, upload your central video or image, add your 4 grid images, and customize the text. The scroll animations work out-of-the-box!