diff --git a/src/features/lobby-starfield/model/constellationData.ts b/src/features/lobby-starfield/model/constellationData.ts
index d932009..9af28f3 100644
--- a/src/features/lobby-starfield/model/constellationData.ts
+++ b/src/features/lobby-starfield/model/constellationData.ts
@@ -13,7 +13,7 @@ export type LobbySegment = {
};
export type LobbyConstellation = {
- key: 'orion' | 'auriga' | 'ursaMajor';
+ key: "orion" | "auriga" | "ursaMajor";
className: string;
viewBox: string;
colorClass: string;
@@ -23,31 +23,33 @@ export type LobbyConstellation = {
export const LOBBY_CONSTELLATIONS: LobbyConstellation[] = [
{
- key: 'orion',
- className: 'absolute bottom-10 left-5 w-72 h-72 opacity-30',
- viewBox: '0 0 100 100',
- colorClass: 'text-indigo-200',
+ key: "orion",
+ className: "absolute bottom-10 left-5 h-72 w-72 opacity-38",
+ viewBox: "0 0 100 100",
+ colorClass: "text-[#ffffff]",
stars: [
- { cx: 25, cy: 15, r: 0.82 },
- { cx: 75, cy: 25, r: 0.96, armScale: 1.08 },
- { cx: 45, cy: 48, r: 0.58 },
+ { cx: 26, cy: 20, r: 1.2, armScale: 1.2 },
+ { cx: 65, cy: 22, r: 0.82 },
+ { cx: 45, cy: 53, r: 0.58 },
{ cx: 50, cy: 50, r: 0.54 },
- { cx: 55, cy: 52, r: 0.6 },
- { cx: 30, cy: 85, r: 0.86 },
- { cx: 70, cy: 80, r: 0.98, armScale: 1.08 },
+ { cx: 55, cy: 47, r: 0.6 },
+ { cx: 38, cy: 84, r: 0.86 },
+ { cx: 70, cy: 82, r: 1.1, armScale: 1.2 },
],
segments: [
- { x1: 25, y1: 15, x2: 45, y2: 48 },
- { x1: 75, y1: 25, x2: 55, y2: 52 },
- { x1: 45, y1: 48, x2: 30, y2: 85 },
- { x1: 55, y1: 52, x2: 70, y2: 80 },
+ { x1: 26, y1: 20, x2: 45, y2: 53 },
+ { x1: 65, y1: 22, x2: 55, y2: 47 },
+ { x1: 45, y1: 53, x2: 50, y2: 50 },
+ { x1: 50, y1: 50, x2: 55, y2: 47 },
+ { x1: 45, y1: 53, x2: 38, y2: 84 },
+ { x1: 55, y1: 47, x2: 70, y2: 82 },
],
},
{
- key: 'auriga',
- className: 'absolute top-10 right-10 w-64 h-64 opacity-25',
- viewBox: '0 0 100 100',
- colorClass: 'text-blue-200',
+ key: "auriga",
+ className: "absolute top-10 right-10 h-64 w-64 opacity-34",
+ viewBox: "0 0 100 100",
+ colorClass: "text-[#ffffff]",
stars: [
{ cx: 50, cy: 15, r: 1.06, armScale: 1.1 },
{ cx: 20, cy: 35, r: 0.67 },
@@ -64,27 +66,27 @@ export const LOBBY_CONSTELLATIONS: LobbyConstellation[] = [
],
},
{
- key: 'ursaMajor',
- className: 'absolute top-20 left-10 w-80 h-48 opacity-25',
- viewBox: '0 0 100 60',
- colorClass: 'text-slate-200',
+ key: "ursaMajor",
+ className: "absolute top-20 left-10 h-48 w-80 opacity-34",
+ viewBox: "0 0 100 60",
+ colorClass: "text-[#ffffff]",
stars: [
- { cx: 10, cy: 20, r: 0.64 },
- { cx: 25, cy: 25, r: 0.67 },
- { cx: 40, cy: 35, r: 0.69 },
- { cx: 55, cy: 45, r: 0.99 },
- { cx: 75, cy: 45, r: 0.98 },
- { cx: 80, cy: 15, r: 0.93 },
- { cx: 60, cy: 10, r: 0.96 },
+ { cx: 8, cy: 12, r: 0.64 },
+ { cx: 32, cy: 12, r: 0.67 },
+ { cx: 46, cy: 24, r: 0.69 },
+ { cx: 58, cy: 30, r: 0.99 },
+ { cx: 88, cy: 36, r: 0.98 },
+ { cx: 78, cy: 48, r: 0.93 },
+ { cx: 58, cy: 42, r: 0.96 },
],
segments: [
- { x1: 10, y1: 20, x2: 25, y2: 25 },
- { x1: 25, y1: 25, x2: 40, y2: 35 },
- { x1: 40, y1: 35, x2: 55, y2: 45 },
- { x1: 55, y1: 45, x2: 75, y2: 45 },
- { x1: 75, y1: 45, x2: 80, y2: 15 },
- { x1: 80, y1: 15, x2: 60, y2: 10 },
- { x1: 60, y1: 10, x2: 55, y2: 45 },
+ { x1: 8, y1: 12, x2: 32, y2: 12 },
+ { x1: 32, y1: 12, x2: 46, y2: 24 },
+ { x1: 46, y1: 24, x2: 58, y2: 30 },
+ { x1: 58, y1: 30, x2: 88, y2: 36 },
+ { x1: 88, y1: 36, x2: 78, y2: 48 },
+ { x1: 78, y1: 48, x2: 58, y2: 42 },
+ { x1: 58, y1: 42, x2: 58, y2: 30 },
],
},
];
diff --git a/src/features/lobby-starfield/ui/StarGlint.tsx b/src/features/lobby-starfield/ui/StarGlint.tsx
index b08ec13..43b5769 100644
--- a/src/features/lobby-starfield/ui/StarGlint.tsx
+++ b/src/features/lobby-starfield/ui/StarGlint.tsx
@@ -1,6 +1,9 @@
-import { CSSProperties } from 'react';
+import { CSSProperties } from "react";
-import { LOBBY_STAR_TIMINGS, LobbyStar } from '@/features/lobby-starfield/model/constellationData';
+import {
+ LOBBY_STAR_TIMINGS,
+ LobbyStar,
+} from "@/features/lobby-starfield/model/constellationData";
export function StarGlint({
star,
@@ -10,37 +13,38 @@ export function StarGlint({
starIndex: number;
}) {
const timing = LOBBY_STAR_TIMINGS[starIndex % LOBBY_STAR_TIMINGS.length];
+ const coreRadius = star.r * 0.5;
const strengthTier =
- star.r >= 0.95 ? 'bright' : star.r >= 0.72 ? 'mid' : 'faint';
+ coreRadius >= 0.9 ? "bright" : coreRadius >= 0.7 ? "mid" : "faint";
const glintPeak =
- strengthTier === 'bright' ? 0.7 : strengthTier === 'mid' ? 0.61 : 0.52;
+ strengthTier === "bright" ? 0.54 : strengthTier === "mid" ? 0.47 : 0.41;
const bloomPeak =
- strengthTier === 'bright' ? 0.16 : strengthTier === 'mid' ? 0.12 : 0.08;
+ strengthTier === "bright" ? 0.085 : strengthTier === "mid" ? 0.065 : 0.045;
const coreLow =
- strengthTier === 'bright' ? 0.9 : strengthTier === 'mid' ? 0.73 : 0.6;
+ strengthTier === "bright" ? 0.88 : strengthTier === "mid" ? 0.73 : 0.6;
const coreHigh =
- strengthTier === 'bright' ? 1 : strengthTier === 'mid' ? 0.9 : 0.82;
+ strengthTier === "bright" ? 0.98 : strengthTier === "mid" ? 0.89 : 0.81;
const coreReduced =
- strengthTier === 'bright' ? 0.9 : strengthTier === 'mid' ? 0.76 : 0.66;
+ strengthTier === "bright" ? 0.88 : strengthTier === "mid" ? 0.75 : 0.64;
const coreStyle = {
animationDuration: `${timing.duration}s`,
animationDelay: `${timing.delay}s`,
- '--core-low': `${coreLow}`,
- '--core-high': `${coreHigh}`,
- '--core-reduced': `${coreReduced}`,
+ "--core-low": `${coreLow}`,
+ "--core-high": `${coreHigh}`,
+ "--core-reduced": `${coreReduced}`,
} as CSSProperties;
const glintStyle = {
animationDuration: `${timing.duration}s`,
animationDelay: `${timing.delay + 0.12}s`,
- '--glint-peak': `${glintPeak}`,
- '--glint-base': '0.02',
- '--bloom-peak': `${bloomPeak}`,
- '--bloom-base': '0.01',
+ "--glint-peak": `${glintPeak}`,
+ "--glint-base": "0.02",
+ "--bloom-peak": `${bloomPeak}`,
+ "--bloom-base": "0.01",
} as CSSProperties;
- const glintLength = star.r * 4.4 * (star.armScale ?? 1);
+ const glintLength = coreRadius * 5.2 * (star.armScale ?? 1);
const gradientXId = `glint-x-${starIndex}`;
const gradientYId = `glint-y-${starIndex}`;
@@ -73,11 +77,17 @@ export function StarGlint({
-
+