NoiseBackground 噪点背景

新粗野主义风格的噪点纹理背景组件，使用 SVG <feTurbulence> 滤镜生成噪点效果。适用于卡片背景、页面装饰、复古风格设计等场景。

预览

Preview

基础用法

带噪点背景的内容

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

动态噪点（animated）

动态噪点背景

fractalNoise（默认）

分形噪声

turbulence

湍流效果

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

安装

pnpm dlx brutx-vue@latest add noise-background

用法

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

<template>
    <NoiseBackground :opacity="0.3">
        <div class="p-8">
            <h2>带噪点背景的内容</h2>
            <p>噪点纹理为设计增添质感。</p>
        </div>
    </NoiseBackground>
</template>

动画效果

<template>
    <NoiseBackground
        :opacity="0.5"
        animated
        :animation-duration="3"
        :animation-range="0.3"
    >
        <div class="p-8 text-center">
            <h2>动态噪点背景</h2>
        </div>
    </NoiseBackground>
</template>

自定义噪点类型

<template>
    <!-- 分形噪声（默认） -->
    <NoiseBackground type="fractalNoise" :frequency="0.65" :opacity="0.6">
        <div class="p-4">分形噪声</div>
    </NoiseBackground>

    <!-- 湍流 -->
    <NoiseBackground type="turbulence" :frequency="0.05" :opacity="0.6">
        <div class="p-4">湍流效果</div>
    </NoiseBackground>
</template>

圆角变体

<template>
    <NoiseBackground rounded="default" :opacity="0.3">
        <div class="p-6">圆角卡片</div>
    </NoiseBackground>

    <NoiseBackground rounded="lg" :opacity="0.3">
        <div class="p-6">大圆角卡片</div>
    </NoiseBackground>
</template>

API 参考

NoiseBackground — 属性

名称	类型	默认值	说明
type	"fractalNoise" | "turbulence" | undefined	"fractalNoise"	选择 SVG feTurbulence 的 fractalNoise 分形噪声或 turbulence 湍流算法。
详情 声明类型 "fractalNoise" | "turbulence" | undefined 字面量 "fractalNoise" "turbulence" 默认值详情 声明 'fractalNoise' 来源: packages/ui/src/components/noise-background/NoiseBackground.vue 解析值 "fractalNoise" 来源 NoiseBackground.vue:13 packages/ui/src/components/noise-background/NoiseBackground.vue
frequency	number | undefined	0.65	噪声的基础频率；启用动画时围绕该值周期性变化。
详情 声明类型 number | undefined 默认值详情 声明 0.65 来源: packages/ui/src/components/noise-background/NoiseBackground.vue 解析值 0.65 来源 NoiseBackground.vue:15 packages/ui/src/components/noise-background/NoiseBackground.vue
octaves	number | undefined	3	SVG 噪声细节层数，层数越多纹理越复杂。
详情 声明类型 number | undefined 默认值详情 声明 3 来源: packages/ui/src/components/noise-background/NoiseBackground.vue 解析值 3 来源 NoiseBackground.vue:17 packages/ui/src/components/noise-background/NoiseBackground.vue
opacity	number | undefined	0.5	背景噪点矩形的透明度。
详情 声明类型 number | undefined 默认值详情 声明 0.5 来源: packages/ui/src/components/noise-background/NoiseBackground.vue 解析值 0.5 来源 NoiseBackground.vue:19 packages/ui/src/components/noise-background/NoiseBackground.vue
animated	boolean | undefined	false	启用基础频率的周期性动画；系统减少动态效果时暂停动画但保留静态纹理。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 false 来源: packages/ui/src/components/noise-background/NoiseBackground.vue 解析值 false 来源 NoiseBackground.vue:21 packages/ui/src/components/noise-background/NoiseBackground.vue
animationDuration	number | undefined	8	动画周期秒数；非正值不会启动动画。
详情 声明类型 number | undefined 默认值详情 声明 8 来源: packages/ui/src/components/noise-background/NoiseBackground.vue 解析值 8 来源 NoiseBackground.vue:23 packages/ui/src/components/noise-background/NoiseBackground.vue
animationRange	number | undefined	0.1	动画期间基础频率绕初始值变化的范围。
详情 声明类型 number | undefined 默认值详情 声明 0.1 来源: packages/ui/src/components/noise-background/NoiseBackground.vue 解析值 0.1 来源 NoiseBackground.vue:25 packages/ui/src/components/noise-background/NoiseBackground.vue
rounded	"default" | "full" | "lg" | "none" | undefined	"none"	背景容器的圆角样式：无圆角、默认、较大圆角或全圆角。
详情 声明类型 NonNullable<"default" | "lg" | "none" | "full" | null | undefined> | undefined 字面量 "default" "full" "lg" "none" 默认值详情 声明 'none' 来源: packages/ui/src/components/noise-background/NoiseBackground.vue 解析值 "none" 来源 NoiseBackground.vue:27 packages/ui/src/components/noise-background/NoiseBackground.vue
class	string | undefined	undefined	追加到背景根容器的 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/noise-background/NoiseBackground.vue 解析值 undefined 来源 NoiseBackground.vue:29 packages/ui/src/components/noise-background/NoiseBackground.vue

NoiseBackground — 插槽

名称	签名或类型	说明
#default	{}	显示在噪点 SVG 图层上方的背景内容。
详情 声明类型 {} 来源 NoiseBackground.vue packages/ui/src/components/noise-background/NoiseBackground.vue

噪点类型说明

类型	说明	适用场景
fractalNoise	分形噪声，柔和自然	通用背景、卡片装饰
turbulence	湍流效果，纹理更明显	特殊效果、艺术风格

可访问性

• 动效降级：组件尊重 prefers-reduced-motion 系统设置。当用户启用"减少动态效果"时（通过 useReducedMotion 监听 prefers-reduced-motion: reduce）：
  • 停止动画帧：startAnimation 会在内部直接返回，不再启动 requestAnimationFrame 循环；若动画已在运行，会通过 cancelAnimationFrame 立即停止。
  • 保留单帧静态渲染：SVG <feTurbulence> 仍以初始的 frequency 属性值渲染一帧静态噪点，背景纹理不会完全消失，只是不再随时间变化。
  • 实时响应：偏好变化时自动切换，恢复默认设置后若 animated 为 true 会重新启动动画。
• 该机制确保在低性能设备或对动效敏感的用户环境下，组件不会持续占用 CPU 资源。

样式定制

圆角变体 CSS 类

变量	CSS 类
none	rounded-none
default	rounded-brutal
lg	rounded-brutal-lg
full	rounded-full

常见问题

Q: 组件的技术实现原理是什么？

A: 组件使用 SVG <feTurbulence> 滤镜生成噪点（性能最佳），动画通过 JavaScript 定时修改 baseFrequency 属性实现。组件使用 Vue ref 引用 SVG 元素，避免直接 DOM 操作，支持 SSR 环境（动画仅在客户端启动），组件卸载时自动清理动画帧，避免内存泄漏。

Q: 使用时有哪些注意事项？

A: 请注意以下几点：

• SVG 滤镜在部分低端设备上可能有性能问题，建议提供降级方案。
• 动画模式下会持续消耗 CPU 资源，谨慎在大量实例中使用。
• frequency 值越大，噪点越密集；值越小，噪点越稀疏。
• octaves 值越大，噪点细节越丰富，但性能开销也越大。