Three Graces: shadows that are only light and material
· 1 min read · three.js, webgl, lighting, design, launch
Three Graces is a small experiment with one question: how much depth can a few carefully driven lights give a scene without real shadows?
The trick #
The page is a simple museum-style landing page. The layout and the art direction are adapted from a design I found on Dribbble. As the light moves across the statues, they seem to cast shifting shadows and volume. In fact, there is no real shadow in the scene. The effect comes from lighting and material response alone, which sells depth without the cost of shadow maps.
Why I like it #
It is a quiet study of how far a few lights can go on a clean, editorial page. It is cheap to run, and it reads well on any device.
The videos #
There is a first look and a video of the finished page, and the source is public on the GitHub repository.
Try it #
The page is live at threejs-graces.tiiny.site, and the details are on the project page.
Related projects
- Three Graces — Museum landing page with cursor light