Lumo Shape Orchestra

Up to 24 3D shapes (cubes, spheres, rings, pyramids, prisms and capsules) float on a pinned stage and rearrange into spirals, tunnels, waves, rings and grids as the page scrolls. Pure CSS, no 3D library.

What you can change

• Shapes — Up to 24 from Cube, Sphere, Ring, Pyramid, Prism, Capsule (default all six)

• Count — How many instances are placed (12)

• Compositions — Up to 8 from Spiral, Tunnel, Wave, Ring, Grid (default all five)

• Size — Side of a shape, in px (120)

• Radius — Size of the spiral, tunnel, ring and grid, in px (320)

• Color / Background — Shape and stage colours

• Finish — Metallic or Flat

• Tilt — How far the pointer tilts the scene, in degrees (10)

• Scroll per step — Viewport heights each composition gets (100vh)

• Smooth — Spring or Direct

Good to know

• Every option lives in the properties panel; no code needed.

• Respects reduced motion: visitors who ask for less motion get a calm static version.

• Responsive: no horizontal scroll at phone, tablet or desktop widths.

• Installs from one link; its shared Hero Kit helpers come with it.

• Licence: Framer's single-use commercial licence (one project).