텍스트 스크램블 (디코드)
JS + 랜덤 글자 세트. 최종 텍스트를 정해두고 랜덤 문자로 채웠다가 왼쪽부터 확정한다.
AI에게 이렇게“글자들이 랜덤 문자로 지직거리다 원래 텍스트로 하나씩 확정되는 디코드 효과 만들어줘.”
핵심 코드스플릿 텍스트 스태거
텍스트를 글자 단위 span으로 쪼개고 각 span에 순차 지연. GSAP SplitText가 유명하지만 순수 JS로도 된다.
AI에게 이렇게“텍스트를 글자별로 쪼개서 아래에서 하나씩 순서대로 올라오게 해줘.”
핵심 코드이 링크에서 커진다
커스텀 커서 (팔로워)
따라다니는 요소(div) + 마우스 좌표 lerp 추적. 기본 커서는 cursor:none으로 숨긴다.
AI에게 이렇게“마우스를 살짝 늦게 따라오는 커스텀 커서를 만들고, 링크 위에선 커지게 해줘.”
핵심 코드클립패스 커튼 리빌
겹친 두 레이어 + clip-path(또는 mask). 앞 레이어를 옆으로 닦으면 뒤가 드러난다. 순수 CSS.
AI에게 이렇게“앞 레이어가 옆으로 닦이며 뒤 내용이 드러나는 커튼 리빌 만들어줘.”
핵심 코드글리치 · RGB 스플릿
순수 CSS. 텍스트를 빨강·청록으로 분리(text-shadow)하고 keyframes로 흔든다.
AI에게 이렇게“텍스트가 RGB로 갈라지며 지직거리는 글리치 효과 넣어줘.”
핵심 코드스티키 스택 카드
스크롤 컨테이너 + 카드마다 position:sticky. 각 카드가 위에 고정되며 뒤 카드가 그 위로 쌓인다. 순수 CSS.
AI에게 이렇게“스크롤하면 카드들이 위쪽에 하나씩 고정되며 겹쳐 쌓이게 해줘.”
핵심 코드인피니트 마퀴 (티커)
순수 CSS. 내용을 2번 복제해 이어붙이고 트랙을 -50%까지 이동하면 끊김 없이 무한 반복.
AI에게 이렇게“텍스트가 끊김 없이 계속 흐르는 무한 마퀴 만들어줘.”
핵심 코드모프 블롭 (유기적 변형)
순수 CSS. border-radius 값을 두 상태 사이로 애니메이션하면 유기적으로 꿈틀. 그라디언트 + 살짝 blur로 고급스럽게.
AI에게 이렇게“그라디언트 덩어리가 유기적으로 모양이 바뀌며 도는 블롭 배경 만들어줘.”
핵심 코드숫자 롤 (슬롯머신)
0~9를 세로로 쌓은 릴 + overflow:hidden. 목표 숫자만큼 translateY로 굴려 멈춘다. 통계·가격 카운터에 자주.
AI에게 이렇게“숫자가 슬롯머신처럼 세로로 굴러 최종 값에 멈추는 카운터 만들어줘.”
핵심 코드