Progressive Blur (프로그레시브 블러)

마우스를 올린 카드만 선명하게 남고 나머지 카드는 흐려지고 어두워집니다.

[적용할 곳]에 포커스 카드(Focus Cards) 효과를 넣어 줘. 블러 시블링스 온 호버(blur siblings on hover), 호버 포커스 블러(hover focus blur), 카드 호버 효과(card hover effect)라고도 불러.
포인터가 한 카드 위에 있는 동안 그 카드는 선명하게 두고 나머지 카드는 흐려지고 어두워지며 살짝 작아지게 해 줘. 모두 부드럽게 전환되고, 포인터가 벗어나면 되돌아가게 해 줘.
키보드 포커스에도 같은 강조를 적용하고, 아무 카드도 호버하지 않을 때는 모든 카드를 선명하고 잘 읽히게 둬 줘.

이미지의 작고 흐린 버전이 먼저 자리를 채우고, 원본 이미지가 로드되면 선명해집니다.

[적용할 곳]에 블러 업 플레이스홀더(Blur-Up Placeholder) 이미지 로딩 효과를 넣어 줘. LQIP, 블러 플레이스홀더(blur placeholder)라고도 불러.
이미지의 아주 작고 많이 흐린 버전이 바로 이미지 자리를 채우고, 원본 이미지가 로드되면 부드럽게 꽤 빠르게 선명해지게 해 줘.
이미지의 정확한 크기를 미리 확보해서 로드될 때 아무것도 밀리지 않게 하고, 흐린 가장자리가 틀 밖으로 번지지 않게 잘라 줘.

기울어진 원근 격자가 신스웨이브 바닥처럼 보는 사람 쪽으로 흘러옵니다.

[적용할 곳]에 레트로 그리드(Retro Grid) 배경을 넣어 줘. 원근 그리드(perspective grid), 신스웨이브 그리드(synthwave grid)라고도 불러.
원근감 있게 뒤로 기울어진 격자 바닥이 보는 사람 쪽으로 일정하게 흘러오고, 지평선 쪽으로 서서히 사라지게 해 줘. 부드럽고 끝없이.
선이 튀지 않게 이음매 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 흐름을 멈춰 줘.

동심원이 중심점에서 바깥으로 퍼져 나가며 사라집니다.

[적용할 곳]에 리플 링(Ripple Rings) 효과를 넣어 줘. 배경 리플(background ripple), 동심원 물결(concentric ripples)이라고도 불러.
고리가 중심점에서 바깥으로 계속 퍼져 나가며 커질수록 사라지게 하고, 일정한 간격으로 하나씩 이어지게 해 줘. 느리고 꾸준하게.
가운데 요소는 제자리에 가만히 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 물결을 멈춰 줘.

작고 밝은 반짝임이 텍스트나 섹션 주변에서 나타났다 사라집니다.

[적용할 곳]에 스파클(Sparkles) 효과를 넣어 줘. 글리터(glitter), 트윙클 파티클(twinkle particles)이라고도 불러.
작은 별 모양 반짝임이 텍스트 주변 여기저기에서 무작위 순간에 톡 나타나 반짝이고 사라지게 해 줘. 가볍고 빠르게.
반짝임은 장식으로 두고 스크린 리더에서는 숨기고, 텍스트 자체는 절대 가리지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 줘.