MOONFLIP

Orbit the Moon. Pierce the shadow. Discover you’re not alone.

Comment 1

Inspiration

“Fly Me to the Moon” made us wonder what would we discover if we traveled beyond the side we can see from Earth? The Moon’s far side is often called its “dark side,” yet it receives sunlight too. The name describes a limit in our view, not the full reality.

We noticed the same gap in how people present their lives. A social media post shows the internship offer, the celebration, or the finished performance. It rarely shows the rejections, self-doubt, or hours of work behind it. Seeing only those highlights can make our own difficulties feel unusual, even when other people are carrying similar ones.

That experience reaches well beyond one age group. A teenager may feel behind their friends. An international student may tell family back home that everything is going well while struggling to adjust. Someone starting a job may share a promotion while keeping their exhaustion private. MOONFLIP creates space for both sides: the moment people see and the feelings they might never hear about.

What it does

  1. MOONFLIP begins with a moment someone might share online: an internship offer, a celebration, or a happy photo. Visitors choose a post and fly around the Moon to discover what that same moment left out—rejection, loneliness, family pressure, or the effort behind a success. They can send a quiet signal of support or write their own “two sides.” On the far side, they can turn on “Fly Me to the Moon” as background music.

  2. Every signal adds a star and a line to "My Constellation", colored by the story’s theme. The first, third, seventh, and twelfth signals add small points of stardust. Sending three signals to stories in one theme unlocks a crystal for that theme. In a private constellation view, other lights dim so visitors can see the stories they chose to stop for. There are no rankings or daily streaks, and nothing disappears if they take a break.

  3. Visitors can turn that constellation into a "Giver Card" to download or share. It shows their stars and the line, “Tonight, I stopped for a few stories on the far side.” They can choose to display how many signals they sent. The card never includes anyone’s story or message.

  4. MOONFLIP also gives visitors a place to put difficult feelings into words. If either writing field contains certain crisis-related phrases, a gentle message appears: "You don’t have to carry this alone.” It links to Support resources, including crisis and community support options, without blocking the submission. Personal writing and signals stay in the visitor’s browser. “Submit for anonymous sharing” records the visitor’s choice; it does not yet publish their story to other people.

How we built it

  • Vanilla ES modules, three.js r161 via an import map, the Web Audio API and CSS. No framework, no bundler, no backend — the repo root is the site, deployed to GitHub Pages on push.
  • The Moon is a real one: NASA albedo and height maps on a MeshStandardMaterial, with a procedurally drawn texture rendered first so the scene is never blank and still works if the images fail.
  • Every sound is synthesised in-browser. The near side's overlapping chatter, the far side's unresolved chord, the whoosh across the limb. No audio files except the optional far-side theme.
  • The far-side lights are real <button> elements projected from 3D to screen space every frame and hidden when they rotate past the limb, so the whole far side is keyboard-navigable and readable by a screen reader.
  • localStorage is the entire persistence layer. The streak and milestone rules live in a pure module with no DOM, no three.js and no storage, so the logic is testable on its own.

Challenges we ran into

  • The constellation was a lie. The signal count survived a refresh, so it looked fine — but the strands were only ever in memory and were never redrawn. Fixing it meant recording each signal's theme (which had never been stored and couldn't be recovered later for a deleted story) and rebuilding the whole sky on arrival with the fade-in disabled, so a saved constellation is simply already there.
  • A quarter turn. NASA's equirectangular maps put 0° longitude — the middle of the near side — at the centre of the image. three.js' default sphere UVs put u = 0.25 at +Z, which is exactly where the camera starts. Get that wrong and you're staring at the far side from the near side.
  • Things painting through other things. Giving the near-side controls a z-index so they'd sit above the drifting cards quietly made them render on top of the modal dialogs — screens are siblings with z-index: auto, so any positive value inside one wins against a later one. A screenshot caught it.
  • Knowing what not to detect. The gentle crisis prompt had to catch "I want to die" without catching "I'm dying to see them again". Single keywords were useless; it needed whole expressions.

Accomplishments that we're proud of

  • We made the hackathon prompt part of the interaction itself. Flying around the Moon changes what visitors know about a person, just as a fuller conversation can change a first impression.
  • We are also proud of the complete journey: discover a story, see its hidden side, offer support, and consider sharing your own. The constellation makes those small moments of attention visible without turning someone’s hardship into a popularity contest.

What we learned

  • A Resilient 3D Moon:\ A procedural surface renders immediately, then NASA albedo and height maps load onto the three.js sphere. The scene remains visible even if the image files fail to load.
  • Keyboard-Accessible Story Lights:\ Each story has a 3D light paired with a real HTML <button> projected onto the Moon every frame and hidden when it passes behind the limb. Visitors can navigate the stories by keyboard, and reduced-motion settings shorten the flight.
  • Wealso learned that the Moon’s biggest misconception is also MOONFLIP’s strongest idea. Its far side is not permanently dark: it receives roughly two Earth weeks of daylight each lunar cycle, and at new Moon it is fully sunlit. “Far” describes what we cannot see from Earth, not a place where light never reaches. The same is true of people. What lies outside a highlight is not necessarily a “dark side”; it might be effort, uncertainty, care, or hope. Flying around the Moon lets visitors discover that idea for themselves. We also learned that inviting personal stories requires clear privacy boundaries and a path to human support when someone needs it.

What's next for MOONFLIP

  • More stories per theme. Real stories, carefully. "Submit for anonymous sharing" currently saves locally and is honest about it. Accepting real submissions needs moderation, rate limiting and a duty-of-care review first — a policy problem, not a weekend coding problem.
  • A lighter theme file. The far-side music decodes to ~86 MB of PCM; a shorter loop would be kinder to old phones.

Built With

Share this project:

Updates

Submission history