[Design] 메인 히어로 — 떠다니는 오로라 + 비대칭 글라스 패널#17
Open
MeganMagic wants to merge 2 commits into
Open
Conversation
- blob drift를 다단계 keyframe 순환(orbit + scale breathing)으로 교체해 왕복(alternate) 대신 매끄럽게 떠다니는 floating 모션으로 개선 - 무거운 filter: blur(96px)를 radial-gradient 글로우로 대체 (블러 필터 0개) - 50/30/15/5% 비대칭 세로 패널을 추가 — backdrop-filter 없이 반투명 틴트 + border만 사용해 뒤 그라데이션이 비쳐 색이 흐르고 경계(seam)가 드러남 - 결과적으로 blur/backdrop-filter 연산을 모두 제거해 모바일 포함 60fps Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- radial-gradient/반투명 틴트 방식이 의도한 느낌이 아니라 되돌림 - blob에 filter: blur(96px) 복원 (부드러운 오로라) - 비대칭 세로 패널 → 6×6 backdrop-filter 모자이크 그리드로 교체 (셀마다 자기 영역만 블러 → 셀별 색 차이 + 경계 seam) - floating drift 모션은 유지 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
개요
메인 히어로의 배경 모션과 질감을 개선합니다. 기존의 단순 왕복 drift를 떠다니는(floating) 오로라로 바꾸고, 그 위에 비대칭 세로 글라스 패널을 얹어 색이 흐르는 패널 분할 효과를 추가했습니다. 동시에 무거운 블러 연산을 모두 걷어내 성능을 끌어올렸습니다.
변경 사항
1. floating 모션
hero-drift-a/b/c를from/to왕복(alternate)에서 0/25/50/75/100% 다단계 순환 keyframe으로 교체alternate없이도 이음매 없이 무한 반복 → gentle orbit + scale "breathing"으로 유기적으로 떠다님2. 배경 글로우를 radial-gradient로 (성능)
filter: blur(96px)제거 →radial-gradient글로우로 대체3. 비대칭 글라스 패널 (신규)
backdrop-filter대신 반투명 틴트(white/4%) + 우측 border만 사용 → 뒤 그라데이션이 비쳐 애니메이션을 따라 색이 흐르고, 패널 경계(seam)가 드러남성능
blur/backdrop-filter연산을 전부 제거(0개)했습니다. 남은 비용은 GPU 합성으로 처리되는transform애니메이션 3개뿐이라 모바일 포함 60fps가 안정적으로 유지됩니다.확인
prefers-reduced-motion: reduce시 애니메이션 비활성 (기존 규칙 유지)🤖 Generated with Claude Code