도구
레시피
자주 쓰는 UI 모션을 바로 복사해서 쓸 수 있게 모았어요.
모든 레시피는 공개된 STRX API만 써요. 토큰은 원하는 대로 바꿔 보세요.
리스트 차례로 등장하기
1<Strx.Timeline playback="stagger" interval={50}>2 {items.map(item => (3 <Strx.View key={item.id} animate="fade-in from:translate-y-12 duration-260">4 <Row item={item} />5 </Strx.View>6 ))}7</Strx.Timeline>간격은 짧게(40–80ms), 리스트도 짧게 유지해 주세요. 긴 리스트라면 첫 화면에 보이는 항목만 차례로 등장시키는 게 좋아요.
토스트
1{toast && (2 <Strx.View3 animate="fade-in from:translate-y-24 spring damping-16, exit:opacity-0 exit:translate-y-24 duration-180 ease-in"4 style={styles.toast}5 >6 <Strx.Text>{toast.message}</Strx.Text>7 </Strx.View>8)}등장은 스프링으로 튀어 오르고, 퇴장은 다른 그룹에 있어서 짧은 타이밍을 따로 가져요.
바텀 시트
1<Strx.View2 animate="from:translate-y-600 to:translate-y-0 spring damping-20 stiffness-180, exit:translate-y-600 duration-220 ease-in"3 style={styles.sheet}4>5 <SheetContent />6</Strx.View>아코디언
1<Strx.View animate="layout-spring" layoutClip style={styles.panel}>2 <Strx.Pressable onPress={() => setOpen(value => !value)}>3 <Strx.Text>{title}</Strx.Text>4 </Strx.Pressable>5 {open && <Strx.Text animate="fade-in exit:opacity-0 duration-150">{body}</Strx.Text>}6</Strx.View>선택할 수 있는 칩
1<Strx.Pressable2 animate="transition-all duration-160"3 onPress={() => setSelected(!selected)}4 style={({ pressed }) => ({5 backgroundColor: selected ? "#3552f0" : "#f2f4f7",6 transform: [{ scale: pressed ? 0.96 : 1 }],7 })}8>9 <Strx.Text style={{ color: selected ? "#fff" : "#0b1020" }}>디자인</Strx.Text>10</Strx.Pressable>입력 오류 흔들기
useTimeline으로 이벤트가 생겼을 때 짧은 키프레임 애니메이션을 재생해요.
1const shake = Strx.useTimeline({2 playables: [{ target: "field", animate: "from:-translate-x-8 to:translate-x-0 spring damping-4 stiffness-400" }],3});45<Strx.TextInput strxId="field" onSubmitEditing={() => !valid && shake.play()} />;깜빡이는 표시
1<Strx.View2 animate="from:opacity-40 to:opacity-100 from:scale-90 to:scale-100 duration-700 ease-in-out play-infinite"3 style={styles.dot}4/>반복 애니메이션은 작게 유지해 주세요. 동작 줄이기가 켜져 있으면 한 번만 재생해요.
스켈레톤에서 콘텐츠로
1{loading ? (2 <Strx.View animate="exit:opacity-0 duration-150" style={styles.skeleton} />3) : (4 <Strx.View animate="fade-in duration-250">5 <Content />6 </Strx.View>7)}완료 화면
1const celebrate = Strx.useTimeline({2 playback: "stagger",3 interval: 90,4 playables: [5 { target: "badge", animate: "bounce" },6 { target: "headline", animate: "fade-in from:translate-y-12" },7 { target: "cta", animate: "fade-in from:translate-y-12" },8 ],9});1011useEffect(() => {12 if (paid) celebrate.play();13}, [paid]);순서를 바꿀 수 있는 리스트
1<Strx.LayoutGroup transition="spring" damping={18}>2 {sorted.map(item => (3 <Strx.View key={item.id} animate="fade-in exit:opacity-0 exit:scale-95">4 <Row item={item} />5 </Strx.View>6 ))}7</Strx.LayoutGroup>sorted 순서가 바뀌면 행이 새 자리로 스프링처럼 움직이고, 지워진 행은 먼저 흐려지며 사라져요.