Isometric Prisms React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import IsometricPrisms from "./IsometricPrisms";

export default function Example() {
  return (
    <IsometricPrisms
      color={"#9cabc9"}
      background={"#141923"}
      gridSize={5}
      speed={5}
      paused={false}
      height={420}
    />
  );
}

Using Isometric Prisms

Use gridSize to choose between a few large blocks and a dense field. Face shading follows color so the shape stays consistent when you change the palette.

The SVG stays inside its reserved height and does not measure or resize its parent. Pass paused or use reduced motion to show the static arrangement.

Props

Name	Type	Required	Default	Description
color	string	No	"#9cabc9"	Base colour used to shade the three prism faces.
background	string	No	"#141923"	Surface behind the prisms.
gridSize	number	No	5	Number of prisms along each grid axis, from 2 to 8.
speed	number	No	5	Duration of each rise or fall in seconds.
children	ReactNode	No	undefined	Optional foreground content.
height	number \| string	No	420	Reserved height of the effect.
paused	boolean	No	false	Pause the decorative animation.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.