Orbiting Circles (오비팅 서클)

요소가 직접 정한 곡선 경로를 따라 이동하며, 경로에 맞춰 방향을 돌릴 수도 있습니다.

[적용할 곳]에 모션 패스(Motion Path) 애니메이션을 넣어 줘. 애니메이트 얼롱 패스(animate along path)라고도 불러.
작은 요소가 직접 정한 곡선 경로를 따라 느리고 일정한 속도로 이동하면서, 나아가는 방향을 바라보도록 돌게 해 줘.
반복이 튀지 않게 닫힌 경로를 쓰고, 경로는 고정 크기가 아니라 컨테이너 크기에 맞춰 늘고 줄게 해 줘.

원을 따라 배치된 텍스트가 멈추지 않고 계속 회전합니다.

[적용할 곳]에 스피닝 텍스트(Spinning Text)를 넣어 줘. 서큘러 텍스트(circular text), 텍스트 온 서클(text on circle)이라고도 불러.
글자를 원 둘레에 고르게 배치하고, 원이 느리고 일정하게 돌며 반복이 다시 시작될 때 튀지 않게 해 줘.
스크린 리더에는 텍스트를 한 번만 일반 텍스트로 전달하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.

입자들이 소용돌이처럼 중심 주위를 나선형으로 돕니다.

[적용할 곳]에 보텍스(Vortex) 배경을 넣어 줘. 소용돌이 파티클(swirling particles)이라고도 불러.
작은 입자들이 소용돌이처럼 중심점 주위를 나선형으로 안쪽으로 돌고, 가장자리에서 서서히 나타나 가운데에 다다르면 사라지는 부드럽고 끊김 없는 회오리로 만들어 줘.
입자 개수는 적당히 하고, 화면 밖에 있을 때는 일시 정지하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회오리를 멈춰 줘.

마커나 호가 그려진 3D 지구가 레이아웃 안에서 회전합니다.

[적용할 곳]에 3D 글로브(3D Globe)를 넣어 줘. 인터랙티브 글로브(interactive globe)라고도 불러.
표면에 마커 몇 개가 있는 지구본이 마커와 함께 축을 중심으로 느리고 일정하게 돌게 해 줘. 차분하고 끊김 없이.
장식으로 두고 보여 주는 정보는 텍스트 대체를 마련하고, 화면 밖에 있을 때는 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.

한 벡터 도형이 다른 도형으로 부드럽게 바뀝니다.

[적용할 곳]에 셰이프 모프(Shape Morph)를 넣어 줘. 패스 모핑(path morphing), SVG 모프(SVG morph)라고도 불러.
오각형이 오므라들며 별이 되는 것처럼 한 도형이 다른 도형으로 부드럽게 바뀌고, 각 점이 고르고 여유 있는 속도로 제자리로 미끄러지게 해 줘.
깜빡임 없이 깔끔하게 바뀌도록 두 도형의 점 개수와 대응을 맞추고, 반복하지 말고 상태가 바뀔 때마다 한 번씩 재생해 줘.

SVG 필터가 움직이는 노이즈로 텍스트나 도형을 일그러뜨립니다.

[적용할 곳]에 SVG 디스플레이스먼트 디스토션(SVG Displacement Distortion) 호버 효과를 넣어 줘. 디스플레이스먼트 맵 효과(displacement map effect)라고도 불러.
포인터를 올린 동안 텍스트나 도형이 흐르는 물 너머로 보이듯 일렁이고 흔들리며 부드럽게 나타나고, 포인터가 벗어나면 다시 선명해지게 해 줘.
가만히 있을 때 부담이 없도록 왜곡 필터는 효과가 켜진 동안에만 걸고, 키보드 포커스에도 같은 효과를 보여 줘.

마스크 도형이 쓸고 지나가거나 포인터를 따라가며 아래 콘텐츠를 드러냅니다.

[적용할 곳]에 SVG 마스크 리빌(SVG Mask Reveal) 호버 효과를 넣어 줘. 클립 패스 리빌(clip-path reveal), 스포트라이트 마스크(spotlight mask)라고도 불러.
포인터를 올린 동안 원형 마스크가 가운데서 커지며 아래 콘텐츠를 드러내고, 포인터가 벗어나면 다시 닫히게 해 줘. 부드럽고 꽤 빠르게.
아무것도 밀리지 않게 두 레이어를 정확히 같은 크기로 두고, 키보드 포커스와 탭에도 같은 효과를 보여 줘.