Pottery Playground

A cozy, browser-based 3D pottery studio built entirely from a single prompt for the One-Shot Competition. Sculpt, decorate, and share your unique creations as PNGs or spinning GIFs.

Comment

Inspiration (The Story of the "One-Shot"):

This project is a direct entry into the One-Shot Competition. The core idea was to test the limits of AI-powered development with a single, comprehensive "master prompt." Could a complex, polished, and interactive 3D web application be brought to life from just one instruction?

The entire journey is documented in my chat history. I started with this detailed prompt:

✨ A One-Shot Pottery-Sculpting Web App with Shareable Stickers, Built with Three.js & WebGL... Design and implement a browser-based, tactile pottery simulator where users can sculpt a 3D clay object, decorate it, and export the final creation as a Twitter/X-shareable sticker or spinning GIF...

The AI generated the initial application, but as with any real-world development, it wasn't perfect. It had critical bugs. Sticking to the spirit of the one-shot challenge, my follow-up instructions were strictly limited to "fix errors only." I guided the AI to resolve issues with the 3D geometry, broken exports, and malfunctioning tools without adding new features. The result is a testament to a focused, iterative development process, all stemming from that single, initial creative spark.

What it does:

Pottery Playground is a simple, tactile, and delightful digital sandbox. Users can:

  • 🏺 Sculpt: Intuitively shape a 3D pot by adjusting 12 "Profile Points" for the silhouette and using the "Shape" tool to modify the radial contours. The 3D model updates in real-time.
  • 🎨 Decorate: Personalize their creation in the Decoration Studio:
    • Color: Apply different clay colors like Terracotta, Sage, and Charcoal.
    • Stickers: Drag and drop a collection of fun stickers directly onto the pottery.
    • Glaze: Choose a finish, from a soft Matte to a shiny Glossy or a lustrous Metallic.
  • ✨ Share: Export the final masterpiece to share with the world:
    • PNG Sticker: Download a high-quality, shareable image of the creation.
    • Spinning GIF: Generate a 360° showcase of the pottery.
    • Share on Twitter: A one-click button to share the creation on social media.

How we built it:

This project was built entirely inside Bolt, leveraging a conversational development workflow. The core technologies are:

  • 3D Rendering: Three.js and WebGL for the real-time pottery visualization and interaction.
  • UI/Frontend: React and TypeScript for a modern, component-based interface.
  • Styling: Minimalist CSS for a clean, cozy aesthetic.
  • Exporting: html2canvas to capture the 3D scene for PNG and GIF generation.
  • Deployment: Deployed in seconds to the web via Netlify.

The entire process, from the initial prompt to the final bug fixes and deployment, was a collaboration between me and the AI, demonstrating a powerful new way to build applications.

Challenges I ran into:

The initial one-shot build had several challenging bugs that needed to be fixed:

  1. Broken Geometry: The "Shape" tool wasn't functioning, and the top of the 3D model was missing due to NaN values in the THREE.BufferGeometry.
  2. Export Failures: The "Export as PNG" feature was broken and didn't produce a downloadable file.
  3. Sharing Bugs: Sharing to Twitter would not attach the generated image.
  4. Rotation Malfunction: The spinning GIF export feature was not working correctly.

I methodically identified these issues and instructed the AI to fix them one by one, staying true to the one-shot challenge by not adding new functionality.

What's next for Pottery Playground:

While this version is complete for the one-shot challenge, future ideas include expanding the sticker and glaze collections, adding more complex sculpting tools (like asymmetrical handles), and creating a public gallery for users to showcase their creations.

Built With

Share this project:

Updates