ER QuickCalc
Calculadora de Recarga de Energía para Genshin Impact, "Tu Burst. Cada Rotación. Sin Adivinar."

La Recarga de Energía (ER) es una de las estadísticas más críticas de build en Genshin Impact, pero los jugadores adivinan su %ER usando spreadsheets obsoletos y guías desactualizadas.
Los requisitos de ER dependen de una larga cadena de variables, tier de costo de burst, generación de partículas, funneling del mismo elemento, pasivas de armas, constelaciones, substats de artefactos, y las herramientas comunitarias existentes cubren solo algunos personajes. El desafío: construir una calculadora rápida, precisa y continuamente exacta que dé objetivos de ER para cualquier equipo, sin adivinanzas.
- 01
Motor de Cálculo
Arquitectura de servicio por fuente donde cada fuente de energía (partículas, funneling, pasivas, procs de armas, constelaciones) es una calculadora probada independientemente, orquestada por rotación. Un validador de deriva de datos falla la build si los datos del juego y la lógica del motor se desincronizan.
- 02
Pipeline de Datos del Juego
Generación scripteada de datos derivados por personaje a partir de datos crudos del juego, validados antes de cada build, 965+ tests entre motor, datos e interfaz.
- 03
Design System "Carga"
Arquitectura de tokens de tres capas (primitivo → semántico → componente) implementada como variables CSS @theme de Tailwind v4, los componentes consumen variables, nunca valores hardcodeados.
- 04
Iteración Post-Lanzamiento
Ciclos continuos a partir de datos de Search Console (optimización de títulos/descripciones, datos estructurados) y auditorías UX: una auditoría de 36 issues derivó en 5 fixes críticos; una auditoría de consistencia de diseño unificó 15 componentes en el design system.
Tu Burst. Cada Rotación. Sin Adivinar.
Se lanzó en tres tracks paralelos: (1) un motor de cálculo con servicios tipados y unit-tested por fuente de energía, más un validador de deriva de datos que falla la build si los datos del juego y la lógica del motor se desincronizan; (2) un pipeline de datos scripteado que genera datos derivados por personaje, validados antes de cada build; (3) un design system personalizado ("Carga": captura → intensifica → libera) con una arquitectura completa de tokens como variables CSS de Tailwind v4.
Una herramienta de producción que los jugadores usan directamente en la planificación de rotaciones: selecciona hasta 4 personajes, configura armas/artefactos/constelaciones, y obtén el %ER exacto para loop cada Burst, en menos de un segundo, gratis, sin cuenta.
123 personajes en el hub de ER, 7 elementos, 6 tiers de costo de burst, enlaces de resultado compartibles y 29 publicaciones de blog con guías SEO.
Motor de Cálculo de ER
Arquitectura de servicio por fuente donde cada fuente de energía (partículas, funneling, pasivas, procs de armas, constelaciones) es una calculadora probada independientemente, orquestada por rotación.
// 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)Sistema de Design Tokens ("Carga")
Arquitectura de tokens de tres capas (primitivo → semántico → componente) implementada como propiedades CSS personalizadas @theme de Tailwind v4; los componentes consumen variables CSS, nunca valores hardcodeados.
@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;
}Pipeline de Datos + Validador de Deriva
Generación scripteada de datos derivados por personaje a partir de datos crudos del juego; un validador falla la CI si el motor y los datos discrepan en alguna estadística, mantiene la precisión entre versiones del juego (actualmente v7.0).
¿Te gustaría construir algo así?
[Hablemos]