Home▸Perception & Optical Illusions▸Shadow Puppet Theater (2D)

Shadow Puppet Theater (2D)

Interactive 2D shadow-puppet theater: move a point or extended light source and a cutout puppet between a lamp and a translucent screen to see similar-triangles shadow magnification and umbra/penumbra soft edges.

Perception & Optical Illusions2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-3d-shadow-puppet-theater ↗ Open standalone

This 2D simulator sets up a classic shadow-puppet stage from the side: a lamp on the left, a cutout puppet in the middle, and a translucent screen on the right. Drag the sliders to change how far the light sits from the screen and how far the puppet sits from the light, and watch the projected silhouette grow or shrink exactly as similar-triangles optics predicts — shadow size equals puppet size times the light-to-screen distance divided by the light-to-puppet distance. Switch the lamp from a point source to an extended one and widen its size to see the sharp edge soften into a graded penumbra band around a dark umbra core, with live readouts for magnification, umbra width and penumbra width updating as you adjust every control.

⚙ Under the hood

A side-view 2D shadow-puppet stage where moving the lamp, puppet and screen distances shows similar-triangles shadow magnification and, with an extended light source, the umbra and penumbra soft-edge effect.

Shadow PuppetsOpticsUmbra and Penumbra

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)