Growth Chart 3D

ProNew

A 3D bar chart whose glossy bars rise in turn over a floor grid, with a coin floating above the tallest bar. Made for founder and finance pages.

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/growth-chart-3d

Prop	Type	Default	Description
`bars`	`number`	`7`	Number of bars (4 to 12).
`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/growth-chart-3d

Prop	Type	Default	Description
`bars`	`number`	`7`	Number of bars (4 to 12).
`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.