Preview

A modern hero section featuring an animated FlickeringGrid background, optional alert banner with smooth interactions, and dual call-to-action buttons. This component combines the Hero_1 style with MagicUI's FlickeringGrid for a dynamic, eye-catching presentation with sophisticated animations.

Key Features:

• Animated FlickeringGrid background with customizable colors
• Interactive alert banner with smooth hover animations
• Text animation with fade-in blur effects
• Staggered CTA button animations
• Optional hero image with decorative frame
• Fully responsive with mobile-first design
• Radial gradient overlay for depth

Props

The Hero_5 block accepts the following props from PayloadCMS:

Installation

npx shadcn@latest add @uifoundry/hero-5

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/animated-group - Motion primitive for animating groups of elements
• @uifoundry/text-effect - Text animation effects with staggered reveals
• @uifoundry/flickering-grid - Animated flickering grid background component with canvas rendering
• @uifoundry/media-field - PayloadCMS double upload field (light & dark variants)
• @uifoundry/header-field - PayloadCMS text field for headers
• @uifoundry/subheader-field - PayloadCMS text field for subheaders
• @uifoundry/style-utils - Tailwind utility functions including cn() class merger
• @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
• Payload - Headless CMS and application framework
• Lucide React - Beautiful & consistent icon toolkit

Design Notes

FlickeringGrid Background:

• Canvas-based animation with customizable grid parameters
• Default settings: 4px squares, 6px gap, blue color (#60A5FA)
• Circular mask (450px radius) for focused effect
• Max opacity of 50% with 10% flicker chance
• 800x800px rendering area

Alert Banner:

• Smooth hover transitions with background color change
• Animated arrow icon with sliding effect
• Muted background with subtle shadow
• Only displays when both label and link are provided

Text Animations:

• Header: Word-by-word fade-in blur effect
• Subheader: Line-by-line animation with 0.5s delay
• Custom speed segment of 0.3s for smooth transitions

CTA Buttons:

• Staggered entrance animations (0.05s between)
• Primary button with gradient border wrapper
• Secondary button with ghost variant
• Both use spring animations with 0.3 bounce

Hero Image Frame:

• Decorative rounded frame with shadow effects
• Ring and inset shadow for depth
• Gradient overlay (35% to 100% opacity)
• Responsive aspect ratio (15:8)
• Centered with max-width constraint

Fallback Behavior: When no media is provided, displays a down arrow with smooth scroll functionality to guide users to the next section.

Animation Timing:

• Container delay: 1s before children animate
• Alert/buttons: 0.75s delay with stagger
• All animations use spring physics with 0.3 bounce
• Duration of 1.5-2s for smooth, natural motion

Responsive Layout:

• Mobile: Centered text, stacked buttons
• Desktop: Maintains center alignment, buttons side-by-side
• FlickeringGrid scales appropriately across breakpoints
• Image frame adjusts with negative margins on mobile

Performance Considerations:

• FlickeringGrid uses efficient canvas rendering
• Animations use hardware acceleration
• Images load with appropriate dimensions (2700x1440 recommended)
• Component only renders animations when in viewport