ConnectScene

방금 연결한 서비스들이 한 장의 창으로 모이는 장면. 계정당 한 번, 건너뛸 수 있다.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.

variant

recordTitle

recordMeta

sourceStyle

예시

상태

맨 위 카드가 기록
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.
잉크 한 줄
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.

연결한 곳이 도착하는 모습

같은 장면, 출처 표현만 다르다. 기본은 작은 기록 카드: 이 장면은 정보가 모이는 순간이다.

기록 카드(기본)
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.
앱 아이콘 타일
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.
로고만
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.
유리 칩
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.

모자이크 연결

조각이 겹쳐 도착하고, 마지막 조각이 앉는 순간 납선이 맺히며 창이 1.5px 눌린다.

모자이크 맞춤
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This window is your workspace.
스테인드글라스 판
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This window is your workspace.
차분
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This window is your workspace.

쓰임 예

서비스 하나
Connected: Gmail. This is your workspace.
잉크 한 줄 · 로고만
Connected: Gmail, ChatGPT, Slack. This is your workspace.
앱 아이콘 타일 · 셋
Connected: Notion, ChatGPT, Google Calendar. This is your workspace.
나중에 더하기
Added to the window: MacBook, iPhone, Notion.

이렇게 · 이렇게 하지 않기

이렇게 연결을 마친 직후 한 번만 보여 주고, 끝나면 onDone에서 계정에 기록한다. 연결한 서비스만 넣는다.
이렇게 cards-to-record(첫 기록이 첫 화면과 같은 말을 한다)를 쓰고, 보여 줄 기록이 아직 없으면 ink-line.
이렇게 하지 않기 반복 재생·자동 재생 루프·두 번째 브랜드 모먼트로 쓰지 않는다. 로고를 다시 칠하거나 늘이지 않는다(SourceLogo 그대로).

토큰과 속성

이름	타입	기본값	설명
`services?`	`readonly SourceLogoService[]`	—	방금 연결한 서비스(연결한 것만, 연결 순서). 하나여도 성립한다.
`variant?`	`'cards-to-record' \| 'ink-line' \| 'maison-mosaic' \| 'maison-panes' \| 'maison-calm'`	`cards-to-record`	cards-to-record(기본): 연결한 곳이 하나씩 도착해 모이고, 맨 위 카드가 첫 기록으로 펼쳐진다. ink-line: 잉크 한 줄 위로 로고만 내려앉고 마침표.
`existing?`	`readonly SourceLogoService[]`	—	이전에 연결해 이미 창에 있는 서비스. 그대로 있고 services만 날아든다.
`recordTitle?`	`string`	`분기 계획 리뷰 준비`	cards-to-record만: 카드가 펼쳐 보이는 첫 기록의 제목. 비우면 예시 제목.
`recordMeta?`	`string`	`첫 기록 · 오늘 09:12`	cards-to-record만: 제목 위 사실 한 줄.
`sourceStyle?`	`'card' \| 'tile' \| 'logo' \| 'glass'`	`card`	cards-to-record만: 연결한 곳이 도착하는 모습. card(기본) = 로고와 흐린 내용 한 줄의 작은 기록 카드 · tile = 앱 아이콘 타일 · logo = 로고만 · glass = 프로스트 유리 칩.
`replayKey?`	`number`	—	값이 바뀌면 다시 재생한다(카탈로그용). 제품에서는 계정당 한 번만 마운트한다.
`onDone?`	`() => void`	—	끝 상태가 보일 때 한 번(끝까지 재생·건너뛰기·Esc 모두). 여기서 “재생함”을 계정에 기록한다.
`ref → <section>`	—	—	forwardRef. 장면 전체.
`--cb-ease-gather · --cb-ease-gather-glass · --cb-ease-ink`	—	—	이 장면의 이징(느린 출발, --cb-ease와 같은 착지). 이동 280ms 토큰의 유일한 문서화된 예외: 비행 480–1040ms, 전체 1.3–2.1s(cards-to-record take 3, 다섯 곳 2.09s: 한 곳씩 110ms 간격으로 도착).
그 밖의 속성	—	—	aria-*, id 등은 바깥 <section>으로 간다.

개요

미리보기

예시 언어동작 줄이기

Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.

variant

recordTitle

recordMeta

sourceStyle

예시

상태

맨 위 카드가 기록
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.
잉크 한 줄
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.

연결한 곳이 도착하는 모습

같은 장면, 출처 표현만 다르다. 기본은 작은 기록 카드: 이 장면은 정보가 모이는 순간이다.

기록 카드(기본)
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.
앱 아이콘 타일
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.
로고만
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.
유리 칩
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This is your workspace.

모자이크 연결

조각이 겹쳐 도착하고, 마지막 조각이 앉는 순간 납선이 맺히며 창이 1.5px 눌린다.

모자이크 맞춤
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This window is your workspace.
스테인드글라스 판
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This window is your workspace.
차분
Connected: Gmail, Google Calendar, Google Drive, Slack, ChatGPT. This window is your workspace.

쓰임 예

서비스 하나
Connected: Gmail. This is your workspace.
잉크 한 줄 · 로고만
Connected: Gmail, ChatGPT, Slack. This is your workspace.
앱 아이콘 타일 · 셋
Connected: Notion, ChatGPT, Google Calendar. This is your workspace.
나중에 더하기
Added to the window: MacBook, iPhone, Notion.

이렇게 · 이렇게 하지 않기

이렇게 연결을 마친 직후 한 번만 보여 주고, 끝나면 onDone에서 계정에 기록한다. 연결한 서비스만 넣는다.

이렇게 cards-to-record(첫 기록이 첫 화면과 같은 말을 한다)를 쓰고, 보여 줄 기록이 아직 없으면 ink-line.

이렇게 하지 않기 반복 재생·자동 재생 루프·두 번째 브랜드 모먼트로 쓰지 않는다. 로고를 다시 칠하거나 늘이지 않는다(SourceLogo 그대로).

토큰과 속성

이름	타입	기본값	설명
`services?`	`readonly SourceLogoService[]`	—	방금 연결한 서비스(연결한 것만, 연결 순서). 하나여도 성립한다.
`variant?`	`'cards-to-record' \| 'ink-line' \| 'maison-mosaic' \| 'maison-panes' \| 'maison-calm'`	`cards-to-record`	cards-to-record(기본): 연결한 곳이 하나씩 도착해 모이고, 맨 위 카드가 첫 기록으로 펼쳐진다. ink-line: 잉크 한 줄 위로 로고만 내려앉고 마침표.
`existing?`	`readonly SourceLogoService[]`	—	이전에 연결해 이미 창에 있는 서비스. 그대로 있고 services만 날아든다.
`recordTitle?`	`string`	`분기 계획 리뷰 준비`	cards-to-record만: 카드가 펼쳐 보이는 첫 기록의 제목. 비우면 예시 제목.
`recordMeta?`	`string`	`첫 기록 · 오늘 09:12`	cards-to-record만: 제목 위 사실 한 줄.
`sourceStyle?`	`'card' \| 'tile' \| 'logo' \| 'glass'`	`card`	cards-to-record만: 연결한 곳이 도착하는 모습. card(기본) = 로고와 흐린 내용 한 줄의 작은 기록 카드 · tile = 앱 아이콘 타일 · logo = 로고만 · glass = 프로스트 유리 칩.
`replayKey?`	`number`	—	값이 바뀌면 다시 재생한다(카탈로그용). 제품에서는 계정당 한 번만 마운트한다.
`onDone?`	`() => void`	—	끝 상태가 보일 때 한 번(끝까지 재생·건너뛰기·Esc 모두). 여기서 “재생함”을 계정에 기록한다.
`ref → <section>`	—	—	forwardRef. 장면 전체.
`--cb-ease-gather · --cb-ease-gather-glass · --cb-ease-ink`	—	—	이 장면의 이징(느린 출발, --cb-ease와 같은 착지). 이동 280ms 토큰의 유일한 문서화된 예외: 비행 480–1040ms, 전체 1.3–2.1s(cards-to-record take 3, 다섯 곳 2.09s: 한 곳씩 110ms 간격으로 도착).
그 밖의 속성	—	—	aria-*, id 등은 바깥 <section>으로 간다.

개요

예시

상태

연결한 곳이 도착하는 모습

모자이크 연결

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

연결한 곳이 도착하는 모습

모자이크 연결

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기