MagicNoise

MagicNoise is a rendition of pixelated static noise, as seen on TV in the 90s.

Preview

Code

<template>
  <magic-noise class="aspect-[16/10] w-full" />
</template>

Overview

• Overview
• Anatomy
• Installation
• Peer Dependencies
• API Reference
• Examples

Anatomy

<template>
  <magic-noise />
</template>

Installation

CLI

Add @maas/vue-equipment to your dependencies.

pnpm

pnpm install @maas/vue-equipment

npm

npm install @maas/vue-equipment

yarn

yarn add @maas/vue-equipment

bun

bun install @maas/vue-equipment

Vue

If you are using Vue, import and add MagicNoisePlugin to your app.

import { createApp } from 'vue'
import { MagicNoisePlugin } from '@maas/vue-equipment/plugins/MagicNoise'

const app = createApp({})

app.use(MagicNoisePlugin)

Nuxt

The component is available as a Nuxt module. In your Nuxt config file add @maas/vue-equipment/nuxt to your modules and add MagicNoise to the plugins in your configuration.

export default defineNuxtConfig({
  modules: ['@maas/vue-equipment/nuxt'],
  vueEquipment: {
    plugins: ['MagicNoise'],
  },
})

Direct Import

If you prefer a more granular approach, the component can also be directly imported into any Vue component.

<script setup>
import { MagicNoise } from '@maas/vue-equipment/plugins/MagicNoise'
</script>

<template>
  <magic-noise />
</template>

Peer Dependencies

If you haven’t installed the required peer dependencies automatically, you’ll need to install the following packages manually.

Package
@nuxt/kit
@vueuse/core
defu

Installation

pnpm

pnpm install @nuxt/kit @vueuse/core defu

npm

npm install @nuxt/kit @vueuse/core defu

yarn

yarn add @nuxt/kit @vueuse/core defu

bun

bun install @nuxt/kit @vueuse/core defu

API Reference

Props

Prop	Type	Required
options	MagicNoiseOptions	false
pause	boolean	false

Options

To customize the component, override the necessary options. Any custom options will be merged with the default options.

Option	Type	Default
pixelSize	number	2
tiles	number	32
fps	number	12
color	string	white
alpha	boolean	false
alpha	string	srgb

CSS Variables

The component comes with some CSS variables for customization.

Variable	Default
--magic-noise-background	#000
--magic-noise-loading-background	#000
--magic-noise-loading-transition	color 300ms ease, opacity 300ms ease

Examples

Custom Color

Preview

Code

<template>
  <magic-noise
    class="custom-color-noise aspect-[16/10] w-full"
    :options="{ color: '#46a758', alpha: true }"
  />
</template>

<style>
.custom-color-noise {
  --magic-noise-background: #1d3a24;
}
</style>