인터페이스 애니메이션
노코드의 새로운 시대
구체를 시각적 안내자로 삼아 층이 있는 웹페이지, 양식, 흐름 공간을 통과한다. 인터페이스는 단순 스크린샷이 아니라 앞뒤 거리를 가진 조합 가능한 평면이다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
노코드 시대에 오신 것을 환영합니다
어두운 곳에서 밝은 곳으로 공간을 통과하며 밀집된 인터페이스·코드 영역을 열린 탐색형 창작 세계로 바꾼다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Comet｜성운 창
탐색 메뉴는 상단에 고정하고 중앙 마스크만 확대한다；내부 영상과 컨테이너 크기를 분리한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
텍스트 애니메이션
유리 프리즘 위의 Framer
제목을 화면 중심축에 고정하고 단어별로 점진적으로 표시한다；가늘고 긴 유리 띠가 왼쪽에서 오른쪽으로 뻗고 가장 밝은 점은 조금 뒤에 제목을 지나간다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
텍스트 애니메이션
새 비주얼｜워드마크 공개
확대한 무지갯빛 표면에서 C를 추출해 입체 형태를 글자 하나로 모은 뒤 같은 기준선에서 전체 브랜드명을 펼친다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Figma agent에 Google Drive 연동
외부 피드백을 읽은 뒤 디자인을 수정하고, 변경 이유를 기록한 문서를 출력한다；이로써 읽기와 쓰기의 순환을 완성한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Figma Agent Vectors
새로 생성한 소재도 선택, 색상 편집, 애니메이션 구성이 가능하다；세 단계로 편집 가능성을 보여 준다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Linear — diff 화면의 병합 대기열 상태
짧은 영상에는 부분적인 hover만 있다. 주 상태를 유지하고, 마우스를 올리면 경과 대기 시간을 추가로 표시하며, 벗어나면 숨긴다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Lovable｜Google 커넥터
여러 도구 아이콘이 먼저 모인 뒤 하나씩 프롬프트 입력창의 커넥터 태그로 바뀐다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Notion 외부 에이전트(Claude + Cursor 연동)…
같은 작업 카드를 계속 유지하면서 상태를 Triage→Plan→Build→PR→Ship 순서로 바꾼다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
iPhone Duo 지원
펼친 뒤 본문 표시 면적을 넓히며 사이드바와 본문은 부모·자식 클리핑 관계를 따른다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
코드로 다루는 Notion — TypeScript 워크스페이스
요구 사항을 입력한 뒤 실행과 코드를 보여 주며, 배포를 확인한 후 실제 워크스페이스 결과로 전환한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
ChatGPT｜Apple Messages
할 일을 찾은 후 제안을 먼저 보여 주고 사용자가 수정·확인한 뒤 대상 채팅에 메시지가 도착한 것을 표시한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Cloud Computer: 클라우드 컴퓨터 배포와 사용
영구 실행 환경을 먼저 설명한 뒤 봇, 수집, 배포의 세 사례로 입증한다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
텍스트 애니메이션
Claude Haiku 5.5 출시
세 열의 위치를 고정하고 내부 텍스처와 L자 방향을 불연속적으로 전환한다；소재 전환은 블록 전체의 평행 이동과 다르다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
텍스트 애니메이션
Fable 5｜픽셀 캐릭터의 귀환
캐릭터가 전광판에 도착한 뒤 제품명을 한 글자씩 표시해 동작과 글자 사이의 인과관계를 만든다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
기능 업데이트｜음성 모드
중앙의 원을 버튼에서 영상 창으로 확장했다가 다시 버튼으로 줄인다；공간적 정체성의 연속성을 유지한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Android 업데이트 — Find Hub, Motion Assist, Gemini
각 기능은 주요 카드와 이에 붙은 작은 피드백으로 구성한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
그래픽 애니메이션
동일 프로젝트 5초 미리보기 · 5.0초
점 무리를 인물, 장소, 물건 순서로 재구성하고 범주에 따라 색상을 바꾼다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
그래픽 애니메이션
Grok Bot × Linear
두 브랜드는 정렬을 고정하고 배경은 계속 흐르되 글자의 주목도를 빼앗지 않는다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
이제 Grok Bot이 X를 검색하고 읽고 모니터링합니다.
검색한 여러 출처를 먼저 보여 준 뒤 주제별 요약으로 압축한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Grok Bot · 대화 안에서 양식 작성과 로그인
에이전트가 인증을 만나면 사용자에게 넘긴다；사용자가 입력한 뒤 절차를 재개한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
텍스트 애니메이션
Grok — 새로운 음성 21가지
제목의 위치와 크기를 유지하며 움직임은 주로 배경의 연속 흐름으로 만든다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Reception · 다양한 업종의 전화 응대
전반부에서 여러 업종의 전화로 공통 문제를 제시한다；중반부에서는 하나의 빛나는 구체로 해결책을 표현한다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
ElevenLabs｜Scribe v2
측정 항목을 먼저 소개하고 구체적인 텍스트 변화로 기능을 설명한다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Composer · 구간별 노래 편집
개방형 요청에서 조절 가능한 구간, 속도, 조성으로 들어가 마지막에 파형과 작품으로 마무리한다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Polymarket · 5분 방향 선택
판단할 질문을 먼저 제시한 뒤 복잡한 터미널을 양자택일 조작에 집중시킨다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Cursor 멀티태스킹 / 하위 에이전트 — 새로운…의 /multitask
같은 세션에 작업을 추가하고 작업 패널에 병렬 실행 개수를 계속 표시한다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
design mode에 Annotate 추가
주석을 대상 요소에 붙이고 번호와 설명을 일대일로 대응시킨다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Cursor — 이제 iPad에서도
같은 결과를 여러 기기에서 보여 준 뒤 태블릿의 정리와 검토 기능에 집중한다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Cursor — 웹 앱을 만들고 Vercel에 배포
선택 가능한 저장소를 먼저 보여 준 뒤 처음부터 만들기를 강조한다；입력한 뒤에만 미리보기를 표시한다
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
대화형 차트를 생성하는 Computer
결과에 조작 가능한 차트를 포함한다；포인터가 들어오면 데이터 툴팁이 반응해야 하며 차트 전체를 확대·축소하는 데 그치지 않는다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Perplexity — NVIDIA DGX Spark의 휴대형 Computer
로컬 도구를 기기 주위에 원형으로 배치하고 클라우드 모델은 별도 계층에 둔다；연결선은 필요에 따른 확장을 뜻하며 기본적으로 데이터를 외부 전송한다는 의미가 아니다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
3D 애니메이션
MCP로 Framer에 마이그레이션
앞 창은 오른쪽 위에 고정하고 뒤 창은 왼쪽 아래에 둔다. 두 창의 원근 방향을 맞추며 뒤 창은 한 점으로 줄였다가 대각선 축을 따라 펼친다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Framer Skills
도입부에서 입력창에 글꼴과 따옴표 규칙을 연속으로 입력한다；이어서 완성된 페이지를 보여 이 규칙이 전체 페이지 세트에 적용됨을 알린다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Framer Agent Templates
템플릿 세 개를 가로로 배치해 중앙 카드는 전체를 보이고 양옆은 일부만 어둡게 보여 준다. 전환할 때 트랙 전체를 가로로 이동하고 제자리에 도착한 뒤 중앙 카드의 밝기를 복원한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
에이전트용 Link 지갑
agent를 설치·연결한 뒤 채팅으로 일정 변경을 요청하고 비용을 표시한 다음 휴대폰에서 확인한다. 비용과 가맹점 이름을 여러 화면에서 반복해 같은 요청임을 이해하게 한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
텍스트 애니메이션
Directory 무료 채용 데이터
아바타를 중앙 제목 주위에 차례로 표시하고 크기를 비슷하게 하며 짧은 신원 태그를 붙인다. 제목은 두 줄을 유지하고 브랜드가 있는 줄은 주황색으로 한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Grok에서 스케치를 만화로 바꾸기
첫 요청은 스케치를 캐릭터 설정화로 바꾸고 두 번째 요청은 그 결과를 애니메이션으로 만든다. 채팅은 위로 스크롤하고 새 결과는 아래에서 등장해 이전 메시지와의 연결을 유지한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
3D 애니메이션
무료 음성 입력
로고 키캡과 글자 키캡이 내려와 한 줄로 정렬한 뒤 양옆으로 흩어져 빛나는 검은 음성 파형 캡슐을 드러낸다. 캡슐은 이후 시연의 공통 기준점이 된다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
iPhone Duo 지원
세로 휴대폰이 중앙에 등장한 뒤 회전하며 가로 두 열로 펼쳐진다；목록은 한쪽에 두고 상세는 다른 쪽에 넣는다. 같은 메모 내용을 두 화면 형식에 걸쳐 유지한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Runway Agent의 새로운 기능
최종 제품 페이지를 먼저 보여 준 뒤 요청으로 돌아가 색상과 제품을 추출하고 장면과 여러 크기를 생성한 다음 모션 기능을 보여 준다. 같은 스피커가 여러 결과물에 반복 등장한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
상태 단어와 HyperFrames
낮은 밝기의 고정폭 상태 단어를 빠르게 바꾼 뒤 어두운 이중 삼각형으로 전환한다. 초록을 아래에서 위로 로고에 채우고 흰 브랜드 워드마크를 펼친다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
기능 업데이트｜450개 이상의 연동
주황 캡슐로 connect, with 등의 단어를 연결하고 클릭 가능한 더하기로 마무리한다. 클릭하면 아이콘이 여러 곡선을 따라 밀려들며 숫자가 450까지 증가한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
실사 영상 편집
유리
유리 자체는 고정하고 손과 용기가 뒤로 지나간다；촘촘한 사각 무늬가 윤곽을 어긋난 작은 조각으로 나눈다. 전체 숏으로 프레임을 설명하고 클로즈업으로 무늬와 왜곡의 관계를 명확히 보여 준다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
텍스트 애니메이션
TIDAL｜타이포그래피 키비주얼 60초 버전
문구를 주인공으로 삼아 의미의 강세에 맞춰 짧은 단어를 키우고 밀어 넣고 연결한다. 마름모는 글자 구간을 다음 색상 그룹으로 넘긴다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
인터페이스 버튼 배열 · 10.7초
홈이 있는 효과 버튼 세 개를 조립 가능한 모듈처럼 분리했다가 되돌린다；아래 항목부터 시작하며 촘촘한 세로 관계를 유지한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Creative Cloud｜마젠타 조각 변형
짧고 빠른 컷으로 로고가 입체 조각에서 평면 편집과 은백색 재질로 바뀌는 과정을 보여 주며 마젠타를 모든 버전의 시각 단서로 쓴다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
EliseAI｜공식 사이트 제품 인터페이스
완전한 예약 대화 하나로 어시스턴트의 가치를 설명한다. 사용자가 시간 요구를 제시하면 두 선택지를 제공하고 사용자가 하나를 확인한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
그래픽 애니메이션
Revolut 앱에 최초의 유로 담보 스테이블코인 EURR을 출시합니다.
두 코인이 같은 받침대를 따라 앞뒤 위치를 교환하며 글자는 고정해 움직임을 두 대상 사이에 집중한다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
Wabi 2.0 소개: 앱을 만들고 일을 처리하는 새로운 메신저…
채팅 정보가 사용 가능한 작은 앱으로 자라나고 이 앱들을 모아 개인 홈 화면을 만든다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.
인터페이스 애니메이션
AI로 프레젠테이션 만들기
주제를 편집 가능한 개요로 만든 뒤 개요를 완전한 슬라이드 세트로 바꾸어 두 생성 단계에 각각 명확한 결과를 둔다.
참고 영상만 제공되며, 편집 가능한 프로젝트는 포함되어 있지 않습니다.