Holo

M.A.V.E.N. Aurora

Heroes 1

About

Animated WebGL shader background in the Aurora style. Generated by the 21st.dev Shader Builder. 4-color palette (#000000, #1F51FF, #00E5FF, #EAFDFF). A drop-in, zero-dependency React component for hero sections and animated gradient/noise backgrounds.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds M.A.V.E.N. Aurora to your project and fits it to your theme.

Code

How M.A.V.E.N. Aurora is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ShaderBackground } from "@/components/ui/m-a-v-e-n-aurora"

export default function ShaderBackgroundDemo() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <ShaderBackground className="h-full w-full" />
    </div>
  )
}

More by Holo

View all
  • Slot Week Picker

    Slot Week Picker

    26
  • Testimonial Coverflow

    Testimonial Coverflow

    16
  • Command Palette

    Command Palette

    9
  • Pricing Plan Tilt

    Pricing Plan Tilt

    8
  • Photo Review Form

    Photo Review Form

    3
  • Notification Matrix

    Notification Matrix

    3
  • Live Contact Form

    Live Contact Form

    3
  • File Drop Physics

    File Drop Physics

    2

More in Heroes

View all
  • Responsive Hero Banner

    Responsive Hero Banner

    2.1K
  • SaaS Template

    SaaS Template

    2.6K
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    1K
  • Hero

    Hero

    1.3K
  • Hero 03

    Hero 03

    358
  • Modern Landing Hero

    Modern Landing Hero

    133
  • HeroSectionWithGradient

    HeroSectionWithGradient

    374
  • Home Section

    Home Section

    75