Lightning sketch recognized: Draw a zigzag, and the AI reads it as ⚡ Lightning. Drawn fates earn a bonus.
Kwaku Amoah in Accra (drowning): The water rises over a soul in Accra, with an underwater tint over the whole scene.
Putri Kurniawan close-up: an elderly woman from Jakarta sees the Reaper, with her look built from her city, her age and her fear.
Lourdes Aquino in Manila (lightning): A bolt from a clear sky: the moon dims and lightning strikes a 93-year-old soul in Manila.
Hu Yan in Chengdu (fire): Fire, one of 20 hand-coded fates, engulfs a soul in Chengdu.
Death’s Errands to-do list: Death has deadlines too. The Reaper’s errand list, sorted by deadline, place or “night first”
Osaka dashboard: Racing the sunrise across Asia: five souls overdue, and the Reaper can only strike where it’s night.
Arrow sketch in Osaka: Doodle the doom: the Reaper sketches an arrow for Watanabe Aoi in Osaka.
Setup screen: Set the terms of death: choose the average lifespan, the workload (up to “Plague year”), and the Reaper’s starting lair.
Berlin dashboard: The Reaper’s command center: a live globe with the real day/night line, and today’s overdue souls.

Inspiration

We were inspired by Google Earth: spinning a 3D globe and zooming into real places. The hackathon asked for something a Halloween character could use in their day-to-day life, and we thought: who has a busier schedule than the Grim Reaper? Every soul on Earth has an appointment, spread across every time zone. We wanted AI and 3D in the project, so instead of a plain to-do list, the Reaper draws how each soul goes, and AI turns the doodle into a short 3D cinematic.

What it does

Being the Grim Reaper is a full-time job, and nobody ever gave him a planner.

Every soul on Earth has an appointment with death, and the Reaper has to keep every single one, in every city, in every time zone, around the clock. Miss a deadline and the soul slips away as a wandering ghost. Show up too early and you're stealing time that wasn't yours. And there's one rule the Reaper can never break: he only works under cover of night. If the sun is up where the soul lives, he has to wait, or grant them a little more time.

The Reaper's Ledger is his daily scheduler. It shows who's due, where they are, and whether it's dark there yet, so he can plan his night shift across the whole planet. When it's time, he chooses how each soul goes: he picks up his pen and draws the tool himself. A dagger, a lightning bolt, a runaway train, a ghost. Whatever he sketches, the fate plays out as a short 3D cinematic, and the soul rises.

Do the job well and he earns points to unlock new, more creative ways to go. Fall behind and the ghosts start piling up.

A live 3D globe with thousands of souls, each with a home city, a birthday and an appointed time of death, plus the real day/night line moving in real time.
Death's Errands: the Reaper's to-do list, sortable by deadline, place, or "night first", so he can plan the most efficient route around the world.
Night shift only: you can only reap someone where it is currently dark. In daylight you can delay them (up to 3 times, by a random amount).
Choose your own tool: sketch a knife, a car, a wave or a ghost. Gemini reads the drawing and picks one of 20 ways of death, or honestly says it is unrecognizable. Prefer not to draw? Pick a tool from the shelf.
3D cinematic: the Reaper glides into a moonlit graveyard and the fate plays out. Each person looks different based on their city, gender and age, on the map portrait and in the cinematic alike.
Scoring and a shop: earn points for on-time reaps, a bonus for drawing by hand, and lose points for being late. Spend points to unlock 12 more fates beyond the 8 starter tools.

How we built it

The whole project is JavaScript, HTML and CSS, running entirely in the browser.

JavaScript + React (built with Vite) for the app logic and interface. The components are .jsx files, which mix JavaScript with HTML-style markup.
HTML + CSS for the page shell, the sidebar, the drawing pad and all the styling: a dark Halloween theme, animations and a phone-friendly layout.
three.js (a JavaScript 3D library) for the spinning globe and every death cinematic.
d3-geo + world-atlas to draw real coastlines onto the globe.
HTML Canvas for the drawing pad: we record every stroke the player draws.

Real sun maths. In JavaScript, we compute the point where the sun is directly overhead (declination $$\delta$$, subsolar longitude $$\lambda_s$$), then the sun's altitude $$h$$ at a person's latitude $$\varphi$$ and longitude $$\lambda$$:

$$ \sin h = \sin\varphi \,\sin\delta + \cos\varphi \,\cos\delta \,\cos(\lambda - \lambda_s) $$

A place counts as night when $$h < -0.833^\circ$$, the standard sunset definition.

Scoring. With $$\Delta$$ = hours between the reap and the appointment:

$$ \text{points} = \begin{cases} 20 & \Delta < -1 \quad \text{(too early)} \ 100 & |\Delta| \le 1 \quad \text{(on time)} \ \max\big(-20,\ 100 - 25(\Delta - 1)\big) & \Delta > 1 \quad \text{(late)} \end{cases} \;+\; 15 \cdot [\text{drawn by hand}] $$

A soul left more than 6 hours overdue escapes as a ghost for $$-50$$ points.

People database: a JSON file of 3,000 generated souls in 55 real cities, weighted by population.
Gemini vision API: we redraw the sketch black-on-white on a hidden canvas, send it as an image with the list of tools, and force a structured JSON answer, so it always returns a valid tool or "unknown". A small JavaScript shape reader (straight line, zigzag, spiral) is the offline fallback.
Procedural 3D: every character and all 20 animations are built in code from spheres, cylinders and cones, with no 3D models or video files. Skin tone comes from the region of their city, and age adds grey hair, wrinkles, glasses and smaller bodies for kids.
Teamwork: we split the work three ways (drawing + animation, data/backend, frontend/globe) and merged with Git branches and pull requests on GitHub.

Challenges we ran into

Choosing an AI API. We wanted to use Claude at first, but it needed a paid plan, so we switched to Gemini. That meant rewriting the request and reply format. We kept both behind one function so either works.
Recognition silently failing. At first every drawing fell back to the offline reader, because the app called a server endpoint that did not exist yet. We added clear error messages so the game says why AI is not working (no key, invalid key, quota).
Merge conflicts. Three people editing shared files (App.jsx, cinema.js, styles.css) meant lots of conflicts. We learned to combine both sides by hand instead of clicking "accept".
Consistent characters. The database and the animation picked skin tones separately, so the same person looked different on the map and in the cinematic. We moved everything into one shared appearance function based on their city.

What we learned

How to send images to a vision model and force a structured output instead of free text.
Spherical trigonometry for sunrise and sunset, and how messy real time zones are.
How far three.js can go with basic shapes, tweens and particles.
Real Git teamwork: branches, pull requests, resolving conflicts, and keeping API keys out of the repo with .env.local and .gitignore.