1000 Candles

Inspiration

The idea for 1000candles was born out of a desire to create a shared space for remembrance and reflection, using artful 3D technology to make something both meaningful and beautiful. I wanted to see if Three.js and modern browser tech could evoke a sense of community and memory, right in the web.

What it does

The experience lets anyone light a virtual candle in a haunting, atmospheric graveyard. Every candle is dedicated, whether to someone you miss, someone you care about, or just to share a moment. Candles flicker realistically, the blood moon glows and reacts to your mouse, and ambient audio brings the whole world to life.

How i built it

• Frontend: Built with Next.js 14 and TypeScript for a robust base, and React Three Fiber/Three.js for all 3D rendering.
• Visuals: Custom shaders and post-processing effects for realistic candle flames, moon, and fog. Particle systems were used for things like stars and atmospheric haze.
• Audio: Ambient soundscapes sourced from Pixabay, spatialized for immersion.
• Backend: Simple SQLite database to store candle submissions, with a REST API for CRUD operations.
• Moderation: Every candle dedication runs through AI-powered moderation (Pollinations AI) for safety and kindness before being shown.

Challenges i ran into

• Making the scene inviting and beautiful, many iterations here.
• Optimizing 3D performance was tough, balancing hundreds of dynamic lights while keeping frame rates high required LOD, frustum culling, and careful batching.
• Getting the right mood: finding audio and tuning visuals to make the scene "feel right."
• Building robust moderation that's automatic but doesn't limit genuine sentiment.
• Managing real-time submissions and preventing spam/abuse (rate-limiting and fingerprinting logic) - thanks to pollinations.ai.

Accomplishments that i'm proud of

• Made a fully responsive, real-time 3D world running smoothly in a browser.
• Created a space that feels personal, inviting, and distinctive for anyone who visits.
• Blended visuals, sound, and interactivity for shared reflection and remembrance.
• Built end-to-end moderation and validation flow without sacrificing user experience or privacy.

What i learned

• Even "simple" 3D scenes are hard to optimize with many light sources!
• Small touches (tone of audio, color grading, interactive elements) can elevate an experience way beyond the sum of its features.
• Combining AI moderation with privacy-aware workflows can make open experiences safer.

What's next for 1000 Candles

• Deploying to a broader audience and integrating feedback.

Built With

• nextjs
• react-three-fiber
• sqlite
• tailwindcss
• three.js
• typescript
• vercel