모션

직접 개발한 애니메이션 라이브러리 noah-motion 으로 만든 오리지널 모션입니다. 영상 소스 없이 전 프레임이 코드로 실시간 렌더링되며, 일시정지하거나 원하는 프레임으로 자유롭게 이동할 수 있습니다.

OPEN SOURCE · MIT LICENSE

noah-motion

순수 함수형 타임라인과 해석적 물리 스프링으로 설계된 프레임 단위 모션 엔진

0 의존성 (Zero-dep)해석적 물리 스프링임의 시점 탐색 seek(t)60fps 비디오 직접 렌더링

내 콘텐츠로 만든 모션

작업물, 서명, 그리고 X 데이터.

01

프롬프트에서 이미지로

홈페이지 오프닝. 점 하나가 이름으로 자라나고, 프롬프트를 입력하는 창으로 변해 전송 후 작업물로 완성되었다가 다시 점으로 돌아갑니다.

tracktimelinespring
02

디노이징 생성

디퓨전 모델의 이미지 렌더링 시뮬레이션: 컬러 노이즈에서 시작해 30단계에 걸쳐 선명해지며, 단계 수와 노이즈 곡선이 함께 표시됩니다.

timelinecanvaseaseInOut
03

LLM 토큰 확률 스트림

언어 모델의 자기회귀 토큰 샘플링 시각화: 매 스텝마다 상위 3개 후보 토큰과 Softmax 확률 바가 실시간으로 튀어나오며 선택된 토큰이 문장으로 이어집니다.

trackspringsoftmax
04

잠재 공간 보간 탐색

2차원 잠재 공간(z₁, z₂)의 네 가지 스타일 클러스터 사이를 탐침이 유영하며 색상 그라데이션과 스타일 혼합 가중치를 실시간으로 보간합니다.

springmixColormanifold
05

빛나는 순간

저의 시그니처 문구. 글자가 하나씩 떨어지고 빛이 스쳐 지나가며, 별빛과 함께 문장이 자연스럽게 흩어집니다.

trackspringstagger
06

마그네틱 스튜디오 독

가상 커서가 크리에이티브 독 위를 미끄러지듯 지나가면 가우시안 거리 곡선과 물리 스프링에 따라 아이콘이 커지고 클릭 시 탄성 있게 튀어 오릅니다.

springgaussiantrack
07

작업물 카드 덱

다섯 장의 작업물을 겹쳐 쌓은 덱. 맨 앞 카드를 넘기면 뒤로 가고 나머지가 앞으로 차례로 나옵니다. 한 바퀴 돌면 원래 자리로 돌아옵니다.

trackspring
08

인기 순위

제 X 계정의 실제 조회수 데이터. 상위 6개 콘텐츠의 막대 그래프가 차례로 자라나며 숫자도 함께 카운팅됩니다.

springtrack실제 데이터
09

트윗 올리는 시간

X에 트윗을 올린 실제 시간대: 24시간 다이얼을 시계바늘이 돌며 시간대별 막대가 튀어나오고, 가장 활발한 시간대가 밝게 켜집니다.

springtrack실제 데이터
10

물리 스프링 vs 베지어

해석적 물리 스프링(실시간 속도 벡터와 자연스러운 오버슈트 포함)과 고정된 CSS 삼차 베지어 곡선의 움직임을 나란히 비교합니다.

springvelocityeaseInOut
11

스프링 감도

네 가지 반발 계수의 스프링이 동시에 움직입니다. 은은한 선으로 시간 경과에 따른 위치 곡선과 안정화까지 걸린 시간을 보여줍니다.

springsettlevelocity
12

noah-motion 인트로

애니메이션 라이브러리의 자체 인트로. 저장소의 코드를 그대로 1080×1080, 60fps 비디오로 바로 내보낼 수 있습니다.

trackmixColorrender

애니메이션 실험실

noah-motion 갤러리의 41가지 장면입니다.라이브러리 데모 사이트에서도 만나보실 수 있습니다.

13

오로라 타이틀

부드러운 컬러 광원이 각자의 궤적을 따라 흐르고, 타이틀이 블러 속에서 한 글자씩 떠올랐다가 가라앉습니다.

trackstaggercanvas
14

제품 히어로 샷

커머스 히어로 이미지: 세럼이 단상에서 떠오르고 셀링 포인트가 지시선을 따라 팝업되며 가격이 내려오고 구매 버튼이 눌립니다.

springtrackvelocitystaggerline drawing
15

디퓨전 생성

프롬프트가 입력되고 생성 버튼을 누르면 순수 노이즈에서 시작해 30단계 디노이징을 거쳐 황혼의 해변 사진으로 완성됩니다.

springtrackcanvasdeterministic noise
16

수묵 번짐

먹물이 화선지에 떨어져 농담을 만들며 번지고, 다시 획으로 모여 서예 타이틀을 그린 뒤 붉은 낙관이 찍힙니다.

canvasdistance fieldtrackspring
17

불꽃놀이

강변의 밤하늘: 불꽃이 궤적을 그리며 올라가 국화, 모란, 토성 고리, 황금 버들 모양으로 터지고 강물에 아름다운 반영이 비칩니다.

canvasclosed-form physicswrapdeterministic noise
18

와이어프레임에서 완성본으로

커서가 회색 와이어프레임 블록을 하나씩 선택하면 스프링처럼 변형되며 색상, 텍스트, 이미지가 채워져 완성된 페이지로 떠오릅니다.

trackspringstaggerclip-path
19

레이어 분해

완성된 포스터가 기울어지며 배경, 장식, 피사체, 카피, 버튼의 5개 레이어가 Z축을 따라 분리되었다가 다시 하나로 합쳐집니다.

springtrackstaggerCSS 3D
20

컬러 피커

돋보기 스포이드가 화면의 다섯 지점을 짚으면 색상이 호를 그리며 팔레트로 날아가 헥스 코드가 롤링되고 명도순으로 정렬됩니다.

trackspringstaggercanvas
21

프로스티드 글래스

날씨, 라디오, 캘린더, 밝기 조절 네 가지 반투명 유리 위젯이 흐르는 빛의 구체 위에서 펼쳐지고 교차하며 테두리에 빛을 반사합니다.

track × 18springvelocitybackdrop-filter
22

창밖의 하루

창밖 풍경이 자정에서 정오를 거쳐 다시 밤으로 흘러갑니다. 하늘빛, 해와 달, 별과 구름이 변하고 밤이 되면 스탠드 조명이 켜집니다.

timelineloopSVG
23

노드 워크플로우

이미지 생성 노드들이 팝업되고 베지어 곡선으로 연결된 뒤, 실행 시 데이터 포인트가 선을 따라 흐르며 노이즈에서 프리뷰가 완성됩니다.

trackspringstaggerbezier arc length
24

모핑 아일랜드 캡슐

잠금 화면 상단의 블랙 캡슐이 대기, 타이머, 재생 중, 새 메시지 상태로 스프링 물리 엔진에 맞춰 부드럽게 변형됩니다.

trackspringshape morph
25

Git 커밋 그래프

Git 히스토리가 아래에서 위로 자라나며 메인 브랜치에서 서브 브랜치가 뻗어 나오고 병렬 진행 후 다시 병합됩니다.

trackspringstaggerSVG mask
26

앰버 메타볼

여섯 개의 호박색 액체 유리 방울이 하나로 합쳐져 출렁이다가 가느다란 실을 늘이며 다시 분리됩니다.

springtrackdistance fieldmarching squaresrefractioncanvas
27

카메라 포커스 풀

스마트폰 카메라 뷰파인더: 화병을 탭하면 초점 박스가 줄어들며 배경이 보케로 흐려지고 셔터가 깜빡이며 앨범 썸네일로 들어갑니다.

trackspringdepth of fieldcanvas
28

바람에 흔들리는 태그

왼쪽에서 불어온 바람에 종이 태그들이 차례로 밀려나 흔들리고 관성에 따라 스윙하며 돌아옵니다.

springtrackstacked impulsesfollow-throughperiodic wrapCSS 3D
29

파티클 텍스트

수천 개의 입자가 파도처럼 모여 글자를 이루고, 황금각 나선으로 폭발해 회전하다가 원래 자리로 흩어집니다.

trackspringone path per particle
30

종이비행기

입체적인 음영을 가진 종이비행기가 세 겹의 구름 사이를 활공하고 회전하며 날개 끝에 리본 궤적을 남깁니다.

springtrackcubicBezierperspectiveparallaxcanvas
31

스플릿 플랩 보드

공항의 아날로그 플랩 보드처럼 상단 플랩이 떨어지며 새 글자가 나타나고 열마다 시차를 두고 스프링으로 안착합니다.

springstagger3D flipdeterministic noise
32

셰이프 모핑

부드러운 젤리 형태가 원, 스쿼클, 하트, 별, 구름 모양으로 호 길이를 맞춰 재샘플링되며 탱글탱글하게 변형됩니다.

springtrackarc-length resamplingcanvas
33

비트 & 이퀄라이저

바이닐 레코드가 돌고 외곽의 링 스펙트럼이 4마디 드럼 비트에 맞춰 춤추며 우측 16스텝 드럼 머신이 차례로 점등됩니다.

spring pulsestrackperiodic wrapcanvas
34

현 위의 글자

글자들이 하나의 현 위에 앉아 있습니다. 피크가 현을 당겼다 놓으면 달랑베르 파동 방정식에 따라 진동하며 글자들이 함께 물결칩니다.

d'AlemberttrackspringmixColorcanvas
35

물결 도트 그리드

비스듬히 바라본 도트 연못 위로 열 방울의 컬러 빗방울이 떨어져 타원형 파문이 퍼지고 파도가 겹치는 곳이 하얗게 빛납니다.

spring pulsesdistance delayperspectivewrapcanvas
36

AI 채팅 스트림

메시지를 보내면 입력 중 표시 후 답변이 한 글자씩 스트리밍되고 마지막에 복사 버튼이 팝업됩니다.

springtrackstreaming text
37

플립 모자이크

40개의 타일이 대각선을 따라 차례로 3D 회전하며 뒷면이 모여 하나의 완성된 이미지를 만든 뒤 다시 뒤집힙니다.

track × 403Dstagger
38

바 차트 레이스

여섯 개 태그의 인기도가 월별로 증가하며 실시간 값에 따라 막대가 스프링처럼 순위를 바꾸고 축 스케일이 자동 조정됩니다.

trackspringlive sorting
39

만화경

30° 웨지 하나를 회전·미러링해 12개 꽃잎으로 복제하고 금빛 파동 링과 렌즈 조각들이 호흡하듯 중심에서 피어납니다.

timelineloopmirror symmetryperiodic wrapcanvas
40

레이아웃 시프트

12장의 카드가 더미, 그리드, 원형 링, 파도 대형 사이를 순차적인 시차를 두고 유연하게 이동합니다.

track × 48staggerspring
41

모듈러 곱셈 원

원 위의 180개 점에서 i번째 점을 i × k번째 점과 연결합니다. k가 2에서 7로 변하며 심장형과 에피사이클로이드 기하 무늬를그립니다.

timelinecanvasmath
42

전각 인장

화선지 위에 세로 서예가 위에서 아래로 써 내려가지고, 붉은 인장이 떨어져 종이 질감이 살아있는 인영을 남깁니다.

springsquash & stretchSVG filters
43

텍스트 디코딩

각 글자가 노이즈 속에서 깜빡이다가 왼쪽부터 차례로 정확한 글자로 고정되며 빛나고, 잠시 후 다음 문장으로 넘어갑니다.

timelinestaggerdeterministic noise
44

컨트롤 감각

토글, 체크박스, 슬라이더, 세그먼트 컨트롤, 좋아요 버튼, 스테퍼가 각기 다른 스프링 텐션과 물결 효과로 차례로 탭됩니다.

springtrackmicro-interactions
45

행성 궤도

기울어진 타원 궤도를 따라 천체들이 은은한 꼬리를 남기며 공전합니다. 모든 주기가 전체 시간과 맞아떨어져 끊김 없이 무한 루프됩니다.

timelineloopcanvas
46

오도미터 롤링 숫자

각 자릿수가 하나의 휠로 구성되어 스프링 속도에 비례해 자연스러운 모션 블러와 함께 목표 숫자로 회전합니다.

springvelocitytrack
47

호흡 가이던스

반투명한 빛의 꽃이 들숨·멈춤·날숨에 맞춰 세 겹의 꽃잎을 역방향으로 회전하며 안쪽부터 부드럽게 펴고 오므립니다.

spring followtrackstaggermixColorcanvas
48

3단 접이식 카드

접혀 있던 카드의 양쪽 패널이 원근감을 가지고 펼쳐지며 내부 콘텐츠가 하나씩 팝업된 뒤 다시 원래대로 접힙니다.

track3D perspectivespring
49

활동 히트맵

30주간의 일별 타일이 대각선을 따라 색칠되며 총합이 올라가고, 최장 연속 기록과 가장 활발했던 날에 툴팁이 표시됩니다.

springstaggertrack
50

성장하는 라인 차트

일주일간의 조회수 꺾은선 그래프가 스스로 그려지며 선이 지나는 포인트가 튀어나오고 최고점에 툴팁이 점프합니다.

springtrackSVG
51

바우하우스 기하 구성

원, 반원, 삼각형, 컬러 바가 회전하며 날아와 바우하우스 스타일의 구도를 완성하고 부드럽게 호흡한 뒤 퇴장합니다.

trackspringcomposition
52

벚꽃비

꽃잎들이 흔들리고 뒤집히며 흩날립니다. 가까운 꽃잎은 크고 빠르게, 먼 꽃잎은 작고 느리게 주기 궤적을 따라 무한히 내립니다.

timelineloopdepth
53

경로 탐색

약도 위의 네 지점에 핀이 떨어지고 거리를 따라 경로가 그려지며 포인트가 이동해 도착지에 파문을 일으킵니다.

springpath lengthSVG

키워드를 입력해 검색을 시작하세요