NoiseBackground

A Neo-Brutalism style noise texture background component that uses the SVG <feTurbulence> filter to generate noise effects. Suitable for card backgrounds, page decorations, retro-style designs, and more.

Demo

Preview

基础用法

带噪点背景的内容

噪点纹理为设计增添质感。

动态噪点（animated）

动态噪点背景

fractalNoise（默认）

分形噪声

turbulence

湍流效果

提示：动态噪点尊重系统的「减少动态效果」设置。启用后将停止 requestAnimationFrame 循环，仅保留一帧静态噪点纹理。

Installation

pnpm dlx brutx-vue@latest add noise-background

Usage

<script setup>
import { NoiseBackground } from 'brutx-ui-vue'
</script>

<template>
    <NoiseBackground :opacity="0.3">
        <div class="p-8">
            <h2>Content with noise background</h2>
            <p>Noise texture adds character to the design.</p>
        </div>
    </NoiseBackground>
</template>

Animation Effects

<template>
    <NoiseBackground
        :opacity="0.5"
        animated
        :animation-duration="3"
        :animation-range="0.3"
    >
        <div class="p-8 text-center">
            <h2>Animated noise background</h2>
        </div>
    </NoiseBackground>
</template>

Custom Noise Types

<template>
    <!-- Fractal noise (default) -->
    <NoiseBackground type="fractalNoise" :frequency="0.65" :opacity="0.6">
        <div class="p-4">Fractal noise</div>
    </NoiseBackground>

    <!-- Turbulence -->
    <NoiseBackground type="turbulence" :frequency="0.05" :opacity="0.6">
        <div class="p-4">Turbulence effect</div>
    </NoiseBackground>
</template>

Rounded Variants

<template>
    <NoiseBackground rounded="default" :opacity="0.3">
        <div class="p-6">Rounded card</div>
    </NoiseBackground>

    <NoiseBackground rounded="lg" :opacity="0.3">
        <div class="p-6">Large rounded card</div>
    </NoiseBackground>
</template>

API Reference

NoiseBackground — Props

Name	Type	Default	Description
type	"fractalNoise" | "turbulence" | undefined	"fractalNoise"	Selects the SVG feTurbulence algorithm: fractalNoise or turbulence.
Details Declared type "fractalNoise" | "turbulence" | undefined Literal values "fractalNoise" "turbulence" Default value details Declaration 'fractalNoise' Source: packages/ui/src/components/noise-background/NoiseBackground.vue Resolved value "fractalNoise" Source NoiseBackground.vue:13 packages/ui/src/components/noise-background/NoiseBackground.vue
frequency	number | undefined	0.65	The base noise frequency; animation varies around this value when enabled.
Details Declared type number | undefined Default value details Declaration 0.65 Source: packages/ui/src/components/noise-background/NoiseBackground.vue Resolved value 0.65 Source NoiseBackground.vue:15 packages/ui/src/components/noise-background/NoiseBackground.vue
octaves	number | undefined	3	The number of SVG noise octaves; more octaves produce more complex texture.
Details Declared type number | undefined Default value details Declaration 3 Source: packages/ui/src/components/noise-background/NoiseBackground.vue Resolved value 3 Source NoiseBackground.vue:17 packages/ui/src/components/noise-background/NoiseBackground.vue
opacity	number | undefined	0.5	The opacity of the rendered noise rectangle.
Details Declared type number | undefined Default value details Declaration 0.5 Source: packages/ui/src/components/noise-background/NoiseBackground.vue Resolved value 0.5 Source NoiseBackground.vue:19 packages/ui/src/components/noise-background/NoiseBackground.vue
animated	boolean | undefined	false	Animates the base frequency periodically. With reduced-motion enabled, animation stops while the static texture remains.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/noise-background/NoiseBackground.vue Resolved value false Source NoiseBackground.vue:21 packages/ui/src/components/noise-background/NoiseBackground.vue
animationDuration	number | undefined	8	The animation cycle duration in seconds; non-positive values prevent animation from starting.
Details Declared type number | undefined Default value details Declaration 8 Source: packages/ui/src/components/noise-background/NoiseBackground.vue Resolved value 8 Source NoiseBackground.vue:23 packages/ui/src/components/noise-background/NoiseBackground.vue
animationRange	number | undefined	0.1	The range over which the base frequency varies during animation.
Details Declared type number | undefined Default value details Declaration 0.1 Source: packages/ui/src/components/noise-background/NoiseBackground.vue Resolved value 0.1 Source NoiseBackground.vue:25 packages/ui/src/components/noise-background/NoiseBackground.vue
rounded	"default" | "full" | "lg" | "none" | undefined	"none"	The background container corner style: none, default, large, or fully rounded.
Details Declared type NonNullable<"default" | "lg" | "none" | "full" | null | undefined> | undefined Literal values "default" "full" "lg" "none" Default value details Declaration 'none' Source: packages/ui/src/components/noise-background/NoiseBackground.vue Resolved value "none" Source NoiseBackground.vue:27 packages/ui/src/components/noise-background/NoiseBackground.vue
class	string | undefined	undefined	CSS classes added to the background root container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/noise-background/NoiseBackground.vue Resolved value undefined Source NoiseBackground.vue:29 packages/ui/src/components/noise-background/NoiseBackground.vue

NoiseBackground — Slots

Name	Signature or type	Description
#default	{}	Background content rendered above the noise SVG layer.
Details Declared type {} Source NoiseBackground.vue packages/ui/src/components/noise-background/NoiseBackground.vue

Noise Type Reference

Type	Description	Use Cases
fractalNoise	Fractal noise, soft and natural	General backgrounds, card decorations
turbulence	Turbulence effect, more pronounced texture	Special effects, artistic styles

Accessibility

• Reduced motion: The component respects the prefers-reduced-motion system setting. When the user enables "Reduce motion" (detected via useReducedMotion listening for prefers-reduced-motion: reduce):
  • Animation frames stop: startAnimation returns immediately without starting the requestAnimationFrame loop; if the animation is already running, it is stopped via cancelAnimationFrame.
  • Single-frame static rendering retained: The SVG <feTurbulence> still renders one static frame of noise using the initial frequency value. The background texture does not disappear entirely; it simply stops changing over time.
  • Real-time response: The component automatically switches when the preference changes. If the default is restored and animated is true, the animation restarts.
• This mechanism ensures the component does not continuously consume CPU resources on low-performance devices or for users sensitive to motion.

Customization

Rounded Variant CSS Classes

Variable	CSS Class
none	rounded-none
default	rounded-brutal
lg	rounded-brutal-lg
full	rounded-full

FAQ

Q: What is the technical implementation of this component?

A: The component uses the SVG <feTurbulence> filter to generate noise (best performance). Animation is achieved by periodically modifying the baseFrequency attribute via JavaScript. The component uses Vue refs to reference SVG elements, avoiding direct DOM manipulation. It supports SSR environments (animation only starts on the client side), and automatically cleans up animation frames when the component is unmounted to prevent memory leaks.

Q: Are there any caveats when using this component?

A: Please note the following:

• SVG filters may have performance issues on some low-end devices; consider providing a fallback.
• In animation mode, CPU resources are continuously consumed; use with caution in scenarios with many instances.
• A higher frequency value produces denser noise; a lower value produces sparser noise.
• A higher octaves value produces richer noise detail, but also increases performance overhead.