Show HN: UI micro interactions prompts for AI

사이트가 자동 수집에 429를 돌려줘 웹 페이지 본문을 따로 읽었어요. 페이지가 인터랙티브 데모 위주라 섹션 설명과 예시 이름만 옮겼고, 실제 프롬프트 내용과 HN 토론은 읽지 못했어요.

무엇인가요

TypeUI의 Micro Interactions 페이지는 버튼, 폼, 선택 컨트롤, 모달, 내비게이션 등을 위한 인터랙티브 UI 마이크로 인터랙션 113개를 모아 둔 곳이에요. 각 동작을 미리 보고, TypeUI Creative로 그 구현용 프롬프트를 복사해 AI 코딩 도구에 넘길 수 있게 만들었어요.

카테고리별 예시

• Buttons: 확인, 실행 취소, 복사 피드백, 로딩 상태, 업로드 진행. 예) 거부된 동작 흔들기, 길게 눌러 확인, 상태 아이콘 전환, 다중 파일 업로드, 로딩 점·링·막대 애니메이션
• Inputs: 비밀번호 표시, 자동 저장, 검증, 서식, 글자 수, 제안. 예) 접두사 드러내기, 마스크 채우기, 글자 수 카운터
• Selection: 체크박스·토글·라디오가 설정을 드러내고 합계를 갱신하고 결과를 거르는 동작. 예) 전체 선택 연쇄, 필터 칩, 최소 선택 개수 강제, 의존 설정 드러내기, 진행률 갱신
• Modals: 확인, 검증, 드래그로 닫기, 저장 안 된 변경 보호(키보드 포커스 유지)
• Drawers: 가장자리 제스처, 연결된 배경, 확장 패널, 바텀 시트
• Tooltips: 맥락 정보, 링크 미리보기, 공유 호버 지연(마우스·키보드 모두 접근 가능)
• Toasts: 실행 취소, 비동기 결과(프로미스 토스트 변형), 스와이프 닫기
• Step navigation: 진행 표시, 검증, 완료 단계로 돌아가기, 남은 시간
• Lists: 재정렬, 고정, 보관, 삽입, 미리보기
• Sliders: 범위 선택, 스냅 지점, 스크러빙, 전후 비교, 고무줄 오버드래그, 자석 멈춤점
• Cards: 상세 펼치기, 뒤집기, 동작 드러내기, 스와이프, 쌓인 덱 순환

페이지는 각 인터랙션에 "분명한 목적과 결과"를 주라고 강조하고, 키보드 대안과 접근성을 여러 섹션에서 함께 언급해요.