The app icon splits the teal pin along one soft curve: a lighter tone where light falls from the upper left, the brand teal below. This page sticks to what FindMyETH already does and asks how it could look and move more boldly: the app screens as they are, five daring restyles, new ways to show the stats, and feature-by-feature alternatives for panels, buttons, chips and motion. No new features, all live, all made for touch.
Every brand surface gets two tones of the same teal. The lighter tone always sits upper left, divided by the same gentle curve as the icon. Status colours (green, amber, red) never get the split, so meaning stays clear. In the app this is one token: tintLight next to tint, already added in light, dark and Marauder.
Eleven screens of features FindMyETH has today, drawn with the two-tone rule, in the order you would meet them. The tags under each screen name the features it shows. Screens follow your light or dark setting.
The pin drops, the light half slides in from the upper left, then ETH is stamped in. Tap Replay.
Tap a chip to filter pins, tap a pin or a floor, tap the tabs. Drag on the map to turn the cone.
Drag the panel handle down and let go: the pin stretches, then the light flashes through it. Press and hold a Guide me there button: the light grows across it.
Tap Start walking: the dot walks the route, the floor pill switches E, F, G as you climb, and the progress fills in two tones.
Your groups and contacts. Open one to eat together or see this week's stats.
Roll Contacts in and out. The light corner on a group card follows how many members are on campus now.
Swipe today's dishes and we'll find the canteen everyone likes.
Computed on your phone from what friends shared with you.
Hungry? opens the swipe deck. The leaderboard rises as a podium when it scrolls into view.
Drag the card right (it brightens) or left (it dims), or use the buttons. After four dishes, or Skip to result, the pin flips.
Tap another day: the light sweeps through the pin while it loads. Friday has no lectures, so the pin floats.
The teal hero tilts by itself like a phone in your hand; drag on it to tilt it yourself. Flip Dark appearance to wipe the screen from the upper left.
During a route the island shows the pin and minutes left; the Live Activity has the next step and a two-tone bar. The widgets show the next lecture and when to leave.
Sam is walking to CAB. Follow the footsteps.
The hidden mode keeps the split in ink browns: pins, buttons, the header logo and the active tab's quill stroke. Dark mode turns it into gold ink.
Each phone restyles screens that already exist in FindMyETH. No new features, only new motion, panels, buttons and type. All of them are live and made for touch: tap, drag, swipe and hold.
Navigate as one continuous sheet of frosted glass over the campus. Friends breathe with a live ring, a group of three blooms open when you tap it, and the filter chips share one liquid highlight that stretches from chip to chip.
Tap a chip, tap the +2 cluster, drag the panel by its handle.
The route sheet as a departure board. Minutes and metres flip like split-flap cards, a two-tone bead travels down the steps, and the floor pill becomes an elevator drum that rolls E, F, G as you climb.
Tap Start walking (tap again to pause). Toggle Step-free.
Swipe-to-pick-a-mensa as a card game. The dish card tilts in 3D under your thumb, YES and NOPE stamps fade in, and your avatar ring fills as you go. When everyone is done, the pin flips like a coin and the runner-ups race in as vote bars.
Drag the card left or right, or tap the buttons. After four dishes the result flips in.
The indoor floor plans as a model you can hold. Floors fan apart so you see which level the room is on and the stairs in between; picking a floor lifts it out of the stack while the rest fade.
Tap the building to fan the floors, pick a floor, drag sideways to turn it, tap Guide me.
Marauder's Map mode as a ritual instead of a theme switch. Saying the phrase unfolds the map like a letter, the ink spreads out from the search bar, and friends walk in as footprints under their name ribbons. Mischief managed folds it shut again.
Tap the phrase to open the map, then Mischief managed to fold it.
Every design uses numbers the app already computes: hours on campus this week (yours and together), hours per day, the leaderboard, On campus now, the four profile tiles, the streak, the swipe result. Same mock data as the phones. All of them play when they scroll into view; tap or swipe to replay.
Your hours, who is on campus now and the streak as three closing rings, with the hour count rolling up in the middle.
Gauge(value:).gaugeStyle(.accessoryCircular) or Circle().trim(from: 0, to: v) · .animation(.spring.delay(i * 0.15)) · contentTransition(.numericText())The weekly leaderboard as a podium. Bars rise one after the other, numbers count up, the leader gets the pin as a crown and your bar is outlined.
ForEach bars · scaleEffect(y:, anchor: .bottom) with .spring.delay(rank * 0.12) · PinLogo crown with .symbolEffect(.bounce)Leaderboard rows become running lanes. Everyone starts at zero and runs to their hours this week; the finish line is the top member.
LeaderboardRow with an avatar offset(x: width * hours / maxHours) · .animation(.easeOut(duration: 1.2).delay(i * 0.08))Tap a day. Five weekdays in a row last week, plus today.
The streak tile grows into a calendar of campus days, darker for longer days. The current streak is outlined and the flame flickers while it is alive.
Charts RectangleMark(x: weekday, y: week) with foregroundStyle(by: hours) · flame as a two-path Shape with PhaseAnimator flickerThe big hours number as a mechanical counter. Each digit rolls on its own drum, so switching between your hours and the group total feels physical.
Text(value, format: .number.precision(.fractionLength(1))).contentTransition(.numericText(value:)) · monospacedDigit · withAnimation(.snappy)Hours per day from the profile stats, but each bar springs up in two tones when it scrolls into view. The longest day keeps a light cap; tap any day to read it.
Charts BarMark(x: day, y: hours) · .chartOverlay tap → selection · foregroundStyle LinearGradient tintLight→tint · animate a 0→1 scale on appearThe same hours per day as a flower: one petal per weekday, longer for longer days. Petals unfold clockwise from Monday; tap one to read it in the centre.
Charts SectorMark(angle: .value("Day", 1), outerRadius: .value("Hours", h), innerRadius: .ratio(0.25)) · chartAngleSelection92.1 h together this week. Tap a bubble.
Each member is a bubble in their avatar colour, sized by hours. They drift slightly, like a group standing together; tapping one pops it forward.
Canvas or ZStack of Circles sized by sqrt(hours), positions from a simple circle pack · .scaleEffect on selection · TimelineView driftThe four profile tiles (most visited, longest day, streak, building) as big two-tone cards in a snapping carousel, one number at a time.
ScrollView(.horizontal) { LazyHStack } · .scrollTargetBehavior(.viewAligned) · .scrollTransition { scaleEffect / opacity by phase }The swipe result as a race: each canteen's likes fill in, the winner crosses 4/4 first and a burst of small pins goes off.
BarMark(x: likes, y: canteen) with .animation per option · PhaseAnimator for the burst · sensoryFeedback(.success) on the winnerIn Marauder's Map mode the hours stat is written in ink: the number draws itself stroke by stroke and the streak walks past as six footprints.
Text with .font(.custom("IMFellEnglish-Italic")) masked by a trim-animated path, or a TextRenderer (iOS 18) that reveals glyphs over timeThe On campus now tile as a live counter: when a friend arrives, their avatar slides in, the number rolls up and a small toast says where.
contentTransition(.numericText()) on the count · avatars in an HStack with .transition(.move(edge: .trailing).combined(with: .opacity))Every block below is a feature that exists in FindMyETH today. Each card is one alternative look or motion for it, live and made for touch. The one-line "Today" note says how it works now.
Today: the pin drops in on launch, a light sweep while loading, the pin stretches on pull to refresh, empty screens show the pin.
The pin slams down like a rubber stamp, two rings ripple out on the two haptic beats, then the wordmark slides out from under it.
PhaseAnimator([.up, .slam, .settle]) · scaleEffect 1.6→0.92→1 · two Circle strokes scaling out · sensoryFeedback(.impact) ×2Instead of a sweep, the pin fills up with two tones of teal like a glass of water, the waves sliding past each other until the content is ready.
Shape with a sine path, phase from TimelineView(.animation) · clipped to PinLogo · fill level = progressPulling stretches the pin like a rubber band. Let go past the line and it shoots up, spins once, and lands with a flash of light.
.refreshable with a custom indicator · scaleEffect(y: 1 + pull / 120) · on release: offset(y: -40) + rotationEffect(360°) springThe empty-state pin dozes: it leans, breathes, and floats little z's. Tapping wakes it with a hop, a cheap moment of delight on an empty day.
EmptyState(PinLogo) · rotationEffect + scaleEffect breathing (3 s) · .onTapGesture → keyframeAnimator hopToday: a two-tone you-are-here pin with a pulse and a light cone, friend avatars with clusters, brand pins for places.
Three soft sonar rings instead of one pulse, and the light cone slowly sweeps a little to each side, as if the pin were looking around.
MeMarker: three staggered Circle strokes (scale 1→2.4, opacity 1→0) · LightCone rotation ± 12° with .easeInOut.repeatForeverA cluster of friends opens like a flower: the +2 bubble splits into the three avatars on a spring, each with a live ring, and folds back on a second tap.
FriendMapMarker: ForEach(members) offset on a circle, .spring(response: 0.4, dampingFraction: 0.6) · matchedGeometryEffect from the lead avatarWhen a filter changes, the brand pins fall in one after another and squash on landing. The selected pin grows and slides a name tag out from under it.
Annotation { BrandPin } · .transition(.offset(y: -60).combined(with: .opacity)) with a stagger · selected: scaleEffect(1.3, anchor: .bottom) + label .move(edge: .top)Today: a floating search bar with voice search, and Food / Study places / Friends chips that light up in two tones.
One highlight for the whole row. On tap it first stretches across to the new chip, then snaps to its size, like a drop of liquid moving.
matchedGeometryEffect(id: "chip", in: ns) on a Capsule behind the selected chip · two-step: width anchor, then .spring(bounce: 0.35)Tapping the mic grows the bar into a wide glass panel; while listening a live waveform replaces the placeholder and recent searches slide up underneath.
VoiceSearch: matchedGeometryEffect bar → panel · waveform bars driven by the audio level (AVAudioRecorder.averagePower) · .symbolEffect(.variableColor)Section titles in the list panel get a tiny two-tone pin as a bullet and a hairline that runs to the edge.
Label { Text(title) } icon: { PinLogo().frame(width: 14) } · Rectangle().frame(height: 0.5)Today: a draggable list panel with detents over the map, and detail cards with photo, facts and Guide me there.
The panel snaps to three detents with a rubber band past the ends. Each detent clicks in with a little overshoot, and the label says where it landed.
presentationDetents([.height(150), .medium, .large]) or DragGesture + snap · .interactiveSpring(response: 0.35, dampingFraction: 0.7) · sensoryFeedback(.selection)The detail card grows out of the pin you tapped instead of sliding up from the bottom, so you always see where it came from.
matchedGeometryEffect(id: place.id) between BrandPin and the card · .transition(.scale(scale: 0.1, anchor: pinAnchor))Today: round flat-teal buttons that darken and shrink on press, and Guide me there with a centred arrow.
The primary button carries the light tone in its upper left; on press the light grows across it like a lamp switching on.
ButtonStyle: tint + tintLight Ellipse clipped to the Capsule, scale on isPressed with .springFor the route button: light pours into the capsule while you hold, and when it is full the arrow takes off. Short taps still work for VoiceOver.
onLongPressGesture(minimumDuration: 0.6, perform:, onPressingChanged:) → animate a fill width · arrow offset + rotation keyframesOn tap the arrow shoots off to the upper right with a short trail and comes back in from the left, a tiny send-off before the route opens.
keyframeAnimator(trigger:) { offset(x,y), opacity, scale } on Image(systemName: "location.fill")Today: a route sheet with steps, rolling minutes and metres, a simulated walk, step-free, and a floor pill with indoor floor plans.
A deep teal line with a lighter dashed core that flows toward the goal, so the direction reads without arrows.
Two MapPolylines: tint (11 pt) + tintLight (5 pt, dashed, dashPhase from TimelineView)The rolling minutes and metres become departure-board flaps: each digit folds down on its own when it changes.
contentTransition(.numericText(countsDown: true)) + rotation3DEffect(.degrees(flip), axis: (1, 0, 0), anchor: .center) per digitSteps as a vertical line: a two-tone bead slides down it as you walk and finished steps tick off and fade.
VStack of steps over a Capsule track · bead offset(y:) from progress · .symbolEffect(.bounce) on the checkThe floor pill as an elevator display: the letter rolls on a drum and the floor plan next to it slides up or down with it.
ScrollView with .scrollPosition(id:) and .scrollTargetBehavior(.paging) for the drum · plan .transition(.push(from: .bottom / .top))Today: My Friends with group cards and a Contacts roll-out, a friend detail with Hungry? and Start swiping, the swipe deck and the result.
The Contacts row deals its people out like a hand of cards, each avatar landing a beat after the last; tap again to gather them back.
DisclosureGroup content with ForEach avatars · .transition(.offset(x: -40 * i).combined(with: .scale)) · .spring.delay(i * 0.05)Group cards get a soft light corner whose strength follows how many members are on campus now, fading as people leave.
LinearGradient hard stop at 38 %, opacity = onCampus / members · animates when the count changesDragging a dish toward yes brightens the card with the light tone; toward no it dims.
Overlay tintLight gradient, opacity = max(0, drag.width) / 150 · black overlay for left swipesWhen everyone has swiped, the pin turns over like a coin and lands on the winning canteen.
rotation3DEffect(.degrees(180), axis: (0, 1, 0)) spring, swap content at 90°The winning card's header carries the two-tone curve with the voters' avatars, the light edge slowly drifting.
ZStack { tint; tintLight clipped to Path(curve) } · voters in an overlapping HStackToday: Edit Profile with Name and Avatar tabs, initials, photo or sticker avatar, the avatar creator and a full-screen photo viewer.
The Name / Avatar switch uses a two-tone thumb that stretches toward the new tab before it settles, so the switch feels like it has weight.
Picker(.segmented) replaced by a custom HStack · thumb matchedGeometryEffect + scaleEffect(x: 1.3) mid-flightIn the avatar creator each tap on a part pops the sticker: the changed part springs, the colour cross-fades and a tiny shine runs over it.
AvatarComposer layer with .contentTransition(.interpolate) colour · scaleEffect pop via keyframeAnimator · sensoryFeedback(.selection)Tapping the profile photo zooms it to fill the screen from where it sits, with the background dimming behind; tap again and it flies back.
PhotoViewer: matchedGeometryEffect thumb ↔ full · .zIndex + background opacity · drag down to dismiss with scaleTilting the phone shifts the light edge on the profile hero, as if a real lamp hung above it.
CMMotionManager attitude → tintLight path offset ± 3 pt + rotation3DEffectToday: light, dark and system appearance, the tab bar, the hidden Marauder's Map mode, two-tone tokens, haptics.
Switching appearance wipes the new look in from the upper-left corner, where the light comes from.
Snapshot overlay masked by a growing Circle anchored top-leading, 0.9 sThe active tab icon fills with both tones and hops once; inactive icons stay grey.
.symbolRenderingMode(.palette).foregroundStyle(tint, tintLight) · .symbolEffect(.bounce, value: tab)Entering Marauder mode spills ink from exactly where you touched; leaving it soaks the ink back up into the same spot.
mask { Circle().frame(width: r * 2).position(touch) } with withAnimation(.easeOut(duration: 0.8)) · touch from SpatialTapGestureA light tap then a firmer one, like the two tones: for landing, route start and the match.
CHHapticEngine: transient 0.4 at 0 s, 0.9 at 0.09 sToday: a route Live Activity with Dynamic Island, and a Next lecture widget.
The compact island keeps the pin and minutes; tapping it swells into the next step with a two-tone progress worm that crawls forward.
ActivityKit DynamicIsland { expanded / compactLeading / compactTrailing } · ProgressView with a LinearGradient tint → tintLightThe Next lecture widget gets a ring that drains toward leave time, and the minutes roll down each minute.
WidgetKit accessoryRectangular · Gauge(value:) circular · Text(timerInterval:countsDown:) for live minutes