I originally had an animation on my website of a swaying branch casting a shadow through a window, that warped and stretched on scroll. I had done this with css transforms and it looked okay - but I’m so glad I rebuilt it in three.js. It was way easier than I thought to get it working - the editor really helped me to visualise moving light sources.
I’m using a tree model from https://eztree.dev/ and soft shadows from Drei.
check it out here! https://liamp.uk/
This is a really nice example of using Three.js for something subtle but impactful.
The idea itself is simple, a branch casting a shadow through a window, but rebuilding it in Three.js instead of CSS is a big upgrade. You get way more natural light behavior, especially with soft shadows and perspective changes. Those small details are what make it feel real instead of just “styled”.
Also relatable point about the editor. Being able to move lights around visually makes a huge difference, especially for shadows where tiny adjustments completely change the mood.
Using Drei soft shadows is a solid choice too. It hits that sweet spot where you get smoother, more realistic shadows without going full heavy on performance.
What I like most is that it’s tied to scroll. That kind of interaction makes a portfolio feel alive without being overwhelming. It’s not just decoration, it reacts to the user.
Curious how you handled performance on lower-end devices, especially with soft shadows enabled. Did you add any fallbacks or scale quality dynamically?
Really clean work overall. Goes to show you don’t need a complex scene to make something memorable, just good use of light and motion.