MagicNoise

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

View source View as Markdown

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

Anatomy

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

Installation

CLI

Add @maas/vue-equipment to your dependencies.

pnpm add @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

MagicNoise has no optional peer dependencies. It only relies on the core peer dependencies, which npm, pnpm and bun install automatically.

API Reference

Props

Options

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

CSS Variables

The component comes with some CSS variables for customization.

Examples

Custom Color

<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>