NeuralPathways

svganimationbackground

Dual-waist light-stream lens with living fog

Two duotone wings of light filaments whip inward and pinch through a glowing lens, over procedural scene-lit fog. Pure SVG geometry + CSS motion + one WebGL fog pass — zero dependencies, reduced-motion aware.

Playground

Websites that stop the scroll.

Tweak the props in the toolbox — the preview updates in realtime. “Copy code” gives you the exact JSX for the current tweaks.

Installation

Requires the shadcn CLI. Run this from your project root — it writes the component source, then you import and go.

bash

npx shadcn@latest add "https://webcules.com/r/neural-pathways.json"

The command installs the component source (plus its engine / type files when the component ships one). No other dependencies — everything is dependency-free canvas, SVG and CSS.

Usage

Import the component and drop it in — every prop in the toolbox is a regular React prop:

hero.tsx

import { NeuralPathways } from "@webcules/ui/components/ui/neural-pathways";

export function Hero() {
  return (
    <section className="relative h-screen overflow-hidden">
      <NeuralPathways className="absolute inset-0" />
      <div className="relative z-10 flex h-full flex-col items-center justify-center text-white">
        <h1>Websites that stop the scroll.</h1>
      </div>
    </section>
  );
}

Highlights

Dual-waist light-stream lens: duotone filament wings whip inward and pinch through a glowing core
Procedural fog banks (WebGL FBM) lit by the wing colors — SVG turbulence fallback when WebGL is unavailable
Pure SVG geometry + CSS motion: zero runtime dependencies, deterministic rendering
aria-hidden and purely decorative — sit your content on top of it

Example — Aurora recolor

Emerald top wing, violet bottom wing, stronger blend near the lens.

example.tsx

<NeuralPathways
  primary="#34d399"
  secondary="#a78bfa"
  crossTint={0.4}
  cloudTint="#cdb9f5"
/>

Example — Calm continuous lines

Set pulseLines={false} for solid continuous strands — the traveling whip-wave and fog carry the motion instead.

example.tsx

<NeuralPathways pulseLines={false} zoom={0.4} cloudPosition="bottom" />

Props

Prop	Type	Default	Description
primary	string	"#f5b04c"	Stream color of the two top wings.
secondary	string	"#3fb6ff"	Stream color of the two bottom wings.
crossTint	number	0.35	How much the opposite color bleeds into strands near the lens (0–1).
streamCount	number	18	Filament strands per wing.
heroStrands	number	3	Thicker, brighter strands per wing.
thickness	number	1	Stroke width multiplier.
spread	number	0.135	Fan width of the bundle at the corners.
waveAmp	number	0.5	Traveling whip-wave amplitude (0 = straight strands).
waveFreq	number	2.2	Whip-wave frequency along each strand.
zoom	number	1	Warp throttle: light pulses + particle speed. 0 = still.
pulseLines	boolean	true	Bright pulses racing along the strands. false = solid lines.
glow	number	1	Bloom strength.
speed	number	1	Global motion multiplier.
focalX	number	0.5	Lens center X, 0–1 of the canvas.
focalY	number	0.535	Lens center Y, 0–1 of the canvas.
lensGap	number	0.075	Vertical gap between the two waists.
particleDensity	number	1	Sparks streaming into the lens (0–2).
particleSize	number	1	Spark size multiplier.
starDensity	number	1	Background dust field count.
starSize	number	1	Background dust size multiplier.
showClouds	boolean	true	Fog layer on/off.
cloudDensity	number	0.8	Fog density.
cloudSpeed	number	1	Fog drift speed.
cloudPosition	"corners" \| "bottom" \| "top" \| "veil"	"corners"	Where the fog banks sit.
cloudTint	string	"#a8c0dd"	Base fog color (lit gold/blue by the waists).
seed	number	7	Deterministic variation — re-roll the fan.
bgTop	string	"#04060d"	Sky gradient top color.
bgMid	string	"#0a1024"	Sky gradient mid color (at 62% height).
bgBottom	string	"#101a38"	Sky gradient bottom color.

Notes

Under prefers-reduced-motion it renders one settled static frame instead of animating.
Strand geometry is computed once per size (ResizeObserver), all line motion is CSS/SMIL, and the fog is a half-resolution WebGL pass — no per-frame JS on the main thread.
Fog needs WebGL; without it the component falls back to SVG turbulence clouds with the same API.
Pauses on hidden tabs.