X-Ray Scan

$ pnpm dlx shadcn@latest add @remocn/x-ray-scan

Usage

XRayScan is a full-frame scene. It starts on the outside of a device. A thin glowing bar sweeps across it, and behind the bar the shell is gone: the device shows as white linework on a dark plate, with one part highlighted in the accent color. A freshly exposed band just behind the bar glows brighter and fades as the bar moves on.

import { XRayScan } from "@/components/remocn/x-ray-scan";
 
export const Inside = () => <XRayScan />;

Without outside and inside it draws the back of a phone and its internals: the camera array, the logic board with the SoC in the accent color, the battery with a wireless charging coil, and the speaker grille. direction picks a left-to-right or a top-to-bottom sweep.

Your own layers

Pass outside and inside to scan your own product. Both are full-frame layers stacked on each other, so draw them in the same coordinates, for example as two aligned images.

import { AbsoluteFill, Img, staticFile } from "remotion";
import { XRayScan } from "@/components/remocn/x-ray-scan";
 
export const Watch = () => (
  <XRayScan
    direction="vertical"
    outside={
      <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
        <Img src={staticFile("watch-front.png")} style={{ height: 560 }} />
      </AbsoluteFill>
    }
    inside={
      <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
        <Img src={staticFile("watch-xray.png")} style={{ height: 560 }} />
      </AbsoluteFill>
    }
  />
);

The sweep is sized to the default device, a centered box 80% of the frame height tall and about 39% of the height wide. The bar starts 12% of the frame width before that box and stops 12% past it, or 10% of the frame height for a vertical sweep. Content outside that span never changes: before the start it shows the inside layer from the first frame, and past the end it keeps the outside layer. Keep custom products centered and about that size.

Timing

At 30 fps and speed={1}:

xRayScanLength is 32. speed scales the sweep.

Notes

The inside layer renders twice: once as the revealed view and once under a glow filter for the bright band behind the bar. Heavy custom inside content costs twice.