ra.studio

■ 01

A hero video overlay so dark nobody noticed it was the problem

UINext.jsVideo

Bodrum Life Yacht's homepage hero is a full-bleed video behind the headline and search bar. To keep white text readable over bright footage, the hero had a black gradient overlay — standard pattern, nothing unusual about the approach. What was unusual was how dark it had drifted over several rounds of tuning: by the time the client flagged it, the top of the video was at 12% black, the middle at 22%, and the bottom — right where the headline sits — at 80%. On a bright, high-contrast shot (turquoise water, a white yacht, direct sun) that top-to-bottom wash was quietly desaturating the one asset the whole page was built to show off.

The feedback didn't name the overlay

The client's exact words: "the filter is too heavy, it's ruining the quality." First read, that sounds like a request to simplify the search form sitting on top of the video — fewer dropdowns, less visual noise. That's a reasonable UI complaint and an easy one to act on, so that's what got built first: a three-field search bar cut down to one.

It wasn't what they meant. The follow-up was specific: "filtreden kastım videonun üzerindeki siyah opaklık filtresiydi" — the filter meant was the black opacity layer on the video, not the form. Two different problems shared one word ("filter"), and the wrong one got fixed first.

Lesson: when feedback uses an overloaded word — filter, style, layout — resolve which concrete element it points to before touching code. A plausible interpretation acted on quickly is still a wrong turn if it's the wrong interpretation.

The fix: measure the stack, cut it roughly in half

The homepage hero actually layers two separate darkening elements: a full-height gradient over the whole video (12% → 22% → 80%, top to bottom) for general contrast, and — on mobile only — a second band at the very top that blends the video into a fixed status-bar color, so there's no visible seam where the phone's notch area meets the page.

The main gradient dropped to 4% → 10% → 50%. Top and middle are now close to transparent — the video reads at close to its real color there — while the bottom, where the white headline and search bar actually need contrast, stays dark enough to keep text legible without crushing the footage under it.

The mobile-only status-bar band got the same treatment, but with one deliberate exception: the very top slice of that band stayed fully opaque. That sliver isn't darkening the video — it's matching a fixed background color so the phone's status bar doesn't show a visible seam against it. Turning it translucent doesn't make the video brighter there; it just brings back a line across the screen that had already been debugged once before.

Bodrum Life Yacht mobile homepage after the overlay fix, real footage visible
After: same real footage, overlay cut roughly in half — visible top-to-bottom instead of one flat dark wash.

Why the top band stays solid black and nothing else does

It would have been simpler to lighten every dark element on the page by the same ratio. That's the version that looked wrong: with the status-bar band thinned out evenly, the top of the screen went slightly translucent and a seam reappeared where the fixed background color peeked through at an angle the video didn't quite cover — the exact bug a previous session had already found and fixed by making that specific sliver fully opaque.

The distinction that matters: not every dark pixel on a hero is doing the same job. Some are there to darken the video for text contrast — those should move when the client says the video looks muddy. Others are there to hide a seam between two backgrounds — those aren't a video filter at all, and lightening them doesn't improve the footage, it just reintroduces a rendering artifact. Fixing "the overlay is too dark" means finding out which of the dark layers is actually the overlay.

Same video file, same headline, same search bar. The only change was how much of the footage a stack of gradients was allowed to hide — and knowing which layer in that stack was actually doing the hiding.

Work with us →← Back to insights