Background Beams (배경 빔)

빛나는 꼬리를 단 사선 줄기가 카드나 섹션을 가로질러 떨어집니다.

[적용할 곳]에 유성(Meteors) 효과를 넣어 줘. 유성우(meteor shower), 별똥별(shooting stars)이라고도 불러.
사라지는 꼬리를 단 작은 줄기 몇 개가 무작위 순간에 영역을 사선으로 빠르게 가로지르고 곧 사라지게 해 줘.
포인트로만 남도록 개수는 적게 하고, 영역 가장자리에서 잘리게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

두 요소를 잇는 선을 따라 빛나는 펄스가 이동합니다.

[적용할 곳]에 빔 애니메이션(Animated Beam) 효과를 넣어 줘. 커넥팅 빔(connecting beam)이라고도 불러.
두 요소를 잇는 선을 따라 짧게 빛나는 펄스가 한쪽 끝에서 다른 쪽 끝으로 일정하게 이동하고 다시 시작하게 해 줘. 부드럽고 차분하게.
연결선 자체는 항상 보이게 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 펄스를 멈춰 줘.

부드러운 빛줄기가 배경 위에서 흔들립니다.

[적용할 곳]에 라이트 레이(Light Rays) 배경을 넣어 줘. 갓 레이(god rays), 라이트 샤프트(light shafts)라고도 불러.
부드럽고 반투명한 빛줄기 여러 개가 위에서 부채꼴로 퍼지고, 조금씩 밝아졌다 어두워지며 좌우로 은은하게 흔들리게 해 줘. 느리고 분위기 있게.
빛줄기는 콘텐츠 뒤에 두고 가독성을 해치지 않을 만큼 흐리게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

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

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

밝은 하이라이트가 카드 테두리를 따라 돌아갑니다.

[적용할 곳]에 보더 빔(Border Beam) 효과를 넣어 줘. 샤인 보더(shine border), 무빙 보더(moving border)라고도 불러.
짧고 밝은 하이라이트가 카드 테두리를 따라 일정하고 느긋한 속도로 돌고, 튀는 부분 없이 반복되게 해 줘.
효과 때문에 카드 내용이나 크기가 바뀌지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빔을 멈춰 줘.

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

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