Skytail

An endless flight with the Coyotiv mascot.
One TypeScript codebase. Runs in the browser, and compiles ahead of time to native macOS and Xbox apps with no JavaScript engine.

---

Fly over a ring-shaped world that is generated as you go. Collect yellow stars to keep your energy up, dodge red bombs, and see how far you get. Each level is one full day: you take off at dawn and fly through noon, dusk and a starlit night before the sun comes up again.

Skytail builds on Karim Maaloul's 2016 Codrops tutorial The Aviator. It keeps the original game's idea and rebuilds everything else: a deterministic world generator, a mascot that moves on spring physics, a day-night sky, a reactive sound mix, and a native build pipeline.

Gallery

How to play

Your energy drains the whole time you fly. Each star gives back 3 points and each bomb you hit takes 10. When your energy runs out, the game ends.

• Steer with the mouse, the arrow keys or WASD, or a gamepad's left stick. Gamepads work in the browser and on Xbox. Release the stick before you switch to the mouse or keyboard.
• Start or replay with Space, Enter, R, a click or the A button.
• Do a barrel roll with F or the Y button. Collect every star in a wave and the mascot rolls on its own.
• Every 1,000 units of distance is a new level. Speed rises during a level, then resets to a slightly higher starting speed at the next one. Each level sends bigger bomb waves.

Under the hood

One codebase, three platforms

The game, world, HUD and render loop live in src/ and are shared by every platform. Each platform only adds a thin entry point.

flowchart LR
  game["Game code in src/<br/>TypeScript + three.js"]
  game --> web["web/main.ts<br/>Vite build"] --> browser["Browser<br/>WebGL"]
  game --> mac["index.tsx<br/>gea build --target macos"] --> macos["macOS app<br/>C++ · ANGLE · Metal"]
  game --> xbox["xbox/index.ts<br/>npm run build:xbox"] --> console["Xbox app<br/>C++ · UWP · ANGLE"]

• The same three.js renderer on every platform. On native builds, src/native-app.ts creates a native WebGL 2 context and passes it to the unmodified three.js WebGLRenderer. GeaStack's @geastack/native-webgl-angle host provides the context through ANGLE, which runs on Metal on macOS.
• The window is TSX. src/app.tsx builds the macOS view tree with <NSView> elements from @geastack/apple.
• Web Audio without a browser. The sound code uses standard Web Audio calls. On native builds, GeaStack provides a Web Audio-shaped graph engine: it renders through AVAudioSourceNode on macOS and XAudio2 on Xbox.
• Text without a browser. The browser version draws text with troika-three-text. Native builds swap in pre-baked glyph atlases for Inter and Unbounded.
• Xbox renders at 4K. xbox/three_uwp_main.cpp is a C++/CX app that renders at a fixed 3840×2160. It reads the gamepad through Windows.Gaming.Input.

A world generated as you fly

src/worldgen/ builds the world one cell at a time, just before it comes into view.

• Climate first. Four noise fields (temperature, moisture, relief and detail) come from a custom 2D simplex noise with no permutation table.
• Biomes in stretches. The world is a chain of stretches, each 32 to 48 columns wide. Temperature weights the biome choice: alpine leans cold and desert leans hot. An adjacency table keeps neighbours sensible, so desert never borders conifer forest. Borders wander along noise-warped lines, and the ground colour, tree density and species blend across them.
• Seasons roll across the map. Each season lasts 400 columns. Snow cover is computed from the climate temperature, the season and the biome.
• Regions with a plan. Every 64 columns there's a chance of a river with a suspension bridge where the road crosses it, and a campsite with tents, log seats and a campfire. The road winds through a dry corridor and joins up across region borders.
• A skyline that never breaks. Distant ridges and mesas are placed so that each border has exactly one owner, which leaves no gaps on the horizon.

Run it in your browser

You need Node.js 22.15 or later.

git clone https://github.com/coyotiv/skytail.git
cd skytail
npm ci
npm --prefix web ci
npm run dev

Open the local URL that Vite prints.

The browser version lives in web/ and has its own package.json. That is why there are two install commands.

To make a production build in web/dist/ and preview it:

npm run build
npm run preview

Build the macOS app

You need the Xcode Command Line Tools (xcode-select --install). Run this from the repository root:

npx gea build --target macos
open dist/macos/skytail/Skytail.app

gea is the GeaStack CLI. It compiles the game, three.js included, to C++ and builds a native app. The first build can take 15 minutes or more.

Build for Xbox

Xbox builds run on a remote Windows build host and are installed on an Xbox in Developer Mode. The local machine needs bash, SSH, SCP and tar. The Windows build host needs:

• Visual Studio 2026 with the C++ and UWP tools
• clang-cl and CMake
• Windows SDK 10.0.26100.0
• The UWP ANGLE DLLs libEGL.dll, libGLESv2.dll and d3dcompiler_47.dll

Build with your own host and directories:

npm run build:xbox -- --host build-host --remote-dir C:/skytail-build --angle-dir C:/uwp-angle

• --host is the SSH host of the Windows build machine.
• --remote-dir is the build directory on that host. Use an absolute path with forward slashes and no spaces.
• --angle-dir is the directory on that host that contains the UWP ANGLE DLLs.

You can also set GEA_XBOX_BUILD_HOST, GEA_XBOX_BUILD_DIR and GEA_XBOX_ANGLE_DIR instead of passing the flags.

To only generate and stage the build inputs locally, without the remote build:

npm run build:xbox -- --stage-only

To install and start the game on your Xbox, set GEA_XBOX_AUTH to your Device Portal credentials as username:password, then run:

npm run deploy:xbox -- --xbox xbox-address

You can set GEA_XBOX_HOST instead of passing --xbox.

Development

The code is in src/:

The browser entry point is web/main.ts. The native entry point is index.tsx. The Xbox host code is in xbox/.

Credits

Skytail builds on The Aviator by Karim Maaloul, published with Codrops in 2016.

The models and favicon come from Coyotiv. The audio was generated with ElevenLabs. The native builds are made with GeaStack.

License

The code is MIT licensed. Third-party source credits and license terms are in LICENSE.third-party. The Inter and Unbounded font licenses are in LICENSE.fonts.