Video Summagator
A clip turned into a solid you can orbit. The video is sampled into 96, 160 or 240 evenly spaced frames and stacked along Z as one Data3DTexture, so width and height stay the picture while depth becomes running time. A GLSL3 ray-marcher reads that cube under an orthographic camera: parallel rays, so the origin is projected back onto the camera plane rather than taken from the camera position. The selected frame splits the volume in two, everything after it opaque and everything before it accumulating over 160 steps, which is why scrubbing slides a solid surface through a smear instead of dissolving it. That surface gets a 1px outline measured in CSS pixels from four projected corners, so it holds its weight at any zoom. Viewers can drop in their own mp4 and it never leaves the browser: frames are seeked, drawn to a canvas and read back on-device. It ships no control panel of its own: every live value is a prop and every one-shot action is a method on the ref, so the controls live wherever the host puts them.
npx shadcn@latest add @compronents/video-summagatorInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | the hosted sample clip | Clip loaded on mount. It is drawn to a canvas and read back, so it must be same-origin or CORS-readable; a cross-origin clip without CORS headers taints the canvas and the import fails. |
| sampleLabel | string | "Flowers · CC0 sample" | Name shown for the built-in clip in the panel readout. |
| eyebrow | string | "SPACE / TIME STUDY" | Small tracked line above the title. |
| title | string | "Video Summagator" | Heading in the top-left corner. |
| tagline | string | "A moving image, unfolded into time." | Line under the heading. Hidden at compact widths. |
| quality | 96 | 160 | 240 | 160 | Frames sampled out of the clip. Changing it re-decodes, which is one serial seek per frame. |
| playing | boolean | false | Runs the playhead. The component reports it back through onPlayingChange when a keyboard scrub or a new clip stops playback. |
| speed | number | 1 | Playback rate while playing. |
| depth | number | 3 | Depth of the volume in world units: how far time is stretched along Z. |
| density | number | 0.1 | Extinction of the transparent region before the selected frame. Low values smear, high values read as a slab. |
| brightness | number | 1 | Multiplier applied after the sRGB decode in the shader. |
| showFrame | boolean | true | Draws the 1px outline around the selected frame. |
| autoRotate | boolean | false | Orbits the camera at 0.6 rad/s. |
| onTimeChange | (time: number, duration: number) => void | — | Fires at most every 100ms while the playhead moves, so a host scrubber can follow playback without re-rendering per frame. |
| onReady | (info: VolumeInfo) => void | — | Fires when a clip finishes decoding, with the sample count, frame size and byte total. |
| onMessage | (message: string | null) => void | — | Decode failures, cancellations and WebGL trouble. Null clears the current message. |
| onPlayingChange | (playing: boolean) => void | — | Fires when playback should stop, e.g. after a keyboard scrub or a new clip load. |
| onBusyChange | (busy: boolean) => void | — | True while a clip is decoding. |
| ref | Ref<VideoSummagatorHandle> | — | One-shot actions: seek(seconds), stepFrame(1 | -1), resetCamera() and frontView(). |
| className | string | — | Extra class on the root element. |
titletextHeading in the top-left corner.
taglinetextLine under the heading.
srcasset-urlClip sampled into the volume on load.
three