배경
Iso Block Field
CSS 3D로 눕힌 아이소메트릭 격자에 블록을 깔고, 커서 위치를 파원으로 각 블록이 "거리/파속"만큼 늦게 반응하는 감쇠 스프링으로 융기했다 가라앉는 높이장 배경입니다. 높이가 곧 색이라 상면이 저→중→고 색 램프(색상환 보간)를 따라 이동하고, 좌상단 광원을 가정해 상면 100%·좌면 72%·우면 48% 밝기를 고정합니다. tumble 모드에서는 대각선 웨이브가 지나가며 블록이 90°씩 굴러 다음 색면으로 넘어가고, 클릭한 셀에서 도미노가 다시 시작됩니다. 셀 수 상한·transform 전용 갱신·구간 will-change 토글·IntersectionObserver 지연 가동으로 DOM 비용을 억제하며, reduced-motion에서는 정적 아이소메트릭 지형을 그립니다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/IsoBlockField-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| mode | "ripple" | "tumble" | "ripple" | 동작 모드. ripple: 커서를 파원으로 융기했다 가라앉는 높이장. tumble: 대각선 웨이브가 블록을 90°씩 굴려 다음 색면으로 넘김(클릭 시 그 셀에서 재시작). |
| cellSize | number | 56 | 블록 한 칸의 격자 피치(px). 선호값이며 셀 개수 상한에 걸리면 자동으로 커진다 |
| maxCells | number | 96 | 렌더할 블록 최대 개수(DOM 폭증 방지). 내부 하드 상한 160 |
| gap | number | 0.14 | 셀 대비 블록 사이 간격 비율(0=맞붙음, 0.3=성기게) |
| blockDepth | number | 0.68 | 블록 두께 비율(블록 폭 대비). tumble 모드에서는 정육면체로 고정된다 |
| rise | number | 62 | 파문 정점에서의 최대 융기 높이(px) |
| waveSpeed | number | 520 | 파문이 바깥으로 번지는 속도(px/초). 셀마다 거리/속도만큼 늦게 반응한다 |
| ambient | number | 0.32 | 커서가 없어도 흐르는 상시 물결의 진폭 비율(0=정지) |
| autoRipple | boolean | true | 일정 간격으로 자동 파문을 발생시킬지 여부(ripple 모드 전용) |
| colorLow | string | "#C084FC" | 높이 램프 최저색(가라앉은 블록의 상면 색) |
| colorMid | string | "#EC4899" | 높이 램프 중간색 |
| colorHigh | string | "#5EEAD4" | 높이 램프 최고색(가장 높이 솟은 블록의 상면 색) |
| bgColor | string | "#08060E" | 배경 색상(근-블랙) |
| className | string | undefined | 루트 요소에 추가할 CSS 클래스 |