Noise

A subtle film-grain overlay that adds texture to panes and hero areas. Use it as a fill element inside a relatively positioned container; it sits on top with pointer events disabled and blends into the surface below.

Textured heroA subtle grain over a flat gradient.

The grain is generated from an inline SVG turbulence filter, so there is nothing to download. The animated variant snaps between a handful of positions with a stepped animation instead of a per-frame script, and always falls back to a static grain when reduced motion is requested.

Props

animated?: boolean
Whether the grain jitters between frames for a film-like effect.

blend?: normal | multiply | screen | overlay | soft-light | plus-lighter
The blend mode used to composite the grain over the surface.
Default: overlay

opacity?: number
The opacity of the grain.
Default: 0.05

Examples

Animated

Add lively, cinematic movement with jittering grain.

Preview

Film grainAnimated noise adds a lively, cinematic texture.

Code

<template>
    <div style="position: relative; overflow: hidden; width: 100%; padding: 60px 30px; background: linear-gradient(135deg, #1e1b4b, #111827); border-radius: var(--radius);">
        <strong style="display: block; font-size: 21px; color: #f8fafc;">Film grain</strong>
        <span style="display: block; margin-top: 6px; font-size: 14px; color: rgb(255 255 255 / .65);">Animated noise adds a lively, cinematic texture.</span>

        <FluxVisualNoise
            animated
            :opacity="0.08"/>
    </div>
</template>

<script
    lang="ts"
    setup>
    import { FluxVisualNoise } from '@flux-ui/visuals';
</script>

Paper

A multiply blend turns the grain into a faint printed texture.

Preview

Paper textureA faint grain gives flat panes a tactile, printed feel.

Code

<template>
    <div style="position: relative; overflow: hidden; width: 100%; max-width: 420px; padding: 30px; background: var(--surface); border: 1px solid var(--surface-stroke); border-radius: var(--radius); box-sizing: border-box;">
        <strong style="display: block; font-size: 15px;">Paper texture</strong>
        <span style="display: block; margin-top: 6px; font-size: 14px; color: var(--gray-600);">A faint grain gives flat panes a tactile, printed feel.</span>

        <FluxVisualNoise
            blend="multiply"
            :opacity="0.04"/>
    </div>
</template>

<script
    lang="ts"
    setup>
    import { FluxVisualNoise } from '@flux-ui/visuals';
</script>