Hero made by @ybouane.

@crazygl/hero-infrastructure-stack-tower

A 3D tower of translucent labelled slabs — CDN, Edge, API, Services, Database, Storage — that assemble tier-by-tier from the ground up, each slab settling with a soft physics-ish bounce. Thin glowing seams, real PhysicalMaterial transmission, PMREM HDRI lighting, pointer parallax. For high-end cloud / platform / infra-as-code landing pages.

Demo

Infrastructure Stack Tower

Install

npm install @crazygl/hero-infrastructure-stack-tower

Usage

import InfrastructureStackTower from '@crazygl/hero-infrastructure-stack-tower';

export default function Page() {
  return (
    <InfrastructureStackTower
      heading="Your stack, end-to-end."
      tierCount={6}
      slabMaterial="solid"
      accentColor="#7aa9ff"
    />
  );
}

Customise

• Tiers — tierCount (3–8) and tier1Label…tier8Label, applied top-to-bottom (Tier 1 is the top, Tier N the foundation).
• Material — slabMaterial (solid / glass / frosted / metal), useAccentColor + accentColor or per-tier colours, seamColor/seamStrength, labelColor.
• Tower — slabWidth/Depth/Thickness/Gap/Bevel, towerOffsetX/Y.
• Assembly — autoLoop, assemblySpeed, assemblyStagger, loopInterval, bounceStrength (0 = solid thunk).
• Motion & lighting — parallaxStrength, ambientFloat, keyColor, fillColor, envIntensity.
• Layout / background / CTA — contentAlign, padding, bgTop/bgBottom, showCTA + ctaLabel/onCTAClick.

Best for

• Cloud platform and infrastructure-as-code landing pages
• Developer tools that span layers, from CDN edge down to storage
• Technical SaaS, data-platform, and security-stack marketing sites

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.