Animated Grid Pattern (그리드 패턴 애니메이션)

점 격자가 물결치듯 맥동하거나 빛납니다.

[적용할 곳]에 닷 패턴 글로우(Dot Pattern Glow) 배경을 넣어 줘. 점 글로우 배경(dotted glow background), 닷 그리드(dot grid)라고도 불러.
촘촘한 점 격자는 가만히 두고, 부드러운 빛의 띠가 그 위를 천천히 훑으며 지나가는 점을 밝히게 해 줘. 차분하고 은은하게.
위에 올린 콘텐츠가 잘 읽히도록 점은 흐리게 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛을 멈춰 줘.

비스듬한 타일 격자가 포인터가 지나갈 때마다 색으로 밝아집니다.

[적용할 곳]에 배경 박스(Background Boxes) 효과를 넣어 줘. 타일 호버 배경(tile hover background)이라고도 불러.
영역을 비스듬한 타일 격자로 채우고, 포인터가 지나간 타일은 바로 밝아졌다가 천천히 돌아가서 짧은 자취가 남게 해 줘.
타일은 콘텐츠 뒤에 두어 클릭을 막지 않게 하고, 터치 기기에서는 탭한 타일이 밝아지게 해 줘.

기울어진 원근 격자가 신스웨이브 바닥처럼 보는 사람 쪽으로 흘러옵니다.

[적용할 곳]에 레트로 그리드(Retro Grid) 배경을 넣어 줘. 원근 그리드(perspective grid), 신스웨이브 그리드(synthwave grid)라고도 불러.
원근감 있게 뒤로 기울어진 격자 바닥이 보는 사람 쪽으로 일정하게 흘러오고, 지평선 쪽으로 서서히 사라지게 해 줘. 부드럽고 끝없이.
선이 튀지 않게 이음매 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 흐름을 멈춰 줘.

흐릿하고 부드러운 색 띠가 오로라처럼 콘텐츠 뒤에서 일렁입니다.

[적용할 곳]에 오로라 배경(Aurora Background)을 넣어 줘. 노던 라이츠 그라디언트(northern lights gradient)라고도 불러.
흐릿하고 부드러운 색 띠들이 콘텐츠 뒤에서 천천히 떠다니고 흔들리며, 서로 겹치고 섞여 북극광처럼 보이게 해 줘. 아주 느리고 몽환적으로.
위에 있는 글자는 잘 읽히게 하고, 부드럽게 돌아가도록 매 프레임마다 띠에 블러를 다시 걸지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.

가늘게 빛나는 선이 경로를 따라 이동하고, 때로는 표면에 부딪혀 터집니다.

[적용할 곳]에 배경 빔(Background Beams) 효과를 넣어 줘. 라이트 빔(light beams), 배경 라인(background lines)이라고도 불러.
흐린 곡선 경로들을 배경에 깔고, 그 위로 짧게 빛나는 줄기가 하나씩 차분하고 일정한 속도로 지나가게 해 줘.
빔들은 시차를 둬서 절대 한꺼번에 움직이지 않게 하고, 콘텐츠 뒤에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.