Terranova · Developer onboarding

Terranova

A client-only finance app where the AI builds the UI — and you're here to build its animation showcase.

The app

A finance app with no backend at all.

Terranova is client-only and BYOK — your own API keys, on your own device. The AI renders the UI; nothing runs on a server.

Client-only

A React Native app talking directly to third-party APIs. Anything that looks like a backend call is a direct call or an on-device stub.

BYOK

Bring-your-own-key — API keys are pasted in Settings and live in secure storage on the device.

AI builds the UI

A UI-language renderer turns the model's reply into native components. Background context only — not needed for animation work.

What that means for you No backend to run. npm install and you're building.
Tech stack

Two layers: the app, and your toolkit.

App layer
React Native 0.81 the app platform
Expo SDK 54 dev-client build
React 19 TypeScript throughout
App.js custom navigation
no backend client-only · BYOK
Animation layer
Reanimated movement — the default
Skia custom-drawn visuals
gesture-handler drag, swipe, pan
Lottie pre-made JSON motion
expo-haptics tactile feedback
expo-linear-gradient gradient fills

The AI side — the UI-language renderer — is background context. Not needed for animation work.

First run

Expo Go will not run this app.

The #1 blocker

This is an Expo dev-client build with native modules — Skia, secure-store, audio. You build a real iOS app once, then iterate.

You need

A Mac with Xcode, or a plugged-in iPhone. No backend to run — the app is client-only.

01
npm install

dependencies

02
npx expo prebuild -p ios

generates the native ios/ project

03
npx expo run:ios

build + boot in the iOS Simulator (or --device for a phone)

04
npx expo start

reload an already-installed build — day to day, this is all you run

Where to start

README first. The docs back you up.

README.md

The repo's landing page and entry point — it carries the orientation. The rest are supporting documents in docs/ — go through them, reach for them as you work.

01 interactions-catalog.md the catalog of interactions already in the app — what exists and where it lives
02 extending.md recipes — add a card, add a screen
03 design-system.md tokens + component catalog + APIs
04 verifying-changes.md how to type-check and confirm a change
05 architecture.md the big-picture map
Your mission

Build the interactions showcase.

~35 showcase animations

Each one is a small, polished interaction demo — buttons, loaders, gestures, waveforms — staged inside the app's own showcase pager.

Where it lives

In the app: the spaces (star) menu → the Interactions tile. Page through with the arrows; ✕ closes.

The work area

Everything lives in screens/interactions/

registry.js the DEMOS map — one entry per atom — plus the SLIDES pager (solo · board · custom)
InteractionsPage.js the pager itself — branches on slide kind
GroupBox · DemoBoard staging surfaces — plus ControlsBoard, the hand-laid page one
<YourDemo>.js one file per demo — yours go here
01 Build the demo file One focused component, staged on a board.
02 Add it to DEMOS Register the atom in registry.js.
03 Reference it in SLIDES Give it a slide; the pager picks it up.
How we work

Reuse by default. Fork only to modify.

Default — reuse

A demo imports the real component and stages it. The component stays canonical; the showcase never drifts.

Exception — fork

Copy into screens/interactions/ only when modifying an animation — never edit the real component to experiment.

Mark the fork // Canonical: components/<Name>

the header comment on every fork

Track its state

The catalog changelog states it: exploring → approved → promoted.

Conventions & guardrails

Four rules that keep main healthy.

01 · Tokens Tokens only

Colors, spacing, type come from tokens/. No raw hex, no hardcoded fonts.

02 · Components Design system first

Reach for design-system components before ad-hoc UI.

03 · Type-check The baseline is 15

npx tsc --noEmit shows 15 pre-existing errors in agency code. Keep it at 15 — new ones are yours.

04 · Read-only Don't touch the backup

terranova-main-agency/ is a read-only reference — excluded from the bundler and TypeScript. Read it; never modify it.

Git flow

Branch, PR, merge — main always works.

01 Branch off main e.g. add-checkbox-animation
02 Commit & push Small commits, pushed to GitHub.
03 Open a PR The page showing exactly what changed.
04 Address review Comments resolved on the branch.
05 Merge Into main; the branch is deleted.
Scope One PR per animation — reviews stay fast and reversible.
The animation brief

Every animation has a spec. You never guess.

Trigger

What starts it — tap, on-mount, drag, or a continuous loop.

Reference

A Figma frame, a screen recording, or a precise description.

Done =

The acceptance bar — "finished" is unambiguous.

One row per animation in docs/developer-onboarding.md §7. Pick a row, branch, build, open the PR.