Shadowgraphy

Landing Page
List of Tricks
Cinema screen
Hand puppets!

Inspiration

I used to be into making hand shadow puppets at one point in the lockdown so I thought, hey, why not make something that would make it easier for others to catch on if they're so inclined.

What it does

A web app that guides you through different shadow puppet techniques!

An overlay of how to form your hand will be shown on the screen along with your rear camera so you can see how you're doing.

How we built it

I used Create React App along with TailwindCSS + DaisyUI.

I used the following NPM packages for various features:

Camera - https://github.com/mozmorris/react-webcam Curtain Reveal - https://github.com/chimeralevia/react-curtain-reveal-box Star bursts - https://github.com/yiliansource/party-js 3D Objects on landing page - https://docs.spline.design/

Challenges we ran into

Initially, I wanted to use the ML https://google.github.io/mediapipe/solutions/hands.html package to detect a users hand and the shape they were making but since I was going solo, I realized I might end up spending too long configuring it so I pivoted and went with the most basic version of the idea which would be an instructional overlay on the screen. Yayy meee for not falling in love with the idea & choosing to work towards an outcome 🙌

I also hand some challenges setting up the 3D objects on the landing page. I had worked with Spline in the past but then I got a bit rusty.

Another thing was that I found out the hard way that activating the torch on your mobile device using javascript in the browser wasn't a standard thing.

Finally, for some reason, the original implementation of React Curtain Box was not working. So I had to dive into the source code and do a custom implementation for my project. It was pretty cool seeing the magic that takes place behind the scenes.

Accomplishments that I'm proud of

I'm most proud of getting the overlays created! I'm also super proud of getting this from an idea to an actual thing! It's always a magical experience.

What we learned

Even though I didn't implement it, but I learned about using ML to detect hand gestures 😀 I also learned a bit more about https://docs.spline.design/, especially how to setup lighting.