The latest articles on DEV Community by Grace Yuen (@gracetyy). https://dev.to/gracetyy https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3036295%2F8ccbf487-f9ae-419f-881f-a8ffc714fadf.png https://dev.to/gracetyy en Grace Yuen Thu, 25 Dec 2025 07:07:30 +0000 https://dev.to/gracetyy/i-built-a-3d-gesture-controlled-instagram-christmas-tree-in-a-day-3d3 https://dev.to/gracetyy/i-built-a-3d-gesture-controlled-instagram-christmas-tree-in-a-day-3d3 <p>This Christmas, a friend and I decided to see how far we could push a small idea in just one day: What if a Christmas tree could grow out of your Instagram memories and react to your hand gestures?</p> <p>The result is a 3D Christmas tree where:</p> <ul> <li>Each ornament is one of your latest Instagram photos.</li> <li>You can explore the tree using hand gestures in front of your camera.</li> <li>Everything runs in the browser, so you can share it easily with friends and family.</li> </ul> <p>🔗 Live demo: <a href="https://www.christmas-tree.fun/" rel="noopener noreferrer">https://www.christmas-tree.fun/</a> <br> ⭐ GitHub Repo: <a href="https://github.com/gracetyy/christmas-tree/" rel="noopener noreferrer">https://github.com/gracetyy/christmas-tree/</a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.daily.dev%2Fimage%2Fupload%2Fs--b_aYPTVa--%2Ff_auto%2Fv1766645961%2Fugc%2Fcontent_68e08cec-6f3a-47e2-b475-81ca11576e00%3F_a%3DBAMAK%2BZW0" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.daily.dev%2Fimage%2Fupload%2Fs--b_aYPTVa--%2Ff_auto%2Fv1766645961%2Fugc%2Fcontent_68e08cec-6f3a-47e2-b475-81ca11576e00%3F_a%3DBAMAK%2BZW0" alt="Screenshot 2025-12-25 145911"></a></p> <h2> Core Ideas </h2> <p>The project was built around three main goals:</p> <ul> <li>Make a playful, seasonal experience that feels magical but is still technically solid.</li> <li>Use off-the-shelf tools so other developers can easily fork and extend it. </li> <li>Treat it as a quick experiment in combining <strong>3D graphics</strong>, <strong>real-time interaction</strong>, and <strong>social media content</strong>.</li> </ul> <h2> Tech Stack Overview </h2> <p>At a high level, the project combines:</p> <ul> <li>A <strong>3D scene</strong> for the tree, presents and background by Three.js</li> <li>A <strong>gesture input layer</strong> that maps hand movement to camera controls (similar to MediaPipe Hands) </li> <li>A backend workflow to fetch the latest photos from a given Instagram username powered by <a href="https://bubblelab.ai/" rel="noopener noreferrer">Bubble Lab</a>, an open-source TypeScript-native workflow automation platform where you can prompt and get both a visual flow and real TypeScript code.</li> </ul> <p>Feel free to check the repo for the exact implementation details and see how the pieces fit together in code.</p> <h2> Things Learned / Interesting Challenges </h2> <p>Working on this in such a short time frame surfaced a few interesting areas:</p> <ul> <li> <strong>UX for gesture vs mouse</strong>: Making sure the tree still feels usable with traditional input while keeping gestures fun and not frustrating.</li> <li> <strong>Performance on mobile</strong>: Balancing visual detail of the tree with smooth interaction on phones. </li> <li> <strong>Camera mapping from gestures</strong>: Designing a mapping from 2D hand position to orbit-camera azimuth/elevation that feels intuitive, doesn’t cause motion sickness, and still lets users reach all sides of the tree.</li> </ul> <p>Open to feedback or PRs and wish everyone have a wonderful christmas!!</p> <p> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/gracetyy" rel="noopener noreferrer"> gracetyy </a> / <a href="https://github.com/gracetyy/christmas-tree" rel="noopener noreferrer"> christmas-tree </a> </h2> <h3> Merry Christmas! Decorate your own 3D Christmas Tree with Instagram photos </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element">🎄 Make your own 3D Christmas Tree with your photos!</h1> </div> <p>Transform your favorite memories into a magical, interactive 3D holiday experience! This project lets you create a beautiful, personalized Christmas tree decorated with your own photos.</p> <p><strong>✨ Try it out live at: <a href="https://www.christmas-tree.fun/" rel="nofollow noopener noreferrer">https://www.christmas-tree.fun/</a></strong></p> <div class="markdown-heading"> <h2 class="heading-element">🎥 Demo</h2> </div> <p> <a rel="noopener noreferrer" href="https://github.com/gracetyy/christmas-tree/./Duo.gif"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fgracetyy%2Fchristmas-tree%2F.%2FDuo.gif" alt="Demo 1 — scripting @duolingo Instagram as an example" width="360"></a> <a rel="noopener noreferrer" href="https://github.com/gracetyy/christmas-tree/./Duo2.gif"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fgracetyy%2Fchristmas-tree%2F.%2FDuo2.gif" alt="Demo 2 — scripting @duolingo Instagram as an example" width="360"></a> </p> <blockquote> <p>Demo: scripting <code>@duolingo</code> Instagram as an example input for the Instagram import.</p> </blockquote> <div class="markdown-heading"> <h2 class="heading-element">✨ Features</h2> </div> <ul> <li> <strong>📸 Your Photos, Your Tree</strong>: Upload photos from your device or instantly import them from any <strong>Instagram</strong> profile!</li> <li> <strong>🖐️ Magic Hand Controls</strong>: Control the camera with hand gestures in front of your webcam.</li> <li> <strong>🎬 Cinematic Videos</strong>: Record high-quality videos of your tree (360° rotation or cinematic tour).</li> <li> <strong>🖼️ Instant Postcards</strong>: Download a high-definition snapshot of your tree with a custom "Merry Christmas" greeting.</li> <li> <strong>👤 Personalized Greeting</strong>: Enter your name to see a custom "Merry Christmas [Your Name]!" message.</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">🖐️ Hand Mode Tutorial</h2> </div> <p>Switch to <strong>Hand Mode</strong>…</p></div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/gracetyy/christmas-tree" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> webdev programming sideprojects threejs Grace Yuen Mon, 10 Nov 2025 17:54:30 +0000 https://dev.to/gracetyy/-39f9 https://dev.to/gracetyy/-39f9 <div class="ltag__link"> <a href="/gracetyy" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3036295%2F8ccbf487-f9ae-419f-881f-a8ffc714fadf.png" alt="gracetyy"> </div> </a> <a href="https://dev.to/gracetyy/craftscapehk-building-an-ai-ar-platform-for-cultural-heritage-on-google-cloud-run-1kfp" class="ltag__link__link"> <div class="ltag__link__content"> <h2>CraftscapeHK: Building an AI + AR Platform for Cultural Heritage on Google Cloud Run</h2> <h3>Grace Yuen ・ Nov 10</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#ai</span> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#gcp</span> <span class="ltag__link__tag">#cloudrunhackathon</span> </div> </div> </a> </div> ai webdev gcp cloudrunhackathon