diff --git a/components/FlutteringRibbon.js b/components/FlutteringRibbon.js
index eb0f03e0..321649b3 100644
--- a/components/FlutteringRibbon.js
+++ b/components/FlutteringRibbon.js
@@ -1,322 +1,17 @@
 /* eslint-disable */
 import { useEffect } from 'react'
-const  id = 'canvasFlutteringRibbon'
-export const FlutteringRibbon = () => {
-     const destroyRibbon = ()=>{
-    const ribbon = document.getElementById(id)
-      if(ribbon && ribbon.parentNode){
-        ribbon.parentNode.removeChild(ribbon)
-      }
-  }
-  
-  useEffect(() => {
-    createFlutteringRibbon()
-        return () => destroyRibbon()
+import { loadExternalResource } from '@/lib/utils'
 
+export const FlutteringRibbon = () => {
+  useEffect(() => {
+    loadExternalResource('/js/flutteringRibbon.js', 'js').then(url => {
+      window.createFlutteringRibbon && window.createFlutteringRibbon()
+    })
+
+    return () =>
+      window.destroyFlutteringRibbon && window.destroyFlutteringRibbon()
   }, [])
-    return <></>
+  return <></>
 }
 
 export default FlutteringRibbon
-
-
-/**
- * 创建连接点
- * @param config
- */
-function createFlutteringRibbon() {
-  'object' == typeof window &&
-    (window.Ribbons = (function () {
-      const t = window,
-        i = document.body,
-        n = document.documentElement
-      var o = function () {
-        if (1 === arguments.length) {
-          if (Array.isArray(arguments[0])) {
-            const t = Math.round(o(0, arguments[0].length - 1))
-            return arguments[0][t]
-          }
-          return o(0, arguments[0])
-        }
-        return 2 === arguments.length
-          ? Math.random() * (arguments[1] - arguments[0]) + arguments[0]
-          : 0
-      }
-      const s = function (o) {
-          const s = Math.max(
-              0,
-              t.innerWidth || n.clientWidth || i.clientWidth || 0
-            ),
-            e = Math.max(
-              0,
-              t.innerHeight || n.clientHeight || i.clientHeight || 0
-            )
-          return {
-            width: s,
-            height: e,
-            ratio: s / e,
-            centerx: s / 2,
-            centery: e / 2,
-            scrollx:
-              Math.max(0, t.pageXOffset || n.scrollLeft || i.scrollLeft || 0) -
-              (n.clientLeft || 0),
-            scrolly:
-              Math.max(0, t.pageYOffset || n.scrollTop || i.scrollTop || 0) -
-              (n.clientTop || 0)
-          }
-        },
-        e = function (t, i) {
-          ;(this.x = 0), (this.y = 0), this.set(t, i)
-        }
-      e.prototype = {
-        constructor: e,
-        set: function (t, i) {
-          ;(this.x = t || 0), (this.y = i || 0)
-        },
-        copy: function (t) {
-          return (this.x = t.x || 0), (this.y = t.y || 0), this
-        },
-        multiply: function (t, i) {
-          return (this.x *= t || 1), (this.y *= i || 1), this
-        },
-        divide: function (t, i) {
-          return (this.x /= t || 1), (this.y /= i || 1), this
-        },
-        add: function (t, i) {
-          return (this.x += t || 0), (this.y += i || 0), this
-        },
-        subtract: function (t, i) {
-          return (this.x -= t || 0), (this.y -= i || 0), this
-        },
-        clampX: function (t, i) {
-          return (this.x = Math.max(t, Math.min(this.x, i))), this
-        },
-        clampY: function (t, i) {
-          return (this.y = Math.max(t, Math.min(this.y, i))), this
-        },
-        flipX: function () {
-          return (this.x *= -1), this
-        },
-        flipY: function () {
-          return (this.y *= -1), this
-        }
-      }
-      const h = function (t) {
-        ;(this._canvas = null),
-          (this._context = null),
-          (this._sto = null),
-          (this._width = 0),
-          (this._height = 0),
-          (this._scroll = 0),
-          (this._ribbons = []),
-          (this._options = {
-            colorSaturation: '80%',
-            colorBrightness: '60%',
-            colorAlpha: 0.65,
-            colorCycleSpeed: 6,
-            verticalPosition: 'center',
-            horizontalSpeed: 150,
-            ribbonCount: 5,
-            strokeSize: 5,
-            parallaxAmount: -0.5,
-            animateSections: !0
-          }),
-          (this._onDraw = this._onDraw.bind(this)),
-          (this._onResize = this._onResize.bind(this)),
-          (this._onScroll = this._onScroll.bind(this)),
-          this.setOptions(t),
-          this.init()
-      }
-      return (
-        (h.prototype = {
-          constructor: h,
-          setOptions: function (t) {
-            if ('object' == typeof t)
-              for (const i in t)
-                t.hasOwnProperty(i) && (this._options[i] = t[i])
-          },
-          init: function () {
-            try {
-              ;(this._canvas = document.createElement('canvas')),
-                (this._canvas.id = id),
-                (this._canvas.style.display = 'block'),
-                (this._canvas.style.position = 'fixed'),
-                (this._canvas.style.margin = '0'),
-                (this._canvas.style.padding = '0'),
-                (this._canvas.style.border = '0'),
-                (this._canvas.style.outline = '0'),
-                (this._canvas.style.left = '0'),
-                (this._canvas.style.top = '0'),
-                (this._canvas.style.width = '100%'),
-                (this._canvas.style.height = '100%'),
-                (this._canvas.style['z-index'] = '0'),
-                (this._canvas.style['pointer-events'] = 'none'),
-                this._onResize(),
-                (this._context = this._canvas.getContext('2d')),
-                this._context.clearRect(0, 0, this._width, this._height),
-                (this._context.globalAlpha = this._options.colorAlpha),
-                window.addEventListener('resize', this._onResize),
-                window.addEventListener('scroll', this._onScroll),
-                document.body.appendChild(this._canvas)
-            } catch (t) {
-              return void console.warn('Canvas Context Error: ' + t.toString())
-            }
-            this._onDraw()
-          },
-          addRibbon: function () {
-            const t = Math.round(o(1, 9)) > 5 ? 'right' : 'left'
-            let i = 1e3
-            const n = 200,
-              s = 0 - n,
-              h = this._width + n
-            let a = 0,
-              r = 0
-            const l = 'right' === t ? s : h
-            let c = Math.round(o(0, this._height))
-            ;/^(top|min)$/i.test(this._options.verticalPosition)
-              ? (c = 0 + n)
-              : /^(middle|center)$/i.test(this._options.verticalPosition)
-              ? (c = this._height / 2)
-              : /^(bottom|max)$/i.test(this._options.verticalPosition) &&
-                (c = this._height - n)
-            const p = [],
-              _ = new e(l, c),
-              d = new e(l, c)
-            let u = null,
-              b = Math.round(o(0, 360)),
-              f = 0
-            for (; !(i <= 0); ) {
-              if (
-                (i--,
-                (a = Math.round(
-                  (1 * Math.random() - 0.2) * this._options.horizontalSpeed
-                )),
-                (r = Math.round(
-                  (1 * Math.random() - 0.5) * (0.25 * this._height)
-                )),
-                (u = new e()),
-                u.copy(d),
-                'right' === t)
-              ) {
-                if ((u.add(a, r), d.x >= h)) break
-              } else if ('left' === t && (u.subtract(a, r), d.x <= s)) break
-              p.push({
-                point1: new e(_.x, _.y),
-                point2: new e(d.x, d.y),
-                point3: u,
-                color: b,
-                delay: f,
-                dir: t,
-                alpha: 0,
-                phase: 0
-              }),
-                _.copy(d),
-                d.copy(u),
-                (f += 4),
-                (b += this._options.colorCycleSpeed)
-            }
-            this._ribbons.push(p)
-          },
-          _drawRibbonSection: function (t) {
-            if (t) {
-              if (t.phase >= 1 && t.alpha <= 0) return !0
-              if (t.delay <= 0) {
-                if (
-                  ((t.phase += 0.02),
-                  (t.alpha = 1 * Math.sin(t.phase)),
-                  (t.alpha = t.alpha <= 0 ? 0 : t.alpha),
-                  (t.alpha = t.alpha >= 1 ? 1 : t.alpha),
-                  this._options.animateSections)
-                ) {
-                  const i = 0.1 * Math.sin(1 + (t.phase * Math.PI) / 2)
-                  'right' === t.dir
-                    ? (t.point1.add(i, 0),
-                      t.point2.add(i, 0),
-                      t.point3.add(i, 0))
-                    : (t.point1.subtract(i, 0),
-                      t.point2.subtract(i, 0),
-                      t.point3.subtract(i, 0)),
-                    t.point1.add(0, i),
-                    t.point2.add(0, i),
-                    t.point3.add(0, i)
-                }
-              } else t.delay -= 0.5
-              const i = this._options.colorSaturation,
-                n = this._options.colorBrightness,
-                o =
-                  'hsla(' +
-                  t.color +
-                  ', ' +
-                  i +
-                  ', ' +
-                  n +
-                  ', ' +
-                  t.alpha +
-                  ' )'
-              this._context.save(),
-                0 !== this._options.parallaxAmount &&
-                  this._context.translate(
-                    0,
-                    this._scroll * this._options.parallaxAmount
-                  ),
-                this._context.beginPath(),
-                this._context.moveTo(t.point1.x, t.point1.y),
-                this._context.lineTo(t.point2.x, t.point2.y),
-                this._context.lineTo(t.point3.x, t.point3.y),
-                (this._context.fillStyle = o),
-                this._context.fill(),
-                this._options.strokeSize > 0 &&
-                  ((this._context.lineWidth = this._options.strokeSize),
-                  (this._context.strokeStyle = o),
-                  (this._context.lineCap = 'round'),
-                  this._context.stroke()),
-                this._context.restore()
-            }
-            return !1
-          },
-          _onDraw: function () {
-            for (let t = 0, i = this._ribbons.length; t < i; ++t)
-              this._ribbons[t] || this._ribbons.splice(t, 1)
-            this._context.clearRect(0, 0, this._width, this._height)
-            for (let t = 0; t < this._ribbons.length; ++t) {
-              const i = this._ribbons[t],
-                n = i.length
-              let o = 0
-              for (let t = 0; t < n; ++t) this._drawRibbonSection(i[t]) && o++
-              o >= n && (this._ribbons[t] = null)
-            }
-            this._ribbons.length < this._options.ribbonCount &&
-              this.addRibbon(),
-              requestAnimationFrame(this._onDraw)
-          },
-          _onResize: function (t) {
-            const i = s(t)
-            ;(this._width = i.width),
-              (this._height = i.height),
-              this._canvas &&
-                ((this._canvas.width = this._width),
-                (this._canvas.height = this._height),
-                this._context &&
-                  (this._context.globalAlpha = this._options.colorAlpha))
-          },
-          _onScroll: function (t) {
-            const i = s(t)
-            this._scroll = i.scrolly
-          }
-        }),
-        h
-      )
-    })())
-  new Ribbons({
-    colorSaturation: '60%',
-    colorBrightness: '50%',
-    colorAlpha: 0.5,
-    colorCycleSpeed: 5,
-    verticalPosition: 'random',
-    horizontalSpeed: 200,
-    ribbonCount: 3,
-    strokeSize: 0,
-    parallaxAmount: -0.2,
-    animateSections: !0
-  })
-}
diff --git a/components/Ribbon.js b/components/Ribbon.js
index 468cf443..f437f314 100644
--- a/components/Ribbon.js
+++ b/components/Ribbon.js
@@ -1,98 +1,16 @@
-/* eslint-disable */
 import { useEffect } from 'react'
-const id = 'canvasRibbon'
+import { loadExternalResource } from '@/lib/utils'
 
 const Ribbon = () => {
- const destroyRibbon = ()=>{
-    const ribbon = document.getElementById(id)
-      if(ribbon && ribbon.parentNode){
-        ribbon.parentNode.removeChild(ribbon)
-      }
-  }
-  
   useEffect(() => {
-    createRibbon()
-    return () => destroyRibbon()
+    loadExternalResource('/js/ribbon.js', 'js').then(url => {
+      window.createRibbon && window.createRibbon()
+    })
+
+    return () => window.destroyRibbon && window.destroyRibbon()
   }, [])
+
   return <></>
 }
 
 export default Ribbon
-
-/**
- * 创建连接点
- * @param config
- */
-function createRibbon() {
-  !(function () {
-    const t = document.getElementById('__next')
-    const e = {
-      z: n(t, 'zIndex', 0),
-      a: n(t, 'alpha', 0.6),
-      s: n(t, 'size', 90),
-      c: t.getAttribute('data-click')
-    }
-    function n(t, e, n) {
-      return Number(t.getAttribute(e)) || n
-    }
-    const i = document.createElement('canvas'),
-      o = i.getContext('2d'),
-      c = window.devicePixelRatio || 1,
-      a = window.innerWidth,
-      l = window.innerHeight,
-      d = e.s
-    i.id= id
-    let r, s
-    const u = Math
-    let h = 0
-    const g = 2 * u.PI,
-      f = u.cos,
-      m = u.random
-    function x() {
-      for (
-        o.clearRect(0, 0, a, l),
-          r = [
-            { x: 0, y: 0.7 * l + d },
-            { x: 0, y: 0.7 * l - d }
-          ];
-        r[1].x < a + d;
-
-      )
-        y(r[0], r[1])
-    }
-    function y(t, e) {
-      o.beginPath(), o.moveTo(t.x, t.y), o.lineTo(e.x, e.y)
-      const n = e.x + (2 * m() - 0.25) * d,
-        i = b(e.y)
-      o.lineTo(n, i),
-        o.closePath(),
-        (h -= g / -50),
-        (o.fillStyle =
-          '#' +
-          (
-            ((127 * f(h) + 128) << 16) |
-            ((127 * f(h + g / 3) + 128) << 8) |
-            (127 * f(h + (g / 3) * 2) + 128)
-          ).toString(16)),
-        o.fill(),
-        (r[0] = r[1]),
-        (r[1] = { x: n, y: i })
-    }
-    function b(t) {
-      return (s = t + (2 * m() - 1.1) * d), s > l || s < 0 ? b(t) : s
-    }
-    ;(i.width = a * c),
-      (i.height = l * c),
-      o.scale(c, c),
-      (o.globalAlpha = e.a),
-      (i.style.cssText =
-        'opacity: ' +
-        e.a +
-        ';position:fixed;top:0;left:0;z-index: ' +
-        e.z +
-        ';width:100%;height:100%;pointer-events:none;'),
-      document.getElementsByTagName('body')[0].appendChild(i),
-      'false' !== e.c && ((document.onclick = x), (document.ontouchstart = x)),
-      x()
-  })()
-}
diff --git a/components/StarrySky.js b/components/StarrySky.js
index e0fd3ac4..7984ec2a 100644
--- a/components/StarrySky.js
+++ b/components/StarrySky.js
@@ -1,131 +1,15 @@
-/* eslint-disable */
-import  { useEffect } from 'react'
+import { useEffect } from 'react'
+import { loadExternalResource } from '@/lib/utils'
 
 const StarrySky = () => {
   useEffect(() => {
-    renderStarrySky()
+    loadExternalResource('/js/starrySky.js', 'js').then(url => {
+      window.renderStarrySky && window.renderStarrySky()
+    })
   }, [])
   return (
-    <div className="relative">
-      <canvas id="starry-sky-vixcity" style={{zIndex:5}} className="top-0 fixed pointer-events-none"></canvas>
-    </div>
+    <></>
   )
 }
 
 export default StarrySky
-
-/**
- * 创建星空雨
- * @param config
- */
-function renderStarrySky() {
-  window.requestAnimationFrame =
-    window.requestAnimationFrame ||
-    window.mozRequestAnimationFrame ||
-    window.webkitRequestAnimationFrame ||
-    window.msRequestAnimationFrame
-  var n,
-    e,
-    i,
-    h,
-    t = 0.05,
-    s = document.getElementById('starry-sky-vixcity'),
-    o = !0,
-    a = '180,184,240',
-    r = '226,225,142',
-    d = '226,225,224',
-    c = []
-  function f() {
-    ;(n = window.innerWidth),
-      (e = window.innerHeight),
-      (i = 0.216 * n),
-      s.setAttribute('width', n),
-      s.setAttribute('height', e)
-  }
-  function u() {
-    h.clearRect(0, 0, n, e)
-    for (var t = c.length, i = 0; i < t; i++) {
-      var s = c[i]
-      s.move(), s.fadeIn(), s.fadeOut(), s.draw()
-    }
-  }
-  function y() {
-    ;(this.reset = function () {
-      ;(this.giant = m(3)),
-        (this.comet = !this.giant && !o && m(10)),
-        (this.x = l(0, n - 10)),
-        (this.y = l(0, e)),
-        (this.r = l(1.1, 2.6)),
-        (this.dx = l(t, 6 * t) + (this.comet + 1 - 1) * t * l(50, 120) + 2 * t),
-        (this.dy = -l(t, 6 * t) - (this.comet + 1 - 1) * t * l(50, 120)),
-        (this.fadingOut = null),
-        (this.fadingIn = !0),
-        (this.opacity = 0),
-        (this.opacityTresh = l(0.2, 1 - 0.4 * (this.comet + 1 - 1))),
-        (this.do = l(5e-4, 0.002) + 0.001 * (this.comet + 1 - 1))
-    }),
-      (this.fadeIn = function () {
-        this.fadingIn &&
-          ((this.fadingIn = !(this.opacity > this.opacityTresh)),
-          (this.opacity += this.do))
-      }),
-      (this.fadeOut = function () {
-        this.fadingOut &&
-          ((this.fadingOut = !(this.opacity < 0)),
-          (this.opacity -= this.do / 2),
-          (this.x > n || this.y < 0) && ((this.fadingOut = !1), this.reset()))
-      }),
-      (this.draw = function () {
-        if ((h.beginPath(), this.giant))
-          (h.fillStyle = 'rgba(' + a + ',' + this.opacity + ')'),
-            h.arc(this.x, this.y, 2, 0, 2 * Math.PI, !1)
-        else if (this.comet) {
-          ;(h.fillStyle = 'rgba(' + d + ',' + this.opacity + ')'),
-            h.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, !1)
-          for (var t = 0; t < 30; t++)
-            (h.fillStyle =
-              'rgba(' +
-              d +
-              ',' +
-              (this.opacity - (this.opacity / 20) * t) +
-              ')'),
-              h.rect(
-                this.x - (this.dx / 4) * t,
-                this.y - (this.dy / 4) * t - 2,
-                2,
-                2
-              ),
-              h.fill()
-        } else
-          (h.fillStyle = 'rgba(' + r + ',' + this.opacity + ')'),
-            h.rect(this.x, this.y, this.r, this.r)
-        h.closePath(), h.fill()
-      }),
-      (this.move = function () {
-        ;(this.x += this.dx),
-          (this.y += this.dy),
-          !1 === this.fadingOut && this.reset(),
-          (this.x > n - n / 4 || this.y < 0) && (this.fadingOut = !0)
-      }),
-      setTimeout(function () {
-        o = !1
-      }, 50)
-  }
-  function m(t) {
-    return Math.floor(1e3 * Math.random()) + 1 < 10 * t
-  }
-  function l(t, i) {
-    return Math.random() * (i - t) + t
-  }
-  f(),
-    window.addEventListener('resize', f, !1),
-    (function () {
-      h = s.getContext('2d')
-      for (var t = 0; t < i; t++) (c[t] = new y()), c[t].reset()
-      u()
-    })(),
-    (function t() {
-      document.getElementsByTagName('html')[0].className.indexOf('dark')>=0 && u(),
-        window.requestAnimationFrame(t)
-    })()
-}
diff --git a/public/js/flutteringRibbon.js b/public/js/flutteringRibbon.js
new file mode 100644
index 00000000..d698a117
--- /dev/null
+++ b/public/js/flutteringRibbon.js
@@ -0,0 +1,313 @@
+/* eslint-disable */
+const idFlutteringRibbon = 'canvasFlutteringRibbon'
+
+function destroyFlutteringRibbon() {
+  const ribbon = document.getElementById(idFlutteringRibbon)
+  if (ribbon && ribbon.parentNode) {
+    ribbon.parentNode.removeChild(ribbon)
+  }
+}
+
+/**
+ * 创建连接点
+ * @param config
+ */
+function createFlutteringRibbon() {
+  'object' == typeof window &&
+    (window.Ribbons = (function () {
+      const t = window,
+        i = document.body,
+        n = document.documentElement
+      var o = function () {
+        if (1 === arguments.length) {
+          if (Array.isArray(arguments[0])) {
+            const t = Math.round(o(0, arguments[0].length - 1))
+            return arguments[0][t]
+          }
+          return o(0, arguments[0])
+        }
+        return 2 === arguments.length
+          ? Math.random() * (arguments[1] - arguments[0]) + arguments[0]
+          : 0
+      }
+      const s = function (o) {
+          const s = Math.max(
+              0,
+              t.innerWidth || n.clientWidth || i.clientWidth || 0
+            ),
+            e = Math.max(
+              0,
+              t.innerHeight || n.clientHeight || i.clientHeight || 0
+            )
+          return {
+            width: s,
+            height: e,
+            ratio: s / e,
+            centerx: s / 2,
+            centery: e / 2,
+            scrollx:
+              Math.max(0, t.pageXOffset || n.scrollLeft || i.scrollLeft || 0) -
+              (n.clientLeft || 0),
+            scrolly:
+              Math.max(0, t.pageYOffset || n.scrollTop || i.scrollTop || 0) -
+              (n.clientTop || 0)
+          }
+        },
+        e = function (t, i) {
+          ;(this.x = 0), (this.y = 0), this.set(t, i)
+        }
+      e.prototype = {
+        constructor: e,
+        set: function (t, i) {
+          ;(this.x = t || 0), (this.y = i || 0)
+        },
+        copy: function (t) {
+          return (this.x = t.x || 0), (this.y = t.y || 0), this
+        },
+        multiply: function (t, i) {
+          return (this.x *= t || 1), (this.y *= i || 1), this
+        },
+        divide: function (t, i) {
+          return (this.x /= t || 1), (this.y /= i || 1), this
+        },
+        add: function (t, i) {
+          return (this.x += t || 0), (this.y += i || 0), this
+        },
+        subtract: function (t, i) {
+          return (this.x -= t || 0), (this.y -= i || 0), this
+        },
+        clampX: function (t, i) {
+          return (this.x = Math.max(t, Math.min(this.x, i))), this
+        },
+        clampY: function (t, i) {
+          return (this.y = Math.max(t, Math.min(this.y, i))), this
+        },
+        flipX: function () {
+          return (this.x *= -1), this
+        },
+        flipY: function () {
+          return (this.y *= -1), this
+        }
+      }
+      const h = function (t) {
+        ;(this._canvas = null),
+          (this._context = null),
+          (this._sto = null),
+          (this._width = 0),
+          (this._height = 0),
+          (this._scroll = 0),
+          (this._ribbons = []),
+          (this._options = {
+            colorSaturation: '80%',
+            colorBrightness: '60%',
+            colorAlpha: 0.65,
+            colorCycleSpeed: 6,
+            verticalPosition: 'center',
+            horizontalSpeed: 150,
+            ribbonCount: 5,
+            strokeSize: 5,
+            parallaxAmount: -0.5,
+            animateSections: !0
+          }),
+          (this._onDraw = this._onDraw.bind(this)),
+          (this._onResize = this._onResize.bind(this)),
+          (this._onScroll = this._onScroll.bind(this)),
+          this.setOptions(t),
+          this.init()
+      }
+      return (
+        (h.prototype = {
+          constructor: h,
+          setOptions: function (t) {
+            if ('object' == typeof t)
+              for (const i in t)
+                t.hasOwnProperty(i) && (this._options[i] = t[i])
+          },
+          init: function () {
+            try {
+              ;(this._canvas = document.createElement('canvas')),
+                (this._canvas.id = id),
+                (this._canvas.style.display = 'block'),
+                (this._canvas.style.position = 'fixed'),
+                (this._canvas.style.margin = '0'),
+                (this._canvas.style.padding = '0'),
+                (this._canvas.style.border = '0'),
+                (this._canvas.style.outline = '0'),
+                (this._canvas.style.left = '0'),
+                (this._canvas.style.top = '0'),
+                (this._canvas.style.width = '100%'),
+                (this._canvas.style.height = '100%'),
+                (this._canvas.style['z-index'] = '0'),
+                (this._canvas.style['pointer-events'] = 'none'),
+                this._onResize(),
+                (this._context = this._canvas.getContext('2d')),
+                this._context.clearRect(0, 0, this._width, this._height),
+                (this._context.globalAlpha = this._options.colorAlpha),
+                window.addEventListener('resize', this._onResize),
+                window.addEventListener('scroll', this._onScroll),
+                document.body.appendChild(this._canvas)
+            } catch (t) {
+              return void console.warn('Canvas Context Error: ' + t.toString())
+            }
+            this._onDraw()
+          },
+          addRibbon: function () {
+            const t = Math.round(o(1, 9)) > 5 ? 'right' : 'left'
+            let i = 1e3
+            const n = 200,
+              s = 0 - n,
+              h = this._width + n
+            let a = 0,
+              r = 0
+            const l = 'right' === t ? s : h
+            let c = Math.round(o(0, this._height))
+            ;/^(top|min)$/i.test(this._options.verticalPosition)
+              ? (c = 0 + n)
+              : /^(middle|center)$/i.test(this._options.verticalPosition)
+                ? (c = this._height / 2)
+                : /^(bottom|max)$/i.test(this._options.verticalPosition) &&
+                  (c = this._height - n)
+            const p = [],
+              _ = new e(l, c),
+              d = new e(l, c)
+            let u = null,
+              b = Math.round(o(0, 360)),
+              f = 0
+            for (; !(i <= 0); ) {
+              if (
+                (i--,
+                (a = Math.round(
+                  (1 * Math.random() - 0.2) * this._options.horizontalSpeed
+                )),
+                (r = Math.round(
+                  (1 * Math.random() - 0.5) * (0.25 * this._height)
+                )),
+                (u = new e()),
+                u.copy(d),
+                'right' === t)
+              ) {
+                if ((u.add(a, r), d.x >= h)) break
+              } else if ('left' === t && (u.subtract(a, r), d.x <= s)) break
+              p.push({
+                point1: new e(_.x, _.y),
+                point2: new e(d.x, d.y),
+                point3: u,
+                color: b,
+                delay: f,
+                dir: t,
+                alpha: 0,
+                phase: 0
+              }),
+                _.copy(d),
+                d.copy(u),
+                (f += 4),
+                (b += this._options.colorCycleSpeed)
+            }
+            this._ribbons.push(p)
+          },
+          _drawRibbonSection: function (t) {
+            if (t) {
+              if (t.phase >= 1 && t.alpha <= 0) return !0
+              if (t.delay <= 0) {
+                if (
+                  ((t.phase += 0.02),
+                  (t.alpha = 1 * Math.sin(t.phase)),
+                  (t.alpha = t.alpha <= 0 ? 0 : t.alpha),
+                  (t.alpha = t.alpha >= 1 ? 1 : t.alpha),
+                  this._options.animateSections)
+                ) {
+                  const i = 0.1 * Math.sin(1 + (t.phase * Math.PI) / 2)
+                  'right' === t.dir
+                    ? (t.point1.add(i, 0),
+                      t.point2.add(i, 0),
+                      t.point3.add(i, 0))
+                    : (t.point1.subtract(i, 0),
+                      t.point2.subtract(i, 0),
+                      t.point3.subtract(i, 0)),
+                    t.point1.add(0, i),
+                    t.point2.add(0, i),
+                    t.point3.add(0, i)
+                }
+              } else t.delay -= 0.5
+              const i = this._options.colorSaturation,
+                n = this._options.colorBrightness,
+                o =
+                  'hsla(' +
+                  t.color +
+                  ', ' +
+                  i +
+                  ', ' +
+                  n +
+                  ', ' +
+                  t.alpha +
+                  ' )'
+              this._context.save(),
+                0 !== this._options.parallaxAmount &&
+                  this._context.translate(
+                    0,
+                    this._scroll * this._options.parallaxAmount
+                  ),
+                this._context.beginPath(),
+                this._context.moveTo(t.point1.x, t.point1.y),
+                this._context.lineTo(t.point2.x, t.point2.y),
+                this._context.lineTo(t.point3.x, t.point3.y),
+                (this._context.fillStyle = o),
+                this._context.fill(),
+                this._options.strokeSize > 0 &&
+                  ((this._context.lineWidth = this._options.strokeSize),
+                  (this._context.strokeStyle = o),
+                  (this._context.lineCap = 'round'),
+                  this._context.stroke()),
+                this._context.restore()
+            }
+            return !1
+          },
+          _onDraw: function () {
+            for (let t = 0, i = this._ribbons.length; t < i; ++t)
+              this._ribbons[t] || this._ribbons.splice(t, 1)
+            this._context.clearRect(0, 0, this._width, this._height)
+            for (let t = 0; t < this._ribbons.length; ++t) {
+              const i = this._ribbons[t],
+                n = i.length
+              let o = 0
+              for (let t = 0; t < n; ++t) this._drawRibbonSection(i[t]) && o++
+              o >= n && (this._ribbons[t] = null)
+            }
+            this._ribbons.length < this._options.ribbonCount &&
+              this.addRibbon(),
+              requestAnimationFrame(this._onDraw)
+          },
+          _onResize: function (t) {
+            const i = s(t)
+            ;(this._width = i.width),
+              (this._height = i.height),
+              this._canvas &&
+                ((this._canvas.width = this._width),
+                (this._canvas.height = this._height),
+                this._context &&
+                  (this._context.globalAlpha = this._options.colorAlpha))
+          },
+          _onScroll: function (t) {
+            const i = s(t)
+            this._scroll = i.scrolly
+          }
+        }),
+        h
+      )
+    })())
+  new Ribbons({
+    colorSaturation: '60%',
+    colorBrightness: '50%',
+    colorAlpha: 0.5,
+    colorCycleSpeed: 5,
+    verticalPosition: 'random',
+    horizontalSpeed: 200,
+    ribbonCount: 3,
+    strokeSize: 0,
+    parallaxAmount: -0.2,
+    animateSections: !0
+  })
+}
+
+window.destroyFlutteringRibbon = destroyFlutteringRibbon
+window.createFlutteringRibbon = createFlutteringRibbon
diff --git a/public/js/nest.js b/public/js/nest.js
index 72a861d3..2b151d00 100644
--- a/public/js/nest.js
+++ b/public/js/nest.js
@@ -5,9 +5,9 @@
  * @param config
  */
 
-const id = '__next'
+const idNest = '__nest'
 function createNest() {
-  const e = document.getElementById('__next')
+  const e = document.getElementById(idNest)
   if(!e) return
   function n(e, n, t) {
     return e.getAttribute(n) || t
@@ -108,7 +108,7 @@ function createNest() {
 }
 
 function destroyNest() {
-  const nest = document.getElementById(id)
+  const nest = document.getElementById(idNest)
   if(nest && nest.parentNode){
     nest.parentNode.removeChild(nest)
   }
diff --git a/public/js/ribbon.js b/public/js/ribbon.js
new file mode 100644
index 00000000..928ccd11
--- /dev/null
+++ b/public/js/ribbon.js
@@ -0,0 +1,89 @@
+/* eslint-disable */
+/**
+ * 创建连接点
+ * @param config
+ */
+const idRibbon = 'canvasRibbon'
+function createRibbon() {
+  !(function () {
+    const t = document.getElementById('__next')
+    const e = {
+      z: n(t, 'zIndex', 0),
+      a: n(t, 'alpha', 0.6),
+      s: n(t, 'size', 90),
+      c: t.getAttribute('data-click')
+    }
+    function n(t, e, n) {
+      return Number(t.getAttribute(e)) || n
+    }
+    const i = document.createElement('canvas'),
+      o = i.getContext('2d'),
+      c = window.devicePixelRatio || 1,
+      a = window.innerWidth,
+      l = window.innerHeight,
+      d = e.s
+    i.id = id
+    let r, s
+    const u = Math
+    let h = 0
+    const g = 2 * u.PI,
+      f = u.cos,
+      m = u.random
+    function x() {
+      for (
+        o.clearRect(0, 0, a, l),
+          r = [
+            { x: 0, y: 0.7 * l + d },
+            { x: 0, y: 0.7 * l - d }
+          ];
+        r[1].x < a + d;
+
+      )
+        y(r[0], r[1])
+    }
+    function y(t, e) {
+      o.beginPath(), o.moveTo(t.x, t.y), o.lineTo(e.x, e.y)
+      const n = e.x + (2 * m() - 0.25) * d,
+        i = b(e.y)
+      o.lineTo(n, i),
+        o.closePath(),
+        (h -= g / -50),
+        (o.fillStyle =
+          '#' +
+          (
+            ((127 * f(h) + 128) << 16) |
+            ((127 * f(h + g / 3) + 128) << 8) |
+            (127 * f(h + (g / 3) * 2) + 128)
+          ).toString(16)),
+        o.fill(),
+        (r[0] = r[1]),
+        (r[1] = { x: n, y: i })
+    }
+    function b(t) {
+      return (s = t + (2 * m() - 1.1) * d), s > l || s < 0 ? b(t) : s
+    }
+    ;(i.width = a * c),
+      (i.height = l * c),
+      o.scale(c, c),
+      (o.globalAlpha = e.a),
+      (i.style.cssText =
+        'opacity: ' +
+        e.a +
+        ';position:fixed;top:0;left:0;z-index: ' +
+        e.z +
+        ';width:100%;height:100%;pointer-events:none;'),
+      document.getElementsByTagName('body')[0].appendChild(i),
+      'false' !== e.c && ((document.onclick = x), (document.ontouchstart = x)),
+      x()
+  })()
+}
+
+function destroyRibbon() {
+  const ribbon = document.getElementById(idRibbon)
+  if (ribbon && ribbon.parentNode) {
+    ribbon.parentNode.removeChild(ribbon)
+  }
+}
+
+window.createRibbon = createRibbon
+window.destroyRibbon = destroyRibbon
diff --git a/public/js/sakura.js b/public/js/sakura.js
index c6853156..4d246a35 100644
--- a/public/js/sakura.js
+++ b/public/js/sakura.js
@@ -4,7 +4,7 @@
  * 创建樱花雨
  * @param config
  */
-const id = 'canvas_sakura'
+const idSakura = 'canvas_sakura'
 function createSakura() {
   var stop, staticx
   var img = new Image()
@@ -176,7 +176,7 @@ function createSakura() {
 
 // 销毁樱花雨
 function destroySakura() {
-  const sakura = document.getElementById(id)
+  const sakura = document.getElementById(idSakura)
   if (sakura && sakura.parentNode) {
     sakura.parentNode.removeChild(sakura)
   }
diff --git a/public/js/starrySky.js b/public/js/starrySky.js
new file mode 100644
index 00000000..b699f0af
--- /dev/null
+++ b/public/js/starrySky.js
@@ -0,0 +1,129 @@
+/* eslint-disable */
+/**
+ * 创建星空雨
+ * @param config
+ */
+function renderStarrySky() {
+  let div = document.createElement('div')
+  div.className = 'relative'
+  let canvas = document.createElement('canvas')
+  canvas.id = 'starry-sky-vixcity'
+  canvas.style.zIndex = 5
+  canvas.className = 'top-0 fixed pointer-events-none'
+  div.appendChild(canvas)
+
+  document.body.appendChild(div)
+
+  window.requestAnimationFrame =
+    window.requestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.msRequestAnimationFrame
+  var n,
+    e,
+    i,
+    h,
+    t = 0.05,
+    s = document.getElementById('starry-sky-vixcity'),
+    o = !0,
+    a = '180,184,240',
+    r = '226,225,142',
+    d = '226,225,224',
+    c = []
+  function f() {
+    ;(n = window.innerWidth),
+      (e = window.innerHeight),
+      (i = 0.216 * n),
+      s.setAttribute('width', n),
+      s.setAttribute('height', e)
+  }
+  function u() {
+    h.clearRect(0, 0, n, e)
+    for (var t = c.length, i = 0; i < t; i++) {
+      var s = c[i]
+      s.move(), s.fadeIn(), s.fadeOut(), s.draw()
+    }
+  }
+  function y() {
+    ;(this.reset = function () {
+      ;(this.giant = m(3)),
+        (this.comet = !this.giant && !o && m(10)),
+        (this.x = l(0, n - 10)),
+        (this.y = l(0, e)),
+        (this.r = l(1.1, 2.6)),
+        (this.dx = l(t, 6 * t) + (this.comet + 1 - 1) * t * l(50, 120) + 2 * t),
+        (this.dy = -l(t, 6 * t) - (this.comet + 1 - 1) * t * l(50, 120)),
+        (this.fadingOut = null),
+        (this.fadingIn = !0),
+        (this.opacity = 0),
+        (this.opacityTresh = l(0.2, 1 - 0.4 * (this.comet + 1 - 1))),
+        (this.do = l(5e-4, 0.002) + 0.001 * (this.comet + 1 - 1))
+    }),
+      (this.fadeIn = function () {
+        this.fadingIn &&
+          ((this.fadingIn = !(this.opacity > this.opacityTresh)),
+          (this.opacity += this.do))
+      }),
+      (this.fadeOut = function () {
+        this.fadingOut &&
+          ((this.fadingOut = !(this.opacity < 0)),
+          (this.opacity -= this.do / 2),
+          (this.x > n || this.y < 0) && ((this.fadingOut = !1), this.reset()))
+      }),
+      (this.draw = function () {
+        if ((h.beginPath(), this.giant))
+          (h.fillStyle = 'rgba(' + a + ',' + this.opacity + ')'),
+            h.arc(this.x, this.y, 2, 0, 2 * Math.PI, !1)
+        else if (this.comet) {
+          ;(h.fillStyle = 'rgba(' + d + ',' + this.opacity + ')'),
+            h.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, !1)
+          for (var t = 0; t < 30; t++)
+            (h.fillStyle =
+              'rgba(' +
+              d +
+              ',' +
+              (this.opacity - (this.opacity / 20) * t) +
+              ')'),
+              h.rect(
+                this.x - (this.dx / 4) * t,
+                this.y - (this.dy / 4) * t - 2,
+                2,
+                2
+              ),
+              h.fill()
+        } else
+          (h.fillStyle = 'rgba(' + r + ',' + this.opacity + ')'),
+            h.rect(this.x, this.y, this.r, this.r)
+        h.closePath(), h.fill()
+      }),
+      (this.move = function () {
+        ;(this.x += this.dx),
+          (this.y += this.dy),
+          !1 === this.fadingOut && this.reset(),
+          (this.x > n - n / 4 || this.y < 0) && (this.fadingOut = !0)
+      }),
+      setTimeout(function () {
+        o = !1
+      }, 50)
+  }
+  function m(t) {
+    return Math.floor(1e3 * Math.random()) + 1 < 10 * t
+  }
+  function l(t, i) {
+    return Math.random() * (i - t) + t
+  }
+  f(),
+    window.addEventListener('resize', f, !1),
+    (function () {
+      h = s.getContext('2d')
+      for (var t = 0; t < i; t++) (c[t] = new y()), c[t].reset()
+      u()
+    })(),
+    (function t() {
+      document.getElementsByTagName('html')[0].className.indexOf('dark') >= 0 &&
+        u(),
+        window.requestAnimationFrame(t)
+    })()
+}
+
+window.renderStarrySky = renderStarrySky
\ No newline at end of file