Hero Scene 3D

ProNew

A hero background of glossy shapes floating in 3D with pointer parallax, lit by a procedural studio environment in your theme colours.

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/hero-scene-3d

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Content layered above the scene.
`colors`	`string[]`	theme	Shape colours. Defaults to `--primary` and `--chart-2` to `--chart-5`.
`count`	`number`	`9`	Number of floating shapes.
`variant`	`"glass" \| "iridescent" \| "matte"`	`"glass"`	Surface finish.
`speed`	`number`	`1`	Floating and spinning speed multiplier.
`parallax`	`boolean`	`true`	Tilt the scene toward the pointer anywhere on the page.
`clearCenter`	`boolean`	`true`	Keep the middle free of shapes for a headline.
`label`	`string`	`-`	Accessible description. When set the scene is `role="img"`; otherwise it is decorative and `aria-hidden`.
`fallback`	`ReactNode`	gradient	Static frame shown while loading and when WebGL is unavailable.
`sceneClassName`	`string`	`-`	Classes for the canvas layer.
`className`	`string`	`-`	Classes for the outer element.

three.js loads only when the component comes within 200px of the viewport, in its own chunk, so pages that do not show it never download it.
Rendering pauses while it is offscreen or the tab is hidden, and the pixel ratio is capped at 2.
With prefers-reduced-motion: reduce it renders a single still frame.
Without WebGL, or before the scene loads, a static gradient is shown instead.
Colours come from your theme's CSS variables and update when the theme changes.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/hero-scene-3d

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Content layered above the scene.
`colors`	`string[]`	theme	Shape colours. Defaults to `--primary` and `--chart-2` to `--chart-5`.
`count`	`number`	`9`	Number of floating shapes.
`variant`	`"glass" \| "iridescent" \| "matte"`	`"glass"`	Surface finish.
`speed`	`number`	`1`	Floating and spinning speed multiplier.
`parallax`	`boolean`	`true`	Tilt the scene toward the pointer anywhere on the page.
`clearCenter`	`boolean`	`true`	Keep the middle free of shapes for a headline.
`label`	`string`	`-`	Accessible description. When set the scene is `role="img"`; otherwise it is decorative and `aria-hidden`.
`fallback`	`ReactNode`	gradient	Static frame shown while loading and when WebGL is unavailable.
`sceneClassName`	`string`	`-`	Classes for the canvas layer.
`className`	`string`	`-`	Classes for the outer element.

three.js loads only when the component comes within 200px of the viewport, in its own chunk, so pages that do not show it never download it.
Rendering pauses while it is offscreen or the tab is hidden, and the pixel ratio is capped at 2.
With prefers-reduced-motion: reduce it renders a single still frame.
Without WebGL, or before the scene loads, a static gradient is shown instead.
Colours come from your theme's CSS variables and update when the theme changes.