Problem

Energy Recharge (ER) is one of the most critical build stats in Genshin Impact, yet players guess their %ER using stale spreadsheets and outdated guides.

ER requirements depend on a long chain of variables — burst cost tier, particle generation, same-element funneling, weapon passives, constellations, artifact substats — and existing community tools only cover some characters. The challenge: build a fast, precise, continuously accurate calculator that gives ER targets for any team, with zero guesswork.

Process

Calculation Engine

Source-per-service architecture where every energy source (particles, funneling, passives, weapon procs, constellations) is an independently tested calculator, orchestrated per rotation. A data drift validator fails the build whenever game data and engine logic fall out of sync.

Game Data Pipeline

Scripted generation of derived per-character data from raw game data, validated before every build, with 965+ tests across engine, data, and UI.

Design System "Carga"

Three-layer token architecture (primitive → semantic → component) implemented as Tailwind v4 @theme CSS variables; components consume variables only, never hardcoded values.

Post-Launch Iteration

Continuous cycles driven by Search Console data (title/description tuning, structured data) and UX audits: a 36-issue audit led to 5 critical fixes; a design-consistency audit folded 15 components into the design system.

Your Burst. Every Rotation. No Guesswork.

Build

Shipped on three parallel tracks: (1) a calculation engine with typed, unit-tested services per energy source, plus a data drift validator that fails the build when game data and engine logic fall out of sync; (2) a scripted data pipeline generating derived per-character data, validated before every build; (3) a custom design system ("Carga": capture → intensify → release) with a full token architecture as Tailwind v4 CSS variables.

Outcome

A production tool players use directly in rotation planning: pick up to 4 characters, configure weapons/artifacts/constellations, and get the exact %ER to loop every Burst — under a second, free, no account.

123 characters in the ER hub, 7 elements, 6 burst cost tiers, shareable result links, and 29 blog posts with SEO guides.

Visuals

System Artifacts

ER Calculation Engine

Source-per-service architecture where every energy source (particles, funneling, passives, weapon procs, constellations) is an independently tested calculator, orchestrated per rotation.

engine.tstypescript

// Cada fuente de energía es una unidad testeada; los resultados se suman por rotación.
interface EnergyResult { energy: number; precision: number }

const funnel = funnelCalculator.calculate({ source, targets, sameElement: true })
const burst = burstCostTable[character.tier] // 6 tiers de costo
const er = burst.cost / (regen.sources.sum(funnel) * bonusFactors)

Design Token System ("Carga")

Three-layer token architecture (primitive → semantic → component) implemented as Tailwind v4 @theme custom CSS properties; components consume CSS variables only, never hardcoded values.

design-tokens.csscss

@theme {
  --color-primary-400: #988ed0; /* púrpura canónico de marca */
  --ease-charge: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-charge: 400ms;
}

Data Pipeline + Drift Validator

Scripted generation of derived per-character data from raw game data; a validator fails CI whenever engine and data disagree on any stat, keeping accuracy across game versions (currently v7.0).

Tech Stack

Next.js 16TypeScript (strict)React 18Tailwind CSS v4Radix UI / shadcnZodVitest + Testing LibraryVercelBiome + ESLintDOMPurify + react-markdownGoogle Search Console