3.2 KiB
3.2 KiB
.gemini/current.md
TASK_META (수정 금지)
- TASK_TITLE: Lobby 별 반짝임을 “십자 글린트 + 블룸(이미지 참고)”로 개선(이동/transform 0)
- TASK_SLUG: lobby-glint-cross-bloom-like-ref
작업 목표
@src/app/page.tsx 로비 배경의 별자리(오리온/마차부/북두칠성) 별(점)을
첨부 이미지처럼 “십자(4-point) 글린트 + 부드러운 빛 번짐(bloom)” 느낌으로 반짝이게 만든다.
핵심 제약(최우선)
- 애니메이션은 opacity만 허용한다.
transform(scale/translate/rotate 포함) 사용 절대 금지.- 대각선(×) 글린트 금지. 십자(+)만 사용.
- 별자리 외 랜덤 별/스타필드/Canvas 이동 연출 금지.
작업 요구사항
- 별자리 3개 고정(필수)
- 배경에는 오리온/마차부/북두칠성 3개만 존재.
- 별자리 외 추가 별(랜덤 점/스타필드)은 0.
- “이미지 같은” 글린트 형태(필수, SVG 권장) 각 별은 아래 구조로 표현한다:
- Core: 작은
circle(중앙 빛) - Spikes: 수평 line 1개 + 수직 line 1개 (십자)
- Spikes는 “끝이 뚝 끊기지 않고” 양 끝으로 갈수록 서서히 투명해져야 함:
stroke를 단색이 아니라linearGradient로 처리(중앙 흰색, 양끝 투명)
- Bloom: core/스파이크에 아주 약한 blur glow를 1겹만 추가
- 방법: (권장) 스파이크를 2번 그리기
-
- blur+낮은 opacity(블룸용)
-
- 선명한 라인(본선)
-
- 또는 SVG filter(feGaussianBlur) 1개를 최소로 사용
- 방법: (권장) 스파이크를 2번 그리기
- 반짝임 리듬(필수)
- 글린트는 항상 켜져 있지 않고, 대부분은 거의 안 보이다가 잠깐 피크:
- 기본 opacity: 0 (또는 0.02~0.05)
- 피크 순간만 0.7~0.9로 올라왔다가 빠르게 내려옴
- 별마다 duration(2~6s), delay 분산(고정 랜덤 OK, 프레임 랜덤 금지)
- 디자인 수치(권장 고정값)
- StrokeWidth: 0.6 전후(0.5~0.8)
- Arm 길이(한쪽): 5px(작은 별) ~ 10px(밝은 별) 정도
- Core 반지름: 1.2 ~ 2.0
- Bloom(블러 라인) opacity는 본선보다 훨씬 낮게(예: 본선 1.0이면 블룸 0.25 이하)
- 모션 접근성(필수)
- prefers-reduced-motion: reduce 에서는 애니메이션 OFF(정지 우선)
- 글린트는 opacity를 낮게 고정(예: 0.1) 또는 0
Non-scope
- 로비 CTA/항로 카드 구성 변경 금지
- /flight 등 다른 페이지 변경 금지
- 신규 기능 추가 금지
적용 파일
- 필수:
@src/app/page.tsx - 필요 시(최소): 글로벌 CSS에 twinkle keyframes/클래스 추가
완료 조건(AC)
- 글린트는 십자(+)만 존재하고 대각선(×)이 없다
- 스파이크가 그라데이션으로 자연스럽게 사라져(끝이 부드러움) 이미지와 유사한 느낌이다
- bloom이 과하지 않고 “은은한 번짐” 정도로만 보인다
- 애니메이션은 opacity만 사용하며 transform이 0이다(지터/이동 없음)
- 별자리 3개만 유지되고 추가 별/스타필드가 없다
- prefers-reduced-motion에서 애니메이션이 정지(또는 매우 약화)된다
완료 후 출력(최소)
- 수정된 파일 경로 목록
- AC 항목별 체크 결과(OK/NO)