CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/data-flow

Screenshot with Animated Data Flow

Glowing particles and connection lines stream out from a tilted product screenshot, suggesting live data moving through the UI. Built for analytics, CRM, automation, AI agents and database products.

ReactWebGL3DImageInteractiveFont#three#3d#screenshot#particles#data#flow#lines#analytics#ai#crm#automation

Usage

import DataFlow from '@crazygl/hero-data-flow';

export default function Hero() {
	return (
		<DataFlow
			screenshot="/img/dashboard.avif"
			particleColor="#56e3ff"
			accentColor="#ffb45a"
			flowSpeed={0.7}
		/>
	);
}

Customise

  • Screenshot — screenshot (the centerpiece capture), plus screenAspect, screenScale, screenTilt, screenBrightness, screenshotX/Y to frame it.
  • Flow — particleCount, particleColor, accentColor, flowSpeed, particleSize, emissionRate.
  • Lines — showLines, lineOpacity, lineMaxDistance (how far a particle drifts before its tether fades).
  • Cursor — cursorAttract bends the stream toward the pointer; cursorBurst spawns extra particles near the cursor.
  • Background — bgTop / bgBottom gradient, ambientStars depth layer; contentAlign for the copy.

Best for

  • Analytics, BI, and customer-data (CRM) platforms.
  • AI agent products and real-time / automation tools.
  • Database and infra startups where "live data moving through the product" is the pitch.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-data-flow
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import ScreenshotWithAnimatedDataFlow from '@crazygl/hero-data-flow';

export default function Landing() {
  return (
    <ScreenshotWithAnimatedDataFlow />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import ScreenshotWithAnimatedDataFlow from '@crazygl/hero-data-flow';

export default function Page() {
  return (
    <section>
      <ScreenshotWithAnimatedDataFlow
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Data Rain Product Reveal

Elegant colored data streams fall behind a central product screenshot in four refined tints, with a few drops drifting in front for parallax depth. Cyberpunk but refined.

Notification Storm

Tiny notification, message, alert and success cards stream from deep space toward a tilted product dashboard, curving inward under a magnetic pull and brightening on arrival. Hover anywhere to slow the storm to a crawl.

Data Rain 3D

Characters, digits and small symbols fall through a real 3D perspective volume. Near glyphs are large and bright, far ones shrink and dissolve into depth fog. Move the cursor and the falling stream curves around it, like rain hitting an invisible umbrella.

Dashboard Eclipse

Your dashboard screenshot sits low in the frame, partially hidden behind a glowing eclipse horizon, a vertical beam of light rising from it like the product itself is powering the scene.

Liquid Data Core

A glowing ray-marched glass sphere with refracted, dispersed inner orbits of data points — a living analytics engine that reacts to the cursor.

Screenshot as Hologram Projection

Your screenshot projected from a small device as a translucent holographic panel floating in the air. Wide cyan projection cone, moving scanlines, subtle flicker, drifting dust. Built for AI, dev tools, cybersecurity, and futuristic SaaS.Live customizer

Screenshot with Animated Data Flow

ScreenshotUpload a screenshot of your product. PNG / JPG / AVIF / WebP. Default is a sample dashboard.Particle count600Total active particles in the field. 600 is the visually-balanced default; below 250 reads as sparse; above 900 starts to fog the screenshot.Particle colorAccent colorWarm accent particles, ~20% mix into the cyan field.Flow speed0.7Outward velocity multiplier. 0.7 is calm; 1.2+ feels frantic.Particle size0.04worldPoint sprite size in world units. 0.04 is a clean spark; 0.07 looks like fireflies.Emission rate1/s/anchorHow many particles each anchor point emits per second. Multiplied across ~14 anchors.Show connection linesLine opacity0.35Line max distance1.5worldLength at which a particle's line to its origin fully fades. 1.5 reads as a tight halo around the screenshot.Cursor attract0.5How strongly particles bend toward the pointer.Cursor burstSpawn extra particles near the cursor-nearest anchor.Screen aspect1.6Width / height ratio of the screenshot plane. 16:10 ≈ 1.6.Screen size1.5Size of the screenshot.Screen tilt10°Tilt of the screenshot toward the camera. Positive = top tilts back, negative = top tilts forward.Screen brightness0.25Emissive boost on the screen so it reads as 'lit'.Screenshot X offset0worldHorizontal offset of the screenshot plane.Screenshot Y offset0worldVertical offset of the screenshot plane.Background topBackground bottomAmbient starsA static, distant star field for depth.Heading fontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.