feat: 격자 에디터 프레임에 커서 추적 conic-gradient 글로우

tyange commented

2026-09-08 07:42:24 +00:00

Owner

CodePen "CSS Gradient Border Glowing Animation Hover Effect"를 격자
에디터에 적용. 칸(SVG rect)엔 ::before·mask-composite·filter가 안 먹고
240+칸마다 blur 광원을 그리면 마우스 이동마다 버벅이므로, 격자 외곽
프레임 하나(.grid-glow)에만 얹는다.

::before(2px 호) + ::after(blur 번짐) 두 겹, 표준 gradient-border
mask 트릭으로 링만 남김. --start를 mousemove 각도로 rAF 스로틀 갱신
hover / :focus-within 동안만 표시(opacity 전이), 격자 벗어나면 사라짐
무지개 색 스톱은 style.css의 --grid-glow-stops 토큰(컴포넌트에 색 미기입)
라이트는 mix-blend-mode: multiply로 흰 배경에서 색 살림, 다크는 normal.
전역 규칙이라 style.css에 둠(스코프 명시도가 .dark override를 눌러서).
가산 블렌드(screen/plus-lighter)는 다크에서 합성이 깨져 미사용
GridPreview·export에는 없음(편집 화면 전용 장식)

docs/rendering-and-export.md에 근거 기록.

Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01MfW22NQxomSVmTAQiQCjQu

CodePen "CSS Gradient Border Glowing Animation Hover Effect"를 격자 에디터에 적용. 칸(SVG rect)엔 ::before·mask-composite·filter가 안 먹고 240+칸마다 blur 광원을 그리면 마우스 이동마다 버벅이므로, 격자 외곽 프레임 하나(.grid-glow)에만 얹는다. - ::before(2px 호) + ::after(blur 번짐) 두 겹, 표준 gradient-border mask 트릭으로 링만 남김. --start를 mousemove 각도로 rAF 스로틀 갱신 - hover / :focus-within 동안만 표시(opacity 전이), 격자 벗어나면 사라짐 - 무지개 색 스톱은 style.css의 --grid-glow-stops 토큰(컴포넌트에 색 미기입) - 라이트는 mix-blend-mode: multiply로 흰 배경에서 색 살림, 다크는 normal. 전역 규칙이라 style.css에 둠(스코프 명시도가 .dark override를 눌러서). 가산 블렌드(screen/plus-lighter)는 다크에서 합성이 깨져 미사용 - GridPreview·export에는 없음(편집 화면 전용 장식) docs/rendering-and-export.md에 근거 기록. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MfW22NQxomSVmTAQiQCjQu

tyange added 1 commit

2026-09-08 07:42:24 +00:00

feat: 격자 에디터 프레임에 커서 추적 conic-gradient 글로우

Deploy Palim to AWS (Nginx) / deploy (push) Successful in 2m12s

Details

baa901c668

CodePen "CSS Gradient Border Glowing Animation Hover Effect"를 격자
에디터에 적용. 칸(SVG rect)엔 ::before·mask-composite·filter가 안 먹고
240+칸마다 blur 광원을 그리면 마우스 이동마다 버벅이므로, 격자 외곽
프레임 하나(.grid-glow)에만 얹는다.

- ::before(2px 호) + ::after(blur 번짐) 두 겹, 표준 gradient-border
  mask 트릭으로 링만 남김. --start를 mousemove 각도로 rAF 스로틀 갱신
- hover / :focus-within 동안만 표시(opacity 전이), 격자 벗어나면 사라짐
- 무지개 색 스톱은 style.css의 --grid-glow-stops 토큰(컴포넌트에 색 미기입)
- 라이트는 mix-blend-mode: multiply로 흰 배경에서 색 살림, 다크는 normal.
  전역 규칙이라 style.css에 둠(스코프 명시도가 .dark override를 눌러서).
  가산 블렌드(screen/plus-lighter)는 다크에서 합성이 깨져 미사용
- GridPreview·export에는 없음(편집 화면 전용 장식)

docs/rendering-and-export.md에 근거 기록.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MfW22NQxomSVmTAQiQCjQu

tyange merged commit baa901c668 into main

2026-09-08 07:42:36 +00:00

Rows
Columns

feat: 격자 에디터 프레임에 커서 추적 conic-gradient 글로우 #3