Celestial Rest

Home Screen
Light Therapy Screen
Pre-Sleep Screen
Nature Screen
Sleep Environment Screen
Meditation Screen
User Flow
Research and Problem Framing
Sleeping Screen

Inspiration

It started with a rabbit hole at like 11 am. One of us was reading about Mark Vande Hei, the NASA astronaut who spent 355 days on the ISS, and came across this quote where someone asked what he missed most about Earth. Not family, not real food. He said:

"We don't get that smell."

He was talking about forests. After almost a year in space, one of the most elite humans on the planet couldn't stop thinking about walking through trees. We brought it to the group and it kind of broke our brains a little. Because we started digging into astronaut sleep research and it turns out sleep in space is genuinely terrible, not because of the hardware (NASA has the CO₂ and temperature and melatonin schedules nailed) but because everything Earth does for free is gone. Natural light cycles. Nature sounds. The feeling of being somewhere familiar. All of it has just been removed. And then one of us said, "okay but isn't that just us?" and we all went quiet for a second. Because yeah. Shift workers. Anyone who's ever pulled an all-nighter in a dorm. Anyone sleeping in a city with six light sources bleeding through their blinds. We've quietly engineered away the same cues humans relied on for hundreds of thousands of years. We're all sleeping in orbit a little bit. That's where Celestial Rest came from.

What It Does

Celestial Rest is a sleep and mental restoration system with six screens, each targeting a different piece of the sleep problem:

Dashboard — your sleep quality score front and center (big number, not a cute emoji rating), circadian phase status, mindfulness streak, and a live 24-hour light schedule Pre-Sleep Routine — a checklist of four evidence-based wind-down activities to work through before bed Guided Meditation — full-screen immersive session with a breathing orb that pulses on an actual breathing rhythm, a session timer, and ambient sound selection Light Therapy — real-time 24-hour circular clock showing where you are in your body's day, automatic day/night mode switching based on your local time, and brightness control Virtual Earth Window — a nature immersion screen built around the Vande Hei quote. Nature sounds, a photo of Earth from orbit, and space to just decompress Sleep Environment — ambient sound library, temperature control, airflow settings, and a "Ready to Sleep" mode that actually feels like a ritual

The whole app also runs a live circadian theming system — it watches your local time and automatically shifts between cool blue light (day) and warm red light (night) at 6am and 8pm. That's not just an aesthetic choice. Red light genuinely does less damage to melatonin production than blue light. It's science running invisibly in the background.

How We Built It

Designed in Figma, built with Figma Make. Having that design-to-browser loop be that tight genuinely changed how we worked — instead of designing everything upfront and then building, we were testing interactions as we went. Caught a lot of "looks perfect in Figma, feels wrong when you actually click it" moments way earlier than we would have otherwise. The meditation breathing orb went through probably six versions before it felt right and we ended up with a total of 60 versions (crazy, right?). The one that landed pulses on an 8-second loop — 4 seconds expanding, 4 contracting — which matches an actual box breathing rhythm. Obvious in hindsight but we definitely didn't start there. The light therapy clock is a raw SVG with two arcs drawn using stroke-dasharray — blue for the 14-hour day phase, red for the 10-hour night phase — and a white dot sitting at your exact current time position, updated every minute: tsxconst angleRad = angle * (Math.PI / 180); const dotX = 50 + radius * Math.cos(angleRad); const dotY = 50 + radius * Math.sin(angleRad);

The sleep score runs on a weighted model across four factors — duration efficiency (D), circadian alignment (C), REM consistency (R), and environmental quality (E): Q=w1(D)+w2(C)+w3(R)+w4(EQ) = w_1(D) + w_2(C) + w_3(R) + w_4(EQ) = w1(D)+w2(C)+w3(R)+w4(E)

Each is normalized to 100, weighted by what the research actually says matters.

Challenges We Ran Into

The day/night theming was a pain. The easy version is just flipping a boolean. But we wanted manual override, if you want to force blue light at 10pm you can, without that override getting stomped on when the auto time-watcher fires every minute. We landed on manualMode: 'day' | 'night' | null where null just means "follow the clock." Three states instead of two. Took an embarrassingly long time to get there. On the design side, the hardest thing was making biometric data feel human. Sleep scores, circadian percentages, session timers — that's cold clinical stuff. We didn't want it to look like a medical dashboard but we also didn't want to bury the numbers behind friendly illustrations. What worked was treating typography like two different voices: monospaced fonts for numbers (precise, instrument-readout energy), humanist sans for all the copy (conversational, warm). Numbers feel like data, words feel like someone talking to you. Once we had that rule everything got a lot easier. The Virtual Earth Window also completely got away from us time-wise. It's the screen with the least interactivity, a sound selector, a volume slider, a quote, and it ended up being the one we reworked the most. Getting the pacing right, the breathing animation on the quote, the right photo — it just kept not being done.

Accomplishments That We're Proud Of

First one is just finishing it, two of us are freshmen (one's doing CS, and one's doing Mechanical Engineering (hopefully)), and one is a Mechanical Engineering sophomore. We came into this not really knowing React, figuring out TypeScript as we went, and Googling what a React Context even was at some point during the build. The fact that there's a working, navigable, animated app at the end of this is genuinely kind of wild to us. Beyond that, the circadian theming system. It sounds simple but it's the thing that ties the whole app together. It's not just a dark mode toggle, it's an actual circadian tool that shifts the color temperature of the entire UI based on real time. The app literally changes its light spectrum when you should be winding down. No other sleep app we found does that at the UI layer. The meditation orb is the other one. Every single person who tried the prototype mentioned it without being asked. That's rare. You don't always know when you've gotten something right but we knew with that one. And the Virtual Earth Window. We built it for an astronaut who missed a smell. That's a weird thing to build and we're glad we did it.

What We Learned

Space psychology maps onto normal life more than we expected. Everything NASA deals with — disrupted light cycles, absence of nature, sensory monotony, loss of environmental cues — is just a compressed version of what a lot of people experience working indoors, sleeping in cities, staying up too late on screens. The solutions scale down surprisingly well. Figma Make is genuinely fast in a way that changes your process. But "it renders" and "it feels right" are still miles apart and no tool closes that gap. That's still the hard part. And the biggest thing: starting with a real human story gave us a filter for every decision. When we weren't sure if something belonged in the app, we asked if it served the original feeling — the astronaut who missed the forest. That was almost always enough to decide.

What's Next for Celestial Rest

A few things we want to build: Wearable integration. Right now the sleep score is illustrative. The real version pulls from Apple Health, Fitbit, or Oura Ring data, actual HRV, actual REM cycles, and actual sleep staging. The model is already there; it just needs real inputs. Personalized circadian calibration. The 6 am/8 pm thresholds are population averages. Chronobiology research is pretty clear that night owls and early birds have genuinely different rhythms. We want an onboarding flow that profiles your chronotype and adjusts all the thresholds accordingly. Streak and history tracking. The mindfulness streak on the dashboard is static right now. Persistent storage, sleep history graphs, week-over-week score trends — the data layer is the obvious next step. More Virtual Earth environments. The Earth window is one scene. We want a full library: different times of day, different biomes, different weather. The psychological research on nature exposure suggests variety matters as much as presence. Actual sound integration. The sound selectors all exist, and the UI is done. We just need the audio files and the Web Audio API wired up behind them.