Vortex (보텍스)

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

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

작은 원이나 아이콘이 원형 궤도를 따라 중심 주위를 돕니다.

[적용할 곳]에 오비팅 서클(Orbiting Circles)을 넣어 줘. 오빗 애니메이션(orbit animation), 오비팅 아이콘(orbiting icons)이라고도 불러.
작은 원들이 가운데 요소 주위를 원형 고리를 따라 느리고 일정하게 돌고, 바깥 고리는 반대 방향으로 더 느리게 돌게 해 줘.
반복은 끊김 없이, 도는 항목은 항상 똑바로 서 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.

겹겹이 쌓인 물결선이나 물결 모양이 가로로 일렁입니다.

[적용할 곳]에 웨이브 배경(Wave Background)을 넣어 줘. 웨이비 배경(wavy background), 애니메이티드 웨이브(animated waves)라고도 불러.
겹쳐진 물결 몇 개가 조금씩 다른 속도로 옆으로 흘러가면서 물처럼 겹치고 움직이게 해 줘. 느리고 부드럽게.
물결마다 튀는 곳 없이 끊김 없이 반복되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.

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

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

그라디언트 배경의 색이 천천히 바뀌거나 흐르거나 회전합니다.

[적용할 곳]에 그라디언트 애니메이션(Animated Gradient) 배경을 넣어 줘. 무빙 그라디언트(moving gradient), gradient animation이라고도 불러.
그라디언트 색이 영역을 가로질러 천천히, 부드럽게 끊김 없이 흘러가고, 루프가 다시 시작될 때 튀는 부분이 보이지 않게 해 줘.
위에 올라간 글자가 어느 색 위에서도 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임을 멈춰 줘.