구이 메탈볼 (액체 융합)
원 여러 개 + SVG 필터 하나. 블러로 뭉갠 뒤 알파값을 급격히 대비시키면(feColorMatrix) 가까운 원끼리 수은처럼 들러붙었다 떨어진다. JS는 원 위치만 움직이면 끝.
AI에게 이렇게“SVG goo 필터(feGaussianBlur+feColorMatrix)로 원들이 액체처럼 뭉쳤다 갈라지는 메탈볼 효과 만들어줘.”
핵심 코드파티클 성좌
떠다니는 점 수십 개 + canvas. 두 점 사이 거리가 가까우면 선을 긋고, 멀면 안 긋는다. 그게 전부인데 살아있는 별자리처럼 보인다. 히어로 배경 단골.
AI에게 이렇게“캔버스에 점들이 떠다니고 가까운 점끼리 선으로 이어지는 파티클 네트워크 배경 만들어줘.”
핵심 코드매트릭스 디지털 레인
canvas + 열(column) 배열. 매 프레임 반투명 검정으로 살짝 덮어 잔상(트레일)을 만들고, 각 열에서 랜덤 글자를 아래로 떨군다. 영화 그대로.
AI에게 이렇게“매트릭스 영화처럼 초록 글자가 세로로 떨어지는 디지털 레인 캔버스 배경 만들어줘.”
핵심 코드플로우 필드 (흐름장)
파티클이 보이지 않는 방향장을 따라 흐른다. 각 위치의 이동 각도를 sin·cos 조합으로 정하면 강물 같은 궤적이 생긴다. 제너러티브 아트의 기본기.
AI에게 이렇게“파티클이 노이즈 기반 흐름장을 따라 강물처럼 흐르는 플로우 필드 애니메이션 만들어줘.”
핵심 코드리퀴드 텍스트 왜곡
SVG 필터 2개만. 노이즈(feTurbulence)를 만들고 그걸로 글자 픽셀을 밀어내면(feDisplacementMap) 텍스트가 물처럼 일렁인다. 노이즈 주파수를 SMIL로 애니메이션 — JS 0줄.
AI에게 이렇게“SVG feTurbulence와 feDisplacementMap으로 글자가 물처럼 일렁이는 왜곡 효과 만들어줘.”
핵심 코드ASCII 3D 렌더러 (도넛)
이미지가 아니다. 회전하는 3D 도넛을 매 프레임 계산해 각 점의 밝기를 .,-~:;=!*#$@ 문자로 바꿔 <pre>에 찍는다. 그래픽 카드도, 이미지 파일도 없이 텍스트만으로.
“회전하는 3D 도넛을 아스키 문자로 렌더링하는 그 유명한 도넛 코드 만들어줘.”
핵심 코드크로매틱 글리치 (RGB 분리)
같은 글자를 빨강·파랑·흰색으로 살짝 어긋나게 겹쳐 찍고(합성모드 lighter), 가로 띠 몇 개를 랜덤하게 밀면 신호 깨진 화면이 된다. 스캔라인은 덤.
AI에게 이렇게“RGB 채널이 어긋나고 가로줄이 지직거리는 글리치/신호 오류 텍스트 효과 만들어줘.”
핵심 코드홀로그래픽 포일 카드
순수 CSS. 무지개 conic-gradient를 mix-blend-mode: color-dodge로 얹고, 그 위에 흰 빛줄기(sheen)를 지나가게 한다. 카드가 살짝 기울며 도는 건 keyframes 한 줄. 포켓몬 반짝이 카드 느낌.
AI에게 이렇게“무지개빛이 흐르고 빛줄기가 지나가는 홀로그램 포일 카드를 CSS만으로 만들어줘.”
핵심 코드무한 터널 (웜홀)
중심에서 동심 다각형을 계속 그리되, 매 프레임 조금씩 키우고 돌린다. 바깥으로 밀려나며 재활용되면 끝없이 빨려드는 터널이 된다. 색은 hue를 순환.
AI에게 이렇게“중심으로 끝없이 빨려드는 회전하는 무한 터널/웜홀을 캔버스로 만들어줘.”
핵심 코드