The details that make it feel alive.
Not a feature list. The microinteractions, sound, color, and motion choices that turn a utility into a companion you notice in the right moments and forget the rest of the day.
Half a sun over a horizon.
One filled arc, a horizon line, and four short rays. No face, no mascot. The same SVG lives in the app header, the menu bar, and this site so everything reads as one product.
In the app the mark picks up the current daylight accent and breathes gently while Sunrise is thinking or speaking. At rest it is calm; when busy it feels alive without spinning or bouncing.
Tray · header · wordmark
The panel knows what time it is.
Nine keyframe stops from deep night through sunrise, midday gold, sunset violet, and back. Colors lerp continuously; the header gradient fades through four alpha stops so there is never a hard edge. Re-evaluated every minute while the app is open.
The header wash and mark color drift with the clock. No mode switch, just a quiet sense of where you are in the day.
Sound design in code, not a file.
When Sunrise opens for a proactive check-in, a short chime plays first. Synthesized with oscillators so we ship zero audio assets and own the timbre completely. Quiet enough to herald, never to interrupt.
Synthesized in code with the Web Audio API. No MP3 on disk. A rising major-pentatonic bloom over a soft low swell, lowpassed so it never pings.
- Melody
- C5 → E5 → G5 → C6
- Swell
- C3 underneath
- Stagger
- 0.13s per note
- Filter
- 2200 Hz lowpass
const rising = [523.25, 659.25, 783.99, 1046.5] // C5 E5 G5 C6
rising.forEach((freq, i) =>
voice(ctx, master, freq, now + i * 0.13, 1.1, 0.16)
)
voice(ctx, master, 130.81, now, 1.6, 0.1) // C3 swellSmall, snappy, purposeful.
Nothing bounces for the sake of it. Motion signals state change: a new line of coach text rises in, words stream with a slight overshoot, checkmarks draw on, idle states breathe. Tap replay on any sample below.
Rise
New coach lines, goal rows, cards
Locked in. Brief first, then Sarah.
Word rise
Streaming reply, one word at a time
Same time tomorrow?
Tick
Goal check-off
Breathe
Thinking, speaking, busy mark
Float
Product shots on the site
Each moment has a color.
Morning, midday, afternoon, and wrap-up each carry a fixed hue used for labels, pills, and status dots. You learn the rhythm by color before you read the word.
Morning
#f5a623
Midday
#2383e2
Afternoon
#e8833a
Wrap-up
#9b6dff
There when you need it. Invisible when you don't.
Tray pulse
When a check-in becomes available, the menu-bar icon breathes for three seconds: alpha dips twice, then settles. No notification permission required.
Waiting dot
After the pulse, a tiny dot stays in the corner until you engage. One glance, then silence. Ignoring it costs nothing.
Silent notifications
System notifications are silent by design. Sunrise heralds with the chime and tray, never a buzz that pulls you out of flow.
Ephemeral panel
The tray panel closes when you click away, like a menu. The full window is for when you want Sunrise to stay open.
The marketing site shares the same nervous system.
Dashed content rails
Fixed vertical guides frame the page on desktop. Quiet structure, not a grid you notice until it is gone.
Sunrise wash
Layered radial gradients at the top of hero sections. The marketing site echoes the app header without copying it literally.
Speech bubble
A small tail on the version tag beside the app icon. Product status feels conversational, not like a badge.
Gold selection
Text selection uses a faint morning gold. One of those touches you feel more than see.
Need a clean background for a demo recording? usesunrise.io/backdrop is a full-bleed wash with no chrome.
See how it all fits together in the product tour.
Product tour →