aimotion데모 166편 · 12개 분류

SVG 필터 · feTurbulence + feDisplacementMap

CSS 3D 변형 · perspective + preserve-3d

Canvas 2D 절차적 생성 · Space Colonization

WebGL2 프래그먼트 셰이더 · 도메인 워핑 fBm

WebGL2 볼류메트릭 레이마칭

SDF 레이마칭 · 셰이더 하나로 만든 3D

WebGL2 셰이더 · 굴절 코스틱

WebGL2 포인트 스프라이트 · 버텍스 셰이더 궤도

GPU 파티클 · 컬 노이즈 + 핑퐁 텍스처

GPGPU 반응-확산 · Gray–Scott

GPU 유체 시뮬레이션 · Stable Fluids

three.js 물리 기반 재질 · 투과 + 블룸 후처리

three.js 인스턴싱 · 수천 개의 폴립

WebGL2 포인트 스프라이트 · 텍스트 샘플링

WebGL2 GPGPU · 물과 안료 시뮬레이션 (Curtis 1997 방식)

WebGL2 · 붓질 기반 렌더링 + 높이맵 조명

절차적 판각 + WebGL2 잉크 인쇄 셰이더

WebGL2 · 별색 망점 분판 + 판 어긋남 + 곱하기 겹쳐 찍기

WebGL2 후처리 · 영사기 게이트 흔들림·깜빡임·먼지·할레이션

WebGL2 후처리 · YIQ 색 번짐·트래킹 노이즈·브라운관

Canvas 2D · 12fps 스톱모션 + 손으로 오린 종이

WebGL2 · 종이 결에 걸리는 목탄 + 문지름·지우개

WebGL2 셰이더 · 명암을 선의 굵기로 (판화 해칭)

수학적 마블링 · 잉크 방울과 빗질의 닫힌식 변형 (Jaffer·Lu)

붓 물리 모델 · 먹 머금음·필압·비백 + 화선지 번짐

WebGL2 · 현상 반응 (잠상 → 은 입자) + 안전등

WebGL2 · 즉석 필름 시약 확산 + 색 현상 단계

WebGL2 · 색유리 투과광 + 납선 + 바닥에 맺힌 빛

높이맵 활자 + 잉크 압착 셰이더 · 활판 인쇄

절차적 자수 · 땀 경로 + 실 광택 셰이더

WebGL2 · 스크래치 페이퍼 (긁기 마스크 + 왁스 부스러기)

회전 원통 + 틈새 스트로보 · 실제 원리로 만든 움직임

WebGL2 · 유리관 기체 방전 발광 + 벽 반사광

WebGPU 컴퓨트 셰이더 · 입자 100만 개 중력 시뮬레이션

Web Audio · OfflineAudioContext 합성 + FFT 분석 동기화

가변 폰트 · font-variation-settings 굵기 축 + 글자 단위 모션

WebGL2 · FFT 해양 파도 (Tessendorf) + 대기 산란

WebGL2 볼류메트릭 레이마칭 · 다중 산란 근사 + 빛내림

GPGPU 수력 침식 · 파이프 모델 + 퇴적

XPBD 천 시뮬레이션 · 위치 기반 동역학 미리 굽기

보로노이 파괴 + Rapier2D 물리 미리 굽기

보이드 알고리즘 · 수천 마리 군집 미리 굽기

스펙트럼 박막 간섭 · 두께장 흐름

스펙트럼 광선 추적 · 파장별 굴절 (분산)

섭동 이론 딥 줌 · 고정밀 기준 궤도 + GPU 델타

부호 거리장 · 등치선 · 거리장 보간 모핑

파라메트릭 글꼴 · 한글 모아쓰기 규칙 · 획 골격 오프셋

가변 폰트 폭 맞춤(wdth·wght·opsz·GRAD) · 모듈 그리드 조판

컷아웃 그래픽 · 가위 자국 윤곽 · 2프레임 홀드(12fps) · 매치 컷

다중 스케일 트루셰 타일 · 모서리 점유 기반 타일 선택

SDF 글리프 아틀라스 · 회전 최소화 프레임 위 글자 배치 · 인스턴싱 · 피사계 심도

글리프 윤곽 → 세운 종이 띠 · 말림이 풀리는 띠 · 부드러운 그림자

GPU 픽셀 정렬(비토닉 정렬망) · 밝기 구간 분할 정렬 · 색수차

9단 굵기 글리프 SDF 아틀라스 · 휘도→굵기 하프톤 · 레이마칭 장면

XPBD 연체(거리·면적 제약) · 글리프 외곽선 삼각분할 · 충돌

두 글자 돌출의 교집합(투영 조형) · 다중 광원 그림자

김 밀도장 · 물방울 입자(병합·흘러내림) · 굴절 법선 맵 · 보케

도착 시간장(16방향 다익스트라) · 불꽃 전선 셰이딩(흑체 색) · 불씨 입자

역설계 커스틱(최적 수송·포아송 반복) · 광자 메시 래스터화 · 분산

Physarum 에이전트(감지·회전·이동·침착) · 확산·감쇠 · 먹이장

GPU 2D 파동 방정식 · 굴절 · 프레넬 반사 · 수면 커스틱

모양 안 조판 · 스캔라인 구간 + Knuth–Plass 줄 나누기 + 단어 재배치

슬릿스캔 · 시간 변위 표본 (x, y, t 볼륨)

스캐니메이션 · 바리어 그리드 인터레이스 + 모아레 확대

레이저 각인 · 래스터 주사 + 머문 시간에 따른 탄 깊이 + 흑체 열 자국

스프레이 스텐실 · 가우스 분사 + 다리 있는 스텐실 + 흘러내림

GSAP SplitText · ScrambleText · CustomEase — 라인 마스크 · 글자 스태거 · 스크램블

GSAP MorphSVG · DrawSVG · MotionPath

GSAP Flip · FLIP 레이아웃 전환 · CSS 그리드/플렉스

GSAP MotionPath(캔버스 객체) · CustomWiggle · Physics2D

PixiJS 8 · DisplacementFilter · GSAP PixiPlugin

GSAP 타임라인 × three.js · 카메라 경로 · 장면 연출

rough.js + perfect-freehand · 손그림 렌더링

d3-geo · 실제 해안선 + 정사영

Rapier2D (WebAssembly) 물리 · 미리 굽기

d3 · 데이터 전환 애니메이션 (막대 순위 → 산키 → 지도)

anime.js 4 · 그리드 스태거 · SVG 드로잉/모프

Motion(motion.dev) · 스프링 물리 · 수동 시계 seek

lottie-web · 트림 패스 · 리피터 · 매트 · 셰이프 모프 (JSON을 코드로 작성)

p5.js · 재귀 가지치기 · noise 바람 · 인스턴스 모드

Paper.js · 불리언 연산(unite/subtract/intersect) · 경로 스무딩

Zdog · 평면 의사 3D 일러스트 · 팔레트 낮/밤 전환

matter-js 강체 물리 · 고정 dt 굽기 · 이항분포 → 정규분포

mo.js · Burst · Shape · ShapeSwirl · Html · Timeline.setProgress

Babylon.js · PBR 유리 · 그림자 생성기(PCF) · GlowLayer · 부피광 산란

Tone.js(오프라인 합성) · 악보 기반 모션 · GSAP 타임라인 · SVG

CSS @keyframes · @property · conic/radial-gradient · clip-path · mix-blend-mode

SVG SMIL(animateTransform · animateMotion · animate) · setCurrentTime

CSS 스크롤 기반 애니메이션(scroll() · view()) · 스크롤 위치 제어

2D 뼈대 · FABRIK 역기구학 + 스키닝

얼굴 리그 · 표정 채널 + 연기 곡선

센서 시점 · 스칼라장 + 거짓 색 + 스캔 전환

돋보기 렌즈 · 굴절 왜곡 + 숨은 층 + 아이리스 전환

임팩트 키트 · 한 박자를 세게 만드는 겹침

재는 연출 · 오도미터 + 계기 바늘 + 줄자

닫힌식 보행 주기 · 발 고정 · 발자국 박자

장면 전환 키트 · 와이프·아이리스·휩 팬·매치 컷

멀티플레인 카메라 · 평면 일러스트의 깊이

닫힌식 물리 · 시뮬레이션 없이 튕기고 흔들리기

비교 장면 · 한 장면의 두 상태 + 와이프 슬라이더 + 분할 화면

스케일 줌 · 지수 줌 + 단계별 장면 + 원점 재설정

시선 유도 · 스포트라이트 마스크 + 초점 이동(피사계 심도)

2.5D 사진 시차 · 깊이맵 광선 진행 + 돌리 줌

시간 재매핑 · 속도 곡선 적분과 노출 모션 블러, 정지 화면

립싱크 · 한글 자모 → 입 모양 + 조음 결합

컬러 그레이딩 · 3D LUT + 낮을 밤으로

웹툰 칸 연출 · 스크롤이 곧 시간 + 칸 사이 여백 + 칸 깨기

팝아웃 착시 · 깊이 기준 막대 + 피사체 매트 + 액자 밖 그림자

화면비 연출 · 레터박스 → 4:3 회상 → 전체 화면이 열리는 순간

타임랩스 · 시간 압축 + 셔터 누적(빛 궤적·별 궤적·흐린 행인)

데이터모시 · 키프레임을 빼면 움직임 벡터가 앞 장면을 끌고 간다

평면 그림 재조명 · 높이맵 노멀 + 화면 공간 그림자 + 빛 색온도

1인칭 시점 · 눈꺼풀 마스크 + 초점 맞춤 + 걸음 흔들림 + 노출 순응

숏 문법 · 한 무대 여러 카메라 + 180도 규칙 + 동작에서 자르기

작화 연출 · 스미어 · 다중상 · 2프레임 찍기 + 타이밍 차트

불릿 타임 · 장면 시간 τ(t)와 카메라 시간 분리 + 카메라 레일

뜻을 연기하는 글자 · 채널 기반 글자 효과

키네틱 타이포그래피 · 글자 지도 위를 나는 카메라

말하는 자막 · 단어 단위 타이밍 + 하이라이트 필 + 강조 팝

플랩 전광판 · 반쪽 판이 넘어가는 기계식 글자

녹아웃 글자 · 카운터를 통과하는 줌

에코와 늘임 · 시간 지연 반복 + 늘어나는 글자

형광펜과 손 주석 · 손으로 긋는 강조의 문법

아이소메트릭 복셀 글자 · 블록 조립과 재조립

단어 교체 키트 · 한 자리에서 바뀌는 낱말

글자 터널 · 3D 공간을 지나가는 글자

만화 의성어 레터링 · 소리를 그리는 글자

조합되는 한글 · 입력기 조합 + 쓰고 지우는 문장

경로 위 조판 · 호 길이로 맞춘 경로 모핑

차오르는 글자 · 글자를 그릇으로 쓰는 액체

펼쳐지는 종이 글자 · 접힘선 따라 열리는 타이포그래피

다이컷 스티커 · 말려 올라가는 떼기

방송 타이틀 스팅 · 금속 입체 글자 + 반사 + 빛 쓸기

프로젝션 매핑 타이포그래피 · 건물 면의 호모그래피와 아나모픽

거리장 부풀림 셰이딩 · 높이장 법선 · 광택과 접촉 그림자

박자에 맞춘 글자 · 마디·박·엇박으로 짜는 타이포 레이아웃

흐르는 글자 띠 · 무한 마키 테이프

손글씨 쓰기 · 글리프 골격화 + 획 순서 + 납작펜 굵기

예능 자막 · 겹 테두리 + 튀어나오기 + 화자 색 + 상황 자막

글자 뒤 피사체 · 깊이 사이에 끼운 제목 + 매트 + 깊이 안개

엔딩 크레딧 · 가운데 거터 정렬 + 일정 속도 스크롤 + 크레딧 스퀴즈

광학 자간 · 글자 사이 면적을 고르게 맞추기

로고 리빌 · 도형이 모여 심벌과 워드마크로

메타볼 블롭 · 붙고 갈라지고 글자를 감싸는 액체

점 격자 모션 · 점의 크기와 색으로 그리는 도형과 글자

아이소메트릭 설명 장면 · 흐름이 보이는 작은 세계

완벽한 루프 · 끝과 처음이 이어지는 기하 패턴

흐르는 그라데이션 메시 · 필름 그레인 · 유리 카드

앱 소개 모션 · 폰 목업 + 화면 전환 + 탭 + 기능 콜아웃

방송 그래픽 패키지 · 로어서드 · 티커 · 버그 · 스팅어

도형 마스코트 · 애니메이션 원칙과 스미어 프레임

지도 경로 모션 · 가상의 섬 위의 여정

아이소타입 통계 · 반복 아이콘 + 격자→무리 재배치

타임라인 · 비선형 시간 축 + 카메라 추적 + 연도 카운터

퀴즈 연출 · 카운트다운 링 + 긴장 리듬 + 정답 공개

메신저 대화 장면 · 말풍선 레이아웃 + 스프링 스크롤 + 입력 중 표시

제품 턴테이블 샷 · 3점 조명 + PBR 재질 + 접지 그림자

분해도 · 부품 계층 + 분해 벡터 + 3D 설명선

툰 셰이딩 · 계단 명암 + 뒤집은 껍질 외곽선 + 림 라이트

3D 캐릭터 리그 · 코드로 짠 스키닝 + 걷기 주기 + 두 마디 IK

틸트시프트 미니어처 · 로우폴리 디오라마 + 피사계 심도 + 끊는 시간

점구름 3D 스캔 · 표면 표본 + 스캔 평면 + 점→선→면 굳기

입자 디졸브 · 노이즈 임계값 + 발광 가장자리 + 표면 입자 흐름

도미노 연쇄 · 경첩 회전 강체 + 충돌 전달 미리 굽기

볼류메트릭 빛 · 그림자 맵 광선 진행 + 먼지 입자 + 해 각도 타임랩스

3D 지구본 · 대기 빛 번짐 + 낮밤 경계 + 대권 호