Skip to content

Tropical atmosphere

How we use our Instagram / TikTok reel posters as atmospheric texture across the PWA without turning the site into a loud photo background.

Why

Dark, editorial surfaces (the home hero, Atlas family pages, the build-your-own promo band) can feel flat when they rely on solid black plus a single radial gradient. Rather than commissioning new photography, we reuse the 10 reel thumbnails already shipping in apps/web/public/media/reels/ — the same images that front the "Watch the plug" section on the home page.

The rule: posters are textures, never foreground. They sit at 5–12% opacity, heavily blurred, behind the existing radial-gradient recipes. The visitor's eye never lands on them — they only register as tropical warmth.

The component

apps/web/components/decor/TropicalBackdrop.tsx — server component, no JS, no new packages.

import { TropicalBackdrop } from "@/components/decor/TropicalBackdrop";

<section className="relative overflow-hidden">
  <TropicalBackdrop
    posterSlug="mango-ninja"
    intensity="low"
    tint="magenta"
    position="center"
  />
  {/* existing content */}
</section>

Props:

Prop Type Notes
posterSlug keyof REEL_POSTERS Friendly key for a reel poster. Omit for a glow-only backdrop.
intensity "low" | "medium" 5% or 12% opacity. Default low. Never louder.
tint "magenta" | "leaf" | "amber" | "none" Radial brand glow layered on top.
position "top" | "center" | "bottom-right" Crop anchor inside the parent. Default center.

Poster catalogue

Keys map to /media/reels/*.jpg. Pick the one whose visual palette echoes the surrounding content:

  • mango-ninja — TikTok mango sorbet, magenta-warm
  • lemon-asmr — TikTok lemon cut, cool citrus yellow
  • tiktok-shop-box — styled mixed-fruit flatlay
  • mango-juice — 57.9M plays, deep amber
  • pomelo-asmr — 25.5M plays, pale pink flesh
  • giant-citrus — 21.3M plays, warm yellow-green
  • bird-fruit — 6.4M plays, lush green
  • mini-pineapple — 6.2M plays, tropical yellow
  • red-dragon — saturated magenta dragon fruit
  • tropical-spread — curated editorial table

The canonical list lives in REEL_POSTERS inside the component file — if a new poster lands in public/media/reels/, add it there and its key becomes type-safe everywhere.

When to use

Surface Intensity Tint Why
Home hero low magenta Warmth behind the existing radial.
Atlas index hero low amber Editorial field-guide mood.
Atlas family detail hero low per family Only when Woo / local hero is empty.
Build-your-own promo medium magenta A full-bleed dark band benefits from the extra 7%.
PDP / cart / account / legal / forms — — Never. These surfaces need calm.
Anywhere already carrying a big product photo — — Never. One image per section, always.

Intensity rules

  • low (5%) is the default. It's intentionally near-invisible; that's the point. Trust it.
  • medium (12%) is only for full-bleed dark bands with no product imagery — the build-your-own promo is the canonical example.
  • Anything louder than medium is out of scope. If a surface needs more visual energy, commission real photography instead.

Accessibility

  • The outer wrapper is aria-hidden and pointer-events-none. Screen readers never hear it; taps never hit it.
  • No animation. No parallax. No scroll-linked transforms.
  • No horizontal scroll: the backdrop fills the parent's positioned box, never extends beyond it, and sits inside overflow-hidden on the caller.
  • Contrast untouched: because the poster is at 5–12% on a near-black background, text contrast against the section remains within the WCAG AA thresholds measured before the backdrop was introduced.
  • Reduced-motion: nothing to disable — there's no motion to begin with.

Mobile

  • One accent texture max per section. Phone screens are small; two competing backdrops read as noise, not atmosphere.
  • object-cover with a 3xl blur means the poster reads as a colour wash at phone widths — which is exactly what we want.

Where it's wired today

  • apps/web/app/page.tsx — home hero (mango-ninja, low, magenta).
  • apps/web/app/atlas/page.tsx — atlas index hero (tropical-spread, low, amber).
  • apps/web/app/atlas/[slug]/page.tsx — atlas family hero, only when the family has no image (Woo + local both empty). Mapping in FAMILY_BACKDROP.
  • apps/web/components/home/BuildYourOwnPromo.tsx — promo band (red-dragon, medium, magenta).

When components/home/JapaneseSelection.tsx lands, wire it with posterSlug="tropical-spread" and tint="amber" — there's no zen poster in the reel set today.