Danmaku
danmakuOverlays lane-allocated scrolling, top, or bottom audience comments on media.
Usage
Basic usage
The barrage layer superimposed on the video (absolute inset-0). items is controlled and can only be added but not modified. New items are automatically entered and tracked to prevent overlapping and drifting.
<div className="relative aspect-video">
<video ... />
<Danmaku
items={[
{ id: "x1", text: "Barrage passing~" },
{ id: "x2", text: "The anchor is so cool!", color: "var(--color-chart-1)", bold: true },
]}
tracks={4}
speed={100}
/>
</div>Top stay barrage
The barrage of mode='top' stays at the top for a period of time (non-scrolling), suitable for announcements/sticking.
<Danmaku
items={[
{ id: "y0", text: "The draw will be held at 8 o'clock tonight, pay attention to not get lost", mode: "top", bold: true },
{ id: "y1", text: "Front row watching" },
]}
tracks={4}
/>High Density · Fast
density='high' is forced to squeeze even if there is no free track (no barrages are lost); speed speeds up, tracks adds tracks.
<Danmaku items={items} density="high" speed={160} tracks={6} />When to use
Use Danmaku over a livestream or video, commonly in LivePlayer's overlay. Use LiveChat for a scrolling public message list.
Import
import { Danmaku, allocateTrack, densityGap, estimateWidth, leastBusyTrack, scrollDuration, trackFreeTime } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items* | DanmakuItem[] | — | Controlled append-only stream; unseen ids enter once. |
| tracks | number | 4 | Scrolling tracks. |
| speed | number | 100 | Speed in pixels per second. |
| density | "low" | "normal" | "high" | "normal" | Safety gap and overflow pressure. |
| area | number | 1 | Used height ratio from 0 to 1. |
| opacity | number | 1 | Overall opacity. |
| paused | boolean | false | Pauses all animations. |
| className | string | — | Container class. |
DanmakuItem is { id: string; text: ReactNode; mode?: "scroll"\|"top"\|"bottom"; color?: string; size?: "sm"\|"md"\|"lg"; bold?: boolean }; mode defaults to scroll, size to md, and color to foreground.
Usage notes
- Editing an existing id does not replay it; assign a new id.
- Trim long-running streams to bound memory.
- The parent needs relative positioning and hidden overflow. Danmaku fills it with pointer events disabled.
- Width estimation for non-string content uses the runtime fallback
"\u5f39\u5e55\u5f39\u5e55\u5f39\u5e55"(three repetitions of "bullet comment") as a medium-width sample; it is not rendered to users.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<div className="relative aspect-video">
<video ... />
<Danmaku items={items} tracks={4} speed={100} density="normal" />
</div>