- AI 스타트업용 AI-native React 컴포넌트 모음으로, 27개 컴포넌트와 MIT 라이선스를 제공
- 일반 공개 상태이며, 설치 명령은 npm install performative-ui
- 구성은 Atoms, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof, Pricing & Conversion으로 분류
- Prompt, TokenStream, LogoMarquee, PricingCard, WaitlistForm 같은 컴포넌트가 프롬프트 입력창, 토큰 스트림, 로고, 가격 카드, 대기자 명단 폼을 담당
- 각 컴포넌트 설명은 펀딩, 모델명, 로고, 숫자, 전환 UI 등 AI 스타트업 랜딩 페이지에서 쓰이는 디자인 신호를 짧은 문구로 표현
개요
- Performative-UI는 일반 공개 상태의 AI 스타트업용 AI-native React 컴포넌트 모음이며, 27개 컴포넌트와 MIT 라이선스를 제공
- 설치 명령은
npm install performative-ui - 컴포넌트의 목적은 펀딩 라운드가 얼마나 초과 청약됐는지 신호하는 것
컴포넌트 목록
-
Atoms
-
Sparkle: 어떤 명사에든 ✦를 붙여 두 배 빠르게 출시하는 요소
- GradientText: 이탤릭만으로는 10억 달러급으로 충분하지 않을 때의 그라디언트 텍스트
- StatusDot: 그렇지 않을 때도 항상 초록색인 상태 점
-
Primitives
-
Button: 클릭하도록 움직이게 만든 버튼
- EyebrowPill: 더 할 말이 없을 때 모델명이 들어가는 위치
- Prompt: 제품 기능을 설명하는 대신 모든 AI 빌더가 배포하는 textarea
-
Banners
-
StickyBanner: 유틸리티로 위장한 펀딩 뉴스
-
Heroes
-
Rotator: “everything”이라고 말하는 것만으로는 충분히 야심 차지 않을 때의 회전 문구
- WordRoll: 방문자가 타이핑을 기다리지 않아도 Rotator의 범위 과시를 제공
- PromptHero: 가치 제안을 텍스트 입력으로 대체한 히어로
- AsciiHero: 해커를 위해, 적절한 뉴스레터를 팔로우하는 사람들이 만든 ASCII 히어로
-
Backgrounds
-
Aurora: 세 개의 blob으로 한 세대를 정의하는 배경
- NodeGraphBackground: 개념상 신경망인 노드 그래프 배경
- FloatingSparkles: “마법은 스스로 출시되지 않음”이라는 떠다니는 반짝임
-
Surfaces
-
GlassCard:
Backdrop-filter: ambition - MockIDE: 실제 코드는 오는 중이고, 이것은 예고편
-
Conversation
-
ChatBubble: 말풍선 안에 있다면 반드시 참이라는 채팅 버블
- TokenStream: Server-sent events(SSE)는 2008년 HTML5 사양에 추가됐지만 2025년까지 사용되지 않았다는 토큰 스트림
- ChatFAB: 이제 탈출구가 없다는 채팅 FAB
-
Social Proof
-
LogoMarquee: 들어본 모든 대상이 신뢰한다는 로고 마키, 서명하지 않은 대상까지 포함
- LogoRow: 로고가 여섯 개뿐일 때 쓰는 정적 로고
- StatCounter: 올라가는 숫자가 그렇지 않은 숫자보다 낫다는 카운터
- CommunityBadge: Stars는 새로운 MAU라는 커뮤니티 배지
-
Pricing & Conversion
-
PricingCard: 가운데 카드가 빛나므로 그에 맞게 선택하는 가격 카드
- BeforeAfter: 왼쪽은 혼돈, 오른쪽은 우리
- WaitlistForm: 직접 만들어낸 수요를 담는 대기자 명단 폼
- Popover: 동의가 아니라 전환을 위해 만든 팝오버