The Floating Screenshot Hero — Depth Is Three Shadows, Not a 3D Library

Every polished SaaS hero has a product screenshot that appears to float — lifted off the page, slightly breaking the hero's bottom edge into the next section. The effect reads as production value, and it's three CSS decisions, none of which involve WebGL or a parallax library.

Velocity X's hero-floating-screenshot is the assembled version; here's what it's actually made of.

The Money Pattern

Depth is layered shadows — one tight and dark, one broad and soft, one ambient tint. A single shadow-2xl looks stuck-on; the stack looks lit:

<section class="relative overflow-visible pb-24">
  <div class="mx-auto max-w-5xl px-6">
    <h1>…</h1>
  </div>

  <figure class="relative mx-auto -mb-36 mt-14 max-w-4xl rotate-[1.5deg]
                 rounded-xl
                 shadow-[0_2px_8px_rgb(0_0_0/0.18),0_24px_60px_-12px_rgb(0_0_0/0.35),0_80px_120px_-40px_rgb(59_130_246/0.15)]">
    <img src={shot.src} alt={shot.alt} width={shot.w} height={shot.h}
         class="block w-full rounded-xl" />
  </figure>
</section>
<section class="relative bg-white pt-44">…next section…</section>

The negative bottom margin is the "breaking the fold" trick: the screenshot overlaps into the next section, which pads itself to receive it. That overlap is what makes the page feel composed in layers instead of stacked in blocks — and it's two utilities, not a layout system.

The Catch

Restraint is the entire aesthetic. The tilt stays under ~2 degrees — at 1.5° it reads as "lifted", at 6° it reads as "falling". Scroll-parallax on the screenshot is almost always a mistake: it taxes the main thread to make your product harder to look at. If you must animate, a single entrance (fade-up once, 500ms, motion-safe:) is the ceiling.

And the overlap needs a z-index plan: the floating figure gets relative z-10, and nothing interactive may hide under its overhang in the next section — a screenshot that eats the clicks of the section below it is a support ticket with a drop shadow.

The Verdict

Three stacked shadows, ≤2° of tilt, a negative margin into a padded next section, one entrance animation at most. Depth without a dependency. The finished hero is in Velocity X's Heroes & Sections — alongside the device frame it pairs with.