Timeline

Stable

Chronological event vertical rail featuring illuminated neon connecting laser spines, active radar pulsing node indicators, and integrated mission / technology tags.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Timeline, 
  TimelineItem, 
  TimelineHeader, 
  TimelineTitle, 
  TimelineSubtitle, 
  TimelinePeriod, 
  TimelineContent,
  TimelineTags 
} from '@siberui/react';

Chronological Timeline with Laser Spine

Connects sequential milestones through an illuminated laser data spine and animated radar ping indicators for active nodes.

Principal Sentinel Architect

2024 - PRESENT

ORBITAL DEFENSE COMMAND

Architecting zero-trust distributed mesh networks and automated intrusion countermeasures across 12 planetary satellite clusters.

RUSTEBPFZERO-TRUSTPOST-QUANTUM

Lead Cyber Warfare Analyst

2021 - 2024

NEO MATRIX LABS

Conducted automated red-team simulations and validated Post-Quantum lattice cryptography protocols.

C++REVERSE-ENGCRYPTO

tsx

<Timeline variant="neon">
  <TimelineItem status="active" icon={<Terminal className="h-3 w-3" />}>
    <TimelineHeader>
      <TimelineTitle>Principal Sentinel Architect</TimelineTitle>
      <TimelinePeriod>2024 - PRESENT</TimelinePeriod>
    </TimelineHeader>
    <TimelineSubtitle>ORBITAL DEFENSE COMMAND</TimelineSubtitle>
    <TimelineContent>
      Architecting zero-trust distributed mesh networks and automated intrusion countermeasures across 12 planetary satellite clusters.
    </TimelineContent>
    <TimelineTags tags={['RUST', 'EBPF', 'ZERO-TRUST', 'POST-QUANTUM']} />
  </TimelineItem>

  <TimelineItem status="completed" icon={<Shield className="h-3 w-3" />}>
    <TimelineHeader>
      <TimelineTitle>Lead Cyber Warfare Analyst</TimelineTitle>
      <TimelinePeriod>2021 - 2024</TimelinePeriod>
    </TimelineHeader>
    <TimelineSubtitle>NEO MATRIX LABS</TimelineSubtitle>
    <TimelineContent>
      Conducted automated red-team simulations and validated Post-Quantum lattice cryptography protocols.
    </TimelineContent>
    <TimelineTags tags={['C++', 'REVERSE-ENG', 'CRYPTO']} />
  </TimelineItem>
</Timeline>

Connecting Laser Spine Variants

STAGE 01: LATTICE COMPILATION

COMPLETED

Binary hashes generated and verified against HSM master root.

STAGE 02: ORBITAL BROADCAST

IN PROGRESS

Streaming firmware payload to orbital fleet transponders.

tsx

<Timeline variant="emerald">
  <TimelineItem status="completed" icon={<CheckCircle2 className="h-3 w-3" />}>
    <TimelineHeader>
      <TimelineTitle>STAGE 01: LATTICE COMPILATION</TimelineTitle>
      <TimelinePeriod>COMPLETED</TimelinePeriod>
    </TimelineHeader>
    <TimelineContent>Binary hashes generated and verified against HSM master root.</TimelineContent>
  </TimelineItem>

  <TimelineItem status="active" icon={<Zap className="h-3 w-3" />}>
    <TimelineHeader>
      <TimelineTitle>STAGE 02: ORBITAL BROADCAST</TimelineTitle>
      <TimelinePeriod>IN PROGRESS</TimelinePeriod>
    </TimelineHeader>
    <TimelineContent>Streaming firmware payload to orbital fleet transponders.</TimelineContent>
  </TimelineItem>
</Timeline>

Tactical Node Statuses (Active Ping, Completed, Future)

The status prop controls node ring glow: active (animated radar ping), completed, future, or archived.

ACTIVE EXPLOIT ANALYSIS

Realtime sandbox instrumentation running.

FIREWALL ISOLATION

Perimeter quarantine completed.

tsx

<Timeline variant="cyan">
  <TimelineItem status="active" icon={<Activity className="h-3 w-3" />}>
    <TimelineHeader><TimelineTitle>ACTIVE EXPLOIT ANALYSIS</TimelineTitle></TimelineHeader>
    <TimelineContent>Realtime sandbox instrumentation running.</TimelineContent>
  </TimelineItem>
  <TimelineItem status="completed">
    <TimelineHeader><TimelineTitle>FIREWALL ISOLATION</TimelineTitle></TimelineHeader>
    <TimelineContent>Perimeter quarantine completed.</TimelineContent>
  </TimelineItem>
</Timeline>

API Reference

Timeline Props

PROPERTIES (1)← swipe to inspect →

Property	Description	Type	Default
variant	Vertical connecting laser spine gradient color.	"neon" \| "cyan" \| "violet" \| "emerald" \| "amber" \| "rose" \| "mono"	"neon"

TimelineItem Props

PROPERTIES (2)← swipe to inspect →

Property	Description	Type	Default
status	Node activation state.	"active" \| "completed" \| "archived" \| "future"	"completed"
icon	Icon glyph rendered inside the node ring.	React.ReactNode	-

Accessibility

Chronological Hierarchy: Events render in strict DOM sequence for sequential screen reader traversal.