UploadDataStream

A Matrix/Warp-inspired data stream visualizer with falling characters that accelerate during upload.

Columns of hex characters rain down like the Matrix. While idle, streams are slow and dim. During upload, they accelerate and brighten proportional to progress. A center overlay shows filename, percentage, and real-time throughput (2.3 MB/s).

Design inspiration: The Matrix, Warp terminal, htop.

The rain animation uses CSS @keyframes — no Motion dependency required. Streams dim automatically when prefers-reduced-motion is set.

>
#
#
A
{
4
8
3
2
1
@
=
$
*
/
:
=
/
.
6
6
@
%
|
2
;
B
+
2
%
7
-
8
5
}
6
A
+
}
2
:
E
,
9
^
F
<
D
1
2
+
|
|
D
C
%
9
F
+
?
[
0
[
,
D
[
~
4
6
E
~
<
{
*
/
F
8
7
E
:
%
2
F
8
:
E
5
@
7
=
8
<
2
[
&
,
>
{
\
<
*
+
{
D
>
A
}
\
!
*
9
&
>
C
8
7
F
]
,
.
A
F
\
>
8
^
:
#
C
=
\
-
]
D
]
<
%
&
[
%
E
]
$
{
{
.
1
B
;
7
;
$
$
3
>
4
=
.
,
2
4
*
:
E
7
9
#
[
-
\
%
D
E
-
7
E
0
6
,
>
@
<
D
=
&
D
E
|
8
<
:
>
=
!
3
=
@
-
D
&
8
\
]
|
:
|
9
3
+
/
%
C
}
#
;
&
C
]
\
8
-
?
:
{
$
E
|
F
5
3
5
*
-
!
\
C
~
1
;
,
{
B
/
9
\
/
,
$
$
=
,
0
&
D
>
,
+
5
A
;
-
.
@
#
9
@
9
=
7
1
|
&
*
2
.
/
%
.
A
|
B
B
]
1
}
5
5
F
F
@
9
?
7
~
=
@
2
-
:
;
[
:
8
.
/
?
F
~
-
|
9
<
+
{
D
%
$
6
3
B
2
;
-
@
]
@
0
3
-
!
~
\
1
A
%
,
\
~
9
,
!
C
D
\
&
0
*
&
A
E
5
2
-
0
|
^
@
8
{
.
9
4
^
^
#
F
C
E
F
6
~
6
~
6
;
2
0
1
1
?
{
@
$
!
*
}
*
,
<
8
<
}
{
B
$
A
\
}
+
{
:
^
{
4
=
%
4
>
*
$
=
&
4
?
B
B
,
7
B
-
F
5
?
F
,
D
>
E
B
]
/
}
2
[
8
#
{
]
%
A
$
&
=
^
2
}
3
E
6
E
!
*
C
6
@
6
&
5
?
/
D
E
}
#
@
!
]
}
E
$
%
0
.
]
=
/
}
,
|
;
=
D
@
]
:
@
>
.
9
E
:
?
,
?
@
9
~
8
0
[
E
;
|
/
$
-
;
-
&
^
5
D
;
8
>
4
1
:
+
0
4
2
#
3
*
A
\
&
D
B
=
.
[
B
~
}
/
{
.
,
~
~
4
-
4
A
:
8
,
-
;
F
C
?
A
&
E
<
5
&
A
D
E
%
A
3
A
?
7
^
.
&
|
-
%
+
^
:
.
:
?
~
@
[
+
@
0
8
]
;
E
/
9
~
|
&
/
1
E
$
E
@
A
{
^
\
.
,
\
0
F
4
&
!
,
~
7
9
?
&
-
C
$
7
+
E
D
B
,
=
~
\
>
6
7
=
$
-
!
2
<
/
{
*
>
D
<
9
!
4
5
F
{
<
[
$
4
4
!
>
8
?
^
$
!
7
|
*
/
;
*
~
{
8
|
<
~
}
E
^
9
.
:
&
]
&
~
\
<
^
@
]
@
4
0
\
%
$
E
7
%
}
4
@
E
?
~
4
]
7
3
^
|
D
{
=
|
0
:
0
1
,
/
!
-
6
8
8
-
%
E
F
/
1
F
[
;
F
?
&
-
~
!
}
$
]
>
^
+
>
-
>
?
:
|
|
*
$
%
}
/
,
\
D
0
@
#
&
+
8
E
#
-
.
4
0
B
%
~
<
6
{
1
D
6
$
!
9
4
&
>
7
.
4
6
%
^
%
]
}
↑
// DROP FILES
or click to browse

Matrix · Warp — data stream

Basic usage

import { UploadDataStream } from '@uploadkitdev/react';

export default function Page() {
  return (
    <UploadDataStream
      route="fileUploader"
      columns={24}
      onUploadComplete={(results) => {
        console.log('Stream complete:', results.length);
      }}
    />
  );
}

Props

Prop	Type	Default	Description
`route`	`string`	—	Required. Route name from your file router.
`accept`	`string[]`	—	Accepted MIME types.
`maxSize`	`number`	—	Maximum file size in bytes.
`maxFiles`	`number`	—	Maximum number of files.
`metadata`	`Record<string, unknown>`	—	Metadata forwarded to the server.
`columns`	`number`	`20`	Number of character stream columns.
`onUploadComplete`	`(results: UploadResult[]) => void`	—	Called after all files upload.
`onUploadError`	`(error: Error) => void`	—	Called on failure.
`className`	`string`	—	Additional CSS class(es).

Theming

Variable	Default	Purpose
`--uk-stream-color`	`#00ff41`	Character and accent color
`--uk-stream-bg`	`#0a0a0a`	Background

Throughput display

Real-time upload speed is calculated from a 2-second sliding window of byte samples and displayed as ↑ 2.3 MB/s.

Accessibility

Container accepts drag-drop and click
aria-live region for status announcements
Respects prefers-reduced-motion — streams stop animating