FX-007 · HUD Frame
A HUD overlay for your site.
A camera frame sits over the viewport: corner brackets, a running timecode, local time, pointer coordinates and scroll depth. It can also read the page itself and print the runtime's own events.
- Weight3.8 KB
- LibraryNone
- PhonesTrimmed
- Licence€39
Live · Frame
Look at the corners.
The brackets, the timecode and the clock around this page are the effect, running live.
Phones get the corners and the clock only, so the frame never crowds the content.
Live · Telemetry
It reads the page.
With telemetry on, it shows the frame rate, DOM nodes, effects running, viewport and scroll speed. They are real numbers.
Live · Log
It narrates itself.
The log prints the runtime's own events as effects mount and unmount.
01 — Details
What it does.
A frame, not a widget
It is a pure readout: it takes no clicks, and screen readers skip it.
Real telemetry
Frame rate, DOM nodes, effects running, viewport, breakpoint, scroll speed, and JS heap where the browser exposes it.
A runtime log
It prints the runtime's own events as effects mount and unmount.
Trimmed on phones
Phones get the corners and clock. Reduced motion keeps the frame and clock and stops the running numbers.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Build a camera-style HUD overlay for this website in plain JavaScript. Behaviour - A frame sits over the viewport: corner brackets, a blinking REC with a running timecode, local time with a zone label, pointer coordinates and scroll depth. - Optional telemetry reads the page itself: frame rate, DOM nodes, viewport and breakpoint, scroll speed, and JS heap where the browser exposes it. - An optional log prints events from the site's own scripts. Build - Use one fixed layer covering the viewport, with pointer-events: none and aria-hidden. - Update the running numbers on a single timer or frame loop, writing textContent only when a value changes. - Format the clock with Intl.DateTimeFormat and a time zone option. Must hold - It is a pure readout: it never takes a click, and screen readers skip it. - Keep it clear of the site's header and content. Reserve room for it, and check the strips at laptop heights. - Never show invented numbers. If the browser doesn't expose a value, leave it out. - On phones, trim it to the corners and the clock. - With prefers-reduced-motion, keep the frame and clock and stop the running numbers. - Remove the layer and timers on teardown. Done when every number is real, clicks pass straight through it, and nothing collides with the header at any size.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script>
<body data-fx="hud"
data-fx-hud-label="STUDIO"
data-fx-hud-zone="Sofia"
data-fx-hud-tz="Europe/Sofia"
data-fx-hud-stats>
| Option | Default | What it does |
|---|---|---|
| data-fx-hud-label | SiteFX | Text after REC, top left |
| data-fx-hud-zone | — | Label beside the clock |
| data-fx-hud-tz | — | Clock time zone; default is the visitor's |
| data-fx-hud-fps | 25 | Timecode frame rate |
| data-fx-hud-stats | — | Adds the telemetry |
| data-fx-hud-log | — | Adds the runtime event log |
04 — FAQ
Questions.
Are the numbers real?
Yes. Telemetry reads the page itself, and the log prints the runtime's own events.
Does it block clicks?
No. It is a pure readout, so clicks pass straight through it.
Can it match my brand?
Yes. Ink, accent, font, inset and layer order are all CSS variables.
What about phones and reduced motion?
Phones get the corners and clock. Reduced motion keeps the frame and clock and stops the running numbers.
Licence
HUD Frame · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.