Meteors (유성)

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

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

우주 같은 어두운 배경 위에서 작은 별들이 반짝이거나 떠다닙니다.

[적용할 곳]에 스타필드(Starfield) 배경을 넣어 줘. 별 배경(stars background), 반짝이는 별(twinkling stars)이라고도 불러.
크기가 제각각인 작은 별들이 저마다의 속도로 은은하게 반짝이고, 별밭 전체는 아주 천천히 흘러가게 해 줘. 고요하고 차분하게.
가볍도록 별 개수는 적당히 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 반짝임과 흐름을 멈춰 줘.

미세한 점무늬 질감이 페이지를 덮고, 때로는 필름 그레인처럼 깜빡입니다.

[적용할 곳]에 노이즈 / 그레인 텍스처(Noise / Grain Texture) 오버레이를 넣어 줘. 필름 그레인(film grain), 노이즈 배경(noise background)이라고도 불러.
미세하고 옅은 점무늬 질감을 표면 위에 얹고, 필름 그레인처럼 작게 툭툭 깜빡이게 해 줘. 은은하게, 콘텐츠가 탁해 보일 만큼 강하지 않게.
클릭은 오버레이를 통과하게 하고, 질감은 매 프레임이 아니라 한 번만 만들고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춘 상태로 둬.

작은 점 여러 개가 배경을 떠다니며 서로 이어지거나 포인터에 반응합니다.

[적용할 곳]에 파티클(Particles) 배경을 넣어 줘. 플로팅 파티클(floating particles), 파티클 필드(particle field)라고도 불러.
크기가 제각각인 작은 점들이 저마다의 속도로 부드럽게 이리저리 떠돌며 천천히 흘러가게 해 줘. 차분하고 가볍게.
느린 기기에서도 가볍도록 점 개수는 적당히 하고, 화면 밖에 있을 때는 일시 정지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.

가장자리로 갈수록 흐림 강도가 점점 세져 콘텐츠가 부드럽게 사라집니다.

[적용할 곳]에 프로그레시브 블러(Progressive Blur) 가장자리를 넣어 줘. 그라디언트 블러 엣지(gradient blur edge)라고도 불러.
가장자리로 스크롤되는 콘텐츠가 딱 잘리는 선 없이, 점점 더 흐리고 부드러워지게 매끄럽게 이어지게 해 줘.
블러는 너머에 콘텐츠가 더 남아 있는 가장자리에만 보여 주고, 흐린 영역이 클릭이나 스크롤을 막지 않게 해 줘.