Toggle Sidebar B
AppearanceLight & dark mode D

Noise

Animated film grain / noise overlay adding subtle texture and motion.

Default

The overlay is an absolutely positioned canvas, so put it inside a relatively positioned parent. Every prop is wired to the controls underneath.

Light previewReplay previewOpen in new tab

Ooh, edgy!

Customize

Pattern Size250px
Scale X2
Scale Y2
Pattern Alpha15

API Reference

Noise

PropTypeDefaultDescription
patternSizenumber250Defines the size of the grain pattern.
patternScaleXnumber1Scaling factor for the X-axis of the grain pattern.
patternScaleYnumber1Scaling factor for the Y-axis of the grain pattern.
patternRefreshIntervalnumber2Number of frames before the grain pattern refreshes.
patternAlphanumber15Opacity of the grain pattern (0-255).

Accessibility

Keyboard shortcuts and ARIA behavior.

  • The canvas ignores pointer events, so it never blocks the content underneath.
  • Raise patternRefreshInterval to slow the flicker for users who prefer reduced motion.