Neural Graph 3D

ProNew

A layered neural network in 3D: glowing nodes, faint connections and pulses travelling between layers. Made for AI and ML products.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/neural-graph-3d

Prop	Type	Default	Description
`layers`	`number`	`4`	Layers of nodes (3 to 6).
`nodes`	`number`	`7`	Nodes in the middle layers (4 to 10).
`colors`	`string[]`	—	Colours, used in turn. Defaults to the theme's `--chart-*` colours.
`speed`	`number`	`1`	Animation speed multiplier.
`glow`	`boolean`	`true`	Additive glow on the bright points.
`interactive`	`boolean`	`true`	Tilt toward the pointer.
`label`	`string`	—	Accessible description. Omit for a decorative scene (`aria-hidden`).
`fallback`	`React.ReactNode`	—	Static frame shown while loading and without WebGL.

Also accepts all <div> props.

Needs three and @react-three/fiber, which the install command adds for you. It also installs the small stage-3d helper it renders through.
Loads the WebGL scene only when it scrolls near the viewport, shows a static frame without WebGL, and stops animating for people who prefer reduced motion.
Decorative by default (aria-hidden). Pass label to describe it.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/neural-graph-3d

Prop	Type	Default	Description
`layers`	`number`	`4`	Layers of nodes (3 to 6).
`nodes`	`number`	`7`	Nodes in the middle layers (4 to 10).
`colors`	`string[]`	—	Colours, used in turn. Defaults to the theme's `--chart-*` colours.
`speed`	`number`	`1`	Animation speed multiplier.
`glow`	`boolean`	`true`	Additive glow on the bright points.
`interactive`	`boolean`	`true`	Tilt toward the pointer.
`label`	`string`	—	Accessible description. Omit for a decorative scene (`aria-hidden`).
`fallback`	`React.ReactNode`	—	Static frame shown while loading and without WebGL.

Also accepts all <div> props.

Needs three and @react-three/fiber, which the install command adds for you. It also installs the small stage-3d helper it renders through.
Loads the WebGL scene only when it scrolls near the viewport, shows a static frame without WebGL, and stops animating for people who prefer reduced motion.
Decorative by default (aria-hidden). Pass label to describe it.