Orbit: how it is made

Orbit is a gamification app: missions are planets in a night sky, with progress rings, a streak of days, rewards and mission steps that complete right on the page. This page shows where each of its tricks lives in the editor and how to repeat it on your own screen.

You get Orbit by copying it from the gallery of ready apps (Getting started). Open the document, select a widget on the canvas and find it in Tree by the name given below; names in code are the names you see there.

The screens#

Screen	What it is	Where it leads
`Home`	The start screen: balance, level ring, streak, three missions, recent activity	To missions, history, levels, the streak layer, notifications and the profile
`Missions`	Missions in three tabs: active, new, done	To `Mission details`; a long press opens `Mission peek`
`Mission details`	One mission with its steps	Back; steps complete on the page
`Rewards`	Rewards with category chips	To `Reward details`; a long press opens `Redeem`
`Reward details`	The reward and the swipe to redeem	To `Success`
`Success`	The redemption code and a way back	To `Rewards`
`Orbit level`, `Orbit levels`	The level ring and the list of levels	Back
`Stardust history`, `Notifications`, `Profile`	Lists and settings	Back
`Mission peek`, `Streak`, `Redeem`	Layers on top of other screens	Closed with a button or a drag down

The four sections of the bottom bar are Home, Missions, Rewards and Orbit level.

How the balance card is made#

On Home, select Stardust balance card. The number and the ring inside it grow from zero when the screen opens and count to the new value when the data change.

The balance is a Text in the Binding mode with the data field user.balance, shown as Number with separators.
On the text and on the ring, Grow from zero when shown and Animate changes from data are turned on.
The ring is a Progress ring bound to user.tierProgress. Its Fill gradient is aurora, Ends is Round, Glow is Soft, and the label in the center is a separate text with a template.

To repeat: add a Progress ring, bind Current value to a field, turn on the two animation switches, choose a gradient and set Ends and Glow. Then switch the scenario above the canvas and watch the preview count.

How the steps bar is made#

Mission card shows a bar of steps. A Progress bar has a fixed number of Steps, but missions have two, three, four, five or ten steps. So the card holds five bars, each with its own Steps, and each is shown Conditional on the data field mission.steps being equal to its number. The filled part is bound to mission.stepsDone.

To repeat: add a bar, set Steps, bind Current value, and copy the bar for every size you need; give each copy its own condition under Visibility. Glow set to Strong lights the current step.

How the swipe to redeem is made#

On Redeem and Reward details select Swipe to redeem. It is an ordinary Button with Confirmation set to Swipe to confirm: the action runs only when the thumb reaches the end. The button is Disabled if… the data field reward.affordable is off, so a person without enough points cannot swipe. The Redeem layer is a Bottom sheet with Blur under the layer (How it opens: As a layer on top).

To repeat: select a button, set Confirmation, and choose its action and, under Disabled if…, the condition. Test the thumb in the Preview tab: the canvas shows it at rest.

How the long press is made#

On Missions, select Mission card. Long press has Action on long press: Go to screen Mission peek, a small window in the middle (Layer place: Middle window). The press itself opens Mission details. Both carry the record of the card, so the opened screen shows that mission. Name of the long press action is required.

To repeat: select a pressable card, open Long press, choose the action and write its name. A button has no long press.

How the streak is made#

On Home, Streak card holds Streak week: seven columns. In each, a circle gets a States entry: when user.day1 (and so on) is on, the circle is filled. The day of today is a second icon that is Conditional on user.todayIndex, and it has Motion set to Breathe, so it pulses. The card itself has an Action on long press that is only for the demo: it moves to the next day.

To repeat: draw one day, give it a States entry on a yes/no field, and copy it seven times with different fields.

How the bottom bar is made#

Bottom navigation is a Navigation bar with Floats over the content, so the content scrolls under it and the last row still scrolls clear. The Missions item has Dot when user.newCount is greater than zero. Each item has Switch to a section and a Section screen. The same bar stands on every section screen; if you change items, put the bar on Other sections again.

The greeting that stays#

The first row on Home, Greeting row, has Pinned to the top set to Pinned: it stays under the app bar while the content scrolls. The soft circles behind it are four containers with Motion set to Float and different Cycle, ms and Delay, ms, so they drift out of step.

Data#

Orbit reads the fields user.* (balance, level, streak, days of the week), challenge.*, history.* and ui.*, and the lists missions, newMissions, doneMissions, steps, rewards, featuredRewards, history, newNotifications, earlierNotifications and tiers. The ui.* fields hold what the person chose on the screen: the tab of missions, the category of rewards, the kind of history entries.

Above the canvas open the Scenario list. Choose Configure values… and set user.checkedInToday, user.newCount or the list newMissions to Empty: the dot on the bar, the button on the streak card and the empty state of Missions change. All states shows them side by side. More about scenarios: Data.