CastShadowScene

Options

paper #fbfaf4

css colour

The paper the forms stand on. Match it to your page background or the panel reads as a pasted-in rectangle.

stone #f5f2e9

css colour

The forms. Slightly lighter than the paper is what makes them read as objects standing on it rather than holes cut in it.

accent #c44400

css colour

One form carries colour. This is the obvious place to put your own brand colour.

elevation 30

8 to 80 deg, good: 22 to 45

How high the sun sits. Low is long dramatic shadows; above about 60 the shadows disappear under the objects and the whole thing goes flat.

softness 0.68

0 to 1, good: 0.35 to 0.75

Shadow edge softness. Zero is a hard midday edge, one is heavy overcast.

shadow 0.3

0 to 1, good: 0.18 to 0.45

How dark the shadows fall on the paper. The paper is never lit. It stays exactly the colour you set, so the shadow is the only thing drawn on it.

zoom 0.66

0.3 to 1.6, good: 0.6 to 1

How much of the frame the group fills.

tilt 0.52

0 to 1, good: 0.2 to 0.55

Camera height. Zero is eye level with the paper, one looks straight down. Around 0.35 is a table seen from a chair.

period 5

2 to 120 s, good: 5 to 30

Seconds for one full circuit of the sun. The default is 5 so the preview video is a whole cycle. Use 20 to 30 for something you leave running behind a page.

reducedMotionTime 1.1

0 to 120 s

The single frame shown when the user prefers reduced motion. Pick a sun angle that composes. For those users the still is the whole effect.

What it needs

Dependencies

three@>=0.160.0

Browser

WEBGL1

Frame budget

~5.5 ms · 1 context

Pinned to

v0.6.2

• three.js must already be a dependency of the project. It is not bundled
• A 2048² shadow map is allocated; on a very old integrated GPU drop it to 1024
• Falls back to a still frame under prefers-reduced-motion, handled in the runtime
• Seven meshes and one ground plane, drawn twice: once for the shadow map, once for the frame
• The shadow map is the cost, not the geometry