Night Arcade Cabinet · ReactLynx Case Study

SPEEDY BIRD

Flappy Bird, but every pipe makes the run faster.

1.00×
Starting Speed
+1%per pipe
100platinum run

Space / Click / Tap to flap once the run starts.

Space / Click Flap · Tap on mobile

Rules of the run

EVERY PIPE TURNS UP THE SPEED

Speedy Bird keeps the familiar flap-and-thread rhythm, then tightens the run after every clear. Pipes move 1% faster per point, so a calm opening becomes a precision test by the medal tiers.

1.00×LaunchNormal pace
10BronzeWake up
25SilverFast hands
50Gold1.50× zone
100Platinum2.00× chaos
Medal CabinetTry for Platinum
Bronze10 pipes
Silver25 pipes
Gold50 pipes
Platinum100 pipes

Builder's manual

BUILT AS A REAL CROSS-PLATFORM GAME

The Canvas demo above is a separate browser implementation of the ReactLynx game's core physics, tile-based pipes, sprite digits, and state machine. Its 400×600 viewport fits the phone frame; the ReactLynx game uses 400×750 logical dimensions. Canvas audio works in the browser, while ReactLynx native and worker-based audio still need a bridge implementation.

ENGINE / 17MS TICKS

Physics that stay readable as speed climbs

Gravity, velocity-based flaps, rotation, AABB collision, and constant-gap pipe spawning keep runs fair while the world accelerates.

SPRITES

Tile-Based Pipes

Pipe bodies repeat from pixel tiles with cap sprites, avoiding stretched art at every obstacle height.

WORLD

Parallax Layers

Background, pipes, and ground move at different speeds to make the tiny scene feel alive.

LYNX

ReactLynx Port

Shared TypeScript powers the Android host and Lynx web preview. iOS source is included for local Xcode project setup; this page runs the separate Canvas demo.

SHIP

CI/CD Ready

GitHub Actions check bundles, Android builds, and docs, then publish Pages and release artifacts. iOS archives require a tracked Xcode project and are always unsigned.

Native UI framework

WHAT IS LYNX?

Lynxis ByteDance's open-source cross-platform native UI framework. ReactLynx brings React patterns to a native rendering engine instead of a WebView, which makes this project a compact game-shaped proof of the framework's rendering, touch input, asset, and release pipeline.

React componentsNative renderingCSS transformsRspack toolchainAndroid · WebiOS source scaffold

Source and docs

BUILDER'S MANUAL

Open the manual when you want implementation details, native host setup, or release notes.

View full documentationView source

01

Start Here

Project overview, Lynx setup, architecture, and getting started.

02

Game Engine

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

03

Architecture

File structure, game loop, component hierarchy, and module breakdown.

04

Assets & Sprites

Sprites, audio files, tile-based rendering, and asset attribution.

05

Run It Locally

Controls, local setup, and Lynx Explorer testing for mobile devices.

06

Dependencies & Upgrades

Current versions, compatibility holds, native toolchains, and verification.