Noise Flow: a loader for upload and download

Noise rings born calm at the center flow out and fade. A React loader for an AI agent uploading or downloading. Install with shadcn.

Installation

Install with the shadcn CLI, or copy the component file. It only needs React.

npx shadcn@latest add https://oxyn.space/r/noise-flow.json

Updates live with the parameters you set.

import { NoiseFlow } from "@/components/noise-flow";

export function Thinking() {
  return (
    <NoiseFlow />
  );
}

Prop	Type	Default	Description
direction	"out"\|"in"	"out"	"out" sends rings from the center to the edge (uploading, sending); "in" brings them from the edge to the center (downloading, receiving).
lines	number	4	Number of concentric rings.
lineSpacing	number	3	Gap between neighboring rings in px. Keep it low so the rings sit close together.
lineWidth	number	1	Stroke width of each ring in px.
amplitude	number	8	Strength of the noise: how far the outer ring is pushed in or out, in px. Inner rings move proportionally less.
frequency	number	0.8	How many bumps run around a ring. Low values give broad, soft swells; high values give tighter ripples.
speed	number	0.35	How fast the noise drifts over time.
duration	number	2.4	Seconds for one ring to travel from the center to the edge (or back, going in).
spread	number	0.12	How differently neighboring rings move. 0 keeps them in lockstep; higher lets each ring wander on its own.
size	number	160	Width and height of the orb in px.
minOpacity	number	0.35	Opacity of the innermost ring. The outer ring is always fully opaque.
color	string	"#e4e4e7"	Line color.
paused	boolean	false	Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed.
label	string	"Thinking"	Accessible name; the wrapper is role="status".
className / style	—	—	Spread onto the wrapper div, along with any other div props.

Noise Flow is one of the animations in Noise Rings. Use the group when the agent's state changes, and it morphs between them.