Speedy Bird

A pixel art side-scroller built with Lynx cross-platform framework.
Play it right here — tap or press Space to flap.

Space / Click Flap  ·  Tap on mobile

About the Game

Why "Speedy Bird"?

Unlike the original Flappy Bird, Speedy Bird features progressive difficulty — the game gets 1% faster with every pipe you clear. Pipes scroll quicker, the ground rushes beneath you, and spawn timing tightens to keep the spacing constant. By pipe 50 you're flying at 1.5× speed. By pipe 100, it's 2×. How fast can you go?

About the Project

This game started as a vanilla HTML5 Canvas Flappy Bird clone and was ported to ByteDance's Lynx framework — a cross-platform native UI engine that renders on iOS, Android, Web, and Desktop from a single TypeScript codebase.

The purpose of this project is to learn how to build a Lynx app from scratch, and to explore how to automate the entire build and release pipeline through GitHub Actions — from a single commit all the way to the app stores.

The web version above runs as a pure JavaScript canvas implementation matching the exact physics, collision detection, and tile-based pipe rendering of the Lynx native build.

Physics

Gravity, velocity-based flap, rotation tied to speed. Feels like the original.

Tile-Based Pipes

Pipes built from repeating 26×25 pixel-art tiles with mouth caps. Any height, no stretching.

Parallax

Background scrolls at 0.2px/frame, ground at 2.7px/frame — multi-layer depth illusion.

Medal System

Bronze, silver, gold, platinum medals awarded based on score. Displayed on the game-over panel.

Cross-Platform

Built with Lynx (ReactLynx + TypeScript). Runs natively on iOS and Android via Lynx Explorer.

Pixel Perfect

All sprites extracted from the original sprite sheet. Canvas renders with crisp pixel scaling.

What is Lynx?

Lynx is an open-source cross-platform native UI framework created by ByteDance (the company behind TikTok). Open-sourced in early 2025, it lets developers use web technologies — TypeScript, CSS, and React — to build truly native UIs that render on iOS, Android, Web, macOS, Windows, and HarmonyOS from a single codebase.

Unlike WebView-based solutions, Lynx has its own native rendering engine written in C++. It uses a dual-threaded architecture: a background thread runs React reconciliation and business logic, while the main thread handles rendering and immediate UI responses. This gives native performance with a web-like development experience.

ReactLynx

React 17+ compatible. Functional components, hooks, context, JSX/TSX — the same React you already know.

Native Rendering

No WebView. A C++ engine renders native UI elements on each platform with GPU-accelerated CSS transforms.

CSS Styling

200+ CSS properties, flexbox, grid, animations, transitions, transforms, and filters — all native.

Rspack Toolchain

Built on Rspack/Rsbuild for fast builds. Hot module replacement, TypeScript, and asset bundling out of the box.

6 Platforms

Android 5+, iOS 10+, Web, macOS, Windows, and HarmonyOS. Write once, deploy everywhere.

Battle-Tested

Used internally at ByteDance before open-sourcing. 14,000+ GitHub stars and active development.

Documentation

README

Project overview, Lynx setup, game architecture, and how to run on mobile.

Wiki — Home

Quick-start guide and navigation to all wiki pages.

Wiki — Game Mechanics

Physics, collision detection, scoring, and game state machine.

Wiki — Code Walkthrough

File structure, game loop, canvas setup, and module breakdown.

Wiki — Assets

Sprites, audio files, and asset attribution.

Wiki — Getting Started

How to run locally, controls, and Lynx Explorer setup for mobile testing.