Parallax Frames 3D

ProNew

Four nested frames at different depths that shift against each other as the pointer moves.

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/parallax-frames-3d

Prop	Type	Default	Description
`colors`	`[string, string, string]`	`["var(--chart-1)", "var(--chart-2)", "var(--chart-3)"]`	Three CSS colors the scene is drawn with. Any CSS colors or var().
`duration`	`number`	`8`	Seconds for one cycle. Higher is calmer.
`children`	`React.ReactNode`	—	Content shown on top of the scene.

Also accepts all <div> props.

Plain CSS and React: no animation library, no WebGL, no extra dependencies.
Colours default to your theme's --chart-1, --chart-2 and --chart-3, so it follows light, dark and any theme. Pass colors to override.
Decorative: the scene is aria-hidden. Animations stop under prefers-reduced-motion.
Each instance injects one small scoped <style> tag, so it works in server and client components alike.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/parallax-frames-3d

Prop	Type	Default	Description
`colors`	`[string, string, string]`	`["var(--chart-1)", "var(--chart-2)", "var(--chart-3)"]`	Three CSS colors the scene is drawn with. Any CSS colors or var().
`duration`	`number`	`8`	Seconds for one cycle. Higher is calmer.
`children`	`React.ReactNode`	—	Content shown on top of the scene.

Also accepts all <div> props.

Plain CSS and React: no animation library, no WebGL, no extra dependencies.
Colours default to your theme's --chart-1, --chart-2 and --chart-3, so it follows light, dark and any theme. Pass colors to override.
Decorative: the scene is aria-hidden. Animations stop under prefers-reduced-motion.
Each instance injects one small scoped <style> tag, so it works in server and client components alike.