7 of 19 entries
font-variation-settings로 마우스 근접도에 반응하는 텍스트, SVG textPath로 곡선 위를 흐르는 텍스트를 구현한다.
Three.js로 3D 씬을 렌더링하고, Fragment Shader로 픽셀을 ASCII 문자로 변환하는 과정을 단계별로 구현한다.
CSS custom properties와 마우스 좌표만으로 GlareHover, StarBorder, Magnet 효과를 구현한다. JavaScript 최소화 전략과 CSS의 실제 한계를 탐구한다.
왜 텍스트를 Canvas에 그리는가? 픽셀 조작으로 Fuzzy 효과를 만들고, Matter.js 물리 엔진으로 글자를 떨어뜨리는 과정을 구현한다.
Motion과 GSAP는 어떻게 다른가? timeline, scrub, stagger, SplitText 플러그인으로 스크롤 기반 텍스트 애니메이션을 구현한다.
Spring physics, AnimatePresence, useScroll, useVelocity — Motion이 텍스트 애니메이션 23개 중 11개를 차지하는 이유를 파헤친다.
JavaScript 없이 CSS keyframes, pseudo-elements, custom properties만으로 글리치 효과를 구현한다. CSS 애니메이션의 가능성과 한계를 탐구한다.