Skip to main content

HUD overlay

@scenography/overlay is a framework-agnostic DOM layer over the gallery canvas: buttons, hints, and any visual aid you want, positioned in a 3×3 grid of slots. It is plain DOM, so it works whether or not you use React.

Mounting​

import { createOverlay, fullscreenButton, controlsHint } from '@scenography/overlay';

const overlay = createOverlay({ gallery });
overlay.add('top-right', fullscreenButton());
overlay.add('bottom-center', controlsHint());

// later: overlay.destroy();

Slots: top-left, top-center, top-right, middle-left, center, middle-right, bottom-left, bottom-center, bottom-right. add returns a function that removes the component.

Components are just functions​

A component is (ctx) => HTMLElement (optionally returning { element, destroy } for cleanup). The context gives you the running gallery and the surface (the element fullscreen targets). No daisyUI or framework required:

overlay.add('bottom-left', () => {
  const el = document.createElement('div');
  el.textContent = 'My gallery';
  el.style.color = '#fff';
  return el;
});

daisyUI prefab widgets​

The package ships optional widgets (fullscreenButton, controlsHint) styled with daisyUI classes. They work as DOM regardless, but to look right they need daisyUI in your CSS pipeline. daisyui and tailwindcss are therefore optional peer dependencies — only install them if you use the prefab widgets.

With Tailwind v4:

styles.css
@import 'tailwindcss';
@plugin 'daisyui';

If you'd rather not use daisyUI, skip the prefab widgets and build your own components (just return an element with your own styles, as shown above).