Imagicle | Devpost

Inspiration

We were inspired by the idea of making 3D modeling more accessible. Traditional 3D tools can feel intimidating, so we wanted to create something that allows anyone, regardless of technical background, to type a prompt and watch their ideas turn into interactive 3D visuals

What it does

Imagicle lets users type in a natural language prompt (for example, “a futuristic robot”) and generates a 3D model from it. The model can be rotated, viewed full screen, and downloaded in .ply format. The landing page introduces the concept with typewriter text, vibrant Jersey 15 font styling, and a dynamic background image.

How we built it

-Frontend: React and JavaScript with Vite for fast development, Tailwind CSS for styling, and Lucide-react for icons. We implemented animated components such as typewriter text, a global particle background image, and custom fonts from Google Fonts (Jersey 15). -3D Rendering: Used Three.js to parse .ply files and render them in a browser with custom lighting, rotation controls, and scaling logic. -Backend (supporting frontend): Connected to a FastAPI service that handles prompt-to-model generation. The frontend fetches the generated .ply URL and renders it.

Challenges we ran into

-Connecting the frontend to the backend API reliably. -Receiving and parsing the 3D model response in the generation page. -Ensuring the .ply model displayed correctly with proper scaling and lighting in Three.js. -Managing time constraints while debugging these connections.

Accomplishments that we're proud of

-Built a full React and Tailwind frontend within a hackathon timeframe. -Integrated a live Three.js viewer in the browser with custom rotation and a full-screen modal. -Created a visually cohesive design with a particle background, Jersey 15 typography, gradient buttons, and typewriter hero text. -Designed a simple and intuitive UI that looks and feels polished.

What we learned

-How to integrate Three.js with custom geometry handling. -How to connect frontend components to backend endpoints and handle model data flow. -How to style large backgrounds and fonts effectively using Tailwind overlays. -How to design quickly in a team setting while iterating on both frontend and backend.

What's next for Imagicle

-Implementing the Enhance and Mesh features for higher-quality models. -Adding voice-based prompt input using the Web Speech API so users can speak their ideas. -Exporting models in additional formats such as .glb and .obj for use in games or AR. -Improving accessibility and polishing the UI further.