GASAN Vivid Kit

배경

React 배경 컴포넌트

화면을 가득 채우는 히어로 배경을 WebGL 셰이더 · 캔버스 파티클 · 순수 CSS 그라데이션 세 갈래로 모았습니다. 색상과 속도, 밀도는 전부 props 로 열어 두었고, 부모 박스를 채우는 절대 배치라 위에 얹은 텍스트의 레이아웃을 밀어내지 않습니다. 무거운 셰이더는 화면에 들어올 때만 마운트되므로 이 목록을 훑는 동안에도 살아 있는 GPU 컨텍스트는 한 화면 분량으로 유지됩니다.

이럴 때 씁니다

랜딩 히어로첫 화면의 분위기를 결정하는 풀블리드 배경
로그인 · 온보딩폼 뒤에 은은하게 깔리는 그라데이션
섹션 구분긴 페이지 중간에서 톤을 바꿔 리듬을 주는 레이어
대시보드 헤더 · 발표 자료정적인 화면에 미세한 움직임 추가