Made with by Fabio

Grid & layout

cellSize 230px

objectSize

size 95px

min 60px

max 140px

shadowDistance

distance 150px

arrangement

jitter 0.40

rowOffset 0.00

rotation (x / y / z)

x (pitch)

degrees 0°

y (yaw)

degrees 0°

z (roll)

degrees 0°

order

model mix (weight)

pineapple

apple

banana

overscan 0.15

maxInstances

cap

seed

Appearance

colors

color

backgroundColor

transparent

hardness 0.00

shadows

maxPixelRatio 2

adaptivePixelRatio

Light

type

cursorHeight 700px

movement

style

shadow quality 2048px

intensity 1.0

autoSweepOnTouch

sweepSpeed 1.0

ambient 0.45

easing 4.0

color

hardness 0.50

Generated config, paste into your project

Config JSON: edit or paste from another view, then Save to apply

Press P for a frame-time overlay

threejs-shadow-grid

A configurable, infinitely-tiling grid of 3D objects for site backgrounds - this whole page's background is it, running live. Move your mouse around and watch the shadows follow.

Weighted STL model mix
Weighted color palettes
Grid or randomized layout
Sun or cursor-follow light
Full-page or contained box
Independent size & rotation
Soft → hard shadow presets
Live config code export
Row offset for brick/masonry layouts
Auto-fills any container size
Framework-agnostic, no React/Vue needed

There's a second, contained-box recipe below

This is the same grid, as a "contained box" recipe instead: it fills just this box and stays fixed in place while the page scrolls around it, independent of the full-page background and its playground above.