버블로 몽글몽글, 베놈 스피커 느낌 내기

베놈 스피커처럼 몽글거리는 버블 이펙트 만들기

유튜브에서 우연히 본 ‘베놈 스피커’ 영상이 꽤 인상 깊었다.

소리에 반응해서 요동치는 물방울이 단순히 진동하는 게 아니라, 형태가 아예 몽글몽글하게 바뀌는 모습이 인상적이었다.

처음엔 그냥 영상미가 멋지다고 생각했는데,

‘나도 이런 시각적 이펙트를 웹에서 구현해볼 수 있지 않을까?’ 라는 생각이 들어 실험을 시작했다.

그러다 찾게 된 게 이 글이었다:

👉 CSS Awesome Sticky Bubble Effect - by rocchokcoco

기존에는 마우스를 따라다니는 방식이었지만,

나는 중앙 원에서 바깥으로 퍼져 나가는 버블 형태로 바꿔보기로 했다.

SCSS의 @for 문법을 활용해 버블의 크기, 각도, 거리, 애니메이션 속도를 무작위로 지정했고,

filter: contrast와 transform 조합으로 물방울이 몽글하게 터지는 듯한 느낌을 연출했다.

---

---

💡 시도하면서 느낀 점

• 단순히 border-radius와 transform만으로도 꽤 감각적인 효과를 낼 수 있다.

• filter: contrast는 이런 인터랙션에 굉장히 강력한 도구다.

• CSS 애니메이션만으로 충분히 “생명력 있는” 움직임을 만들 수 있다.

• SCSS에서 @for로 랜덤한 값을 넣는 방식은 정말 유용하다. 다만 embed할 땐 컴파일 결과로 보여야 스타일이 깨지지 않는다.

앞으로도 이런 인터랙션 위주의 실험을 종종 해보려고 한다.

눈에 보이는 동작이 아니라 형태 그 자체가 변화하는 느낌을 만드는 게 꽤 재밌다.

---

🔧 핵심 코드 스니펫

@for $i from 1 through 100 {
  .g-bubble:nth-child(#{$i}) {
    $size: 18 + random(24);             
    $angle: random(360);                
    $dist: 100 + random(100);           
    $dur: (random(30) + 30) / 10;       
    $delay: -1 * random(4000) / 1000;   
 
    --sz: #{$size};
    --ang: #{$angle}deg;
    --dist: #{$dist}px;
    --dur: #{$dur}s;
    --del: #{$delay}s;
  }
}