Noise Grain Background.

SVG feTurbulence 필터를 활용하여 필름 그레인 노이즈 오버레이를 생성합니다. requestAnimationFrame으로 매 프레임 seed 값을 변경해 자연스러운 깜박임 효과를 만들어냅니다.

NOISE GRAIN

컨트롤 패널

노이즈 오버레이 불투명도

노이즈 기본 주파수 (높을수록 세밀)

노이즈 디테일 수준 (옥타브)

그레인 애니메이션 활성화

애니메이션 속도 (FPS)

배경과 합성 모드

배경 그라디언트 프리셋

1

인터렉션 아이디어

언제:페이지가 로드되거나 배경 영역이 표시될 때
무엇을:배경 위에 필름 그레인 노이즈를
어떻게:SVG feTurbulence로 fractal noise를 생성하고, requestAnimationFrame으로 seed 값을 매 프레임 변경하여 깜박이는 필름 그레인 효과를 만든 뒤, mix-blend-mode로 배경과 자연스럽게 합성
2

바이브 프롬프트

NoiseGrainBG 컴포넌트를 만들어주세요. 이 컴포넌트는 SVG feTurbulence 필터를 사용하여 필름 그레인 노이즈 오버레이를 생성합니다. opacity prop으로 노이즈 불투명도를, baseFrequency prop으로 노이즈 기본 주파수를, numOctaves prop으로 디테일 수준을, animate prop으로 애니메이션 활성화 여부를, speed prop으로 애니메이션 속도를, blendMode prop으로 합성 모드를 설정할 수 있게 해주세요. children을 감싸고 그 위에 노이즈를 오버레이하되, pointer-events-none으로 하위 콘텐츠의 인터랙션을 방해하지 않도록 해주세요. requestAnimationFrame과 ref를 사용하여 React 리렌더 없이 SVG 속성을 직접 업데이트해주세요.