onChange(resolve(s))} />;
}
const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
const idx = Math.max(0, opts.findIndex((o) => o.value === value));
const n = opts.length;
const segAt = (clientX) => {
const r = trackRef.current.getBoundingClientRect();
const inner = r.width - 4;
const i = Math.floor(((clientX - r.left - 2) / inner) * n);
return opts[Math.max(0, Math.min(n - 1, i))].value;
};
const onPointerDown = (e) => {
setDragging(true);
const v0 = segAt(e.clientX);
if (v0 !== valueRef.current) onChange(v0);
const move = (ev) => {
if (!trackRef.current) return;
const v = segAt(ev.clientX);
if (v !== valueRef.current) onChange(v);
};
const up = () => {
setDragging(false);
window.removeEventListener('pointermove', move);
window.removeEventListener('pointerup', up);
};
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', up);
};
return (
{opts.map((o) => (
{o.label}
))}
);
}
function TweakSelect({ label, value, options, onChange }) {
return (
onChange(e.target.value)}>
{options.map((o) => {
const v = typeof o === 'object' ? o.value : o;
const l = typeof o === 'object' ? o.label : o;
return {l} ;
})}
);
}
function TweakText({ label, value, placeholder, onChange }) {
return (
);
}
function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
const clamp = (n) => {
if (min != null && n < min) return min;
if (max != null && n > max) return max;
return n;
};
const startRef = React.useRef({ x: 0, val: 0 });
const onScrubStart = (e) => {
e.preventDefault();
startRef.current = { x: e.clientX, val: value };
const decimals = (String(step).split('.')[1] || '').length;
const move = (ev) => {
const dx = ev.clientX - startRef.current.x;
const raw = startRef.current.val + dx * step;
const snapped = Math.round(raw / step) * step;
onChange(clamp(Number(snapped.toFixed(decimals))));
};
const up = () => {
window.removeEventListener('pointermove', move);
window.removeEventListener('pointerup', up);
};
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', up);
};
return (
{label}
{unit} }
);
}
// Relative-luminance contrast pick — checkmarks drawn over a swatch need to
// read on both #111 and #fafafa without per-option configuration. Hex input
// only (#rgb / #rrggbb); named or rgb()/hsl() colors fall through to "light".
function __twkIsLight(hex) {
const h = String(hex).replace('#', '');
const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, '0');
const n = parseInt(x.slice(0, 6), 16);
if (Number.isNaN(n)) return true;
const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
return r * 299 + g * 587 + b * 114 > 148000;
}
const __TwkCheck = ({ light }) => (
);
// TweakColor — curated color/palette picker. Each option is either a single
// hex string or an array of 1-5 hex strings; the card adapts — a lone color
// renders solid, a palette renders colors[0] as the hero (left ~2/3) with the
// rest stacked in a sharp column on the right. onChange emits the
// option in the shape it was passed (string stays string, array stays array).
// Without options it falls back to the native color input for back-compat.
function TweakColor({ label, value, options, onChange }) {
if (!options || !options.length) {
return (
);
}
// Native
{options.map((o, i) => {
const colors = Array.isArray(o) ? o : [o];
const [hero, ...rest] = colors;
const sup = rest.slice(0, 4);
const on = key(o) === cur;
return (
onChange(o)}>
{sup.length > 0 && (
{sup.map((c, j) =>
)}
{on && <__TwkCheck light={__twkIsLight(hero)} />}
);
})}
);
}
function TweakButton({ label, onClick, secondary = false }) {
return (
{label}
);
}
Object.assign(window, {
useTweaks, TweaksPanel, TweakSection, TweakRow,
TweakSlider, TweakToggle, TweakRadio, TweakSelect,
TweakText, TweakNumber, TweakColor, TweakButton,
});
/* ==================== ornaments.jsx ==================== */
// ornaments.jsx — decorative SVG library for medieval fantasy atmosphere
// All ornaments are stroke-only by default so they accept currentColor.
// Sized via the `size` prop (px); rotate via wrapper transform.
//
// Exports: Flourish, CornerFlourish, Divider, WaxSeal, Crest, Banner,
// CompassRose, InkSplatter, FleurDeLis, RuneRing,
// DropCap, TorchGlow, ManuscriptBorder, QuillIcon, IlluminatedBorder
// ---- Single corner flourish (curling vine, ~60deg arc) ----
function CornerFlourish({ size = 120, color = 'currentColor', flip = false, vertical = false }) {
// SVG drawn for top-left corner. Use scale to flip for other corners.
const sx = flip ? -1 : 1;
const sy = vertical ? -1 : 1;
return (
{/* main S-curve vine */}
);
}
// ---- Decorative horizontal divider ----
function Divider({ width = 280, color = 'currentColor', motif = 'fleur' }) {
// diamond or fleur center motif with curling ends
return (
);
}
// ---- Wax seal ----
function WaxSeal({ size = 88, color = 'var(--crimson)', imprint = '⚔', tilt = -8 }) {
return (
{/* uneven wax blob */}
{/* imprint character/glyph */}
{imprint}
);
}
// ---- Heraldic crest — shield with dual sword + wheat ----
function Crest({ size = 160, color = 'currentColor', dark = false }) {
// a shield: top half = wheat stalk (life), bottom half = crossed sword (action)
const fillBg = dark ? '#1a1014' : 'var(--parch-hi)';
const fillAccent = dark ? 'var(--gold)' : 'var(--ink-iron)';
const fg = dark ? 'var(--gold)' : 'var(--ink-iron)';
return (
{/* shield outline */}
{/* BOTTOM: crossed sword + scroll/quill */}
{/* sword diagonal */}
{/* small banner at top */}
);
}
// ---- Ribbon banner ----
function Banner({ width = 320, color = 'currentColor', children, dark = false }) {
const bg = dark ? 'var(--night-bg-2)' : 'var(--parch-hi)';
return (
{/* end tails */}
{children}
);
}
// ---- Compass rose ----
function CompassRose({ size = 160, color = 'currentColor' }) {
return (
{/* diagonals */}
N
S
W
E
);
}
// ---- Ornate manuscript border (full rectangle) ----
function ManuscriptBorder({ color = 'currentColor', thickness = 1.4, inset = 24 }) {
// Drawn at 100×100 and stretched via preserveAspectRatio
return (
{/* outer rectangle */}
{/* corner motifs — diamonds */}
);
}
// ---- Drop cap (illuminated initial) ----
function DropCap({ letter = 'B', size = 88, color = 'var(--crimson)', accent = 'var(--gold)' }) {
return (
{/* background ornamental box */}
{letter}
);
}
// ---- Quill icon ----
function QuillIcon({ size = 24, color = 'currentColor' }) {
return (
);
}
// ---- Rune ring (small circular runic pattern) ----
function RuneRing({ size = 80, color = 'currentColor', n = 8 }) {
// Decorative — draws small tick marks around a circle with a few "rune" glyphs
const cx = 50, cy = 50, r = 38;
const ticks = Array.from({ length: n * 4 }, (_, i) => {
const a = (i / (n*4)) * Math.PI * 2 - Math.PI/2;
const x1 = cx + Math.cos(a) * (r - 2);
const y1 = cy + Math.sin(a) * (r - 2);
const x2 = cx + Math.cos(a) * (r + 2);
const y2 = cy + Math.sin(a) * (r + 2);
return {g}
);
});
return (
{ticks}
);
}
// ---- Illuminated border (4 corner flourishes + horizontal rule top/bottom) ----
function IlluminatedBorder({ color = 'currentColor', inset = 28, size = 96 }) {
return (
);
}
Object.assign(window, {
CornerFlourish, Divider, WaxSeal, Crest, Banner, CompassRose,
ManuscriptBorder, DropCap, TorchGlow, QuillIcon, RuneRing,
IlluminatedBorder,
});
/* ==================== shared.jsx ==================== */
// shared.jsx — i18n + reusable components (medieval-fantasy rewrite)
const I18N = {
ko: {
tagline_short: '낮에는 쟁기, 밤에는 검',
tagline_long: '양피지 같은 평화로운 마을에서, 잉크처럼 어두운 던전의 심장부까지.',
farm_label: '농사 · 낚시 · 마을',
action_label: '전투 · 퍼즐 · 모험',
wishlist: '소식 받기',
notify_me: '사전예약',
coming_soon: '곧 출간',
in_dev: '집필 중',
by_studio: 'Bedrock inc.',
mode_2d: '낮 · 일상',
mode_3d: '밤 · 모험',
chapter_one: '제1장 · 데모',
drag_to_morph: '해를 끌어 밤을 부르라',
five_regions: '다섯 대륙',
three_classes: '세 직군',
four_races: '네 종족',
title_main: '트윈미어',
title_sub: "TWINMERE",
intro_2d: '쟁기를 갈고, 비구름을 부르고, 마을 광장에서 친구와 차를 나누는 일상. 일상에 깃든 마법의 시간.',
intro_3d: '전사·마법사·궁수로 협동하여 다섯 대륙을 누비는 모험. 검 끝에서 빛나는 협동의 마법.',
region_central: '중부 · 마을',
region_north: '북부 · 설원',
region_south: '남부 · 정글',
region_west: '서부 · 사막',
region_east: '동부 · 무공',
email_placeholder: '서신을 받을 주소',
by_day: '낮에는',
by_night: '밤에는',
a_farmer: '농부였으되',
an_adventurer: '모험가가 되리',
a_chronicle: '한 영혼이 두 세계를 살다',
prologue: '서문',
chapter_demo: '데모 — 제1장',
seal_imprint: '◈',
flip_world: '세계를 뒤집어라',
journal_volume: '제1권 · 봄 1437년',
plate: '도판',
pg: 'pg.',
},
en: {
tagline_short: 'By day, the plough. By night, the blade.',
tagline_long: 'From a parchment-quiet village to the ink-dark heart of a dungeon.',
farm_label: 'Farm · Fish · Town',
action_label: 'Combat · Puzzles · Adventure',
wishlist: 'Be told',
notify_me: 'Pre-register',
coming_soon: 'Forthcoming',
in_dev: 'Being written',
by_studio: 'Bedrock inc.',
mode_2d: 'Day · Life',
mode_3d: 'Night · Adventure',
chapter_one: 'Chapter I · Demo',
drag_to_morph: 'Drag the sun across the dial',
five_regions: 'Five regions',
three_classes: 'Three roles',
four_races: 'Four races',
title_main: "TWINMERE",
title_sub: '트윈미어',
intro_2d: 'Tend the field, summon a small rain, share tea in the square. Magic, woven into the dull and the daily.',
intro_3d: 'Wander as Warrior, Mage, or Archer through five untamed regions. Magic, sharp at the blade-edge.',
region_central: 'Central · Town',
region_north: 'North · Frost',
region_south: 'South · Jungle',
region_west: 'West · Desert',
region_east: 'East · Wuxia',
email_placeholder: 'Address for dispatch',
by_day: 'By day,',
by_night: 'By night,',
a_farmer: 'a farmer.',
an_adventurer: 'a wanderer.',
a_chronicle: 'One soul. Two worlds.',
prologue: 'Prologue',
chapter_demo: 'Demo — Chapter I',
seal_imprint: '◈',
flip_world: 'Turn the world',
journal_volume: 'Vol. I · Spring of 1437',
plate: 'Plate',
pg: 'pg.',
},
};
const useI18n = (lang) => (key) => I18N[lang]?.[key] ?? I18N.en[key] ?? key;
// ============================================================
// Language toggle
// ============================================================
function LangToggle({ lang, onChange, className = '' }) {
return (
onChange('ko')}>KO
·
onChange('en')}>EN
);
}
// ============================================================
// Day / Night mode toggle
// ============================================================
function ModeToggle({ mode, onChange, onDark, lang }) {
const t = useI18n(lang);
return (
onChange('2d')}>
☼ {t('mode_2d')}
onChange('3d')}>
☾ {t('mode_3d')}
);
}
// ============================================================
// Wishlist signup (scroll-signing metaphor)
// ============================================================
function WishlistCTA({ lang, dark, compact }) {
const t = useI18n(lang);
const [email, setEmail] = React.useState('');
const [submitting, setSubmitting] = React.useState(false);
const submit = async (e) => {
e.preventDefault();
if (submitting) return;
const value = email.trim();
// 비었거나 형식이 틀리면 조용히 무시하지 않고 안내 팝업을 띄운다.
if (!value) {
trackGA('twinmere_signup_invalid', { reason: 'empty', lang });
showSignupPopup('empty', lang);
return;
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
trackGA('twinmere_signup_invalid', { reason: 'format', lang });
showSignupPopup('invalid', lang);
return;
}
setSubmitting(true);
const res = await submitWaitlist(value); // 'created' | 'duplicate' | 'error'
trackGA(res === 'duplicate' ? 'twinmere_signup_dup' : 'twinmere_signup', { lang });
showSignupPopup(res === 'duplicate' ? 'duplicate' : 'created', lang); // 중앙 팝업
setEmail(''); // 폼 초기화 → 같은 화면에서 다음 사람도 즉시 신청 가능
setSubmitting(false);
};
return (
);
}
// ============================================================
// Mini phone mockup
// ============================================================
function MiniPhone({ width = 220, children, style = {} }) {
const aspect = 19.5 / 9;
const screenH = (width - 14) * aspect;
const r = Math.min(32, Math.round(width * 0.26));
return (
);
}
// ============================================================
// Meta badge
// ============================================================
function MetaBadge({ children, dark }) {
return (
{children}
);
}
// ============================================================
// CSS-only pixel-art day vignette
// ============================================================
function PixelScene({ size = 200 }) {
const px = size / 16;
const C = {
grass:'#7ab85a', grass2:'#5c9a44', path: '#c8a66b', soil: '#7a4e2e',
crop: '#e8c64a', tree: '#2e6b3a', wood: '#6b4220', roof: '#a73e3e',
wall: '#e8d2a0', water:'#4a7ec9', flower:'#e88abb',
};
const M = [
'GGGGGGGGGGGGGGGG','GGGGGGTGGGGGGGGG','GGGGGTTTGGGGGGGG','GGGGGGTGGGGGGGGG',
'GGGGGGWGGGGGGGGG','GGGGGGWGGGGGGGGG','GGGGGGWGGGGGCCCG','GGGGGGWGGGGGCCCG',
'GGGRRWGGGGGGCCCG','GGGRrWGGGGGGSSSG','GGGwwWGGGGGGSSSG','GGGwwWGGGGGGwwwG',
'GGGGGWWWWWWWWWWG','GGGGGGGGGGGGGGGG','GGGfGGGGGfGGGGGG','GGGGGGGGGGGGGGGG',
];
const colorFor = (ch) => ({
G: C.grass, T: C.tree, W: C.path, w: C.water,
R: C.roof, r: C.wood, C: C.crop, S: C.soil, f: C.flower,
})[ch] || C.grass2;
return (
{M.flatMap((row, y) => row.split('').map((ch, x) => (
)))}
{/* torch glow */}
{/* silhouette */}
{stars.map((s, i) => s.big ? (
);
}
// ============================================================
// Little house (day/night aware)
// ============================================================
function House({ x, y, w = 66, h = 42, roof = '#a44f36', wall = '#efe0bc', night = false, flip = false, chimney = true }) {
const rw = w * 1.16;
return (
{/* wall */}
)}
);
}
// ============================================================
// DAY PANORAMA — golden pastoral valley
// ============================================================
function DayPanorama({ uid = 'day', par = { x: 0, y: 0 }, showSun = true }) {
const P = (k) => `translate(${par.x * k} ${par.y * k * 0.5})`;
return (
{/* SKY */}
)}
{/* clouds */}
{/* birds */}
{/* FAR HILLS — hazy */}
{/* MID HILLS + windmill + far village */}
{/* windmill on the left hill */}
{/* church spire distant right */}
{/* VILLAGE CLUSTER on its own rise */}
{[[500, 590, 20], [790, 578, 16], [900, 586, 18], [1010, 566, 15]].map(([x, y, r], i) => (
))}
{/* stone wall winding */}
{/* FOREGROUND FIELDS */}
{Array.from({ length: 9 }, (_, i) => (
{/* golden wheat plot right */}
{Array.from({ length: 14 }, (_, i) => (
{/* tiny farmer with personal rain-cloud (the magic!) */}
{/* plot */}
{/* sprouts */}
{[-32, -12, 8, 28].map((sx, i) => (
{/* rain cloud hovering over the plot */}
{[-16, -6, 4, 14].map((rx, i) => (
{/* sparkle — it's magic */}
{/* BIG OAK — right frame */}
{/* grass tufts bottom */}
{[60, 200, 420, 660, 900, 1060].map((gx, i) => (
))}
{/* warm vignette */}
);
}
// ============================================================
// NIGHT PANORAMA — moonlit range, castle crag, pines
// ============================================================
function NightPanorama({ uid = 'night', par = { x: 0, y: 0 }, showParty = true, showMoon = true }) {
const P = (k) => `translate(${par.x * k} ${par.y * k * 0.5})`;
return (
{/* SKY */}
{/* MOON */}
{showMoon && (
)}
{/* FAR RANGE */}
{/* MID RANGE + CASTLE CRAG */}
{/* main keep */}
{/* flags */}
{/* winding cliff path with lantern dots */}
{/* moon river */}
{/* mist band */}
{/* PINE ROWS */}
{/* FOREGROUND CLIFF + PARTY */}
{showParty && (
{/* torch glow */}
{/* mage — staff with faint orb */}
{/* archer — bow silhouette, holds torch */}
{/* banner spear with pennant */}
)}
{/* gnarled framing branch, top-left */}
{/* vignette */}
);
}
// ============================================================
// WORLD SCENE — crossfade day↔night with dusk wash
// ============================================================
function WorldScene({ pos = 0, uid, par = { x: 0, y: 0 }, showParty = true, showSun = true, showMoon = true }) {
const dusk = Math.sin(Math.min(1, Math.max(0, pos)) * Math.PI);
return (
{/* dusk wash peaks mid-transition */}
);
}
// ============================================================
// Fireflies overlay (HTML particles)
// ============================================================
function Fireflies({ count = 22, opacity = 1, seed = 5 }) {
const flies = React.useMemo(() => {
const rnd = mulberry(seed);
return Array.from({ length: count }, () => ({
x: rnd() * 100, y: 40 + rnd() * 55,
s: 2.5 + rnd() * 3,
dd: 8 + rnd() * 10, fd: 2 + rnd() * 3,
delay: rnd() * -12,
}));
}, [count, seed]);
return (
{flies.map((f, i) => (
);
}
// ============================================================
// Rising embers (for campfire)
// ============================================================
function RisingEmbers({ count = 14, x = 50, y = 78, spread = 6, seed = 9 }) {
const sparks = React.useMemo(() => {
const rnd = mulberry(seed);
return Array.from({ length: count }, () => ({
x: x + (rnd() - 0.5) * spread, y: y + (rnd() - 0.5) * 3,
ex: (rnd() - 0.5) * 60,
d: 2.2 + rnd() * 2.6, delay: rnd() * -5,
s: 2.5 + rnd() * 2.5,
}));
}, [count, x, y, spread, seed]);
return (
{sparks.map((s, i) => (
);
}
// ============================================================
// GAME LOGO — metallic gold lockup
// ============================================================
function GameLogo({ lang = 'ko', scale = 1, sub = true, eyebrow = false, night = true, fluid = false, crest = false }) {
// TWINMERE is the title; the optional eyebrow above it is left empty by default.
// fluid adds vw+vh clamps so the hero stack shrinks on narrow AND short viewports.
const mainSize = fluid ? `min(${120 * scale}px, ${7 * scale}vw, ${15 * scale}vh)` : 120 * scale;
const ebSize = fluid ? `min(${17 * scale}px, ${1.8 * scale}vw)` : 17 * scale;
const crestSize = fluid ? `min(${104 * scale}px, ${10.5 * scale}vh)` : 104 * scale;
const metal = {
background: 'linear-gradient(180deg, #fff4c8 0%, #f0d078 24%, #c8a04c 46%, #8a6a28 58%, #e8c868 74%, #6a4a18 100%)',
WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
};
const subColor = night ? '#f0dfa8' : '#5a3c14';
const eyebrowColor = night ? '#e8d8a0' : '#6a4a1c';
const ruleGrad = night ? '#e8c868' : '#8a6a28';
return (
{crest && (
)}
{eyebrow && (
)}
{/* depth layer */}
TWINMERE
{/* metal face */}
TWINMERE
{sub && lang === 'ko' && (
트윈미어
)}
{children}
);
}
// ============================================================
// Section heading
// ============================================================
function SectionHead({ eyebrow, title, dark, sub }) {
return (
{eyebrow && (
{eyebrow}
)}
{title}
{sub && (
{sub}
)}
{/* ornate frame */}
{/* corner diamonds */}
{[{ top: -7, left: -7 }, { top: -7, right: -7 }, { bottom: -7, left: -7 }, { bottom: -7, right: -7 }].map((p, i) => (
))}
{/* stacked art */}
{/* inner vignette */}
{/* toggle — floats on the art */}
setMode('2d')}>{l('day_pill')}
setMode('3d')}>{l('night_pill')}
{/* caption */}
{night
? (lang === 'ko' ? '3D 파트 — 벨트스크롤 협동 전투 (목표 아트)' : '3D part — co-op beat \u2019em up (target art)')
: (lang === 'ko' ? '2D 파트 — 픽셀 아트 마을 광장 (목표 아트)' : '2D part — pixel-art town square (target art)')}
{kind === 'warrior' && (
)}
{kind === 'mage' && (
)}
{kind === 'archer' && (
)}
);
}
function RegionIcon({ kind, size = 26, color = 'currentColor' }) {
const s = { fill: 'none', stroke: color, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
return (
{kind === 'central' &&
);
}
// ============================================================
// Poll — the demand question
// ============================================================
function Poll({ lang }) {
const l = useL(lang);
const KEY = 'br-demand-vote';
const [vote, setVote] = React.useState(() => {
try { return localStorage.getItem(KEY); } catch (e) { return null; }
});
const choose = (id) => {
// 같은 선택 재클릭은 중복 기록하지 않음 (연타로 state가 stale할 수 있어 localStorage 기준으로 판정)
let prev = vote;
try { prev = localStorage.getItem(KEY) || vote; } catch (e) {}
if (id === prev) return;
try { localStorage.setItem(KEY, id); } catch (e) {} // UI 중복투표 방지용 (유지)
setVote(id);
// 선택 변경 시 이전 문서는 지우지 않고 changedFrom을 남긴다.
// 집계 시 visitorId별 최신 ts 문서만 세면 최종 선택이 된다.
logDemand('twinmere_poll', prev ? { choice: id, changedFrom: prev } : { choice: id });
trackGA('twinmere_poll_vote', { choice: id, lang });
};
const opts = [
{ id: 'cozy', h: l('poll_cozy_h'), d: l('poll_cozy_d'), icon: '🌾', img: 'assets/art-2d-town.webp' },
{ id: 'action', h: l('poll_action_h'), d: l('poll_action_d'), icon: '⚔', img: 'assets/art-3d-combat.webp' },
{ id: 'both', h: l('poll_both_h'), d: l('poll_both_d'), icon: '◐', img: null },
];
return (
{opts.map((o) => {
const active = vote === o.id;
const dim = vote && !active;
return (
choose(o.id)} style={{
appearance: 'none', cursor: 'pointer', textAlign: 'left', padding: 0,
background: '#0d0a14',
border: `1.5px solid ${active ? 'var(--gold)' : 'rgba(200,160,76,0.3)'}`,
boxShadow: active ? '0 0 34px rgba(200,160,76,0.25), 0 22px 40px -20px rgba(0,0,0,0.8)' : '0 22px 40px -24px rgba(0,0,0,0.8)',
opacity: dim ? 0.55 : 1,
transform: active ? 'translateY(-4px)' : 'none',
transition: 'all 0.3s ease',
overflow: 'hidden', position: 'relative',
}}>
{/* art strip */}
{o.img ? (
) : (
)}
{active && (
✓
)}
);
})}
{l('poll_thanks')}
);
}
window.LandingShared = { L, useL, Reveal, SectionHead, ScrollSignup, ArtViewer, RoleIcon, RegionIcon, Poll };
Object.assign(window, { L, useL, Reveal, SectionHead, ScrollSignup, ArtViewer, RoleIcon, RegionIcon, Poll });
/* ==================== site2-strings.jsx ==================== */
// site2-strings.jsx — full i18n strings for the new overview site (from the spec PDF)
const S2 = {
ko: {
nav_cta: '사전예약',
// hero
hero_tag: '일상과 모험 — 두 세계를 사는 RPG',
hero_sub: '던전을 누비는 협동 액션, 그리고 아늑한 픽셀 아트 마을에서의 하루. 하나의 캐릭터에게 두 가지 삶이 있습니다.',
hero_left: '⚔ 협동 모험',
hero_right: '⌂ 아늑한 일상',
hero_drag: '경계를 끌어 두 세계를 오가보세요',
hero_meta: 'iOS · Android 우선 — PC · Mac 추후 지원 · 한국어 / 영어',
// concept
con_eyebrow: '어떤 게임인가',
con_title: '힐링 게임에 액션을 더하다',
con_p: '한가로운 2D 마을에서의 삶과, 던전을 누비는 3D 협동 액션 — 언뜻 어울리지 않는 두 장르를 하나의 세계로 엮었습니다. 내 집과 농장을 가꾸며 느긋한 하루를 보내다가도, 마음 맞는 친구들과 새로운 땅으로 모험을 떠나세요. 쉬고 싶은 날에도, 짜릿함이 당기는 날에도 — 트윈미어는 당신의 방식대로 즐길 수 있습니다.',
con_genre_2d: '2D 탑뷰 RPG 커뮤니케이션',
con_genre_x: '×',
con_genre_3d: '3D 플랫폼 & 벨트스크롤',
// 2D part
p2_eyebrow: '2D 파트',
p2_title: '나의 공간, 우리의 마을',
p2_private_h: 'Private Zone — 개인 공간',
p2_private_p: '자신만의 집과 농장을 가꿉니다. 이 공간엔 나와 내가 초대한 친구만 들어올 수 있습니다. 나만의 공간을 꾸며보세요.',
p2_town_h: 'Town — 공유 마을',
p2_town_p: '마을로 나가면, 다른 플레이어들과 만나고 어울릴 수 있습니다. 다른 플레이어들과 함께 모험을 떠나보세요.',
p2_life_label: '생활',
p2_skill_label: '기술',
p2_craft_label: '제작',
p2_life: ['농사', '낚시', '목축', '채광', '채집'],
p2_skill: ['제련', '가공', '재봉', '목공'],
p2_craft: ['요리', '대장장이', '연금술'],
p2_portrait_eyebrow: '모바일 우선 설계',
p2_portrait_h: '한 손으로 즐기는 아늑함',
p2_portrait_p: '2D 파트는 세로 화면으로도 플레이 가능합니다. 출근길 지하철에서도, 잠들기 전 침대에서도 — 한 손 엄지 하나로 밭을 갈고, 낚싯대를 던지고, 마을을 거닐 수 있습니다.',
p2_portrait_chips: ['세로 화면', '한 손 엄지 조작', '언제 어디서든'],
p2_art_caption: '2D 파트 — 픽셀 아트로 그린 마을 광장의 하루',
// 3D part
p3_eyebrow: '3D 파트',
p3_title: '함께 모험하는 던전',
p3_p: '벨트스크롤 액션과 퍼즐 플랫폼이 결합된 모험 파트. 혼자서도, 최대 3인 협동으로도 즐길 수 있습니다.',
p3_combat_h: '전투 구간',
p3_combat_p: '등장하는 적을 처치하는 액션 플레이 — 검과 방패, 마법, 활이 만드는 합',
p3_puzzle_h: '협동 퍼즐 구간',
p3_puzzle_p: '팀워크로 풀어내는 퍼즐 — 세 역할이 능력을 모아야만 길이 열리는 스테이지 디자인',
p3_regions: '다섯 지역의 던전을 실제로 탐험합니다 — 북부의 얼어붙은 길을 불 마법으로 녹이고, 남부의 독성 늪을 건너고, 서부의 고대 유적을 파헤치세요.',
p3_art_caption: '3D 파트 — 시네마틱 조명과 실루엣이 만드는 협동 전투',
p3_anim_note: '텍스처 디테일보다 애니메이션 품질 우선 — 3D 캐릭터는 항상 2D 캐릭터와 일치하도록 설계됩니다',
// roles
ro_eyebrow: '차별점',
ro_title: '직업은 없다 — 장비가 역할을 만든다',
ro_p: '게임 초반에 클래스를 고르지 않습니다. 착용한 장비와 쌓아온 숙련도가 당신의 역할을 결정합니다. 장비를 바꿔 입으면, 같은 캐릭터가 다른 역할이 됩니다.',
ro_try: '장비를 바꿔보세요',
ro_tank_gear: '무거운 갑옷 + 방패와 검',
ro_tank_role: '전면 탱커',
ro_tank_d: '파티의 최전선에서 공격을 받아냅니다',
ro_mage_gear: '가벼운 로브 + 마법 지팡이',
ro_mage_role: '지원형 마법사',
ro_mage_d: '원소의 힘으로 전장을 뒤흔듭니다',
ro_archer_gear: '가죽 갑옷 + 활',
ro_archer_role: '원거리 궁수',
ro_archer_d: '정밀한 한 발로 흐름을 바꿉니다',
ro_same: '— 전부 같은 캐릭터입니다',
// neigong (inner energy)
ne_eyebrow: '특징',
ne_title: '내공 — 기본기가 비기가 된다',
ne_p: '동방에서 전해지는 내공(內功). 화려한 신규 스킬을 사들이는 대신, 몸에 쌓은 내공을 이미 익힌 기본기에 흘려넣어 강화합니다. 같은 검격 한 수가 내공이 깊어질수록 더 넓게, 더 매섭게 — 끝내 새로운 오의로 피어납니다.',
ne_try: '내공을 끌어올려 보세요',
ne_channel: '내공 주입',
ne_release: '거두기',
ne_skill: '기본 검격',
ne_t0_name: '기본기',
ne_t0_d: '입문자의 한 수 — 단순한 베기',
ne_t1_name: '1성 · 강기(剛氣)',
ne_t1_d: '검에 내공을 실어 사거리와 위력이 늘어난다',
ne_t2_name: '2성 · 검기(劍氣)',
ne_t2_d: '베는 궤적을 따라 검기가 뻗어 먼 적을 노린다',
ne_t3_name: '3성 · 오의(奧義)',
ne_t3_d: '내공을 터뜨리는 광역 일섬 — 하나의 비기로 완성된다',
ne_note: '내공은 수련과 휴식으로 쌓이며, 모든 기본기는 저마다의 오의로 뻗어나갈 수 있습니다.',
// features grid
ft_eyebrow: '게임 특징',
ft_title: '무엇이 다른가',
ft_1h: '유동적인 역할',
ft_1p: '고정된 직업이 없습니다. 착용한 장비와 숙련도가 역할을 정하고, 갈아입으면 같은 캐릭터가 탱커도 마법사도 됩니다.',
ft_2h: '내공으로 기본기 강화',
ft_2p: '새 스킬을 사는 대신, 쌓은 내공을 기본기에 흘려넣어 강화합니다. 기본 검격이 검기로, 끝내 오의로 피어납니다.',
ft_3h: '쉬어야 강해진다',
ft_3p: '스태미너는 HP와 별개인 하루의 체력. 음식이 아닌 휴식으로만 회복되고, 잘 쉬면 더 큰 보상이 돌아옵니다.',
ft_4h: '모든 것에 존재 이유',
ft_4p: '잠깐 쓰고 버려지는 요소는 없습니다. 시작용 칼조차 전설의 검과 다른 나름의 쓸모를 지닙니다.',
ft_5h: '모든 것과 상호작용',
ft_5p: '의자 하나도 앉을 수 있어야 합니다. 분위기용 장식이 아니라, 세계의 모든 것이 플레이에 관여합니다.',
ft_6h: '솔로 & 최대 3인 협동',
ft_6p: '혼자서도, 최대 세 명이 함께서도. 전투 구간과 협동 퍼즐이 번갈아 이어집니다.',
// world
wo_eyebrow: '세계관',
wo_title: '마법이 일상에 스며든 대륙',
wo_p: '중세 판타지 세계 — 마법은 전투만의 것이 아닙니다. 비구름을 불러 밭에 물을 주고, 성장 마법으로 작물을 키우고, 아픈 가축을 치유 마법으로 돌봅니다.',
wo_region_label: '다섯 지역',
wo_race_label: '네 종족, 네 가지 마법',
wo_trade: '열대 작물 · 설원 광물 · 사막의 희귀 광물 — 지역 자원을 교역하고 가공해 부가가치를 만드는 경제',
race_human: '인간', race_human_m: '학문적 연구의 마법',
race_orc: '오크', race_orc_m: '주술과 부족 의식 — 의식으로 작물의 성장을 재촉합니다',
race_undead: '언데드', race_undead_m: '죽음과 저주 계열 — 좀비 가축을 키우기도 합니다',
race_elf: '엘프', race_elf_m: '자연과의 교감',
// philosophy
ph_eyebrow: '설계 원칙',
ph_title: '다섯 가지 약속',
ph_1_h: '모든 요소는 의미가 있어야 한다',
ph_1_p: '시작용 칼조차 전설의 검과 비교해 나름의 쓸모가 있습니다. 잠깐 쓰고 버려지는 요소는 없습니다.',
ph_2_h: '모든 것은 상호작용 가능해야 한다',
ph_2_p: '단순한 의자라도 최소한 앉을 수는 있어야 합니다. 분위기만을 위한 오브젝트는 지양합니다.',
ph_3_h: 'UI는 필요한 순간에만',
ph_3_p: '화면은 기본적으로 깨끗하게 — 꼭 필요한 정보가 꼭 필요한 순간에만 자연스럽게 등장합니다.',
ph_4_h: '모든 조작은 직관적이어야 한다',
ph_4_p: '설명서 없이도 즉시 이해되는 조작. 복잡함이 아닌 직관성이 핵심 가치입니다.',
ph_5_h: '쉬어야 강해진다',
ph_5_p: '스태미너는 HP와 분리된 하루의 체력입니다. 음식만으로는 회복되지 않습니다 — 수면, 모닥불, 온천, 사회적 활동 같은 진짜 휴식으로만 회복되며, 잘 쉰 플레이어는 경험치 보너스와 채집·제작 성공률 상승으로 보답받습니다.',
// stamina demo
st_title: '스태미너 체계 — 직접 확인해보세요',
st_bar: '스태미너',
st_act_farm: '밭 갈기',
st_act_fish: '낚시',
st_act_fight: '강공격',
st_rest_fire: '모닥불에서 쉬기',
st_rest_sleep: '수면',
st_state_ok: '컨디션 양호 — 모든 활동 가능',
st_state_tired: '지침 — 효율이 떨어지기 시작합니다',
st_state_red: '탈진 — 오로지 수면으로만 회복됩니다',
st_bonus: '푹 잤다! 경험치 보너스 +10% · 채집 확률 ↑',
st_fire_blocked: '너무 지쳐서 모닥불로는 부족합니다',
// demo roadmap
de_eyebrow: '데모 버전',
de_title: '데모에서 만나게 될 것',
de_1_h: 'Private Zone',
de_1_t: '2D · 개인 공간',
de_1_p: '농사·채집·채굴이 가능한 아늑한 개인 공간. 간단한 전투와 세로 화면 플레이 지원.',
de_2_h: 'Town',
de_2_t: '2D · 마을',
de_2_p: '플레이어들이 만나는 사회적 허브. Private Zone에서 이동 수단으로 연결됩니다.',
de_3_h: 'Stage 1',
de_3_t: '3D · 액션',
de_3_p: '전투·플랫폼·퍼즐이 결합된 첫 스테이지. 클리어하면 전리품을 획득합니다.',
de_lang: '데모부터 한국어 · 영어 동시 지원',
// poll & signup
po_eyebrow: '수요 조사',
po_title: '당신은 어느 쪽인가요?',
po_sub: '한 번의 선택이 개발의 방향이 됩니다.',
su_eyebrow: '사전예약',
su_title: '출시 전, 먼저 만나보세요',
su_p: '데모 출시 소식과 테스트 초대를 이메일로 가장 먼저 보내드립니다.',
footer_note: '개발 중인 게임의 사전 검증 페이지입니다. 현재 이미지는 AI로 생성된 게임 예시 이미지이며, 개발 과정에서 달라질 수 있습니다.',
},
en: {
nav_cta: 'Pre-register',
hero_tag: 'Everyday life and adventure — one RPG, two worlds',
hero_sub: 'Co-op action in the dungeon, and a day in a cozy pixel-art town. One character, two lives.',
hero_left: '⚔ The expedition',
hero_right: '⌂ The cozy life',
hero_drag: 'Drag the seam to cross worlds',
hero_meta: 'iOS · Android first — PC · Mac later · KO / EN',
con_eyebrow: 'What it is',
con_title: 'A healing game, with action',
con_p: 'A cozy 2D village life and co-op 3D dungeon action — two genres you would not expect to meet, woven into one world. Tend your home and farm at your own pace, then set out with friends for somewhere new. On the days you want to rest, and the days you crave a thrill, Twinmere meets you where you are.',
con_genre_2d: '2D top-view RPG communication',
con_genre_x: '×',
con_genre_3d: '3D platformer & beat \u2019em up',
p2_eyebrow: 'The 2D part',
p2_title: 'My space, our town',
p2_private_h: 'Private Zone',
p2_private_p: 'Tend a house and farm of your own. Only you and the friends you invite may enter. Make the space yours.',
p2_town_h: 'Town — the shared world',
p2_town_p: 'Head out to Town and you can meet and mingle with other players. Set off on adventures together with them.',
p2_life_label: 'Life',
p2_skill_label: 'Skills',
p2_craft_label: 'Crafting',
p2_life: ['Farming', 'Fishing', 'Herding', 'Mining', 'Foraging'],
p2_skill: ['Smelting', 'Processing', 'Sewing', 'Woodwork'],
p2_craft: ['Cooking', 'Blacksmithing', 'Alchemy'],
p2_portrait_eyebrow: 'Mobile-first by design',
p2_portrait_h: 'Coziness in one hand',
p2_portrait_p: 'The 2D part can also be played in portrait mode. On the morning train, in bed before sleep — till the field, cast a line, and stroll the town with a single thumb.',
p2_portrait_chips: ['Portrait mode', 'One-thumb play', 'Anywhere, anytime'],
p2_art_caption: '2D part — a day in the town square, drawn in pixel art',
p3_eyebrow: 'The 3D part',
p3_title: 'Adventure the dungeon together',
p3_p: 'An adventure part fusing beat \u2019em up combat with puzzle platforming. Solo-friendly, co-op up to three.',
p3_combat_h: 'Combat gauntlets',
p3_combat_p: 'Action encounters — sword and board, spellwork, and the bow in concert',
p3_puzzle_h: 'Co-op puzzle sections',
p3_puzzle_p: 'Teamwork puzzles — stages that only open when the three roles combine their strengths',
p3_regions: 'You\u2019ll explore the dungeons of all five regions — melt the frozen north with fire magic, wade the toxic southern swamps, dig through the ancient ruins of the west.',
p3_art_caption: '3D part — co-op combat in cinematic light and silhouette',
p3_anim_note: 'Animation quality over texture detail — the 3D character always matches your 2D character',
ro_eyebrow: 'What sets it apart',
ro_title: 'No classes — gear makes the role',
ro_p: 'You never pick a class at the start. Equipment and practiced skill decide your role — change what you wear, and the same character becomes someone new.',
ro_try: 'Try the loadouts',
ro_tank_gear: 'Heavy armor + sword & shield',
ro_tank_role: 'Frontline tank',
ro_tank_d: 'Holds the line at the front of the party',
ro_mage_gear: 'Light robe + magic staff',
ro_mage_role: 'Support mage',
ro_mage_d: 'Elemental force that turns the field',
ro_archer_gear: 'Leather + bow',
ro_archer_role: 'Ranged archer',
ro_archer_d: 'One precise shot changes everything',
ro_same: '— all the same character',
// neigong (inner energy)
ne_eyebrow: 'A signature system',
ne_title: 'Neigong — basics become mastery',
ne_p: 'Inner energy (Neigong), carried from the East. Instead of buying flashy new skills, you pour the qi you’ve cultivated into the basics you already know. The same sword stroke reaches farther and bites harder as your inner energy deepens — until it blooms into a technique all its own.',
ne_try: 'Channel your inner energy',
ne_channel: 'Channel qi',
ne_release: 'Release',
ne_skill: 'Basic slash',
ne_t0_name: 'Basics',
ne_t0_d: 'A novice’s stroke — a simple cut',
ne_t1_name: 'Tier 1 · Force',
ne_t1_d: 'Qi rides the blade — greater reach and power',
ne_t2_name: 'Tier 2 · Blade-aura',
ne_t2_d: 'A crescent of energy flies along the arc, striking at range',
ne_t3_name: 'Tier 3 · Mastery',
ne_t3_d: 'Burst the qi for a wide single flash — a technique of your own',
ne_note: 'Inner energy builds through training and rest — every basic can branch into its own mastery.',
// features grid
ft_eyebrow: 'Game features',
ft_title: 'What sets Twinmere apart',
ft_1h: 'Fluid roles',
ft_1p: 'No fixed class. Gear and practiced skill decide your role — change loadout and the same character becomes tank or mage.',
ft_2h: 'Enhance basics with qi',
ft_2p: 'Instead of buying new skills, pour cultivated inner energy into the basics — a plain slash grows into blade-aura, then into a mastery.',
ft_3h: 'Rest makes you stronger',
ft_3p: 'Stamina is a daily resource, apart from HP. Only true rest restores it — and resting well pays back with bonuses.',
ft_4h: 'Everything has a reason',
ft_4p: 'Nothing is throwaway. Even the starter knife holds its own value beside a legendary blade.',
ft_5h: 'Everything interacts',
ft_5p: 'Even a chair can be sat on. No purely decorative props — the whole world answers to play.',
ft_6h: 'Solo & up to 3 co-op',
ft_6p: 'Alone or with two friends — combat gauntlets alternate with team puzzles.',
wo_eyebrow: 'The world',
wo_title: 'A continent steeped in everyday magic',
wo_p: 'A medieval fantasy world where magic is not just for battle: summon a rain-cloud over your field, hasten crops with growth magic, heal a sick animal with a touch.',
wo_region_label: 'Five regions',
wo_race_label: 'Four races, four magics',
wo_trade: 'Tropical crops · frost ore · rare desert minerals — trade regional resources, process them, and profit',
race_human: 'Human', race_human_m: 'Scholarly, studied magic',
race_orc: 'Orc', race_orc_m: 'Shamanic rites — rituals that hasten the harvest',
race_undead: 'Undead', race_undead_m: 'Death and curse work — some even keep zombie livestock',
race_elf: 'Elf', race_elf_m: 'Communion with nature',
ph_eyebrow: 'Design principles',
ph_title: 'Five promises',
ph_1_h: 'Every element must mean something',
ph_1_p: 'Even the starter knife has its own worth beside a legendary blade. Nothing is used once and discarded.',
ph_2_h: 'Everything can be interacted with',
ph_2_p: 'Even a plain chair can at least be sat on. No object exists for atmosphere alone.',
ph_3_h: 'UI only when it\u2019s needed',
ph_3_p: 'The screen stays clean — exactly the right information appears at exactly the right moment.',
ph_4_h: 'Every control must be intuitive',
ph_4_p: 'Understood instantly, no manual required. Intuition over complexity.',
ph_5_h: 'Rest makes you stronger',
ph_5_p: 'Stamina is a daily resource, separate from HP. Food alone won\u2019t restore it — only true rest: sleep, campfires, hot springs, time with others. Rest well and the game repays you: bonus XP, better foraging, higher craft success.',
st_title: 'The stamina loop — try it',
st_bar: 'Stamina',
st_act_farm: 'Till the field',
st_act_fish: 'Fish',
st_act_fight: 'Heavy attack',
st_rest_fire: 'Rest by the fire',
st_rest_sleep: 'Sleep',
st_state_ok: 'In good shape — everything available',
st_state_tired: 'Tired — efficiency starts to drop',
st_state_red: 'Exhausted — only sleep will restore you',
st_bonus: 'Well slept! +10% XP bonus · better foraging',
st_fire_blocked: 'Too exhausted — the fire isn\u2019t enough',
de_eyebrow: 'The demo',
de_title: 'What the demo will hold',
de_1_h: 'Private Zone',
de_1_t: '2D · personal space',
de_1_p: 'A cozy personal space for farming, foraging, and mining. Simple combat, portrait-play support.',
de_2_h: 'Town',
de_2_t: '2D · social hub',
de_2_p: 'The shared hub where players meet — reached from your Private Zone by mount.',
de_3_h: 'Stage 1',
de_3_t: '3D · action',
de_3_p: 'The first stage of combat, platforming, and puzzles. Clear it and claim the loot.',
de_lang: 'Korean · English from the demo onward',
po_eyebrow: 'Tell us',
po_title: 'Which side are you?',
po_sub: 'One tap steers the development.',
su_eyebrow: 'Pre-register',
su_title: 'Get in before launch',
su_p: 'Demo news and test invitations, delivered to your inbox first.',
footer_note: 'A pre-production validation page. Current images are AI-generated concept examples and may change during development.',
},
};
const useS2 = (lang) => (k) => S2[lang]?.[k] ?? S2.en[k] ?? k;
Object.assign(window, { S2, useS2 });
/* ==================== site2-widgets.jsx ==================== */
// site2-widgets.jsx — interactive widgets for the overview site
// WipeHero, FramedArt, StaminaDemo, LoadoutDemo, RaceSigil, Chip
// ============================================================
// WipeHero — drag the seam between 3D (left) and 2D (right)
// ============================================================
function WipeHero({ lang, children, initial = 0.5, onDragChange, labelsPos = 'corner', pos2d = 'center 45%', pos3d = 'center 30%', focal3d = 0.38 }) {
const s = useS2(lang);
const [p, setP] = React.useState(initial);
const [w, setW] = React.useState(0); // measured px width
const [hh, setHh] = React.useState(0); // measured px height
const ref = React.useRef(null);
const dragging = React.useRef(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const measure = () => { setW(el.clientWidth); setHh(el.clientHeight); };
measure();
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, []);
const update = (clientX) => {
const rect = ref.current.getBoundingClientRect();
setP(Math.max(0.12, Math.min(0.88, (clientX - rect.left) / rect.width)));
};
const down = (e) => { dragging.current = true; onDragChange && onDragChange(true); e.currentTarget.setPointerCapture?.(e.pointerId); update(e.clientX); };
const move = (e) => { if (dragging.current) update(e.clientX); };
const up = () => { dragging.current = false; onDragChange && onDragChange(false); };
return (
{/* base: 2D town art (visible on the RIGHT of the seam) — panned so the
party (at image center) stays centered within the visible 2D strip:
image center -> (1+p)/2 of the screen */}
{/* top: 3D night art (original orientation) — clipped to the LEFT of the
seam; slides in lockstep with the 2D side (party held centered in its
strip) so both worlds move together naturally. */}
{(() => {
const AR3 = 1697 / 927; // art aspect
const rw = hh ? hh * AR3 : 0; // rendered width at full height
const canPan = w > 0 && rw >= 0.88 * w;
if (!canPan) {
return (
);
}
// Pure lockstep: hold the party centered in the visible 3D strip, so
// both worlds slide together as the seam moves.
let left3 = (p / 2) * w - focal3d * rw;
left3 = Math.min(left3, 0); // no gap on the left
left3 = Math.max(left3, p * w - rw); // cover the strip's right edge
return (
);
})()}
{/* seam glow */}
{/* drag capture strip + handle */}
{/* side labels */}
{labelsPos === 'corner' && (<>
setP(0.82)} style={{
appearance: 'none', border: 'none', cursor: 'pointer',
position: 'absolute', left: 26, bottom: 24, zIndex: 5,
background: 'rgba(6,4,10,0.55)', backdropFilter: 'blur(3px)',
padding: '9px 16px', color: '#efe4c2',
fontFamily: 'var(--font-ko)', fontWeight: 700, fontSize: 14,
border: '1px solid rgba(200,160,76,0.4)',
opacity: p > 0.4 ? 1 : 0.55, transition: 'opacity 0.3s ease',
}}>{s('hero_left')}
setP(0.18)} style={{
appearance: 'none', border: 'none', cursor: 'pointer',
position: 'absolute', right: 26, bottom: 24, zIndex: 5,
background: 'rgba(6,4,10,0.55)', backdropFilter: 'blur(3px)',
padding: '9px 16px', color: '#efe4c2',
fontFamily: 'var(--font-ko)', fontWeight: 700, fontSize: 14,
border: '1px solid rgba(200,160,76,0.4)',
opacity: p < 0.6 ? 1 : 0.55, transition: 'opacity 0.3s ease',
}}>{s('hero_right')}
)}
{labelsPos === 'edge' && (<>
setP(0.8)} title={s('hero_left')} style={{
appearance: 'none', cursor: 'pointer',
position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)', zIndex: 5,
width: 46, height: 46, borderRadius: '50%',
background: 'rgba(6,4,10,0.55)', backdropFilter: 'blur(3px)',
border: '1px solid rgba(200,160,76,0.45)', color: '#efe4c2', fontSize: 19,
display: 'grid', placeItems: 'center',
opacity: dragging.current ? 0.15 : (p < 0.6 ? 1 : 0.5), transition: 'opacity 0.3s ease',
}}>⚔
setP(0.2)} title={s('hero_right')} style={{
appearance: 'none', cursor: 'pointer',
position: 'absolute', right: 16, top: '50%', transform: 'translateY(-50%)', zIndex: 5,
width: 46, height: 46, borderRadius: '50%',
background: 'rgba(6,4,10,0.55)', backdropFilter: 'blur(3px)',
border: '1px solid rgba(200,160,76,0.45)', color: '#efe4c2', fontSize: 19,
display: 'grid', placeItems: 'center',
opacity: dragging.current ? 0.15 : (p > 0.4 ? 1 : 0.5), transition: 'opacity 0.3s ease',
}}>⌂
)}
{children}
{[{ top: -7, left: -7 }, { top: -7, right: -7 }, { bottom: -7, left: -7 }, { bottom: -7, right: -7 }].map((pp, i) => (
))}
{caption && (
{caption}
)}
);
}
// ============================================================
// ScrollArt — wide image explored by dragging/scrolling left↔right
// ============================================================
function ScrollArt({ src, alt, caption, hint, aspect = '1.8 / 1' }) {
const ref = React.useRef(null);
const drag = React.useRef({ on: false, x: 0, left: 0 });
const down = (e) => { drag.current = { on: true, x: e.clientX, left: ref.current.scrollLeft }; ref.current.setPointerCapture?.(e.pointerId); };
const move = (e) => { if (!drag.current.on) return; ref.current.scrollLeft = drag.current.left - (e.clientX - drag.current.x); };
const up = () => { drag.current.on = false; };
React.useEffect(() => {
const el = ref.current; if (!el) return;
el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2; // start centered
}, []);
return (
{[{ top: -7, left: -7 }, { top: -7, right: -7 }, { bottom: -7, left: -7 }, { bottom: -7, right: -7 }].map((pp, i) => (
))}
{/* edge fades */}
{hint && (
← {hint} →
)}
{caption && (
{caption}
)}
);
}
// ============================================================
// Gallery — browse a set of 2D screenshots (drag each, arrows + thumbs)
// ============================================================
function Gallery({ items, hint }) {
const [i, setI] = React.useState(0);
const cur = items[i];
const go = (d) => setI((i + d + items.length) % items.length);
const arrow = (side) => ({
appearance: 'none', cursor: 'pointer', position: 'absolute', top: '50%', [side]: 10,
transform: 'translateY(-50%)', zIndex: 6, width: 44, height: 44, borderRadius: '50%',
background: 'rgba(6,4,10,0.6)', backdropFilter: 'blur(3px)', border: '1px solid rgba(200,160,76,0.5)',
color: '#efe4c2', fontSize: 22, lineHeight: 1, display: 'grid', placeItems: 'center',
});
return (
{/* fixed-size frame (constant across images) — image fills via cover */}
{[{ top: -7, left: -7 }, { top: -7, right: -7 }, { bottom: -7, left: -7 }, { bottom: -7, right: -7 }].map((pp, idx) => (
))}
{items.length > 1 && (<>
go(-1)} style={arrow('left')}>‹
go(1)} style={arrow('right')}>›
)}
{i + 1} / {items.length}
{cur.cap && (
{cur.cap}
)}
{/* thumbnail rail */}
{items.map((it, idx) => (
setI(idx)} aria-label={`screenshot ${idx + 1}`} style={{
appearance: 'none', padding: 0, cursor: 'pointer',
width: 104, height: 58, overflow: 'hidden', background: '#050308',
border: `2px solid ${idx === i ? 'var(--gold)' : 'rgba(200,160,76,0.3)'}`,
opacity: idx === i ? 1 : 0.6, transition: 'opacity 0.2s ease, border-color 0.2s ease',
}}>
))}
);
}
// ============================================================
// Chip — small label token
// ============================================================
function Chip({ children, dark }) {
return (
{children}
);
}
// ============================================================
// StaminaDemo — the rest-to-grow loop, playable
// ============================================================
function StaminaDemo({ lang }) {
const s = useS2(lang);
const [st, setSt] = React.useState(72);
const [flash, setFlash] = React.useState(null); // {text, tone}
const timer = React.useRef(null);
const red = st <= 25;
const tired = st <= 50 && !red;
const say = (text, tone = 'gold') => {
setFlash({ text, tone });
clearTimeout(timer.current);
timer.current = setTimeout(() => setFlash(null), 2600);
};
const act = (cost, name) => {
if (red) return;
const eff = tired ? (lang === 'ko' ? ' (효율 감소)' : ' (reduced yield)') : '';
setSt(v => Math.max(0, v - cost));
say(`${name}${eff} −${cost}`, tired ? 'amber' : 'plain');
};
const fire = () => {
if (red) { say(s('st_fire_blocked'), 'red'); return; }
setSt(v => Math.min(100, v + 22));
say(`${s('st_rest_fire')} +22`, 'gold');
};
const sleep = () => {
setSt(100);
say(s('st_bonus'), 'gold');
};
const barColor = red ? '#a83232' : tired ? '#c8a04c' : '#6a9a4a';
const stateText = red ? s('st_state_red') : tired ? s('st_state_tired') : s('st_state_ok');
const btn = (enabled) => ({
appearance: 'none', cursor: enabled ? 'pointer' : 'not-allowed',
fontFamily: 'var(--font-ko)', fontWeight: 700, fontSize: 14,
padding: '11px 16px',
background: 'rgba(232,222,170,0.04)',
color: enabled ? '#efe4c2' : 'rgba(239,228,194,0.35)',
border: `1px solid ${enabled ? 'rgba(200,160,76,0.4)' : 'rgba(200,160,76,0.15)'}`,
transition: 'all 0.2s ease',
});
return (
{s('st_title')}
{/* bar */}
{stateText}
{/* actions */}
act(18, s('st_act_farm'))}>⚘ {s('st_act_farm')}
act(12, s('st_act_fish'))}>⚓ {s('st_act_fish')}
act(24, s('st_act_fight'))}>⚔ {s('st_act_fight')}
☲ {s('st_rest_fire')}
✦ {s('st_rest_sleep')}
{/* flash line */}
{flash?.text}
);
}
// ============================================================
// LoadoutDemo — same character, different gear = different role
// ============================================================
function LoadoutDemo({ lang }) {
const s = useS2(lang);
const [k, setK] = React.useState('tank');
const opts = [
{ k: 'tank', gear: s('ro_tank_gear'), role: s('ro_tank_role'), d: s('ro_tank_d') },
{ k: 'mage', gear: s('ro_mage_gear'), role: s('ro_mage_role'), d: s('ro_mage_d') },
{ k: 'archer', gear: s('ro_archer_gear'), role: s('ro_archer_role'), d: s('ro_archer_d') },
];
const cur = opts.find(o => o.k === k);
return (
{/* character stage */}
{/* distant foes — small monsters behind the hero */}
{[
{ r: 26, b: 58, s: 36, o: 0.5 },
{ r: 76, b: 92, s: 27, o: 0.4 },
{ r: 14, b: 110, s: 22, o: 0.3 },
].map((m, i) => (
))}
{/* ground */}
{cur.role.toUpperCase?.() ?? cur.role}{s('ro_same')}
{/* loadout buttons */}
{s('ro_try')}
{opts.map(o => {
const on = o.k === k;
return (
setK(o.k)} style={{
appearance: 'none', cursor: 'pointer', textAlign: 'left',
padding: '16px 20px',
background: on ? 'rgba(200,160,76,0.1)' : 'rgba(232,222,170,0.03)',
border: `1.5px solid ${on ? 'var(--gold)' : 'rgba(200,160,76,0.25)'}`,
transition: 'all 0.25s ease',
transform: on ? 'translateX(6px)' : 'none',
}}>
{o.gear}
→ {o.role}
{o.d}
);
})}
{/* shadow */}
{kind === 'tank' && (
{/* heavy pauldrons + helm crest */}
)}
{kind === 'mage' && (
{/* robe */}
)}
{kind === 'archer' && (
{/* light hood + cape */}
)}
);
}
// ============================================================
// RaceSigil — tiny icons for the four races
// ============================================================
function RaceSigil({ kind, size = 34, color = 'var(--ink-rust)' }) {
const st = { fill: 'none', stroke: color, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
return (
{kind === 'human' && (
)}
{kind === 'orc' && (
)}
{kind === 'undead' && (
)}
{kind === 'elf' && (
)}
);
}
// ============================================================
// NeigongDemo — pour inner energy (內功) into a basic skill to enhance it
// ============================================================
function NeigongDemo({ lang }) {
const s = useS2(lang);
const [tier, setTier] = React.useState(0);
const tiers = [
{ name: s('ne_t0_name'), d: s('ne_t0_d') },
{ name: s('ne_t1_name'), d: s('ne_t1_d') },
{ name: s('ne_t2_name'), d: s('ne_t2_d') },
{ name: s('ne_t3_name'), d: s('ne_t3_d') },
];
const cur = tiers[tier];
const pct = (tier / 3) * 100;
return (
{/* skill stage */}
{/* ground */}
{/* swordsman + slash, redraws on tier change */}
{/* swordsman silhouette (facing right) */}
{/* sword blade (qi-lit by tier) */}
0 ? 'url(#ne-glow)' : 'none'} />
{/* TIER 0: small plain arc */}
{tier === 0 && (
)}
{/* TIER 1: bigger glowing arc */}
{tier >= 1 && (
)}
{/* TIER 2: projected crescent flying right */}
{tier >= 2 && (
)}
{/* TIER 3: wide radial flash + second crescent */}
{tier >= 3 && (
{[...Array(7)].map((_, i) => {
const a = (-50 + i * 16) * Math.PI / 180;
return
;
})}
)}
{/* star rating */}
{[0, 1, 2].map(i => (
★
))}
{/* skill label */}
{s('ne_skill')}
{/* tier name + desc */}
{/* qi gauge + controls */}
{s('ne_try')}
{/* gauge */}
{lang === 'ko' ? '내공' : 'QI'}
{'★'.repeat(tier)}{'☆'.repeat(3 - tier)}
setTier(Math.min(3, tier + 1))} disabled={tier >= 3}
className="cta cta-primary on-dark" style={{ flex: 1, justifyContent: 'center', padding: '13px 16px', opacity: tier >= 3 ? 0.4 : 1, cursor: tier >= 3 ? 'default' : 'pointer' }}>
{s('ne_channel')} ⟳
setTier(0)} disabled={tier === 0}
className="cta cta-secondary" style={{ padding: '13px 16px', color: '#c3b795', border: '1px solid rgba(200,160,76,0.4)', opacity: tier === 0 ? 0.35 : 1, cursor: tier === 0 ? 'default' : 'pointer' }}>
{s('ne_release')}
{s('ne_note')}
{kind === 'role' &&
);
}
function FeatureGrid({ lang }) {
const s = useS2(lang);
const cards = [
{ icon: 'role', h: s('ft_1h'), p: s('ft_1p') },
{ icon: 'coop', h: s('ft_6h'), p: s('ft_6p') },
];
return (
{cards.map((c, i) => (
))}
{/* scrims — much lighter than v1; art stays visible */}
{particles &&
↤ {s('hero_drag')} ↦
{s('hero_tag')}
{s('hero_sub')}
);
}
window.HeroV2 = HeroV2;
/* ==================== site2-app.jsx (twinmere) ==================== */
// site2-app.jsx — page assembly: Twinmere overview site (from the spec)
function Site2App() {
const [t, setTweak] = useTweaks({ ...(/*EDITMODE-BEGIN*/{
lang: 'ko',
particles: true,
}/*EDITMODE-END*/), lang: detectInitialLang() });
const lang = t.lang;
// 언어 토글 시 사용자의 선택을 저장 → 다음 방문 때 자동감지보다 우선한다.
const changeLang = React.useCallback((v) => {
try { localStorage.setItem('tm-lang', v); } catch (e) {}
setTweak('lang', v);
}, [setTweak]);
const s = useS2(lang);
const [region, setRegion] = React.useState('central');
const heroV2 = typeof window !== 'undefined' && !!window.__HERO_V2__;
// 현재 언어를 전역에 공유 (logDemand가 lang 필드로 기록)
React.useEffect(() => {
window.__TM_LANG__ = lang;
try { document.documentElement.lang = lang; } catch (e) {}
}, [lang]);
// GA4 페이지 계측: 스크롤 깊이(25/50/75/100%) + 사전예약 CTA 노출(twinmere_cta_view) 1회
React.useEffect(() => {
const fired = {};
const onScroll = () => {
const doc = document.documentElement;
const max = doc.scrollHeight - window.innerHeight;
if (max <= 0) return;
const pct = (window.scrollY / max) * 100;
[25, 50, 75, 100].forEach((mark) => {
if (pct >= mark && !fired[mark]) {
fired[mark] = true;
trackGA('scroll_depth', { percent: mark });
}
});
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
let io = null;
const cta = document.getElementById('signup');
if (cta && 'IntersectionObserver' in window) {
io = new IntersectionObserver((entries) => {
if (entries.some((en) => en.isIntersecting)) {
trackGA('twinmere_cta_view', { lang: window.__TM_LANG__ });
if (io) { io.disconnect(); io = null; }
}
}, { threshold: 0.3 });
io.observe(cta);
}
return () => {
window.removeEventListener('scroll', onScroll);
if (io) io.disconnect();
};
}, []);
const regions = [
{ k: 'central', ko: '중부', en: 'Central',
d: lang === 'ko' ? '온화한 기후 아래 여러 종족이 어우러져 사는 마을. 농사·낚시·사냥 — 모든 생활이 여기서 시작됩니다.' : 'Mild fields where the races live side by side. Farming, fishing, hunting — every life begins here.',
ev: lang === 'ko' ? '장터 · 축제' : 'Markets · festivals' },
{ k: 'north', ko: '북부', en: 'North',
d: lang === 'ko' ? '눈과 얼음의 혹한. 설원 몬스터와 냉기 마법 생물이 서식하고, 불 마법으로 언 땅을 잠시 녹여 희귀 작물을 거둡니다.' : 'Frost and ice. Snowfield monsters roam; melt the frozen ground with fire magic to coax out rare crops.',
ev: lang === 'ko' ? '눈사태 · 몬스터 습격' : 'Avalanches · monster raids' },
{ k: 'south', ko: '남부', en: 'South',
d: lang === 'ko' ? '무성한 정글과 늪. 열대 과일, 독버섯, 진귀한 약초 — 농사보다 채집이 지배하는 땅입니다.' : 'Dense jungle and swamp. Tropical fruit, toxic fungi, rare herbs — a land ruled by foraging, not farming.',
ev: lang === 'ko' ? '폭우 · 자연재해' : 'Downpours · natural hazards' },
{ k: 'west', ko: '서부', en: 'West',
d: lang === 'ko' ? '극심한 더위와 모래폭풍의 사막. 물 마법으로 식수를 얻고, 반쯤 묻힌 고대 유적과 희귀 광물 지대를 탐사합니다.' : 'Desert of heat and sandstorm. Draw water by magic; probe half-buried ruins and veins of rare ore.',
ev: lang === 'ko' ? '모래폭풍 · 유적 탐사' : 'Sandstorms · ruin delves' },
{ k: 'east', ko: '동부', en: 'East',
d: lang === 'ko' ? '무공과 주술이 흐르는 동양풍의 미지 세계. 강호 문파, 전통 축제, 약초와 차(茶)의 문화가 살아 숨쉽니다.' : 'An eastern realm of martial arts and shamanic craft — sects of the rivers and lakes, festivals, herbs and tea.',
ev: lang === 'ko' ? '무공 대회 · 전통 축제' : 'Martial tournaments · festivals' },
];
const curRegion = regions.find(r => r.k === region);
const races = [
{ k: 'human', name: s('race_human'), m: s('race_human_m') },
{ k: 'orc', name: s('race_orc'), m: s('race_orc_m') },
{ k: 'undead', name: s('race_undead'), m: s('race_undead_m') },
{ k: 'elf', name: s('race_elf'), m: s('race_elf_m') },
];
const principles = [
{ n: 'I', h: s('ph_1_h'), p: s('ph_1_p') },
{ n: 'II', h: s('ph_2_h'), p: s('ph_2_p') },
{ n: 'III', h: s('ph_3_h'), p: s('ph_3_p') },
{ n: 'IV', h: s('ph_4_h'), p: s('ph_4_p') },
{ n: 'V', h: s('ph_5_h'), p: s('ph_5_p'), big: true },
];
return (
{/* ============ NAV ============ */}
TWINMERE
{/* ============ HERO — the wipe ============ */}
{heroV2 ?
: (
{/* dark scrims for legibility */}
{t.particles &&
{s('hero_tag')}
↤ {s('hero_drag')} ↦
{/* bottom center: sub + CTA + hint */}
{s('hero_sub')}
{s('hero_meta')}
{/* (drag hint lives under the tagline in the top block) */}
)}
{/* ============ CONCEPT ============ */}
{/* genre lockup */}
{s('con_genre_2d')}
{s('con_genre_x')}
{s('con_genre_3d')}
{s('con_p')}
{/* ============ 2D PART ============ */}
⌂ {s('p2_private_h')}
{s('p2_private_p')}
⚘ {s('p2_town_h')}
{s('p2_town_p')}
{/* content chips */}
{[
{ label: s('p2_life_label'), items: s('p2_life') },
{ label: s('p2_skill_label'), items: s('p2_skill') },
{ label: s('p2_craft_label'), items: s('p2_craft') },
].map((row) => (
{row.label}
{row.items.map((c) => {c} )}
))}
{/* portrait-play feature — mobile-first coziness */}
{/* portrait phone — 2D art cropped tall, thumb-reach arc */}
{/* legibility gradient */}
{/* thumb-reach arc, bottom-right */}
{s('p2_portrait_h')}
{s('p2_portrait_p')}
{s('p2_portrait_chips').map((c) => {c} )}
{/* ============ 3D PART ============ */}
⚔ {s('p3_combat_h')}
{s('p3_combat_p')}
⚙ {s('p3_puzzle_h')}
{s('p3_puzzle_p')}
{s('p3_regions')}
{/* region tabs */}
{s('wo_region_label')}
{regions.map((r) => {
const on = r.k === region;
return (
setRegion(r.k)} style={{
appearance: 'none', cursor: 'pointer',
display: 'inline-flex', alignItems: 'center', gap: 8,
padding: '11px 18px',
fontFamily: 'var(--font-ko)', fontWeight: 700, fontSize: 15,
color: on ? '#1a0e02' : '#efe4c2',
background: on ? 'var(--gold)' : 'rgba(232,222,170,0.04)',
border: `1.5px solid ${on ? 'var(--gold)' : 'rgba(200,160,76,0.3)'}`,
transition: 'all 0.25s ease',
}}>
);
})}
{/* region panel */}
{lang === 'ko' ? curRegion.ko : curRegion.en}
{lang === 'ko' ? curRegion.en.toUpperCase() : curRegion.ko}
{curRegion.d}
{lang === 'ko' ? '지역 이벤트' : 'REGIONAL EVENTS'} — {curRegion.ev}
{s('p3_anim_note')}
{/* ============ GAME FEATURES ============ */}
{/* ============ POLL ============ */}
{/* ============ SIGNUP ============ */}
{/* ============ FOOTER ============ */}
BEDROCK INC. · 2026
{s('footer_note')}
{/* ============ TWEAKS ============ */}
setTweak('particles', v)}
/>
{
try {
localStorage.removeItem('br-demand-vote');
localStorage.removeItem('br-signup-email');
} catch (e) {}
location.reload();
}}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(