Marquee

Stable

An infinitely scrolling kinetic component built for real-time telemetry tickers, partner showcases, and cyberpunk status streams.

Installation

$pnpm add @siberui/react

Import

tsx
import { Marquee } from '@siberui/react';

Neon Cyberpunk Marquee

The variant="neon" preset adds glowing cyan border boundaries, a subtle atmospheric back-glow, and an electric cyber aesthetic.

[0x9A]NEURAL SYNC:100% OPTIMAL///
[0x4F]QUANTUM HANDSHAKE:LOCKED///
[0xC2]NODE LATENCY:0.38 MS///
[0x71]FIREWALL MATRIX:ACTIVE DEFENSE///
[0x1B]CORE OVERCLOCK:4.82 GHZ///
[0x88]ENCRYPTED UPLINK:STABLE///
tsx
<Marquee variant="neon" speed="normal" pauseOnHover fade className="py-3">
  {telemetryFeeds.map((feed, i) => (
    <div key={i} className="flex items-center gap-2.5 px-4 font-mono text-xs">
      <span className="text-cyan-400/60">[{feed.code}]</span>
      <feed.icon className="h-3.5 w-3.5 text-cyan-400" />
      <span className="text-slate-300 font-semibold tracking-wider">{feed.label}:</span>
      <span className="text-cyan-300">{feed.value}</span>
      <span className="text-cyan-500/40 ml-2">///</span>
    </div>
  ))}
</Marquee>

Glass Variant

Using variant="glass" creates a frosted translucent backdrop blur that floats seamlessly across complex geometric textures.

NEURAL SYNC
100% OPTIMAL
QUANTUM HANDSHAKE
LOCKED
NODE LATENCY
0.38 MS
FIREWALL MATRIX
ACTIVE DEFENSE
CORE OVERCLOCK
4.82 GHZ
ENCRYPTED UPLINK
STABLE
tsx
<div className="relative p-8 rounded-2xl border border-white/10 bg-[#060913] bg-[url('/textures/circuit-board.svg')] bg-repeat">
  <Marquee variant="glass" speed="normal" pauseOnHover fade className="py-3">
    {/* Floating glass telemetry items */}
  </Marquee>
</div>

Edge Fading Gradient Mask

By setting fade={true}, a smooth alpha-gradient mask is automatically applied to both scroll boundaries, preventing hard clipping.

fade=true (Smooth Edge Fade)
QUANTUM
NEURAL
SECURITY
ENCRYPTION
DEFENSE
MAINFRAME
OVERRIDE
fade=false (Hard Edge Boundaries)
QUANTUM
NEURAL
SECURITY
ENCRYPTION
DEFENSE
MAINFRAME
OVERRIDE
tsx
<div className="space-y-4">
  {/* With edge fading enabled (recommended) */}
  <Marquee fade variant="bordered" speed="fast">
    {words.map((w, i) => <Badge key={i} variant="neon">{w}</Badge>)}
  </Marquee>

  {/* Without edge fading */}
  <Marquee fade={false} variant="bordered" speed="fast">
    {words.map((w, i) => <Badge key={i} variant="outline">{w}</Badge>)}
  </Marquee>
</div>

Speeds & Reverse Flow

Control the kinetic pacing via speed="slow" | "normal" | "fast" and set reverse={true} to invert the scroll trajectory.

QUANTUM_CORE_A
QUANTUM_CORE_B
QUANTUM_CORE_C
QUANTUM_CORE_D
UPLINK_EAST
UPLINK_WEST
UPLINK_NORTH
UPLINK_SOUTH
tsx
<div className="space-y-3">
  {/* Forward Stream (Leftwards) */}
  <Marquee speed="fast" fade>
    {['SYS_01', 'SYS_02', 'SYS_03', 'SYS_04'].map((s) => <span key={s}>{s}</span>)}
  </Marquee>

  {/* Inverted Stream (Rightwards) */}
  <Marquee speed="fast" reverse fade>
    {['NET_01', 'NET_02', 'NET_03', 'NET_04'].map((s) => <span key={s}>{s}</span>)}
  </Marquee>
</div>

Vertical Telemetry Feed

By setting direction="up" or direction="down", Marquee transforms into a vertical matrix log stream.

LIVE_KERNEL_LOGS
STREAMING
NEURAL SYNC
100% OPTIMAL
QUANTUM HANDSHAKE
LOCKED
NODE LATENCY
0.38 MS
FIREWALL MATRIX
ACTIVE DEFENSE
CORE OVERCLOCK
4.82 GHZ
ENCRYPTED UPLINK
STABLE
tsx
<div className="h-56 w-72 rounded-xl border border-cyan-500/30 bg-[#050811] overflow-hidden">
  <Marquee direction="up" speed="fast" pauseOnHover fade className="h-full py-2">
    {telemetryFeeds.map((feed, i) => (
      <div key={i} className="font-mono text-xs text-cyan-300 p-2 bg-cyan-950/30 border border-cyan-500/20 rounded">
        {feed.label} -> {feed.value}
      </div>
    ))}
  </Marquee>
</div>

Interactive Node Cards Marquee

Marquee seamlessly accepts complex interactive components, cards, and telemetry blocks. Hovering pauses the kinetic animation for user inspection.

NODE-ALPHA
Online
Region:EU-WEST-1
Load / Latency:18% / 4ms
NODE-BETA
Online
Region:US-EAST-2
Load / Latency:42% / 12ms
NODE-GAMMA
Optimizing
Region:AP-SOUTH-1
Load / Latency:74% / 28ms
NODE-DELTA
Online
Region:SA-EAST-1
Load / Latency:12% / 6ms
NODE-EPSILON
Rerouting
Region:EU-CENTRAL-1
Load / Latency:89% / 34ms
tsx
<Marquee speed="normal" pauseOnHover fade className="py-4">
  {nodeCards.map((node) => (
    <Card key={node.id} className="w-64 shrink-0 hover:border-cyan-500/50 transition-colors">
      <CardContent className="p-4 space-y-2">
        <Row justify="between">
          <span className="font-mono text-xs text-cyan-400 font-bold">{node.id}</span>
          <Badge variant="neon">{node.status}</Badge>
        </Row>
        <div className="text-xs text-slate-400">Region: {node.region}</div>
        <div className="text-xs text-slate-400">Load: {node.load} | Ping: {node.ping}</div>
      </CardContent>
    </Card>
  ))}
</Marquee>

API Reference

PROPERTIES (7)← swipe to inspect →
PropertyDescriptionTypeDefault
variant
Visual preset theme styling.
"default" | "neon" | "glass" | "bordered"
"default"
direction
Kinetic scrolling axis and direction.
"left" | "right" | "up" | "down"
"left"
speed
Animation duration preset (slow: 60s, normal: 30s, fast: 15s).
"slow" | "normal" | "fast"
"normal"
pauseOnHover
Pauses kinetic motion when the user hovers over any child item.
boolean
false
fade
Applies automated alpha gradient mask at the start and end edges.
boolean
false
reverse
Inverts the default movement vector of the chosen direction.
boolean
false
repeat
Number of duplicated child sets to ensure continuous loop without gaps.
number
2

Accessibility

  • Respects prefers-reduced-motion: Continuous animation automatically pauses or halts for sensitive users.
  • Duplicate sets render with aria-hidden="true" to prevent screen readers from reading duplicated text multiple times.
  • Always enable pauseOnHover when scrolling through clickable links or rich interactive cards.

Best Practices

  • Edge Fading: Enable fade={true} in hero sections to blend tickers seamlessly into the background.
  • Speed Selection: Use speed="slow" for text-heavy content or telemetry that users need to read, and speed="fast" for ambient badges or decorative ticker strips.