DevTI
DESIGN SYSTEM

MOTION LAB

components/motion 의 실제 프리셋과 컴포넌트를 가져와, 옵션을 바꾸면 즉시 다시 동작하는 라이브 미리보기. 왼쪽 설명·인자·코드와 오른쪽 미리보기를 함께 보며, 같은 부품을 variant·색·라벨만 바꿔 어떻게 재사용하는지 직접 만져 본다.

01 · ENTRANCE VARIANTS

진입 프리셋 - variant 만 바꿔 재사용

같은 motion.div 에 variants 라벨만 갈아끼우면 등장 방향이 바뀐다. 거리·시간·이징은 프리셋에 고정돼 화면마다 일관된다.

인자 (props)
  • variantsVariants등장 방식 프리셋 - 이 인자만 바꿔 재사용
  • initial"hidden"시작 상태 라벨
  • animatecontrols재생 트리거 (set·start)
·
import { fadeUp } from "@/components/motion/variants";

<motion.div
  variants={fadeUp}
  initial="hidden"
  animate={controls}
>
  카드
</motion.div>
fadeUp
02 · STAGGER

순차 등장 - 컨테이너 간격만 교체

컨테이너에 staggerContainer/listStagger 를 주고 자식엔 fadeUp 을 주면, 자식들이 정해진 간격으로 차례로 떠오른다.

인자 (props)
  • variantsVariants컨테이너 - 자식 간격(staggerChildren)
  • variantsfadeUp각 자식 - 떠오르는 등장
  • animatecontrolsshow 시작 → 자식으로 전파
·
import { staggerContainer, fadeUp } from "@/components/motion/variants";

<motion.ul variants={staggerContainer} initial="hidden" animate={controls}>
  {items.map((i) => (
    <motion.li key={i} variants={fadeUp}>{i}</motion.li>
  ))}
</motion.ul>
  • A
  • B
  • C
  • D
  • E
03 · REVEALSTAGGER

RevealStagger - 자식을 감싸기만 하면 순차 등장

직접 자식들을 fadeUp item 으로 자동 래핑하는 범용 컴포넌트. 서버 컴포넌트 섹션들을 그대로 넣어도 차례로 떠오른다. 스크롤로 들어오면 재생되고 ‘다시 재생’으로 다시 볼 수 있다.

인자 (props)
  • childrenReactNode각 직접 자식이 fadeUp 으로 자동 래핑됨
  • classNamestring컨테이너 레이아웃 (flex-col 권장)
import RevealStagger from "@/components/motion/RevealStagger";

<RevealStagger className="flex flex-col gap-3">
  <div>계약 → 전송 → 상태 → 화면</div>
  <div>도메인 단위 수직 슬라이스</div>
  <div>공통 컴포넌트 조립</div>
</RevealStagger>
계약 → 전송 → 상태 → 화면
도메인 단위 수직 슬라이스
공통 컴포넌트 조립
조립 부품 따로 보기 - 카드 호버를 이루는 각 컴포넌트
04 · SCATTER SHAPES

뒤 색 배경 바 - direction 으로 모양·이동 축까지 바꿔 재사용

같은 색을 비비드 면·투명 stripe·어두운 면으로 변주한 막대 묶음. direction 에 따라 막대 모양과 이동 축이 함께 바뀐다 - diagonal(사선·대각선) / horizontal(가로 막대·좌우) / vertical(세로 막대·위아래). 호버하거나 '다시 재생'을 누르면 시차를 두고 흩어진다.

인자 (props)
  • colorstring막대 기준 색 - 이 인자 하나로 전체 테마
  • distancenumber흩어지는 거리 배율 (1=기본, 1.5=더 멀리)
  • directionScatterDirectiondiagonal·horizontal·vertical (모양+축)
  • classNamestring위치·크기 (색·모션은 prop)
color·distance·direction·
<div className="group relative overflow-hidden ...">
  <HoverScatterShapes color="#321DFA" distance={1} direction="diagonal" />
</div>
hover
↑ 마우스를 올리거나 ‘다시 재생’
05 · PULSE IMAGE

요소 복사 → 확대 반복 - src·speed 만 바꿔 재사용

같은 이미지를 2겹으로 깔아, 호버 시 뒤 레이어가 잔상을 남기며 번지고 원본은 살짝 호흡한다(셀렉션 루프). 이미지(src)와 속도(speed)만 바꾸면 어떤 일러스트에도 그대로 쓰인다.

인자 (props)
  • src / altstring표시할 이미지 - 2겹이 공유
  • speednumber펄스/호흡 한 주기 속도(초) - 작을수록 빠름
  • classNamestring위치·크기 박스 (absolute inset-0 채움)
이미지·speed·
<div className="group relative ...">
  <HoverPulseImage src={src} alt="INTJ" speed={1} className="absolute inset-0" />
</div>
INTJ
↑ 마우스를 올리거나 ‘다시 재생’
06 · DRAW FRAME

라인 그려지는 프레임 - 속도·방향까지 prop 으로

호버하면 은은한 테두리 위로 밝은 선분이 한 바퀴씩 끝없이 돈다. color·speed·reverse 로 색·속도·도는 방향을, className 으로 크기를 바꿔 어떤 카드에도 재사용한다.

인자 (props)
  • colorstring테두리·선분 색
  • speednumber한 바퀴 도는 속도(초) - 작을수록 빠름
  • reverseboolean도는 방향 반대로(반시계)
  • classNamestring크기·위치 (viewBox 기반이라 자유롭게)
color·speed·
<div className="group relative ...">
  <HoverDrawFrame color="#321DFA" speed={1.6} reverse={false} />
</div>
hover
↑ 마우스를 올리거나 ‘다시 재생’
07 · REVEAL BUTTON

viewMore 버튼 - 테두리→채움→텍스트 순차 등장

호버하면 테두리가 그려지고 → 단색으로 채워지고 → 텍스트가 시차를 두고 떠오른다. color·label·skew 로 색·문구·기울임을, className 으로 위치·크기를 바꿔 어디서든 재사용한다.

인자 (props)
  • colorstring테두리·채움 색
  • labelstring버튼 문구
  • skewboolean사선 기울임(브랜드 룩) on/off
  • hrefstring?주면 실제 링크로 동작(호버 후 클릭)
color··
<div className="group relative ...">
  <HoverRevealButton color="#321DFA" label="VIEW MORE" skew={true} />
</div>
VIEW MORE
hover
↑ 마우스를 올리거나 ‘다시 재생’
합쳐서 - 모션 컴포넌트 조합
08 · COMPOSITION

카드 호버 = 위 4개 모션 컴포넌트의 조합

앞서 따로 본 SCATTER · DRAW FRAME · PULSE · REVEAL BUTTON 을 한 카드(group)에 겹쳐 놓은 결과물. 같은 color 를 넘기면 네 부품이 호버(또는 ‘다시 재생’) 한 번에 동시에 동작한다. 부품을 새로 만드는 게 아니라 조립해서 화면을 구성한다.

인자 (props)
  • colorstring테두리·채움·도형 색 - 이 인자 하나로 카드 전체 테마
  • src / altstring캐릭터 이미지 (HoverPulseImage)
  • labelstring버튼 텍스트 (HoverRevealButton)
  • classNamestring위치·크기만 덮어쓰고 색은 prop 으로
캐릭터·label·
<article className="group relative ...">
  <HoverScatterShapes color={color} />
  <HoverDrawFrame color={color} />
  <HoverPulseImage src={src} alt={name} className="absolute inset-0 z-10" />
  <HoverRevealButton color={color} label="VIEW MORE" />
</article>
INTJ
VIEW MORE
↑ 카드에 마우스를 올리거나 ‘다시 재생’
배경 레이어
09 · FACET BACKGROUND

FacetBackground - direction 으로 패널 모양을 바꿔 재사용

흰색 저알파 패널이 시차로 페이드인하는 배경 레이어. 색 prop 없이 어떤 배경 위에도 깔린다. direction 으로 패널 모양·방향을 바꾼다 - diagonal(사선) / horizontal(가로 띠) / vertical(세로 띠).

인자 (props)
  • directionFacetDirectiondiagonal·horizontal·vertical (패널 모양)
  • classNamestring위치 덮어쓰기 - 색 인자 없음(흰색 저알파 고정)
direction·
import FacetBackground from "@/components/motion/FacetBackground";

<div className="relative ...">
  <FacetBackground direction="diagonal" />
  ...콘텐츠
</div>
FacetBackground

프리셋: src/components/motion/variants.ts · 컴포넌트: src/components/motion/* - 모두 실물을 그대로 렌더한다(단일 출처).