DEV Community: Echo Zhang

How I Built an In-Browser AI Image-to-Image Studio with Character Consistency (Next.js, Cloudflare Pages & FLUX.1)

Echo Zhang — Tue, 10 Nov 2026 23:54:14 +0000

When generating images with modern AI models, one of the most frustrating limitations is character and composition drift. You enter a prompt, get an interesting portrait, change one word to alter the outfit or background, and the face completely changes.

To solve this, I designed and built Photo2Photo AI — a browser-based image-to-image studio focused specifically on consistent character rendering, sketch-to-photo conversion, and high-fidelity photo restyling without losing the subject's identity.

In this article, I want to walk through the system architecture, the dual-tier AI inference pipeline, and the engineering decisions behind edge-rendering on Cloudflare Pages.

🏗️ 1. Architecture Overview

Here is the high-level architecture:

[Browser Client]
  │ (Client-side WebP compression < 4MB)
  ▼
[Cloudflare Pages Edge Network]
  ├─ Static Assets & ISR Pages
  ├─ Turnstile Human Verification
  └─ Cloudflare D1 (Serverless SQLite Ledger) & Cloudflare R2 (Object Storage)
  │
  ▼
[Multi-Engine Inference Gateway]
  ├─ Fast Tier (ByteDance Seedream 5.0 Flash) — ~12s rapid turnaround
  └─ Studio Pro (FLUX.1 Kontext Pro) — High commercial depth & 4K upscaling

Why Cloudflare Pages + Next.js 15?

We opted for Next.js 15 compiled via @cloudflare/next-on-pages. This gives us:

Zero Cold-Start Worldwide: Cloudflare's global edge serves SSR and API routes within 50ms from almost any country.
Built-in Bot Protection: Cloudflare Turnstile validates human interaction seamlessly without annoying CAPTCHA puzzles.
Decentralized Storage: Uploaded reference photos land directly in Cloudflare R2 with automatic lifecycle expiration rules (free user outputs purge after 24 hours).

⚡ 2. The Core Challenge: Preserving Identity in Image-to-Image

Traditional text-to-image models hallucinate geometry from scratch. To achieve true identity lock:

We allow users to provide up to 4 reference photos of the same subject.
The reference embeddings are mapped to spatial cross-attention layers.
We support dedicated operational presets for distinct real-world workflows:
- Consistent Character AI Studio: Preserving facial bone structure, skin tone, and hair textures while altering background and lighting.
- Sketch to Image AI Converter: Translating black-and-white architectural wireframes or concept pencil sketches into hyper-realistic scenes.
- Old Photo Restoration AI: Repairing scratches, tears, and dust from vintage portraits while colorizing authentic historical skin tones.
- AI Product Photography Studio: Staging tabletop packaging onto luxury studio pedestals with realistic contact shadows.
- Free Image-to-Image Generator: Low-barrier playground for quick style transfer and creative iterations.

🚀 3. Dual-Tier Inference: Balancing Speed vs. Commercial Quality

Different users have fundamentally different latency and quality budgets:

Tier	Engine / Model	Latency	Credit Cost	Best For
Fast	ByteDance Seedream 5.0 Flash	~10–12 sec	1 Credit	Quick drafts, concept validation, social posts
Studio Pro	FLUX.1 Kontext Pro	~20–25 sec	3 Credits	Commercial advertising, realistic skin textures, 4K export

By decoupling the pipeline into Fast and Studio Pro, users can iterate rapidly on the Fast tier before spending compute on the Studio Pro engine for final 4K renders.

🔒 4. Client-Side WebP Compression: Never Upload Heavy Payloads

Rather than letting users upload 25MB RAW or uncompressed PNG files to the server (clogging bandwidth and slowing upload queues), we process all incoming images in the browser before dispatching:

// Compress image client-side to WebP (max edge 2048px, quality 0.88)
export async function compressImageToWebP(file: File): Promise<Blob> {
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await img.decode();

  const maxEdge = 2048;
  let { width, height } = img;
  if (width > maxEdge || height > maxEdge) {
    if (width > height) {
      height = Math.round((height * maxEdge) / width);
      width = maxEdge;
    } else {
      width = Math.round((width * maxEdge) / height);
      height = maxEdge;
    }
  }

  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext("2d")!;
  ctx.drawImage(img, 0, 0, width, height);

  return new Promise((resolve) => {
    canvas.toBlob((blob) => resolve(blob!), "image/webp", 0.88);
  });
}

This simple optimization reduced median upload times from 4.2 seconds down to 320ms.

🎁 5. No Subscription & Free Trial Philosophy

We decided against recurring monthly subscriptions. You can try 3 generations for free without even signing up:

Check out the live studio: https://photo2photo.io
Or review our transparent pricing tiers: Photo2Photo Pricing

Feedback and technical critiques are very welcome in the comments!

Why We Built an In-Browser Screenshot Redactor with Zero Server Uploads

Echo Zhang — Sun, 08 Nov 2026 05:15:40 +0000

Sharing screenshots during code reviews, bug reports, Discord chats, or customer support often exposes sensitive data: API tokens, bearer keys, and PII.

Many developers default to using translucent marker pens on mobile or uploading images to third-party cloud redactors. Unfortunately, brightness-curve adjustments and automated de-blurring tools like Depix can reverse partial blur or translucent marks. Furthermore, uploading confidential screenshots to remote servers is a security risk.

To solve this, I built Bluro (https://bluro.pro) - a fast, 100% client-side privacy tool:

Key Technical Pillars

Zero Cloud Uploads: Built entirely with HTML5 Canvas API and GPU acceleration directly in memory. Images never touch a remote server, ensuring complete data sovereignty. It even works completely offline.
Solid Blackout Mode: Permanent mathematical pixel occlusion (#000000), completely immune to de-blurring or contrast recovery exploits. Also supports adjustable Gaussian blur and pixelation when aesthetic masking is preferred.
Fast Clipboard Workflow: Paste screenshots directly with Cmd+V / Ctrl+V, drag bounding boxes across sensitive tokens, and copy out via the Async Clipboard API in under 5 seconds.
Text Redaction & Censor Bars: Includes a dedicated Redacted Text Generator for copy-pasting unicode blackout bars, plus transparent black censor bar PNGs for video editing.
Cross-Platform Markdown Spoilers: 1:1 Discord chat bubble emulator with click-to-reveal masks, plus translation to Reddit and Telegram.

The project is built with Next.js static export and hosted on Cloudflare Pages.

Try it out here: https://bluro.pro (or the Screenshot Redactor directly). Feedback, bug reports, and suggestions are warmly welcome!

Building a Zero-Ad, Sub-100ms Database & Build Planner for VAMPIR on Astro 4

Echo Zhang — Thu, 29 Oct 2026 11:00:55 +0000

Why Modern Gamers Deserve Better than Bloated Wikis

When Netmarble launched VAMPIR: Heir of Blood globally on October 28, 2026, thousands of players immediately needed answers:

Which classes excel in PvE vs PvP?
How does the Diamond farming exchange loop work?
Where are the verified coupon codes without clickbait expired lists?

Historically, gaming documentation has been plagued by ad-bloated MediaWiki or Fandom templates filled with auto-playing video players, layout shifts (CLS > 0.4), intrusive banners, and 4-second load times.

We decided to build an alternative: a clean, lightning-fast static web companion: VAMPIR Database & Tools.

Architectural Pillars: Speed, Precision & Zero Slop

1. Static Pre-Rendering on Astro 4 & Cloudflare Edge

Rather than hitting a relational database on every client visit, the entire wiki is pre-rendered at build time with Astro 4 and deployed to Cloudflare Pages edge nodes:

First Contentful Paint (FCP): < 90ms
Largest Contentful Paint (LCP): < 120ms
Cumulative Layout Shift (CLS): 0.00
Total JavaScript Payload: < 8 KB on guide pages

2. Client-Side Interactive Micro-Tools

Gamers don't just want text; they need interactive utility:

VAMPIR Coupon Codes Ledger: Live tracker with 1-click clipboard copy, verified against both the official Netmarble web coupon portal and in-game registration.
VAMPIR Class Tier List: Interactive 4-scenario matrix (PvE, PvP, Bosses, Farming) sourced from verified Korean meta benchmarks.
VAMPIR Build Planner: Client-side skill priority and stat calculator with instant URL state serialization.
Diamond Farming Calculator: Interactive revenue estimator for multi-alt farming based on active hours and spot tier.

3. Truth-Chain Grounding

Every skill scaling number, enhancement drop rate, and coupon expiration date is validated through an automated Socrates fact-ledger gate before deployment. No unconfirmed rumors or generic AI filler text.

Explore the Project

The project is live globally:

Main Portal: https://vampirmmo.com/
Strategy & Class Guides: https://vampirmmo.com/guides/
Codes Tracker: https://vampirmmo.com/codes/

Feedback and community data contributions are welcome!

Engineering a Weekly Deep Desert Rotation Tracker & Exchange Calculator for Dune: Awakening on Astro 4

Echo Zhang — Wed, 21 Oct 2026 09:10:52 +0000

The Engineering Challenge: Surviving Arrakis Without Latency

In Funcom's upcoming open-world survival MMO Dune: Awakening, Arrakis presents two distinct mechanical bottlenecks that survival players and guild quartermasters must constantly solve:

The Coriolis Storm Landscape Wipe: Every Tuesday at 00:00 UTC, a massive Coriolis storm sweeps across the Deep Desert, completely destroying unprotected player structures, altering map topology, reshuffling spice blows, and randomized Testing Station loot grids.
The High-Stakes Solari Exchange: The in-game player auction house charges non-refundable upfront deposit fees (up to 5%) alongside transaction sales tax (up to 8%), making high-value spice spice trading risky if sellers don't calculate break-even profit thresholds accurately.

Historically, gamers relied on ad-choked wikis or bulky spreadsheets running scripts. We wanted to build a zero-bloat, instantaneous companion tool running on pure static infrastructure: deepdesert.wiki.

Here is how we designed and engineered the real-time Coriolis Rotation Tracker and Solari Market Calculator using Astro 4 and client-side reactive components.

1. Zero-Backend Coriolis Wipe Countdown & Rotation Tracker

Because the Coriolis storm wipe occurs on a strict, server-authoritative weekly cycle (Tuesdays at 00:00:00 UTC), there is zero need to hit an active backend API on every pageview.

Instead, we modeled the landscape wipe on the client side with deterministic Unix epoch modulo arithmetic:

// Calculate remaining time until the next Coriolis storm reset (Tuesday 00:00 UTC)
function getNextCoriolisReset() {
  const now = new Date();
  const nextReset = new Date(Date.UTC(
    now.getUTCFullYear(),
    now.getUTCMonth(),
    now.getUTCDate() + ((2 + 7 - now.getUTCDay()) % 7 || 7),
    0, 0, 0
  ));

  // If today is Tuesday and it's already past 00:00 UTC, advance to next week
  if (nextReset <= now) {
    nextReset.setUTCDate(nextReset.getUTCDate() + 7);
  }
  return nextReset.getTime() - now.getTime();
}

By decoupling this schedule from database queries, the page loads in under 90ms via edge CDN caching while maintaining millisecond precision for players scouting extraction zones.

You can inspect the live countdown and map archive here:
👉 Weekly Deep Desert Rotation Map & Countdown

2. Interactive Solari Exchange & Tax Optimization Calculator

The Exchange economy features progressive tax brackets:

100 – 1,000 Solari: 5% upfront fee, 5% sales tax (Break-even: +10.5%)
1,000 – 10,000 Solari: 4% upfront fee, 6% sales tax (Break-even: +10.6%)
10,000 – 50,000 Solari: 3% upfront fee, 7% sales tax (Break-even: +10.8%)
50,000+ Solari: 2.5% upfront fee, 8% sales tax (Break-even: +11.4%)

To eliminate listing loss and deposit forfeiture when pricing refined Spice Melange, we built a sub-10ms reactive client island. It simulates upfront deposit liability, final sales tax cut, and exact net profit margins in real time.

Try the live tool:
👉 Dune: Awakening Exchange Fee & Break-Even Calculator

3. Architecture & Web Performance Stack

Framework: Astro 4 (Island Architecture, zero JS baseline)
Deployment: Cloudflare Pages distributed globally on 300+ edge POPs
Core Web Vitals: LCP 0.6s, CLS 0.00, INP < 30ms
Typography & UI: High-legibility brutalist desert HUD palette optimized for second-monitor gaming

Open-Source Dataset & Resources

We believe game databases should be open, clean, and community-verified:

🌐 Web Companion: https://deepdesert.wiki
📊 Exchange Calculator: https://deepdesert.wiki/market/
🗺️ Deep Desert Tracker: https://deepdesert.wiki/deep-desert/
📖 Solari Farming Guide: https://deepdesert.wiki/guides/solari-guide/
💻 Open Dataset on GitHub: https://github.com/emoqrty/dune-awakening-deep-desert-data

Have feedback on tax brackets or Coriolis timing? Drop your thoughts below!

Building a Sub-100ms Gunsmith Loadout & Ballistics Tool for Delta Force on Astro 4

Echo Zhang — Wed, 21 Oct 2026 09:03:12 +0000

Modernizing Extraction Tactical Shooter Tools

In high-stakes tactical extraction shooters like Delta Force (developed by Team Jade and published by TiMi Studio Group), gunsmith weapon tuning directly determines combat outcomes.

Between nuanced caliber penetration ratings (Tier 1 through Tier 6 armor piercing), recoil damping curves, and tight ergonomic draw times, operators need instant access to verified gunsmith configurations.

Traditional gaming wikis are burdened with heavy ad networks, autoplay video players, and slow mobile render latency.

We set out to build an ultra-fast, zero-ad companion and tactical tool suite: DF Loadouts & Ballistics Codex.

1. Ballistics & Armor Penetration Modeling

Combat in Delta Force Hazard Operations relies on a tiered damage mitigation model:

$$\text{Effective Damage} = \text{Base Damage} \times \left(1 - \frac{\text{Armor Rating} - \text{Penetration Value}}{100}\right)$$

When firing low-tier ammo against heavy composite helmets, shots deflect with severe damage falloff. Conversely, high-tier AP rounds (like 5.56x45mm M995 or 7.62x51mm M61) pierce Tier 5 armor with minimal resistance.

Our client-side Interactive Ammo & Ballistics Matrix computes time-to-kill (TTK), velocity curves, and penetration chances across all current calibers in real time.

2. Engineering Architecture on Astro 4

To support competitive squads checking weapon stats on dual monitors or mobile screens while waiting for matchmaking:

A. Sub-100ms Static Pre-Rendering

Every weapon attachment breakdown, tactical map route, and operator guide is pre-compiled to pure semantic HTML via Astro 4. The page payload clocks in under 45KB gzip, delivering an LCP (Largest Contentful Paint) under 110ms with 0 layout shift.

B. Reactive Gunsmith Code Exporter

The Gunsmith Codes & Meta Loadouts tool allows operators to copy one-click in-game import codes directly to their clipboard without needing third-party companion app installations.

C. 1:1 Sensitivity Calibration

Our Mouse Sensitivity Converter enables 1:1 true cm/360° translation between Delta Force and tactical benchmarks like CS2, Valorant, and Apex Legends.

3. Verified Data & Open Community Resources

All muzzle velocities, recoil stats, and gunsmith codes are verified against the active season client:

🔫 Meta Loadouts & Gunsmith Codes: dfloadouts.com/loadouts
🎯 Ammo & Ballistics Matrix: dfloadouts.com/tools/ammo-matrix
🗺️ Tactical Extraction Maps: dfloadouts.com/tools/maps
📦 Open Dataset on GitHub: github.com/emoqrty/delta-force-meta-loadouts

Operators and tactical squad leaders are welcome to test the builds and submit feedback for upcoming season updates!

Engineering a Real-Time World Seed Viewer & Biome Map for Valheim 1.0 on Astro 4

Echo Zhang — Wed, 21 Oct 2026 08:55:56 +0000

Procedural World Generation in Valheim 1.0

In Valheim, every Viking journey begins with a 10-character seed string that generates a massive 20,000-meter circular archipelago via layered fractal Perlin noise.

With the release of the 1.0 Deep North update, world generation expanded dramatically:

Radial Biome Rings: Meadows and Black Forest occupy the temperate center, followed by Swamps and Mountains, extending into southern Ashlands and polar Deep North hazards.
Trader Camps: Haldor and Hildir spawn across pseudo-random candidate coordinates, requiring extensive sailing exploration.

Unfortunately, existing legacy seed viewers often load bulky 50MB WebAssembly binaries that crash mobile browsers and are covered in disruptive video advertisements.

We engineered an ultra-fast, zero-ad companion and radial map visualizer: Valheim Map Wiki & 1.0 Seed Viewer.

1. Mathematical Modeling & Coordinate Triangulation

To help solo players and dedicated server admins plan forward bases and portal hubs, our tool models landmark distances mathematically:

$$\text{Distance} = \sqrt{(X_2 - X_1)^2 + (Z_2 - Z_1)^2}$$

Where $(X, Z)$ are in-engine world coordinate meters relative to the central sacrificial altar $(0, 0)$.

Our client-side Valheim 1.0 Seed Viewer plots candidate altars for Eikthyr, The Elder, Bonemass, Moder, Yagluth, and The Queen in milliseconds, allowing players to verify starter continents without spoiling terrain details.

2. Lightweight Web Architecture on Astro 4

To support Viking builders checking recipes or console commands mid-session:

A. Sub-100ms Static Pre-Rendering

Every biome guide, console command database, and building piece chart is pre-compiled to pure semantic HTML via Astro 4. The page delivers an LCP (Largest Contentful Paint) under 110ms with 0 cumulative layout shift.

B. Canvas-Driven Radial Schematic Map

The seed viewer visualizes radial biome rings using an optimized HTML5 Canvas element instead of heavy WebGL heaps, running at a smooth 60fps on mobile Safari and Chrome without eating device battery.

3. Verified Game Assets & Open Datasets

All seed algorithms and command syntax are verified against official Valheim 1.0 client files:

🗺️ Seed & Radial Map Viewer: valheimmap.wiki/seed-viewer
📜 Best 1.0 Seeds Guide: valheimmap.wiki/guides/valheim-best-seeds-1-0
💻 Console Commands & Item IDs: valheimmap.wiki/guides/valheim-1-0-console-commands
❄️ Deep North Boss Breakdown: valheimmap.wiki/guides/valheim-deep-north-kall-fimbulbringer-guide
📦 Open Dataset on GitHub: github.com/emoqrty/valheim-seed-database

Viking architects and server hosts are welcome to test the maps and share optimal seeds for community survival!

Building a Sub-100ms Armor Progression & XP Calculator for RuneScape: Dragonwilds on Astro 4

Echo Zhang — Tue, 20 Oct 2026 21:43:51 +0000

Modernizing RuneScape Companion Tools

When grinding survival MMORPGs like RuneScape: Dragonwilds, players constantly need exact calculations: smithing bar costs, armor slash/crush damage mitigation ratings, and remaining actions to hit skill level 99.

Historically, community wikis have been bogged down with intrusive interstitial ads, heavy tracking scripts, and slow mobile render times.

We engineered a lightweight, ad-free companion and calculation suite: RuneScape: Dragonwilds Codex & Tools.

1. Modeling Complex Leveling & Armor Math

In RuneScape: Dragonwilds, defensive stats scale non-linearly across multiple combat styles:

Armor Ratings: From Tier 1 Cloth to Tier 60 Dragonite, each tier has distinct resistances across Slash, Stab, Crush, and Dragonfire.
XP Progression Curves: XP needed for level $L$ follows exponential polynomial scaling:

$$\text{XP}(L) = \frac{1}{8} \sum_{x=1}^{L-1} \lfloor x + 300 \cdot 2^{x/7} \rfloor$$

Our web-based XP & Leveling Calculator models exact material consumption, estimated crafting cycles, and gold costs based on real-time client data formulas.

2. Fast Island Architecture on Astro 4

To support players running dual-screen setups or checking recipes on smartphones during gameplay:

A. Sub-100ms Static Pre-Rendering

Every guide, boss mechanic breakdown, and drop table is pre-compiled to pure semantic HTML via Astro 4. The entire payload delivers a sub-100ms Largest Contentful Paint (LCP) with 0 layout shifts.

B. Reactive Island for Armor Workbench

The interactive Armor Workbench Calculator runs as an isolated micro-hydrated component. Players can toggle full armor sets, compare set bonuses, and view effective health pools in real time.

3. Verified Game Assets & Open Datasets

All crafting recipes and boss data are verified against official game files:

🛡️ Armor Workbench & Defense Calculator: rsdragonwilds.wiki/#armor-workbench
⚡ XP & Skill Leveling Calculator: rsdragonwilds.wiki/calculator
👑 Dragon Queen Boss Mechanics: rsdragonwilds.wiki/guides/runescape-dragonwilds-dragon-queen-boss-mechanics
📦 Open Dataset on GitHub: github.com/zjianchun/runescape-dragonwilds-data

Feedback and community corrections are welcome as we prepare for upcoming game updates!

Engineering Real-Time Artillery Calculators & Tactical Maps for WARDOGS on Astro 4

Echo Zhang — Tue, 20 Oct 2026 21:21:37 +0000

The Challenge of 100-Player Tactical Warfare

In large-scale tactical military shooters like WARDOGS (developed by BULKHEAD and published by Team17), split-second decisions dictate battle outcomes across massive 100-player combined-arms maps.

Between high-stakes Control Zone captures, a dynamic $10,000 match economy, and devastating indirect artillery barrages, players need real-time data at their fingertips. Unfortunately, traditional gaming wikis are bloated with autoplay video ads, heavy scripts, and laggy mobile interfaces.

We set out to build an ultra-fast, zero-ad companion and tactical tool suite: WARDOGS Tactical Map & Loadout Codex.

1. Mortar & Artillery Ballistics Modeling

One of the most complex aspects in WARDOGS is indirect fire coordination. Mortar crews must calculate elevation angles (measured in NATO mils or degrees) based on target distance and elevation delta:

$$\theta = \frac{1}{2} \arcsin\left(\frac{g \cdot d}{v_0^2}\right)$$

Where:

$d$ is horizontal ground distance (meters)
$v_0$ is muzzle velocity based on powder charge rings (1–4)
$g$ is standard gravitational acceleration ($9.81 \text{ m/s}^2$)

Our client-side Mortar & Artillery Calculator computes milliradian adjustments instantly as players pan across grid coordinates, factoring in flight time down to a tenth of a second so squad leaders can time smoke screens and high-explosive barrages perfectly.

2. Engineering Architecture on Astro 4

To support competitive squads playing across dual monitors or mobile screens, the web companion needed desktop-app responsiveness:

A. Sub-100ms Static Pre-Rendering

Every weapon breakdown, vehicle logistics chart, and strategy guide is pre-compiled to pure semantic HTML via Astro 4. The page weighs less than 45KB gzip, delivering an LCP (Largest Contentful Paint) under 100ms on global CDNs.

B. Micro-Hydrated Tactical Map

The WARDOGS Interactive Tactical Map runs as an isolated canvas component. It renders Control Zone capture radii, high-value Hot Zone cash multipliers, and vehicle spawn points with smooth 60fps pan and zoom without bogging down the browser.

C. Zero-Dependency Loadout Theorycrafting

Players can configure squad loadouts using the WARDOGS Loadout Builder, budgeting initial cash reserves against body armor, primary weapon attachments, and anti-tank munitions.

3. Verified Data & Open Community Resources

All damage curves, armor penetration multipliers, and economy values are cross-checked against official Steam client builds:

🗺️ Interactive Tactical Map: wardogsloadout.wiki/tools/interactive-map
🎯 Artillery & Mortar Calculator: wardogsloadout.wiki/tools/artillery-calculator
🛡️ Squad Loadout Builder: wardogsloadout.wiki/tools/loadout-builder
🔫 Weapons Tier List & Ballistics: wardogsloadout.wiki/guides/wardogs-weapons-tier-list
📦 Open Dataset on GitHub: github.com/zjianchun/wardogs-loadout-data

Squad leaders and artillery spotters are welcome to test the calculators and submit feedback for upcoming patch updates!

Building a Zero-Ad, Sub-100ms Build Planner for Shape of Dreams on Astro 4

Echo Zhang — Tue, 20 Oct 2026 21:03:22 +0000

The Problem with Gaming Wikis in 2026

If you play deep roguelites or action RPGs like Shape of Dreams, you know the pain of looking up game mechanics.

Historically, community documentation has been monopolized by ad-bloated MediaWiki or Fandom hubs packed with autoplaying video banners, intrusive interstitials, and slow 4-second page loads. Worse yet, patch balance numbers are frequently out of date, leading players to make suboptimal build choices.

We decided to build an open, zero-ad, client-side web companion: Shape of Dreams Wiki & Interactive Build Planner.

Here is how we designed and engineered it for sub-100ms performance and verified accuracy.

1. Deep Mechanics & Data Modeling

Shape of Dreams features intricate theorycrafting layers across its 9 Travelers (including Cetus from the recent v1.4 Starless Path update):

93 Essences: Unique passive gems modifying skill behavior, with complex damage scaling and elemental conversions.
196 Hero Stars: Passive celestial talent nodes tailored for each character.
Memories (Active Skills): Dual-slot abilities with cooldown thresholds and combo mechanics.

The cooldown reduction in the game follows a diminishing return curve based on Memory Haste:

$$\text{Actual Cooldown} = \frac{\text{Base Cooldown}}{1 + \frac{\text{Memory Haste}}{100}}$$

To model this accurately without game client de-sync, our build engine consumes verified game-asset schemas directly, ensuring exact floating-point precision for damage amplification, barrier conversion, and cooldown caps.

2. Engineering Architecture: 0-Backend, Instant Client State

To guarantee instantaneous feedback when theorycrafting builds on mobile or desktop, we eliminated server roundtrips:

A. Static Pre-Rendering with Astro 4

All database pages—including the compendium of 93 Essences and character sheets—are pre-rendered to pure semantic HTML.

LCP (Largest Contentful Paint): < 120ms
CLS (Cumulative Layout Shift): 0.00
Third-Party Tracker Bloat: Zero

B. Micro-Hydrated Island for the Calculator

The Shape of Dreams Build Planner runs as an isolated, lightweight reactive island. When swapping a Memory or socketing an Essence, active DPS, effective cooldowns, and defense stats recalculate in under 16ms within a single animation frame.

C. Stateless URL Serialization

Instead of requiring user sign-ups or PostgreSQL databases for saving builds, entire character configurations serialize into a compact base64 URL hash:

// Compact state serialization for instant sharing
const serializedState = btoa(JSON.stringify({
  traveler: 'cetus',
  memories: ['WinterDive', 'Permafrost'],
  essences: ['Gem_L_SolarEye', 'Gem_E_Twilight'],
  stars: [1, 5, 12]
}));
window.location.hash = `build=${serializedState}`;

Players can copy their URL and immediately share full build setups on Discord or Reddit without creating accounts.

3. Open Source Datasets & Live Tools

We believe game databases should be accessible to everyone in the community. We have published the cleaned datasets and interactive tools openly:

🎮 Main Hub & Database: shapeofdreams.wiki
🛠️ Interactive Build Planner: shapeofdreams.wiki/builds
💎 All 93 Essences Compendium: shapeofdreams.wiki/essences
📦 Open Game Dataset on GitHub: github.com/zjianchun/shape-of-dreams-database

Feel free to test out build synergies and let us know what features or calculations you'd like to see next!