Local · Deterministic · No AI
A browser-based studio for building pixel-perfect X (Twitter) profile pictures and banners that align exactly — on both desktop and Android. Everything runs on your machine. No uploads. No API calls. No generative AI.
Full studio UI — source panel, live preview, priority and continuation controls
Desktop web preview — 1500 × 500 banner with 400 × 400 profile overlay
Android app preview — pixel-accurate avatar position verified against X Android 12.2
X's desktop and Android apps place the avatar circle at slightly different positions on the banner. A banner that looks aligned on desktop can show a mismatched crop on Android — and vice versa. Boundary Lock Studio renders both previews simultaneously using geometry verified against the X Android APK (Jetpack Compose layout constants, dp-to-pixel conversion, and JPEG upload flattening behavior) so you can see the exact result before you upload anything.
No npm install. No build step. Just double-click launch.bat.
launch.bat
The launcher auto-detects Python or Node.js, picks a free port, and opens the studio in your browser. Keep the terminal window open while using the tool.
Requirements: Python 3 or Node.js — either one is enough.
Mirrors the native X profile-picture flow:
- Click Select profile picture and choose an image.
- Reposition and zoom the image inside the X-style square crop window.
- Click Apply — the profile is locked.
- The 1500 × 500 banner is rebuilt automatically from the locked crop.
- Export both files.
The locked profile defines a single global source transform. It is applied uniformly across every banner pixel — no independent banner crop, circular correction, blending, or local warp. If the transform does not cover the full banner area, the studio reports the gap and fills it with the selected background.
For projects that start from a banner:
- Choose Banner → profile.
- Upload a banner and adjust with the banner tools.
- Select Desktop, Android, or Shared layout.
- Export the generated profile and adjusted banner.
| Mode | Description |
|---|---|
| Best shared (recommended) | One compromise alignment that works acceptably on both desktop and Android |
| Mobile-perfect | Targets Android layout exactly; desktop may be slightly off |
| Desktop-exact | Targets desktop layout exactly; Android may be slightly off |
Desktop and Android priority controls are available in Banner → profile mode. They are hidden in Set profile mode so the editor behaves like the native X flow.
| File | Size | Format |
|---|---|---|
| Profile picture | 400 × 400 | PNG |
| Banner | 1500 × 500 | PNG |
Exported files use the uploaded source filename followed by -profile.png and -banner.png.
When the source image does not cover the full banner width, the studio can extrapolate the banner edge by detecting straight features (lines, borders, geometry) that cross the boundary and extending them into the uncovered area. Detection sensitivity is adjustable.
The Android preview uses layout constants extracted from the X Android Jetpack Compose profile header (com.x.profile.header / UserProfileHeaderUi.kt), verified against:
12.1.1-release.0(versionCode 312011000)12.2.0-release.0(versionCode 312020000)
Active constants (X 12.2 Compose path):
| Property | Value |
|---|---|
| Banner aspect ratio | 3.0 |
| Avatar image size | 80 dp |
| Profile horizontal padding | 12 dp |
| Under-banner layout reserve | 60 dp |
| Visible avatar overlap | 28 dp |
See ANDROID_REVERSE_ENGINEERING.md for the full geometric derivation, pixel-level verification results, and versioning notes.
With Node.js installed:
node core.test.mjsThe test suite covers: profile locking, safe cancellation, Apply-only profile replacement, automatic banner rebuilding, full-circle source ownership, and the original banner-derived rendering path.
Additional integration tests:
node shared-mode-test.mjs
node desktop-priority-shared-test.mjs
node joint-adjustment-test.mjs
node test-pair-aware.mjs
node warp-test.mjsboundary-lock-studio/
├── index.html # Studio web interface
├── app.js # UI application logic
├── core.js # Geometry engine and canvas rendering
├── styles.css # UI styles
├── server.js # Minimal Node.js static server
├── launch.bat # Windows one-click launcher (Python or Node.js)
├── core.test.mjs # Main unit test suite
├── shared-mode-test.mjs # Best Shared mode integration tests
├── desktop-priority-shared-test.mjs # Desktop priority integration tests
├── joint-adjustment-test.mjs # Multi-pass adjustment tests
├── test-pair-aware.mjs # Pair-aware banner integration tests
├── warp-test.mjs # Coordinate warp tests
├── weight-sweep.mjs # Parameter sweep diagnostic
├── overlap-analysis.mjs # Boundary overlap diagnostic
├── ANDROID_REVERSE_ENGINEERING.md # Android geometry derivation and verification
├── VERIFICATION.md # Implementation evidence and QA log
└── docs/screenshots/ # UI screenshots
ISC