Digit Stream

Backgrounds 127

About

A generative digit stream: hundreds of numbers flow along a winding snake path on black as you scroll, then dim and scatter when you stop — easing back onto the path when you scroll again. A dark, self-contained, tunable hero or section background.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Digit Stream to your project and fits it to your theme.

Code

How Digit Stream is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import DigitStream from "@/components/ui/digit-stream";

const settings = {
  particleCount: 750,
  speed: 0.4,
  flowStrength: 0.5,
  disperseStrength: 1,
  idleDim: 0.6,
  snakeAmplitude: 0.5,
  color: '#ebeeff',
  background: '#000000',
  colorfulSparks: true,
};

// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return <DigitStream {...s} />;
}