Bg Dots

一个基于 PixiJS 的轻量交互式动态背景点阵

安装

pnpm add @llds/bg-dots pixi.js@^8.0.0 simplex-noise@^4.0.0

HTML/CSS/JS


<!doctype html>
<html lang="zh-CN">
  <head>
    <style>
      html,
      body,
      #background {
        width: 100%;
        height: 100%;
        margin: 0;
      }

      #background {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="background"></div>
    <script type="module">
      import { createBackgroundDots } from '@llds/bg-dots'

      const container = document.querySelector('#background')

      if (container) {
        createBackgroundDots(container, { theme: 'dark' })
      }
    </script>
  </body>
</html>

Vue


<script setup lang="ts">
import { createBackgroundDots, type BackgroundDots } from '@llds/bg-dots'
import { onBeforeUnmount, onMounted, ref } from 'vue'

const container = ref<HTMLElement>()
let background: BackgroundDots | undefined

onMounted(() => {
  if (container.value) {
    background = createBackgroundDots(container.value, { theme: 'dark' })
  }
})

onBeforeUnmount(() => {
  background?.destroy()
})
</script>

<template>
  <div ref="container" style="position: relative; width: 100%; height: 100vh" />
</template>

Nuxt


<script setup lang="ts">
import { createBackgroundDots, type BackgroundDots } from '@llds/bg-dots'
import { onBeforeUnmount, onMounted, ref } from 'vue'

const container = ref<HTMLElement>()
let background: BackgroundDots | undefined

onMounted(() => {
  if (container.value) {
    background = createBackgroundDots(container.value, { theme: 'dark' })
  }
})

onBeforeUnmount(() => {
  background?.destroy()
})
</script>

<template>
  <div ref="container" style="position: relative; width: 100%; height: 100vh" />
</template>