Orbit website
Marketing site for Orbit, a calm planner for iPhone and Windows.
Next.js (App Router) + TypeScript + Tailwind v4, statically exported. Motion for React handles layout, scroll and springs; anime.js handles the ring, the dot and the staggered grid fills.
Run, build, test
npm install
npm run dev # http://localhost:3000
npm run build # static site in out/
npm test # runs Orbit's shared quick-add cases against the TS parser
npm run assets # after a build: regenerates OG/Twitter images and the apple icon
node scripts/serve-out.mjs 4000 # serve out/ with gzip, like a host would
Structure
src/styles/tokens.css: the one place for colours, radii and themes (light, dark, system + toggle).
src/lib/motion.ts: every spring, stagger and reveal preset. src/lib/media.ts: optional real screenshots. src/lib/links.ts: TestFlight / download URLs.
src/lib/quick-add.ts: TS port of Orbit's shared parser; scripts/test-quick-add.ts checks it against the repo's 34 cases.
src/components/sections/*: one component per section. devices/ holds the iPhone and Windows frames and live Today screens. widgets/ the widget styles.
kokonut/ and bklit/: see the note below.
Kokonut UI and Bklit UI
The build sandbox could not reach their registries, so components/kokonut (bento grid, footer, button style) and components/bklit (habit grid, week bar, mini bars) are local components that follow their patterns, restyled to Orbit's tokens. To use the originals, add them with the shadcn CLI (npx shadcn@latest add <registry url>) and map the props; the call sites are small.
Configuration
Set before building: NEXT_PUBLIC_TESTFLIGHT_URL (the beta link; defaults to a placeholder), NEXT_PUBLIC_WINDOWS_URL (defaults to the Orbit releases page), NEXT_PUBLIC_SITE_URL (for canonical, sitemap and social images), NEXT_PUBLIC_BASE_PATH (GitHub Pages project sites only).
Deploy
Vercel: import the repo. Framework: Next.js. It detects the static export; add the env vars above. Done.
GitHub Pages (optional, the workflow is manual-only): Settings → Pages → Source: GitHub Actions, then run the "Deploy to GitHub Pages" workflow from the Actions tab. Optionally add a repository variable TESTFLIGHT_URL. Push to main; .github/workflows/pages.yml builds with the right base path and publishes. For a custom domain or a <user>.github.io repo, drop the base path line in the workflow.
Notes
- Motion respects
prefers-reduced-motion: movement becomes fades, the Today section is not pinned.
- Below-the-fold sections are server-rendered HTML that hydrate as they near the viewport (
LazyIsland) to keep first load fast.