add site OG tags

Author: stereoDrift

README.md

@@ -0,0 +1,77 @@
+# 3D Hand Tracking Demo [Shape Creator]
+
+A threejs / WebGL / MediaPipe-powered interactive demo that allows you to control create and move 3D shapes using hand gestures.
+
+<img src="demo.png">
+
+## Demo
+
+Try the live demo: [https://collidingscopes.github.io/shape-creator-tutorial/](https://collidingscopes.github.io/shape-creator-tutorial/)
+
+## Features
+
+- **Real-time hand tracking** using MediaPipe Hands
+- **Left hand gesture control:** Pinch thumb and index finger to resize the 3D sphere
+- **Right hand interaction:** Touch the sphere with your index finger to change its color
+- **Responsive design** that works on desktop and mobile browsers
+- **Visual feedback** with color-coded hand tracking
+
+## Requirements
+
+- Modern web browser with WebGL support
+- Camera access
+- No additional software or downloads needed
+
+## Technologies
+
+- **Three.js** for 3D rendering
+- **MediaPipe** for hand tracking and gesture recognition
+- **HTML5 Canvas** for visual feedback
+- **JavaScript** for real-time interaction
+
+## Setup for Development
+
+```bash
+# Clone this repository
+git clone https://github.com/collidingScopes/shape-creator-tutorial
+
+# Navigate to the project directory
+cd shape-creator-tutorial
+# Serve with your preferred method (example using Python)
+python -m http.server
+```
+
+Then navigate to `http://localhost:8000` in your browser.
+
+## License
+
+MIT License
+
+## Credits
+
+- Three.js - https://threejs.org/
+- MediaPipe - https://mediapipe.dev/
+
+## Related Projects
+
+You might also like some of my other open source projects:
+
+- [Threejs hand tracking tutorial](https://collidingScopes.github.io/threejs-handtracking-101) - Basic hand tracking setup with threejs and MediaPipe computer vision
+- [Particular Drift](https://collidingScopes.github.io/particular-drift) - Turn photos into flowing particle animations
+- [Liquid Logo](https://collidingScopes.github.io/liquid-logo) - Transform logos and icons into liquid metal animations
+- [Video-to-ASCII](https://collidingScopes.github.io/ascii) - Convert videos into ASCII pixel art
+
+## Contact
+
+- Instagram: [@stereo.drift](https://www.instagram.com/stereo.drift/)
+- Twitter/X: [@measure_plan](https://x.com/measure_plan)
+- Email: [stereodriftvisuals@gmail.com](mailto:stereodriftvisuals@gmail.com)
+- GitHub: [collidingScopes](https://github.com/collidingScopes)
+
+## Donations
+
+If you found this tool useful, feel free to buy me a coffee. 
+
+My name is Alan, and I enjoy building open source software for art, animation, games, and more. This would be much appreciated during late-night coding sessions!
+
+[![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/stereoDrift)

demo.png

@@ -6,6 +6,25 @@
   <title>MediaPipe / Three.js Shape Creator</title>
   <script defer src="https://cloud.umami.is/script.js" data-website-id="eb59c81c-27cb-4e1d-9e8c-bfbe70c48cd9"></script>
   <link rel="stylesheet" href="styles.css">
+
+  <!-- Primary Meta Tags -->
+  <meta name="title" content="Shape Creator Tutorial">
+  <meta name="description" content="create/control 3D shapes with hand gestures">
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://collidingscopes.github.io/shape-creator-tutorial/">
+  <meta property="og:title" content="Shape Creator Tutorial">
+  <meta property="og:description" content="create/control 3D shapes with hand gestures">
+  <meta property="og:image" content="https://raw.githubusercontent.com/collidingScopes/shape-creator-tutorial/main/demo.png">
+
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image">
+  <meta property="twitter:url" content="https://collidingscopes.github.io/shape-creator-tutorial/">
+  <meta property="twitter:title" content="Shape Creator Tutorial">
+  <meta property="twitter:description" content="create/control 3D shapes with hand gestures">
+  <meta property="twitter:image" content="https://raw.githubusercontent.com/collidingScopes/shape-creator-tutorial/main/demo.png">
+  
 </head>
 <body>
 
@@ -19,7 +38,7 @@
     Hover over a shape / pinch to move it<br>
     Move a shape into the recycle bin to delete it
   </div>
-  <p id="links-para"><a href="https://x.com/measure_plan" target="_blank">Twitter</a> | <a href="https://www.instagram.com/stereo.drift/" target="_blank">Instagram</a> | <a href="https://github.com/collidingScopes/threejs-handtracking-101" target="_blank">Source Code</a> | <a href="https://buymeacoffee.com/stereodrift" target="_blank">❤️</a></p>
+  <p id="links-para"><a href="https://x.com/measure_plan" target="_blank">Twitter</a> | <a href="https://www.instagram.com/stereo.drift/" target="_blank">Instagram</a> | <a href="https://github.com/collidingScopes/shape-creator-tutorial" target="_blank">Source Code</a> | <a href="https://buymeacoffee.com/stereodrift" target="_blank">❤️</a></p>
 
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>