Boiling Texture

BoilingTexture overlays an SVG feTurbulence noise layer whose seed advances at a stepped frame rate (via usePosterizedFrame), so the grain "boils on twos" like hand-drawn film rather than shimmering every frame. It's a drop-in overlay — absolutely positioned, mix-blend-mode into whatever sits beneath it.

On dark backgrounds use blendMode="screen" (the noise lightens and reads); on light backgrounds use multiply.

Installation

npx shadcn@latest add @adv/boiling-texture

Usage

import { BoilingTexture } from '@adv/motion';

<div style={{ position: 'relative' }}>
  {/* …your content… */}
  <BoilingTexture opacity={0.5} targetFps={12} blendMode="screen" />
</div>

Example