@zhaomushan/screen-aurora 1.0.0

package/README.md

@@ -0,0 +1,48 @@
+# @zhaomushan/screen-aurora
+
+Vue 3 **全屏极光网格背景**：Canvas 柔光色块缓慢流动，`pointer-events: none`，不阻挡页面点击。
+
+## 安装
+
+```bash
+npm install @zhaomushan/screen-aurora vue
+```
+
+## 使用
+
+```vue
+<script setup lang="ts">
+import { AuroraScreen } from "@zhaomushan/screen-aurora";
+import "@zhaomushan/screen-aurora/style.css";
+</script>
+
+<template>
+  <AuroraScreen
+    v-model="on"
+    :speed="1"
+    :opacity="0.85"
+    :colors="['#4a6fa5', '#7c3aed', '#22d3ee']"
+    :z-index="0"
+  />
+  <main>你的页面内容</main>
+</template>
+```
+
+## Props
+
+| 属性 | 说明 | 默认 |
+|------|------|------|
+| `modelValue` / `active` | 是否播放 | `true` |
+| `speed` | 流动速度 | `1` |
+| `opacity` | 光斑强度 | `0.85` |
+| `blobCount` | 色块数量 3–8 | `5` |
+| `colors` | 十六进制色板 | 内置蓝紫青 |
+| `zIndex` | 层级 | `0` |
+
+## 发版
+
+```bash
+cd packages/screen-aurora
+npm run build
+npm publish --access public
+```

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),$=["#4a6fa5","#7c3aed","#22d3ee","#6366f1","#a855f7"];function w(s,t={}){var C;const o=s.getContext("2d",{alpha:!0});if(!o)throw new Error("Canvas 2D not available");const e=o;let r=0,l=0,d=0,c=0,f=Math.max(.2,t.speed??1),m=Math.min(1,Math.max(.15,t.opacity??.85));const M=((C=t.colors)!=null&&C.length?t.colors:$).slice(0,8),_=Math.min(8,Math.max(3,t.blobCount??5)),b=Array.from({length:_},(n,a)=>({nx:.2+Math.random()*.6,ny:.2+Math.random()*.6,radius:.22+Math.random()*.18,phase:Math.random()*Math.PI*2,color:M[a%M.length]}));function h(){const n=Math.min(window.devicePixelRatio||1,2),a=s.getBoundingClientRect();r=Math.max(1,a.width),l=Math.max(1,a.height),s.width=Math.floor(r*n),s.height=Math.floor(l*n),e.setTransform(n,0,0,n,0,0)}function y(){c+=.007*f,e.clearRect(0,0,r,l),e.globalCompositeOperation="lighter";const n=Math.min(r,l);for(const a of b){const u=(a.nx+.12*Math.sin(c+a.phase)+.08*Math.cos(c*.6))*r,g=(a.ny+.1*Math.cos(c*.85+a.phase*1.2))*l,x=a.radius*n*(.95+.05*Math.sin(c*.5+a.phase)),p=e.createRadialGradient(u,g,0,u,g,x);p.addColorStop(0,S(a.color,m)),p.addColorStop(.45,S(a.color,m*.35)),p.addColorStop(1,"rgba(0,0,0,0)"),e.fillStyle=p,e.beginPath(),e.arc(u,g,x,0,Math.PI*2),e.fill()}e.globalCompositeOperation="source-over",d=requestAnimationFrame(y)}function A(){v(),h(),y(),window.addEventListener("resize",h)}function v(){cancelAnimationFrame(d),window.removeEventListener("resize",h),e.clearRect(0,0,r,l)}function E(n){f=Math.max(.2,Math.min(3,n))}function O(n){m=Math.min(1,Math.max(.15,n))}function R(n){n.length&&b.forEach((a,u)=>{a.color=n[u%n.length]})}return{start:A,stop:v,resize:h,setSpeed:E,setOpacity:O,setColors:R}}function S(s,t){const o=s.replace("#","").trim();if(o.length===3){const e=parseInt(o[0]+o[0],16),r=parseInt(o[1]+o[1],16),l=parseInt(o[2]+o[2],16);return`rgba(${e},${r},${l},${t})`}if(o.length===6){const e=parseInt(o.slice(0,2),16),r=parseInt(o.slice(2,4),16),l=parseInt(o.slice(4,6),16);return`rgba(${e},${r},${l},${t})`}return s}const I=i.defineComponent({__name:"AuroraScreen",props:{modelValue:{type:Boolean,default:!0},active:{type:Boolean},speed:{default:1},opacity:{default:.85},blobCount:{default:5},colors:{},zIndex:{default:0}},emits:["update:modelValue"],setup(s){const t=s,o=i.ref(null);let e=null;const r=i.computed(()=>t.active??t.modelValue),l=i.computed(()=>({zIndex:String(t.zIndex)}));function d(){var c;e&&(e.setSpeed(t.speed),e.setOpacity(t.opacity),(c=t.colors)!=null&&c.length&&e.setColors(t.colors))}return i.watch(()=>[r.value,t.speed,t.opacity,t.colors,t.blobCount],()=>{e&&(r.value?(d(),e.start()):e.stop())},{deep:!0}),i.onMounted(()=>{const c=o.value;c&&(e=w(c,{speed:t.speed,opacity:t.opacity,blobCount:t.blobCount,colors:t.colors}),r.value&&e.start())}),i.onBeforeUnmount(()=>{e==null||e.stop(),e=null}),(c,f)=>(i.openBlock(),i.createElementBlock("div",{class:"sa-root",style:i.normalizeStyle(l.value),"aria-hidden":"true"},[i.createElementVNode("canvas",{ref_key:"canvasRef",ref:o},null,512)],4))}}),z={install(s){s.component("AuroraScreen",I)}};exports.AuroraScreen=I;exports.createAuroraEngine=w;exports.default=z;

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import { App } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type __VLS_Props = {
+    modelValue?: boolean;
+    active?: boolean;
+    speed?: number;
+    opacity?: number;
+    blobCount?: number;
+    colors?: string[];
+    zIndex?: number;
+};
+
+export declare type AuroraBlob = {
+    nx: number;
+    ny: number;
+    radius: number;
+    phase: number;
+    color: string;
+};
+
+export declare type AuroraOptions = {
+    colors?: string[];
+    speed?: number;
+    blobCount?: number;
+    opacity?: number;
+};
+
+export declare const AuroraScreen: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+modelValue: boolean;
+speed: number;
+opacity: number;
+blobCount: number;
+zIndex: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+canvasRef: HTMLCanvasElement;
+}, HTMLDivElement>;
+
+export declare type AuroraScreenProps = {
+    modelValue?: boolean;
+    active?: boolean;
+    speed?: number;
+    opacity?: number;
+    blobCount?: number;
+    colors?: string[];
+    zIndex?: number;
+};
+
+export declare function createAuroraEngine(canvas: HTMLCanvasElement, options?: AuroraOptions): {
+    start: () => void;
+    stop: () => void;
+    resize: () => void;
+    setSpeed: (v: number) => void;
+    setOpacity: (v: number) => void;
+    setColors: (list: string[]) => void;
+};
+
+declare const plugin: {
+    install(app: App): void;
+};
+export default plugin;
+
+export { }

package/dist/index.js

@@ -0,0 +1,121 @@
+import { defineComponent as R, ref as $, computed as v, watch as z, onMounted as O, onBeforeUnmount as B, openBlock as L, createElementBlock as P, normalizeStyle as V, createElementVNode as k } from "vue";
+const F = ["#4a6fa5", "#7c3aed", "#22d3ee", "#6366f1", "#a855f7"];
+function D(s, t = {}) {
+  var x;
+  const o = s.getContext("2d", { alpha: !0 });
+  if (!o) throw new Error("Canvas 2D not available");
+  const e = o;
+  let r = 0, l = 0, u = 0, c = 0, p = Math.max(0.2, t.speed ?? 1), f = Math.min(1, Math.max(0.15, t.opacity ?? 0.85));
+  const g = ((x = t.colors) != null && x.length ? t.colors : F).slice(
+    0,
+    8
+  ), S = Math.min(8, Math.max(3, t.blobCount ?? 5)), M = Array.from({ length: S }, (n, a) => ({
+    nx: 0.2 + Math.random() * 0.6,
+    ny: 0.2 + Math.random() * 0.6,
+    radius: 0.22 + Math.random() * 0.18,
+    phase: Math.random() * Math.PI * 2,
+    color: g[a % g.length]
+  }));
+  function d() {
+    const n = Math.min(window.devicePixelRatio || 1, 2), a = s.getBoundingClientRect();
+    r = Math.max(1, a.width), l = Math.max(1, a.height), s.width = Math.floor(r * n), s.height = Math.floor(l * n), e.setTransform(n, 0, 0, n, 0, 0);
+  }
+  function b() {
+    c += 7e-3 * p, e.clearRect(0, 0, r, l), e.globalCompositeOperation = "lighter";
+    const n = Math.min(r, l);
+    for (const a of M) {
+      const i = (a.nx + 0.12 * Math.sin(c + a.phase) + 0.08 * Math.cos(c * 0.6)) * r, m = (a.ny + 0.1 * Math.cos(c * 0.85 + a.phase * 1.2)) * l, C = a.radius * n * (0.95 + 0.05 * Math.sin(c * 0.5 + a.phase)), h = e.createRadialGradient(i, m, 0, i, m, C);
+      h.addColorStop(0, w(a.color, f)), h.addColorStop(0.45, w(a.color, f * 0.35)), h.addColorStop(1, "rgba(0,0,0,0)"), e.fillStyle = h, e.beginPath(), e.arc(i, m, C, 0, Math.PI * 2), e.fill();
+    }
+    e.globalCompositeOperation = "source-over", u = requestAnimationFrame(b);
+  }
+  function I() {
+    y(), d(), b(), window.addEventListener("resize", d);
+  }
+  function y() {
+    cancelAnimationFrame(u), window.removeEventListener("resize", d), e.clearRect(0, 0, r, l);
+  }
+  function A(n) {
+    p = Math.max(0.2, Math.min(3, n));
+  }
+  function E(n) {
+    f = Math.min(1, Math.max(0.15, n));
+  }
+  function _(n) {
+    n.length && M.forEach((a, i) => {
+      a.color = n[i % n.length];
+    });
+  }
+  return { start: I, stop: y, resize: d, setSpeed: A, setOpacity: E, setColors: _ };
+}
+function w(s, t) {
+  const o = s.replace("#", "").trim();
+  if (o.length === 3) {
+    const e = parseInt(o[0] + o[0], 16), r = parseInt(o[1] + o[1], 16), l = parseInt(o[2] + o[2], 16);
+    return `rgba(${e},${r},${l},${t})`;
+  }
+  if (o.length === 6) {
+    const e = parseInt(o.slice(0, 2), 16), r = parseInt(o.slice(2, 4), 16), l = parseInt(o.slice(4, 6), 16);
+    return `rgba(${e},${r},${l},${t})`;
+  }
+  return s;
+}
+const T = /* @__PURE__ */ R({
+  __name: "AuroraScreen",
+  props: {
+    modelValue: { type: Boolean, default: !0 },
+    active: { type: Boolean },
+    speed: { default: 1 },
+    opacity: { default: 0.85 },
+    blobCount: { default: 5 },
+    colors: {},
+    zIndex: { default: 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(s) {
+    const t = s, o = $(null);
+    let e = null;
+    const r = v(() => t.active ?? t.modelValue), l = v(() => ({
+      zIndex: String(t.zIndex)
+    }));
+    function u() {
+      var c;
+      e && (e.setSpeed(t.speed), e.setOpacity(t.opacity), (c = t.colors) != null && c.length && e.setColors(t.colors));
+    }
+    return z(
+      () => [r.value, t.speed, t.opacity, t.colors, t.blobCount],
+      () => {
+        e && (r.value ? (u(), e.start()) : e.stop());
+      },
+      { deep: !0 }
+    ), O(() => {
+      const c = o.value;
+      c && (e = D(c, {
+        speed: t.speed,
+        opacity: t.opacity,
+        blobCount: t.blobCount,
+        colors: t.colors
+      }), r.value && e.start());
+    }), B(() => {
+      e == null || e.stop(), e = null;
+    }), (c, p) => (L(), P("div", {
+      class: "sa-root",
+      style: V(l.value),
+      "aria-hidden": "true"
+    }, [
+      k("canvas", {
+        ref_key: "canvasRef",
+        ref: o
+      }, null, 512)
+    ], 4));
+  }
+}), q = {
+  install(s) {
+    s.component("AuroraScreen", T);
+  }
+};
+export {
+  T as AuroraScreen,
+  D as createAuroraEngine,
+  q as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.sa-root{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.sa-root canvas{display:block;width:100%;height:100%}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@zhaomushan/screen-aurora",
+  "version": "1.0.0",
+  "description": "Vue 3 full-screen aurora mesh background — canvas, pointer-events passthrough",
+  "license": "ISC",
+  "author": "zhaomushan",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": ["dist", "README.md"],
+  "sideEffects": ["**/*.css", "dist/style.css"],
+  "publishConfig": { "access": "public" },
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "aurora",
+    "background",
+    "canvas",
+    "fullscreen",
+    "mesh-gradient",
+    "pointer-events"
+  ],
+  "peerDependencies": { "vue": ">=3.4.0" },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.16"
+  }
+}