Border Beam (보더 빔)

그라디언트 테두리가 요소 둘레를 따라 움직이고, 포인터를 올리면 퍼져 나갑니다.

[적용할 곳]에 호버 보더 그라디언트(Hover Border Gradient) 효과를 넣어 줘.
짧은 그라디언트 하이라이트가 테두리 한쪽에 머물러 있다가, 포인터가 올라가 있는 동안 테두리를 따라 일정하게 돌고 테두리 전체가 은은하게 빛나며 밝아지게 해 줘.
호버 중에만 테두리를 움직이고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

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

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

포인터를 올리면 대각선 빛줄기가 요소의 한쪽에서 다른 쪽으로 훑고 지나갑니다.

[적용할 곳]에 샤인 스윕(Shine Sweep) 호버 효과를 넣어 줘. sheen, 샤이니 버튼(shiny button), 샤인 온 호버(shine on hover), 글린트(glint), 시머(shimmer), 시머 버튼(shimmer button)이라고도 불러.
포인터가 올라가 있는 동안 부드러운 대각선 빛줄기가 요소를 왼쪽에서 오른쪽으로 훑고, 짧게 쉬었다가 다시 반복되게 해 줘.
빛줄기는 요소 안쪽에서만 보이게 잘라 주고, 포인터가 벗어나면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 재생하지 마.

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

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

빛나는 램프 선이 넓어지며 아래 제목 위로 원뿔형 빛을 드리웁니다.

[적용할 곳]에 램프 효과(Lamp Effect)를 넣어 줘. 램프 글로우(lamp glow)라고도 불러.
섹션이 화면에 들어오면 가늘게 빛나는 선이 가운데서 양옆으로 넓어지며 아래 제목에 부드러운 원뿔형 빛을 드리우고, 제목은 떠오르며 서서히 나타나게 해 줘. 느리고 부드럽게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 빛을 받은 제목을 바로 보여 줘.

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

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