SVNT Intro
파티클 애니메이션 구현
- 프로젝트 소개 및 문제의식
2023년 SVNT NFT 프로젝트의 인트로 페이지를 만들었습니다. 브랜드 아이덴티티를 살리기 위해 모델 하나가 다섯 개의 모델로 자연스럽게 바뀌는 파티클 애니메이션이 필요했습니다.
- 방향성
디자인 컨셉에 맞는 파티클 애니메이션으로 브랜드의 시각적 임팩트를 최대한 끌어올리고, 다른 곳과 차별되는 인트로를 보여주는 것이 목표였습니다.
- 구현
Next.js와 React-three/fiber로 3D 환경을 만들고, BufferGeometry로 모델의 Vertex 수를 표준화했습니다. 모델 정보는 Points 객체로 파티클처럼 그리고, 프레임마다 Geometry의 position 값을 업데이트해 자연스럽게 변하는 애니메이션을 만들었습니다.
- 결과
모델 하나가 다섯 개 모델로 자연스럽게 바뀌는 파티클 애니메이션을 구현했습니다. 브랜드 아이덴티티를 살리는 시각 효과를 안정적으로 보여주면서, 차별화된 NFT 프로젝트 인트로를 완성할 수 있었습니다.