프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 시머 텍스트(Shimmer Text) 효과를 넣어 줘. 애니메이티드 샤이니 텍스트(animated shiny text), 메탈릭 시머 텍스트(metallic shimmer text)라고도 불러.
빛의 띠가 글자 위를 왼쪽에서 오른쪽으로 부드럽게 훑고, 잠깐 쉬었다가 다시 반복되게 해 줘.
하이라이트 아래에서도 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.비슷한 모션
A
마우스를 올려 보세요
Shine Sweep (샤인 스윕)
다른 이름 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
포인터를 올리면 대각선 빛줄기가 요소의 한쪽에서 다른 쪽으로 훑고 지나갑니다.
쓰는 곳
버튼, 카드, 배지
[적용할 곳]에 샤인 스윕(Shine Sweep) 호버 효과를 넣어 줘. sheen, 샤이니 버튼(shiny button), 샤인 온 호버(shine on hover), 글린트(glint), 시머(shimmer), 시머 버튼(shimmer button)이라고도 불러.
포인터가 올라가 있는 동안 부드러운 대각선 빛줄기가 요소를 왼쪽에서 오른쪽으로 훑고, 짧게 쉬었다가 다시 반복되게 해 줘.
빛줄기는 요소 안쪽에서만 보이게 잘라 주고, 포인터가 벗어나면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 재생하지 마.ABCDEF
Animated Gradient Text (그라디언트 텍스트 애니메이션)
다른 이름 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
그라디언트로 채운 글자의 색이 끊임없이 바뀌거나 흘러갑니다.
쓰는 곳
브랜드 헤드라인
[적용할 곳]에 그라디언트 텍스트 애니메이션(Animated Gradient Text) 효과를 넣어 줘. 오로라 텍스트(aurora text), 레인보우 텍스트 스윕(rainbow text sweep)이라고도 불러.
글자를 그라디언트로 채우고, 그 색이 글자 위를 느리고 부드럽게 흘러가며 끊김 없이 무한 반복되게 해 줘.
어느 순간에도 배경 위에서 글자가 잘 읽히게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 색을 멈춰 줘.Skeleton Shimmer (스켈레톤 시머)
다른 이름 Skeleton wave, Shimmer effect, placeholder-wave
회색 자리 표시 도형 위로 밝은 빛줄기가 지나갑니다.
쓰는 곳
콘텐츠 로딩 자리 표시
[적용할 곳]에 스켈레톤 시머(Skeleton Shimmer)를 넣어 줘. 스켈레톤 웨이브(skeleton wave), 시머 효과(shimmer effect)라고도 불러.
부드러운 빛의 띠가 회색 자리 표시 도형 위를 왼쪽에서 오른쪽으로 지나가고, 다음 번 전에 잠깐 쉬게 해 줘. 매끄럽고 느긋하게.
도형은 실제 레이아웃에 맞춰서 콘텐츠가 로드될 때 아무것도 튀지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 정지된 자리 표시만 보여 줘.ABCDEF
마우스를 올려 보세요
Holographic Text (홀로그래픽 텍스트)
다른 이름 Holographic Foil Text
글자에 무지갯빛 홀로그램 포일 반사가 나타나 포인터나 시간에 따라 움직입니다.
쓰는 곳
프리미엄 카드
[적용할 곳]에 홀로그래픽 텍스트(Holographic Text) 호버 효과를 넣어 줘. 홀로그래픽 포일 텍스트(holographic foil text)라고도 불러.
포인터가 글자 위에 있는 동안 포일 같은 색의 띠가 글자 위를 느리고 부드럽게 오가고, 포인터가 떠나면 원래의 평범한 모습으로 돌아오게 해 줘.
반짝임의 어느 순간에도 글자가 읽히게 하고, 키보드 포커스에도 같은 효과를 보여 줘.Text의 다른 모션
ABCABCABC
안에서 스크롤해 보세요
Sliced Text (슬라이스드 텍스트)
다른 이름 On-Scroll Sliced Text
제목이 가로 조각으로 잘려, 페이지를 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀립니다.
쓰는 곳
에디토리얼 히어로
[적용할 곳]에 슬라이스드 텍스트(Sliced Text) 효과를 넣어 줘. 온스크롤 슬라이스드 텍스트(on-scroll sliced text)라고도 불러.
큰 제목을 가로 조각으로 잘라, 처음에는 온전한 단어로 맞춰져 있다가 스크롤하면 조각끼리 서로 엇갈려 옆으로 밀리게 해 줘.
밀림을 스크롤 위치에 바로 연동해서 되돌리면 반대로 움직이게 하고, 스크린 리더에는 제목을 하나의 읽을 수 있는 텍스트로 유지해 줘.ABCDEFGHIJKLMNOP
Spinning Text (스피닝 텍스트)
다른 이름 Circular Text, Text on Circle
원을 따라 배치된 텍스트가 멈추지 않고 계속 회전합니다.
쓰는 곳
회전 배지, 스탬프
[적용할 곳]에 스피닝 텍스트(Spinning Text)를 넣어 줘. 서큘러 텍스트(circular text), 텍스트 온 서클(text on circle)이라고도 불러.
글자를 원 둘레에 고르게 배치하고, 원이 느리고 일정하게 돌며 반복이 다시 시작될 때 튀지 않게 해 줘.
스크린 리더에는 텍스트를 한 번만 일반 텍스트로 전달하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.ABCDEF
Split Text Stagger (스플릿 텍스트 스태거)
다른 이름 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
제목을 글자·단어·줄 단위로 나눠, 약간씩 시차를 두고 차례로 등장시킵니다.
쓰는 곳
헤드라인, 섹션 제목
[적용할 곳]에 스플릿 텍스트 스태거(Split Text Stagger) 등장 효과를 넣어 줘. 레터 스태거(letter stagger), 스태거드 텍스트 리빌(staggered text reveal)이라고도 불러.
제목을 글자 단위로 나눠, 글자마다 짧은 시차를 두고 차례로 떠오르며 나타나게 해 줘. 빠르고 부드럽게, 튕기는 느낌 없이.
제목이 화면에 들어올 때 한 번만 재생하고, 스크린 리더는 한 단어로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 보여 줘.