소셜 오브 복숭아.

모션 레퍼런스28개

움직임에는 이름이 있습니다. “부드럽고 세련되게”보다 이름 한 단어가 AI 에게 훨씬 정확하게 전달됩니다. 데모로 움직임을 고르고, 이름이 든 요청 문장을 복사해 붙여 넣으세요.

받는 쪽 · 코딩 AI

스크롤 연출

나타남

  • 페이드인

    Scroll-triggered fade-in

    화면에 들어온 카드부터 옅게 떠오른다

  • 슬라이드인

    Slide-in

    그림과 글이 양옆에서 밀려와 한 줄로 맞춰진다

  • 스태거

    Stagger animation

    같은 등장을 카드마다 조금씩 늦게 건다

  • 마스크 리빌

    Clip-path reveal

    덮인 그림이 한쪽 가장자리부터 걷힌다

  • 블러 인

    Blur-in reveal

    뿌연 카드가 초점이 맞듯 또렷해진다

스크롤 연동

  • 스크롤 연동

    Scroll-linked animation

    읽은 만큼 머리줄 밑 막대가 차오른다

  • 패럴랙스

    Parallax scrolling

    먼 층은 느리게, 가까운 층은 빠르게 지나간다

  • 스크롤 줌

    Scale on scroll

    가운데 그림이 커지며 화면을 가득 채운다

  • 이미지 시퀀스

    Scroll-scrubbed image sequence

    연속 사진을 넘겨 물체가 돌아가 보인다

  • SVG 라인 드로잉

    SVG line drawing

    스크롤한 거리만큼 곡선이 그려져 나간다

  • 텍스트 필

    Text fill on scroll

    흐린 글줄에 차례로 색이 칠해진다

  • 배경색 전환

    Background color transition

    구역을 넘을 때마다 바탕색이 갈아입혀진다

  • 마키

    Marquee (scroll velocity)

    흐르는 글자 띠가 스크롤하는 동안 빨라진다

  • 스크롤 텍스트 리빌

    Scroll text reveal

    옅은 문단의 단어가 앞에서부터 진해진다

  • 스크롤 진행 바

    Scroll progress bar

    읽은 만큼 헤더 밑 막대와 퍼센트가 차오른다

고정 · 넘김

  • 스티키

    position: sticky

    올라가던 소제목이 화면 위 끝에 붙는다

  • 따라오는 헤더

    Sticky header

    내려도 머리줄이 맨 위에 붙어 얇아진 채 남는다

  • 스크롤리텔링

    Scrollytelling

    글 단계가 넘어갈 때마다 옆 그림이 바뀐다

  • 카드 스택

    Stacking cards

    다음 카드가 올라와 앞 카드를 덮어 쌓인다

  • 스크롤 스냅

    CSS scroll snap

    한 화면씩 넘어가 칸에 딱 맞춰 선다

  • 가로 스크롤

    Horizontal scroll

    세로로 내리는 동안 카드 줄이 옆으로 흐른다

내비 · 신호

  • 숨는 헤더

    Hide-on-scroll header

    내리면 머리줄이 숨고 올리면 돌아온다

  • 스크롤 스파이

    Scrollspy

    읽는 구역에 맞춰 목차 표시가 옮겨 간다

  • 스무스 스크롤

    Smooth scroll

    툭툭 끊기던 휠 스크롤이 미끄러지듯 이어진다

  • 무한 스크롤

    Infinite scroll

    목록 끝에 닿으면 로딩 뒤 새 항목이 이어 붙는다

  • 스크롤 다운 신호

    Scroll-down cue

    첫 화면 아래 휠과 화살표가 아래를 가리킨다

슬라이드인

스크롤 연출 · Slide-in

그림과 글이 양옆에서 밀려와 한 줄로 맞춰진다

칩을 고르면 프롬프트에 덧붙습니다 — 묶음마다 하나씩, 다시 누르면 빠집니다.

구현 수단
되풀이
움직임 줄이기