Hologram

$ pnpm dlx shadcn@latest add @remocn/hologram

Usage

Hologram is a wrapper. Put a scene inside it and it plays as projected light: a ghost double shimmers off the image, emission lines structure it, a travelling crest runs up the frame, and the whole thing leans toward its tint. Only what is bright enough in the scene carries; the rest sinks into the dark volume the projection hangs in.

import { Hologram } from "@/components/remocn/hologram";
 
export const MyScene = () => (
  <Hologram>
    <Scene />
  </Hologram>
);

What to reach for it for

Put it in a console

The filter is only the light. What makes a shot read as a projection is what the light is coming out of — so build the chrome as ordinary DOM, put your scene inside it, and wrap the whole thing. The frame's thin lines are exactly what the edge emission has to work with, which is why a HUD gains far more from this filter than a flat panel does.

<Hologram>
  <HudFrame>
    <Scene />
  </HudFrame>
</Hologram>

Boot the projection

A projector that snaps on perfectly is a screen. Let the doubling and the flicker start wide and settle over the first second and it reads as something being established rather than switched on.

import { interpolate, useCurrentFrame } from "remotion";
import { Hologram } from "@/components/remocn/hologram";
 
export const Opening = () => {
  const frame = useCurrentFrame();
  const unstable = interpolate(frame, [0, 34], [1, 0], {
    extrapolateRight: "clamp",
  });
 
  return (
    <Hologram ghost={1 + unstable * 3.6} flicker={1 + unstable * 2.6}>
      <Scene />
    </Hologram>
  );
};

To hand the shot back to reality afterwards, cut intensity to 0 — the scene returns exactly as it was, in one frame.

Notes

Put your backdrop inside the wrapper. A hologram wants to be translucent light, but this filter cannot be transparent: the untouched scene sits on a layer directly beneath the output, so anywhere the projection thinned to nothing the original interface would show through at full strength — which reads as a bug, not as light. Instead the projection hangs in a dark tinted volume that the filter paints itself, and what is too dim in the scene sinks into it. Visually it is the same picture; structurally it means the wrapper owns the background.

That also makes contrast the thing to design for. Only what is bright enough carries, so a scene of thin bright lines on black — a HUD, a wireframe, mono type — comes through far better than large filled panels.

The only motion is the flicker and the per-line slip, both on fixed frame cycles of 15 and one frame respectively, so nothing drifts and parallel renders match.

In browsers without html-in-canvas the scene keeps the tint and the line structure but loses the edge emission, the halo and the doubling. CSS can colour a frame; it cannot read what is next to a pixel, which is where three of the four signatures here come from.