amazon

AMAZON — a real app-store ad screenshot, rebuilt, then given the one move the screenshot was always implying.

Read the rig's notes

The frame is authored for FIDELITY: every number below is measured off the
reference, which is the only honest test of whether the components can carry
a real product surface instead of a promo-shaped one. Exactly one thing then
moves — the "Customers say" panel lifts off the glass at 1s, holds, and
settles back at 5.6s, so the reel loops on itself. Everything else is held.

Three coordinate spaces, stacked front to back — that is the whole trick.

THE WALL `ui#s01-wall` — a 1080x2340 pixel-space billboard at z=0 carrying
everything that belongs to the AD rather than to the app:
the blurred backdrop, the letterbox bars, the navy card,
the headline, the two chrome buttons and the AD tag. The
camera is solved so this wall is exactly the frame (a 2340
tall wall at fov 48 sits at z=2628), so every number below
is a screen pixel.

THE DEVICE `<iphone>` in world mm at z=120, scaled 8.6x so its 159.5mm
body reads 1437px tall once perspective has had its say.
Its `<ui width=71 height=154>` child is the app itself, laid
out in the glass's own millimetres — the same tree the
device promos use, just asked to be a store page.

THE CALLOUT `<ui3d overlay=screen>` — the "Customers say" panel. In the
reference it OVERHANGS the phone on both sides, which a
texture can never do: the screen raster stops at the glass.
As surface-anchored real geometry it is authored in the same
71x154 space (x runs -6 to 78, i.e. off both edges) and
simply keeps painting past the display. That is the one
thing in the frame that forces the overlay layer — and,
being a mesh, the one thing that can leave it.

THE POPOUT. The keyframes sit on the OVERLAY NODE, not on its three cards:
an overlay's node tracks read in the anchor's own stage-mm, so `0 0 16` is
16mm straight off the glass and the shadow stack, the white card and its
copy travel locked together with nothing to keep in sync. Only the two
shadow cards carry tracks of their own — their opacity roughly triples on
the way out, which is what actually sells the height. The panel is flush
and pixel-identical to the reference until 1s, so the shot still reads as
the screenshot before it becomes a product tour.

WHY THE PHONE IS NOT DRAWN. Rounded cards could fake a handset, and it would
be wrong: the device is a GLB, its titanium frame and Dynamic Island are
geometry, and the status bar is authored AROUND the island (safe-top=off,
then a gap at x 20..50) rather than under a hand-drawn notch.

LIT vs UNLIT. The glass takes the plain `basic` screen material and the
overlay's items are MeshBasicMaterial, so both paint exactly as authored —
the lights in here are for the casing alone. The wall is a ui/scene plane and
was never lit to begin with.

SHADOWS. `shadow=true` is a fixed 4/12 offset+blur in STAGE units, which on a
71mm glass is a 4mm drop — so the callout's elevation is three stacked
translucent cards instead, 0.05/0.07 black, each a hair larger than the last.

IMAGES are placeholder-first: `href=""` + a `description`, filled later by
`npm run promo:images -- --in promos/primitives/uis/examples/amazon.promo`.

Capture: `nx run tools:capture:webgl -- --project promos/primitives/uis/examples/amazon.promo --width 1080 --height 2340`
Preview: /packages/runtime/index.html?project=promos/primitives/uis/examples/amazon.promo

Topic: uis
Scenes: 3
Kind: reference rig

//
    AMAZON — a real app-store ad screenshot, rebuilt, then given the one move
    the screenshot was always implying.

    The frame is authored for FIDELITY: every number below is measured off the
    reference, which is the only honest test of whether the components can carry
    a real product surface instead of a promo-shaped one. Exactly one thing then
    moves — the "Customers say" panel lifts off the glass at 1s, holds, and
    settles back at 5.6s, so the reel loops on itself. Everything else is held.

    Three coordinate spaces, stacked front to back — that is the whole trick.

      THE WALL      `ui#s01-wall` — a 1080x2340 pixel-space billboard at z=0 carrying
                    everything that belongs to the AD rather than to the app:
                    the blurred backdrop, the letterbox bars, the navy card,
                    the headline, the two chrome buttons and the AD tag. The
                    camera is solved so this wall is exactly the frame (a 2340
                    tall wall at fov 48 sits at z=2628), so every number below
                    is a screen pixel.

      THE DEVICE    `<iphone>` in world mm at z=120, scaled 8.6x so its 159.5mm
                    body reads 1437px tall once perspective has had its say.
                    Its `<ui width=71 height=154>` child is the app itself, laid
                    out in the glass's own millimetres — the same tree the
                    device promos use, just asked to be a store page.

      THE CALLOUT   `<ui3d overlay=screen>` — the "Customers say" panel. In the
                    reference it OVERHANGS the phone on both sides, which a
                    texture can never do: the screen raster stops at the glass.
                    As surface-anchored real geometry it is authored in the same
                    71x154 space (x runs -6 to 78, i.e. off both edges) and
                    simply keeps painting past the display. That is the one
                    thing in the frame that forces the overlay layer — and,
                    being a mesh, the one thing that can leave it.

    THE POPOUT. The keyframes sit on the OVERLAY NODE, not on its three cards:
    an overlay's node tracks read in the anchor's own stage-mm, so `0 0 16` is
    16mm straight off the glass and the shadow stack, the white card and its
    copy travel locked together with nothing to keep in sync. Only the two
    shadow cards carry tracks of their own — their opacity roughly triples on
    the way out, which is what actually sells the height. The panel is flush
    and pixel-identical to the reference until 1s, so the shot still reads as
    the screenshot before it becomes a product tour.

    WHY THE PHONE IS NOT DRAWN. Rounded cards could fake a handset, and it would
    be wrong: the device is a GLB, its titanium frame and Dynamic Island are
    geometry, and the status bar is authored AROUND the island (safe-top=off,
    then a gap at x 20..50) rather than under a hand-drawn notch.

    LIT vs UNLIT. The glass takes the plain `basic` screen material and the
    overlay's items are MeshBasicMaterial, so both paint exactly as authored —
    the lights in here are for the casing alone. The wall is a ui/scene plane and
    was never lit to begin with.

    SHADOWS. `shadow=true` is a fixed 4/12 offset+blur in STAGE units, which on a
    71mm glass is a 4mm drop — so the callout's elevation is three stacked
    translucent cards instead, 0.05/0.07 black, each a hair larger than the last.

    IMAGES are placeholder-first: `href=""` + a `description`, filled later by
    `npm run promo:images -- --in promos/primitives/uis/examples/amazon.promo`.

    Capture: `nx run tools:capture:webgl -- --project promos/primitives/uis/examples/amazon.promo --width 1080 --height 2340`
    Preview: /packages/runtime/index.html?project=promos/primitives/uis/examples/amazon.promo
promo#amazon(width=1080 height=2340 fps=30)
  // ================================================