Preview

Build 10x Faster with NS

Highly customizable components for building modern websites and applications

A modern hero section featuring a full-screen video background with DNA-like animation, centered content layout, and dual call-to-action buttons. This component supports both media uploads (with light/dark variants) and URL fallback, includes automatic color inversion for dark mode, and responsive design optimizations.

Key Features:

Full-screen video background with MP4 support
Flexible video sources: Upload videos via media field OR provide a URL
Light/dark mode variants: Upload separate videos for each theme
Dark/light mode with automatic video color inversion (when using URL fallback)
Fully responsive with mobile-first design
Two customizable CTA buttons with distinct styles
Centered content that shifts to left-aligned on desktop
Smooth animations and polished hover states

Props

The Hero_3 block accepts the following props from PayloadCMS:

Prop

Type

Installation

npx shadcn@latest add @uifoundry/hero-3

If you encounter issues, check the registry setup guide for configuration help.

Registry Dependencies

This component uses the following registry components:

button - Customizable button component with variants
@uifoundry/header-field - PayloadCMS text field for headers
@uifoundry/subheader-field - PayloadCMS text field for subheaders
@uifoundry/media-field - PayloadCMS double upload field (light & dark variants)
@uifoundry/block-constants - Block slug and group constants for PayloadCMS blocks

Dependencies

This component requires the following NPM packages:

React - JavaScript library for building user interfaces
Next.js - React framework for production
Lucide React - Beautiful & consistent icon toolkit
Payload - Headless CMS and application framework

Design Notes

Video Source Priority: The component prioritizes video sources in this order:

Light variant from media upload field
Dark variant from media upload field
URL fallback from videoUrl field

This allows you to provide theme-specific videos (recommended) or a single fallback URL.

Video Background Behavior:

Light mode: 50% opacity with color inversion (when using URL fallback)
Dark mode: 35% opacity on mobile, 75% on desktop with no inversion
When using media uploads, the appropriate variant displays without color manipulation

Responsive Layout:

Mobile (< 1024px): Centered text with 2:3 aspect ratio video
Desktop (≥ 1024px): Left-aligned text with 16:9 aspect ratio video

Performance Tips:

Preferred approach: Upload optimized videos via media field for best theme support
Keep video files under 5MB for optimal loading performance
Use MP4 format for best browser compatibility
Consider using a CDN for video hosting (like the default ImageKit URL for fallback)
Compress videos before uploading to reduce file size

Accessibility:

Video includes muted, autoPlay, loop, and playsInline attributes for proper behavior
Semantic HTML with proper heading hierarchy
Color contrast meets WCAG standards in both themes

Hero 3 (Video Background)