Expert system for implementing full-width (edge-to-edge) cinematic backgrounds with scrims and smooth transitions.
This skill defines the standard protocol for implementing immersive, full-bleed backgrounds across the David Funes Music application.
Edge-to-Edge (Full Bleed)
100vw)..cinematic-section utility class which implements the breakout logic:
.cinematic-section {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
}
Asset Quality & Format
width: 100vw; height: auto;background-size: 100% auto; background-position: top center;.The "80% Scrim" Rule
rgba(0, 0, 0, 0.8)).div or pseudo-element on top of the image but behind the content.Gradient Transitions
#0d0d0d).<section className="cinematic-section py-20">
{/* 1. Background Layer */}
<div className="absolute inset-0 z-0">
<Image
src="/images/your-section-bg.webp"
alt="Background"
fill
className="object-cover"
/>
{/* 2. Scrim Layer (80%) */}
<div className="absolute inset-0 bg-black/80 z-10" />
{/* 3. Gradient Vignetters (Optional for transition) */}
<div className="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black to-transparent z-10" />
<div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black to-transparent z-10" />
</div>
{/* 4. Content Layer */}
<div className="container mx-auto px-6 relative z-20">
{children}
</div>
</section>