프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 스티키 텍스트 페이드(Sticky Text Fade) 효과를 넣어 줘. 스티키 스크롤 텍스트 오퍼시티 페이드(sticky scroll text opacity fade)라고도 불러.
섹션을 스크롤하는 동안 텍스트 블록은 제자리에 고정되고, 줄이 스크롤 진행에 따라 한 줄씩 서서히 나타났다 사라지게 해 줘.
페이드를 스크롤 위치에 바로 연동해서 되돌리면 반대로 움직이게 하고, 투명도와 상관없이 모든 줄을 스크린 리더가 읽을 수 있게 해 줘.비슷한 모션
ABCDEFGHIJKLMNOPQRSTUVWXYZ
안에서 스크롤해 보세요
Text Reveal (텍스트 리빌)
다른 이름 Scroll Text Reveal, Word-by-word Reveal
문단의 단어가 스크롤에 따라 흐린 상태에서 완전히 선명한 상태로 바뀝니다.
쓰는 곳
선언문이나 소개 문단
[적용할 곳]에 텍스트 리빌(Text Reveal) 효과를 넣어 줘. 스크롤 텍스트 리빌(scroll text reveal), 단어별 리빌(word-by-word reveal)이라고도 불러.
문단은 흐리게 시작하고, 사용자가 스크롤하면 단어가 하나씩 차례로 온전히 선명해지게, 스크롤 위치에 맞춰 연결해 줘.
다시 위로 스크롤하면 단어가 도로 흐려지게 하고, 흐린 정도와 상관없이 문단 전체를 스크린 리더가 읽을 수 있게 해 줘.ABC
A
B
C
안에서 스크롤해 보세요
Pinning (피닝)
다른 이름 Pinned Section, Sticky Section, Scroll Pin
특정 스크롤 구간 동안 요소가 제자리에 고정되고, 그동안 다른 콘텐츠나 애니메이션이 진행됩니다.
쓰는 곳
스크롤 기반 스토리텔링, 기능 소개
[적용할 곳]에 피닝(Pinning) 스크롤 효과를 넣어 줘. 핀 고정 섹션(pinned section), 스티키 섹션(sticky section)이라고도 불러.
옆의 콘텐츠가 스크롤로 지나가는 동안 패널 하나는 제자리에 고정해 두고, 읽고 있는 단계에 맞춰 내용이 바뀌다가 섹션이 끝나면 고정이 풀리게 해 줘.
스크롤을 가로채기보다 네이티브 sticky 포지셔닝을 우선 쓰고, 작은 화면에서는 고정 패널 없이도 각 단계가 잘 읽히게 해 줘.A
안에서 스크롤해 보세요
Scroll-Linked Animation (스크롤 연동 애니메이션)
다른 이름 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
애니메이션 진행이 스크롤 위치에 바로 묶여 있어, 앞으로 스크롤하면 재생되고 뒤로 스크롤하면 되감깁니다.
쓰는 곳
스토리텔링 페이지, 진행 효과
[적용할 곳]에 스크롤 연동 애니메이션(Scroll-Linked Animation)을 넣어 줘. 스크롤 드리븐 애니메이션(scroll-driven animation), 스크롤 스크럽(scroll scrub)이라고도 불러.
애니메이션이 스크롤 위치에 정확히 맞춰 움직여서, 아래로 내리면 앞으로 재생되고 위로 올리면 그 자리에서 되감기게 해 줘. 시간 기반 이징은 따로 넣지 마.
애니메이션 전체를 분명한 스크롤 구간에 맞추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자연스러운 정지 상태를 보여 줘.Text의 다른 모션
Stroke Text Draw (스트로크 텍스트 드로우)
다른 이름 Draw In Text, Animated Stroke Text
글자 윤곽이 선으로 먼저 그려진 뒤 채우기가 나타납니다.
쓰는 곳
로고, 히어로 문구
[적용할 곳]에 스트로크 텍스트 드로우(Stroke Text Draw) 효과를 넣어 줘. 드로우 인 텍스트(draw in text), 애니메이티드 스트로크 텍스트(animated stroke text)라고도 불러.
글자 윤곽이 부드럽게 저절로 그려지고, 윤곽이 다 그려지면 채우기가 서서히 나타나게 해 줘.
로드될 때 한 번만 재생하고, 단어는 실제 텍스트로 접근할 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 채워진 텍스트를 바로 보여 줘.AGBHCIDJEKFL
마우스를 올려 보세요
Text 3D Flip (텍스트 3D 플립)
다른 이름 3D Flip Text Reveal
글자나 단어가 축을 중심으로 3D 회전하며 뒷면의 다음 텍스트를 보여 줍니다.
쓰는 곳
호버 링크, 제목
[적용할 곳]에 텍스트 3D 플립(Text 3D Flip) 호버 효과를 넣어 줘. 3D 플립 텍스트 리빌(3D flip text reveal)이라고도 불러.
포인터가 텍스트 위에 오면 각 글자가 가로축을 중심으로 3D로 굴러 넘어가며 뒷면의 새 글자를 보여 주고, 한 글자씩 빠르고 부드럽게 훑듯이 이어지다가 포인터가 떠나면 다시 돌아오게 해 줘.
넘어가는 동안 텍스트 상자 크기는 그대로 두고, 키보드 포커스에도 같은 효과를 보여 줘.ABCDEFGHIJABCDEFGHIJ
Text Distortion (텍스트 디스토션)
다른 이름 Organic Text Distortion
스크롤이나 포인터 움직임에 따라 텍스트가 유기적으로 일그러지고 일렁입니다.
쓰는 곳
실험적인 포트폴리오
[적용할 곳]에 텍스트 디스토션(Text Distortion) 효과를 넣어 줘. 오가닉 텍스트 디스토션(organic text distortion)이라고도 불러.
텍스트 한 줄이 옆으로 끝없이 흐르면서 일렁이는 물 너머로 보는 것처럼 유기적으로 일그러지고 물결치게 하고, 그 흐름은 사용자의 스크롤로 움직이게 해 줘.
일그러짐은 글자를 읽을 수 있을 만큼 가볍게 하고, 느린 기기에서도 부드럽게 돌아가게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 꺼 줘.