Hollywood lighting for your website. One HTML tag.

Film crews put a cut-out called a cookie in front of the lamp, and flat light gets life, pattern and texture. Tinseltown does that for a flat web page. A good background does not have to be hard to make.

What you get

A page that looks like a place.
Most sites sit on the same gradient. Light through blinds, leaves or a window gives yours a room to stand in.
No stock overlays and no hero video.
The whole thing is under 20 kB. A hero video is megabytes, and every visitor on mobile data pays for it.
A new mood without a designer.
One attribute moves the sun, warms the light or fills the room with smoke. A campaign, a season or a dark theme is one line of HTML.
It fits the site you have.
It works anywhere you can paste HTML. No framework, no build step, no dependencies.
Safe to ship.
It holds still for visitors who ask for less motion, stays out of screen readers, tracks nobody and is MIT licensed.

Direct it like a gaffer.

Shadow overlays are a wasted process. You buy a pack of PNGs, pick the least wrong one and fade it to 40 percent. Here you move the lamp.

Light size
A bigger lamp gives a softer edge.
Cookie distance
Closer to the wall is sharper.
Elevation
A low lamp stretches the shadows.
Haze
Smoke in the room shows the beams.

Nothing is blurred. Everything is cast.

A blurred PNG is equally soft everywhere. A real shadow is sharp near the cookie and soft far from it. That is what reads as light.

  1. The page is the wall. Every pixel is a point on it.
  2. Each pixel looks at 48 points across the lamp.
  3. The cookie decides how much of each one it sees.
  4. A still scene keeps refining for a moment, then stops.

Examples

Twelve renders: blinds, french doors, a photo used as a colour slide, a fence, halftone, an iris, clouds, leaves, palm fronds and a passing train Eleven presets under different rigs, and one photo used as the cookie. Photo by Mikhail Nilov on Pexels.

Copy the tag. Ship the light.

No dependencies. No build step. A still scene costs nothing once it has settled.

Paste both into your page. Or install it.

npm install tinseltown@latest