Image Strobe

A strobing hero for film festivals, launch events and brand landing pages. Every layer is mounted at once and stacked in the same spot, then hard-cut with opacity, one frame every intervalMs (80ms by default), while the centred children (a wordmark, a tagline) never move. After cycles rounds (or durationMs) it rests on the last frame and calls onEnd. A layer can be an { src, alt } image or any ReactNode — a plain CSS-gradient div, for example.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<ImageStrobe/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/image-strobe.en.json

Usage

import * as React from "react";
import { ImageStrobe, type ImageStrobeHandle } from "@/components/ui/image-strobe";

const frames = [
  { src: "/festival/01.jpg" },
  { src: "/festival/02.jpg" },
  { src: "/festival/03.jpg", alt: "Poster key art: a screening hall at night" },
];

export function Hero() {
  const ref = React.useRef<ImageStrobeHandle>(null);
  return (
    <>
      <ImageStrobe ref={ref} images={frames} intervalMs={80} cycles={3} scrim>
        <h1 className="text-4xl font-semibold text-white">LUMEN REEL 2026</h1>
      </ImageStrobe>
      <button type="button" onClick={() => ref.current?.play()}>
        Replay
      </button>
    </>
  );
}

Props

ImageStrobeImage

ImageStrobeItem is ImageStrobeImage \| ReactNode.

ImageStrobeHandle

How it works

• Every layer is mounted at once and stacked in the same spot (absolute inset-0, object-cover), then hard-cut between opacity 0 and 1 with no transition, so nothing is re-decoded on each cut.
• All images are preloaded with img.decode() before playback starts; until then the first frame is shown.
• Timing accumulates requestAnimationFrame time instead of using setInterval: nothing piles up while the tab is in the background, and there is no burst of flips when it comes back.
• Length: durationMs wins when set, otherwise it runs cycles rounds; it then rests on endIndex (the last frame by default) and calls onEnd.
• Swap the vignette with the --wb-is-scrim CSS variable, and tune the reduced-motion crossfade with --wb-is-fade (1200ms by default).
• Photosensitivity warning: 80ms is roughly 12.5 flashes per second. Avoid strobing large, high-contrast areas (black/white alternation, saturated reds), prefer images of similar brightness and keep the total run short; the component does not adjust brightness differences between neighbouring frames for you.

Accessibility

• The layer container is aria-hidden="true": the strobe is decorative and is not announced frame by frame.
• If the final resting image is meaningful, pass alt and it is exposed as sr-only text; the centred children stay readable and interactive as usual.
• trigger="inView" fires only once, so scrolling back and forth does not flash again; replays are left to an explicit user action (such as a button calling ref.play()).
• When the user's system has reduce motion turned on, there is no strobe: it plays one slow round with a 1.2-second crossfade per frame, then rests on the last frame as usual.