# Layered Depth Effect Experiment

**URL:** <https://discourse.threejs.org/t/layered-depth-effect-experiment/84892>\
**Category:** Showcase\
**Tags:** react-threedrei, webgl, threejs, react-three-fiber\
**Created:** [July 6, 2025, 9:29pm UTC](https://discourse.threejs.org/t/layered-depth-effect-experiment/84892 "2025-07-06T21:29:56Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Duckford](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/duckford/32/61198_2.png) [@Duckford](https://discourse.threejs.org/u/Duckford)\
**Post date:** [July 6, 2025, 9:29pm UTC](https://discourse.threejs.org/t/layered-depth-effect-experiment/84892/1 "2025-07-06T21:29:56Z")

</div>

Hey everyone!

I’m kinda new here. I’ve been experimenting with Three.js for about 2 months now, working on small personal projects to learn the ropes. Recently, I saw this cool effect in [awwwards](https://www.awwwards.com/sites/topology) and I wanted to try it. Originally the effect was in [Topology.vc](https://www.topology.vc/) (sadly the site is offline now). After a bit of tinkering, I managed to build a similar layered depth effect using a face depth map, which gave it this multi-layered facial contour bands vibe. Thought it’d be fun to share it.

[Live demo on codesandbox](https://wcjv5r.csb.app/)

Preview below!

 ![Screenshot 2025-07-06 162450](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/6/f6c6f066b2f24ec5dbd1677262e0ba2843359161.jpeg)