From 1b1dec30d6f79739ff2bf36c434b4ad7b2ec45ab Mon Sep 17 00:00:00 2001
From: selemondev <selemondev19@gmail.com>
Date: Tue, 8 Oct 2024 12:24:23 +0300
Subject: [PATCH] feat: add particles component

---
 docs/.vitepress/theme/tailwind.css            |    8 +
 docs/index.md                                 |    2 +
 docs/src/example/particles/Demo.vue           |   11 +
 docs/src/example/particles/Particles.vue      | 1603 +++++++++++++++++
 .../example/particles/ParticlesBackground.vue |   43 +
 5 files changed, 1667 insertions(+)
 create mode 100644 docs/src/example/particles/Demo.vue
 create mode 100644 docs/src/example/particles/Particles.vue
 create mode 100644 docs/src/example/particles/ParticlesBackground.vue

diff --git a/docs/.vitepress/theme/tailwind.css b/docs/.vitepress/theme/tailwind.css
index b5c61c9..0c6c035 100755
--- a/docs/.vitepress/theme/tailwind.css
+++ b/docs/.vitepress/theme/tailwind.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.fill-primary-light {
+    fill: #063528;
+  }
+  
+  .fill-primary-dark {
+    fill: #0d9373;
+  }
diff --git a/docs/index.md b/docs/index.md
index f087fd7..4a067f0 100755
--- a/docs/index.md
+++ b/docs/index.md
@@ -86,3 +86,5 @@ import Demos from './src/components/Demos.vue'
 <demo src="./src/example/marquee/Demo.vue" />
 
 <demo src="./src/example/ripple/Demo.vue" />
+
+<demo src="./src/example/particles/Demo.vue" />
diff --git a/docs/src/example/particles/Demo.vue b/docs/src/example/particles/Demo.vue
new file mode 100644
index 0000000..21ab836
--- /dev/null
+++ b/docs/src/example/particles/Demo.vue
@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+import HeroParticles from './Particles.vue'
+import HeroBackground from './ParticlesBackground.vue'
+</script>
+
+<template>
+  <div class="relative w-[600px] h-[400px]">
+    <HeroParticles :accelerate="true" class="absolute top-0" />
+    <HeroBackground />
+  </div>
+</template>
diff --git a/docs/src/example/particles/Particles.vue b/docs/src/example/particles/Particles.vue
new file mode 100644
index 0000000..cf38c47
--- /dev/null
+++ b/docs/src/example/particles/Particles.vue
@@ -0,0 +1,1603 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  accelerate?: boolean
+  color?: string
+}>(), {
+  accelarate: false,
+  color: '#00DC82',
+})
+
+const { isDark } = useData()
+
+const theme = computed(() => {
+  return isDark.value ? props.color : 'red'
+})
+</script>
+
+<template>
+  <div class="stars h-[500px] absolute pointer-events-none inset-x-0 bottom-0 w-[500px] opacity-75" :class="{ accelerate: props.accelerate }">
+    <div class="rounded-full bg-transparent" />
+    <div class="rounded-full bg-transparent" />
+    <div class="rounded-full bg-transparent" />
+  </div>
+</template>
+
+<style scoped>
+.stars {
+  left: 50%;
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    rgba(217, 217, 217, 0) 0%,
+    rgba(217, 217, 217, 0.8) 25%,
+    #d9d9d9 50%,
+    rgba(217, 217, 217, 0.8) 75%,
+    rgba(217, 217, 217, 0) 100%
+  );
+  mask-image: linear-gradient(
+    180deg,
+    rgba(217, 217, 217, 0) 0%,
+    rgba(217, 217, 217, 0.8) 25%,
+    #d9d9d9 50%,
+    rgba(217, 217, 217, 0.8) 75%,
+    rgba(217, 217, 217, 0) 100%
+  );
+  -webkit-mask-size: cover;
+  mask-size: cover;
+  transform: translate(-50%);
+
+  --color: v-bind(theme);
+}
+
+.stars > div {
+  animation: risingStarsAnination linear infinite;
+  width: 2px;
+  height: 2px;
+}
+.stars.accelerate > div {
+  width: 2px;
+  height: 2px;
+}
+
+.stars div:nth-child(1) {
+  animation-duration: 100s !important;
+  box-shadow:
+    693px 8435px var(--color),
+    1921px 246px var(--color),
+    1120px 872px var(--color),
+    1614px 1319px var(--color),
+    628px 1227px var(--color),
+    144px 1298px var(--color),
+    1152px 1529px var(--color),
+    1486px 1897px var(--color),
+    401px 1213px var(--color),
+    1023px 73px var(--color),
+    122px 509px var(--color),
+    1264px 1265px var(--color),
+    235px 1276px var(--color),
+    514px 1138px var(--color),
+    1019px 1915px var(--color),
+    1214px 1058px var(--color),
+    1740px 1354px var(--color),
+    1947px 791px var(--color),
+    1046px 438px var(--color),
+    695px 1209px var(--color),
+    58px 442px var(--color),
+    1143px 1489px var(--color),
+    1486px 607px var(--color),
+    730px 1396px var(--color),
+    402px 1177px var(--color),
+    1533px 657px var(--color),
+    1436px 657px var(--color),
+    1567px 1081px var(--color),
+    1632px 295px var(--color),
+    460px 1293px var(--color),
+    196px 800px var(--color),
+    1554px 1284px var(--color),
+    645px 1441px var(--color),
+    467px 502px var(--color),
+    1413px 497px var(--color),
+    1468px 434px var(--color),
+    34px 619px var(--color),
+    1858px 1004px var(--color),
+    834px 511px var(--color),
+    693px 916px var(--color),
+    330px 91px var(--color),
+    1686px 1366px var(--color),
+    36px 56px var(--color),
+    390px 1355px var(--color),
+    656px 99px var(--color),
+    1695px 1869px var(--color),
+    321px 1219px var(--color),
+    271px 1082px var(--color),
+    1730px 407px var(--color),
+    1769px 1790px var(--color),
+    1072px 780px var(--color),
+    630px 1561px var(--color),
+    1238px 1991px var(--color),
+    26px 440px var(--color),
+    998px 1604px var(--color),
+    1865px 631px var(--color),
+    289px 1635px var(--color),
+    689px 547px var(--color),
+    1691px 1147px var(--color),
+    113px 1933px var(--color),
+    1656px 949px var(--color),
+    903px 1220px var(--color),
+    1214px 503px var(--color),
+    505px 1391px var(--color),
+    1300px 1766px var(--color),
+    56px 194px var(--color),
+    1920px 572px var(--color),
+    1704px 945px var(--color),
+    1627px 278px var(--color),
+    1659px 793px var(--color),
+    1249px 1495px var(--color),
+    1029px 1187px var(--color),
+    1555px 408px var(--color),
+    1030px 250px var(--color),
+    725px 1744px var(--color),
+    1787px 1643px var(--color),
+    627px 199px var(--color),
+    1151px 698px var(--color),
+    1862px 81px var(--color),
+    166px 1098px var(--color),
+    896px 1022px var(--color),
+    1313px 123px var(--color),
+    1097px 1047px var(--color),
+    1288px 1258px var(--color),
+    691px 348px var(--color),
+    573px 862px var(--color),
+    277px 1220px var(--color),
+    1039px 1041px var(--color),
+    105px 634px var(--color),
+    389px 1046px var(--color),
+    1452px 914px var(--color),
+    1636px 1264px var(--color),
+    1809px 1362px var(--color),
+    1796px 1460px var(--color),
+    758px 131px var(--color),
+    1116px 891px var(--color),
+    837px 844px var(--color),
+    996px 497px var(--color),
+    270px 990px var(--color),
+    1646px 1943px var(--color),
+    1896px 734px var(--color),
+    1237px 154px var(--color),
+    795px 796px var(--color),
+    1773px 1527px var(--color),
+    1262px 1316px var(--color),
+    1949px 499px var(--color),
+    1987px 1438px var(--color),
+    993px 1583px var(--color),
+    1371px 423px var(--color),
+    1596px 388px var(--color),
+    878px 498px var(--color),
+    1571px 1310px var(--color),
+    1339px 290px var(--color),
+    1323px 1028px var(--color),
+    1224px 1001px var(--color),
+    1211px 1638px var(--color),
+    1877px 85px var(--color),
+    300px 787px var(--color),
+    1699px 1559px var(--color),
+    506px 8px var(--color),
+    703px 228px var(--color),
+    1903px 233px var(--color),
+    1740px 963px var(--color),
+    1901px 1551px var(--color),
+    34px 440px var(--color),
+    660px 713px var(--color),
+    953px 1397px var(--color),
+    1292px 1730px var(--color),
+    1733px 922px var(--color),
+    844px 1972px var(--color),
+    292px 85px var(--color),
+    786px 284px var(--color),
+    1716px 1293px var(--color),
+    111px 1807px var(--color),
+    1787px 1462px var(--color),
+    1190px 1837px var(--color),
+    224px 1552px var(--color),
+    1532px 1693px var(--color),
+    819px 594px var(--color),
+    1441px 1037px var(--color),
+    11px 1657px var(--color),
+    580px 645px var(--color),
+    1469px 330px var(--color),
+    1532px 1057px var(--color),
+    1146px 860px var(--color),
+    1438px 784px var(--color),
+    1365px 1858px var(--color),
+    271px 1335px var(--color),
+    1118px 712px var(--color),
+    1261px 48px var(--color),
+    1045px 447px var(--color),
+    1325px 1454px var(--color),
+    1517px 406px var(--color),
+    1339px 386px var(--color),
+    1375px 1652px var(--color),
+    1719px 966px var(--color),
+    581px 765px var(--color),
+    1222px 599px var(--color),
+    1567px 666px var(--color),
+    1154px 1378px var(--color),
+    1709px 480px var(--color),
+    1862px 285px var(--color),
+    286px 1888px var(--color),
+    587px 870px var(--color),
+    46px 832px var(--color),
+    1036px 286px var(--color),
+    1376px 261px var(--color),
+    1794px 981px var(--color),
+    1530px 1004px var(--color),
+    1700px 1617px var(--color),
+    1810px 253px var(--color),
+    578px 521px var(--color),
+    37px 1207px var(--color),
+    1126px 151px var(--color),
+    644px 603px var(--color),
+    1897px 1995px var(--color),
+    415px 579px var(--color),
+    929px 718px var(--color),
+    1025px 1952px var(--color),
+    1779px 1959px var(--color),
+    1955px 1752px var(--color),
+    1991px 136px var(--color),
+    659px 1463px var(--color),
+    1113px 1052px var(--color),
+    1628px 1806px var(--color),
+    1891px 1064px var(--color),
+    1782px 1329px var(--color),
+    510px 526px var(--color),
+    1348px 599px var(--color),
+    1157px 1994px var(--color),
+    936px 260px var(--color),
+    227px 251px var(--color),
+    24px 1290px var(--color),
+    1944px 701px var(--color),
+    1665px 745px var(--color),
+    1648px 1817px var(--color),
+    1446px 1941px var(--color),
+    1552px 802px var(--color),
+    483px 264px var(--color),
+    974px 537px var(--color),
+    966px 941px var(--color),
+    1960px 1542px var(--color),
+    281px 930px var(--color),
+    1000px 863px var(--color),
+    800px 1257px var(--color),
+    1949px 1845px var(--color),
+    43px 1126px var(--color),
+    981px 36px var(--color),
+    1355px 1949px var(--color),
+    797px 43px var(--color),
+    110px 906px var(--color),
+    829px 853px var(--color),
+    845px 1999px var(--color),
+    565px 1058px var(--color),
+    1424px 1028px var(--color),
+    903px 1574px var(--color),
+    1670px 632px var(--color),
+    1417px 1997px var(--color),
+    592px 1967px var(--color),
+    843px 1894px var(--color),
+    111px 341px var(--color),
+    1868px 1896px var(--color),
+    1846px 832px var(--color),
+    1627px 1557px var(--color),
+    1331px 723px var(--color),
+    707px 770px var(--color),
+    1589px 1422px var(--color),
+    1960px 1137px var(--color),
+    304px 572px var(--color),
+    1275px 459px var(--color),
+    707px 866px var(--color),
+    914px 1524px var(--color),
+    796px 551px var(--color),
+    896px 1655px var(--color),
+    1051px 182px var(--color),
+    1834px 636px var(--color),
+    278px 1663px var(--color),
+    1197px 1203px var(--color),
+    482px 1601px var(--color),
+    199px 924px var(--color),
+    1974px 1084px var(--color),
+    1676px 668px var(--color),
+    858px 1226px var(--color),
+    1375px 1873px var(--color),
+    415px 1817px var(--color),
+    1112px 312px var(--color),
+    1011px 1629px var(--color),
+    1217px 991px var(--color),
+    1418px 1998px var(--color),
+    1645px 1226px var(--color),
+    186px 1661px var(--color),
+    1614px 1374px var(--color),
+    732px 544px var(--color),
+    458px 72px var(--color),
+    1137px 1584px var(--color),
+    1704px 1103px var(--color),
+    329px 1958px var(--color),
+    17px 141px var(--color),
+    308px 1980px var(--color),
+    1975px 675px var(--color),
+    555px 330px var(--color),
+    787px 712px var(--color),
+    1062px 39px var(--color),
+    1586px 1771px var(--color),
+    1022px 1632px var(--color),
+    559px 1316px var(--color),
+    1254px 294px var(--color),
+    799px 865px var(--color),
+    672px 116px var(--color),
+    1994px 575px var(--color),
+    1733px 652px var(--color),
+    1233px 894px var(--color),
+    1369px 573px var(--color),
+    237px 262px var(--color),
+    1980px 200px var(--color),
+    657px 1489px var(--color),
+    1871px 1364px var(--color),
+    1571px 891px var(--color),
+    115px 617px var(--color),
+    1711px 1178px var(--color),
+    463px 183px var(--color),
+    1148px 841px var(--color),
+    566px 782px var(--color),
+    844px 1056px var(--color),
+    811px 1855px var(--color),
+    97px 842px var(--color),
+    1097px 10px var(--color),
+    886px 1066px var(--color),
+    1590px 1707px var(--color),
+    1884px 1313px var(--color),
+    1719px 408px var(--color),
+    256px 319px var(--color),
+    116px 253px var(--color),
+    132px 1237px var(--color),
+    912px 1912px var(--color),
+    568px 1053px var(--color),
+    840px 1523px var(--color),
+    521px 1780px var(--color),
+    1092px 554px var(--color),
+    1833px 1018px var(--color),
+    1897px 514px var(--color),
+    1765px 1236px var(--color),
+    415px 1512px var(--color),
+    1457px 1382px var(--color),
+    567px 1294px var(--color),
+    777px 505px var(--color),
+    1502px 635px var(--color),
+    422px 933px var(--color),
+    1609px 1030px var(--color),
+    124px 550px var(--color),
+    1839px 895px var(--color),
+    671px 1187px var(--color),
+    1445px 1668px var(--color),
+    1457px 633px var(--color),
+    363px 1250px var(--color),
+    1770px 1598px var(--color),
+    1802px 82px var(--color),
+    1784px 1798px var(--color),
+    1275px 1504px var(--color),
+    888px 264px var(--color),
+    157px 209px var(--color),
+    1803px 1572px var(--color),
+    722px 851px var(--color),
+    732px 365px var(--color),
+    485px 1277px var(--color),
+    155px 974px var(--color),
+    986px 339px var(--color),
+    283px 49px var(--color),
+    1605px 727px var(--color),
+    55px 359px var(--color),
+    468px 987px var(--color),
+    789px 283px var(--color),
+    97px 623px var(--color),
+    237px 432px var(--color),
+    577px 619px var(--color),
+    891px 623px var(--color),
+    861px 373px var(--color),
+    510px 1655px var(--color),
+    808px 1413px var(--color),
+    1626px 1241px var(--color),
+    368px 53px var(--color),
+    796px 852px var(--color),
+    1832px 152px var(--color),
+    575px 1066px var(--color),
+    1374px 1739px var(--color),
+    951px 1313px var(--color),
+    1305px 742px var(--color),
+    607px 1560px var(--color),
+    1735px 682px var(--color),
+    827px 805px var(--color),
+    270px 1759px var(--color),
+    606px 1115px var(--color),
+    569px 1730px var(--color),
+    742px 158px var(--color),
+    261px 1861px var(--color),
+    1926px 1332px var(--color),
+    461px 1982px var(--color),
+    380px 855px var(--color),
+    194px 1920px var(--color),
+    423px 228px var(--color),
+    498px 75px var(--color),
+    480px 27px var(--color),
+    1842px 769px var(--color),
+    1587px 605px var(--color),
+    721px 371px var(--color),
+    1248px 20px var(--color),
+    457px 1734px var(--color),
+    1642px 895px var(--color),
+    37px 282px var(--color),
+    139px 856px var(--color),
+    1863px 1254px var(--color),
+    728px 419px var(--color),
+    1930px 1638px var(--color),
+    587px 1392px var(--color),
+    52px 228px var(--color),
+    483px 1150px var(--color),
+    1127px 970px var(--color),
+    20px 1909px var(--color),
+    1427px 1208px var(--color),
+    421px 951px var(--color),
+    1552px 259px var(--color),
+    688px 1070px var(--color),
+    1618px 1896px var(--color),
+    1422px 942px var(--color),
+    902px 741px var(--color),
+    340px 916px var(--color),
+    1392px 1128px var(--color),
+    1713px 539px var(--color),
+    1213px 1312px var(--color),
+    170px 1565px var(--color),
+    1603px 719px var(--color),
+    1504px 1666px var(--color),
+    880px 440px var(--color),
+    1611px 1247px var(--color),
+    408px 1211px var(--color),
+    624px 371px var(--color),
+    1309px 531px var(--color),
+    1913px 955px var(--color),
+    170px 1921px var(--color),
+    40px 1967px var(--color),
+    1074px 1194px var(--color),
+    1025px 632px var(--color),
+    165px 277px var(--color),
+    1685px 1842px var(--color),
+    1840px 1925px var(--color),
+    1534px 859px var(--color),
+    411px 780px var(--color),
+    1814px 618px var(--color),
+    802px 1791px var(--color),
+    724px 1305px var(--color),
+    692px 603px var(--color),
+    662px 1720px var(--color),
+    682px 333px var(--color),
+    962px 170px var(--color),
+    845px 1277px var(--color),
+    1692px 650px var(--color),
+    810px 1576px var(--color),
+    1812px 1536px var(--color),
+    1031px 641px var(--color),
+    1794px 1450px var(--color),
+    496px 1923px var(--color),
+    1410px 998px var(--color),
+    1984px 1904px var(--color),
+    989px 1970px var(--color),
+    926px 1826px var(--color),
+    1063px 1831px var(--color),
+    586px 59px var(--color),
+    769px 1816px var(--color),
+    789px 993px var(--color),
+    1228px 1880px var(--color),
+    12px 1624px var(--color),
+    1706px 787px var(--color),
+    763px 1189px var(--color),
+    1066px 1139px var(--color),
+    1927px 182px var(--color),
+    1058px 927px var(--color),
+    463px 938px var(--color),
+    1608px 564px var(--color),
+    681px 1082px var(--color),
+    1681px 1704px var(--color),
+    499px 1586px var(--color),
+    1270px 184px var(--color),
+    731px 233px var(--color),
+    500px 916px var(--color),
+    1488px 1864px var(--color),
+    38px 1593px var(--color),
+    155px 639px var(--color),
+    1210px 435px var(--color),
+    671px 1152px var(--color),
+    1671px 473px var(--color),
+    424px 101px var(--color),
+    1456px 1419px var(--color),
+    1791px 1837px var(--color),
+    1783px 411px var(--color),
+    1355px 11px var(--color),
+    1840px 536px var(--color),
+    555px 538px var(--color),
+    71px 683px var(--color),
+    1375px 674px var(--color),
+    269px 545px var(--color),
+    1523px 79px var(--color),
+    1960px 602px var(--color),
+    828px 732px var(--color),
+    723px 771px var(--color),
+    712px 1505px var(--color),
+    285px 606px var(--color),
+    286px 1741px var(--color),
+    1233px 778px var(--color),
+    1717px 1221px var(--color),
+    1225px 981px var(--color),
+    691px 752px var(--color),
+    829px 78px var(--color),
+    1211px 1365px var(--color),
+    1701px 1323px var(--color),
+    1614px 87px var(--color),
+    1974px 1744px var(--color),
+    1227px 873px var(--color),
+    549px 1357px var(--color),
+    881px 1414px var(--color),
+    321px 1381px var(--color),
+    1378px 1339px var(--color),
+    1331px 1263px var(--color),
+    1997px 50px var(--color),
+    149px 776px var(--color),
+    1297px 1054px var(--color),
+    1183px 757px var(--color),
+    421px 58px var(--color),
+    1847px 217px var(--color),
+    1128px 1490px var(--color),
+    681px 485px var(--color),
+    486px 1455px var(--color),
+    224px 804px var(--color),
+    1971px 210px var(--color),
+    699px 1124px var(--color),
+    1210px 799px var(--color),
+    521px 18px var(--color),
+    1793px 1493px var(--color),
+    36px 815px var(--color),
+    1776px 462px var(--color),
+    1701px 196px var(--color);
+  opacity: 0.75;
+}
+.stars.accelerate div:nth-child(1) {
+  opacity: 1;
+  animation-duration: 10s !important;
+}
+
+.stars div:nth-child(2) {
+  animation-duration: 150s !important;
+  box-shadow:
+    1432px 8687px var(--color),
+    281px 1550px var(--color),
+    797px 588px var(--color),
+    1219px 1750px var(--color),
+    291px 20px var(--color),
+    989px 1462px var(--color),
+    321px 1536px var(--color),
+    660px 1179px var(--color),
+    630px 1097px var(--color),
+    138px 1129px var(--color),
+    317px 982px var(--color),
+    1005px 692px var(--color),
+    594px 770px var(--color),
+    817px 1325px var(--color),
+    1750px 516px var(--color),
+    306px 784px var(--color),
+    103px 1251px var(--color),
+    1035px 897px var(--color),
+    1598px 760px var(--color),
+    1671px 1684px var(--color),
+    473px 120px var(--color),
+    1871px 422px var(--color),
+    1416px 1596px var(--color),
+    664px 469px var(--color),
+    1706px 1842px var(--color),
+    1830px 647px var(--color),
+    1494px 831px var(--color),
+    386px 209px var(--color),
+    1804px 1120px var(--color),
+    439px 1000px var(--color),
+    1089px 7px var(--color),
+    1293px 560px var(--color),
+    102px 1926px var(--color),
+    1219px 1667px var(--color),
+    1364px 1107px var(--color),
+    1270px 619px var(--color),
+    1180px 1657px var(--color),
+    1208px 521px var(--color),
+    807px 1325px var(--color),
+    478px 396px var(--color),
+    995px 327px var(--color),
+    1067px 352px var(--color),
+    1620px 1648px var(--color),
+    114px 1380px var(--color),
+    24px 883px var(--color),
+    1589px 883px var(--color),
+    1365px 139px var(--color),
+    778px 1926px var(--color),
+    1390px 1943px var(--color),
+    1755px 193px var(--color),
+    1575px 292px var(--color),
+    214px 1095px var(--color),
+    372px 1011px var(--color),
+    251px 31px var(--color),
+    1249px 1150px var(--color),
+    1481px 520px var(--color),
+    1716px 499px var(--color),
+    937px 1934px var(--color),
+    743px 494px var(--color),
+    1341px 1953px var(--color),
+    670px 1523px var(--color),
+    441px 940px var(--color),
+    1056px 944px var(--color),
+    1963px 1467px var(--color),
+    1543px 852px var(--color),
+    225px 763px var(--color),
+    957px 1937px var(--color),
+    1344px 460px var(--color),
+    497px 512px var(--color),
+    1676px 1196px var(--color),
+    961px 438px var(--color),
+    1721px 1580px var(--color),
+    418px 1874px var(--color),
+    316px 1597px var(--color),
+    1897px 526px var(--color),
+    640px 1420px var(--color),
+    50px 1211px var(--color),
+    1871px 726px var(--color),
+    1672px 1990px var(--color),
+    1258px 864px var(--color),
+    62px 614px var(--color),
+    314px 882px var(--color),
+    878px 1076px var(--color),
+    1724px 1142px var(--color),
+    543px 46px var(--color),
+    641px 425px var(--color),
+    76px 57px var(--color),
+    227px 927px var(--color),
+    816px 1130px var(--color),
+    1064px 1389px var(--color),
+    1915px 671px var(--color),
+    407px 1527px var(--color),
+    257px 605px var(--color),
+    983px 1012px var(--color),
+    1576px 388px var(--color),
+    1575px 1935px var(--color),
+    68px 1594px var(--color),
+    311px 107px var(--color),
+    832px 144px var(--color),
+    349px 1401px var(--color),
+    1150px 1652px var(--color),
+    627px 1663px var(--color),
+    922px 1119px var(--color),
+    720px 1629px var(--color),
+    305px 642px var(--color),
+    1125px 146px var(--color),
+    898px 750px var(--color),
+    642px 1538px var(--color),
+    88px 782px var(--color),
+    723px 1320px var(--color),
+    355px 785px var(--color),
+    1149px 1949px var(--color),
+    1522px 1885px var(--color),
+    1984px 957px var(--color),
+    256px 1165px var(--color),
+    1216px 1415px var(--color),
+    777px 408px var(--color),
+    819px 510px var(--color),
+    1239px 1325px var(--color),
+    1202px 326px var(--color),
+    225px 384px var(--color),
+    291px 498px var(--color),
+    1349px 535px var(--color),
+    1927px 1931px var(--color),
+    1673px 507px var(--color),
+    584px 1285px var(--color),
+    486px 743px var(--color),
+    1391px 1091px var(--color),
+    541px 947px var(--color),
+    1505px 1612px var(--color),
+    231px 1371px var(--color),
+    1336px 1722px var(--color),
+    729px 1068px var(--color),
+    1179px 1525px var(--color),
+    203px 76px var(--color),
+    1878px 736px var(--color),
+    1704px 1381px var(--color),
+    551px 1527px var(--color),
+    1110px 1859px var(--color),
+    313px 596px var(--color),
+    543px 9px var(--color),
+    1091px 951px var(--color),
+    1178px 1081px var(--color),
+    137px 1930px var(--color),
+    705px 1554px var(--color),
+    1427px 1999px var(--color),
+    988px 1968px var(--color),
+    271px 1720px var(--color),
+    1234px 1857px var(--color),
+    1559px 1284px var(--color),
+    1353px 1409px var(--color),
+    298px 1591px var(--color),
+    602px 1198px var(--color),
+    1451px 106px var(--color),
+    1835px 1119px var(--color),
+    1098px 324px var(--color),
+    946px 842px var(--color),
+    1308px 1879px var(--color),
+    1013px 57px var(--color),
+    1856px 1163px var(--color),
+    266px 1889px var(--color),
+    361px 657px var(--color),
+    1450px 873px var(--color),
+    1008px 644px var(--color),
+    632px 1115px var(--color),
+    45px 1126px var(--color),
+    845px 1090px var(--color),
+    582px 974px var(--color),
+    671px 82px var(--color),
+    561px 1442px var(--color),
+    1417px 594px var(--color),
+    931px 984px var(--color),
+    1677px 1052px var(--color),
+    1698px 844px var(--color),
+    1043px 1059px var(--color),
+    861px 1672px var(--color),
+    1922px 1111px var(--color),
+    1261px 310px var(--color),
+    1940px 1966px var(--color),
+    391px 1960px var(--color),
+    1116px 158px var(--color),
+    639px 1471px var(--color),
+    526px 1349px var(--color),
+    888px 1053px var(--color),
+    547px 563px var(--color),
+    1005px 1053px var(--color),
+    67px 98px var(--color),
+    9px 872px var(--color),
+    693px 1422px var(--color),
+    1303px 1524px var(--color),
+    1765px 655px var(--color),
+    66px 188px var(--color),
+    1929px 1145px var(--color),
+    1158px 1423px var(--color),
+    1897px 302px var(--color),
+    1421px 630px var(--color),
+    120px 240px var(--color),
+    777px 1748px var(--color),
+    802px 1919px var(--color),
+    1039px 745px var(--color),
+    1739px 897px var(--color),
+    327px 972px var(--color),
+    426px 1450px var(--color),
+    1900px 1785px var(--color),
+    431px 87px var(--color),
+    394px 1871px var(--color),
+    226px 1776px var(--color),
+    698px 757px var(--color),
+    944px 274px var(--color),
+    1764px 899px var(--color),
+    736px 858px var(--color),
+    1581px 867px var(--color),
+    1760px 594px var(--color),
+    315px 1572px var(--color),
+    612px 69px var(--color),
+    491px 1784px var(--color),
+    1487px 1998px var(--color),
+    371px 1477px var(--color),
+    1770px 638px var(--color),
+    606px 1666px var(--color),
+    347px 1014px var(--color),
+    659px 585px var(--color),
+    1762px 1819px var(--color),
+    1795px 823px var(--color),
+    486px 1488px var(--color),
+    1424px 977px var(--color),
+    1441px 1377px var(--color),
+    372px 1103px var(--color),
+    1736px 1114px var(--color),
+    883px 789px var(--color),
+    760px 456px var(--color),
+    1475px 1368px var(--color),
+    343px 415px var(--color),
+    1221px 823px var(--color),
+    894px 513px var(--color),
+    1016px 713px var(--color),
+    751px 22px var(--color),
+    875px 595px var(--color),
+    1999px 1266px var(--color),
+    1340px 652px var(--color),
+    1872px 540px var(--color),
+    1957px 753px var(--color),
+    308px 1242px var(--color),
+    1551px 1124px var(--color),
+    1417px 305px var(--color),
+    1701px 1843px var(--color),
+    539px 1505px var(--color),
+    404px 1442px var(--color),
+    146px 248px var(--color),
+    1942px 602px var(--color),
+    1019px 1240px var(--color),
+    813px 1300px var(--color),
+    1259px 1092px var(--color),
+    1820px 10px var(--color),
+    27px 222px var(--color),
+    278px 1838px var(--color),
+    1420px 1702px var(--color),
+    367px 61px var(--color),
+    433px 518px var(--color),
+    253px 1444px var(--color),
+    791px 954px var(--color),
+    1768px 1504px var(--color),
+    709px 1529px var(--color),
+    198px 246px var(--color),
+    1228px 131px var(--color),
+    812px 1859px var(--color),
+    1145px 784px var(--color),
+    165px 377px var(--color),
+    847px 535px var(--color),
+    71px 1404px var(--color),
+    1364px 1168px var(--color),
+    410px 1120px var(--color),
+    1265px 261px var(--color),
+    1678px 1845px var(--color),
+    305px 873px var(--color),
+    1524px 1720px var(--color),
+    608px 682px var(--color),
+    1277px 991px var(--color),
+    1865px 1097px var(--color),
+    1426px 197px var(--color),
+    435px 1774px var(--color),
+    42px 470px var(--color),
+    27px 453px var(--color),
+    306px 1691px var(--color),
+    60px 1692px var(--color),
+    1097px 1408px var(--color),
+    992px 136px var(--color),
+    1082px 1688px var(--color),
+    1925px 1301px var(--color),
+    156px 1675px var(--color),
+    164px 1147px var(--color),
+    109px 480px var(--color),
+    1597px 1391px var(--color),
+    238px 1553px var(--color),
+    1609px 303px var(--color),
+    1932px 1158px var(--color),
+    127px 891px var(--color),
+    279px 1047px var(--color),
+    909px 1389px var(--color),
+    1517px 1647px var(--color),
+    394px 1866px var(--color),
+    1351px 838px var(--color),
+    787px 660px var(--color),
+    138px 871px var(--color),
+    1228px 1149px var(--color),
+    1251px 1946px var(--color),
+    1766px 1350px var(--color),
+    230px 1552px var(--color),
+    1412px 1835px var(--color),
+    1465px 1476px var(--color),
+    288px 1472px var(--color),
+    1608px 1698px var(--color),
+    1503px 1254px var(--color),
+    888px 1080px var(--color),
+    962px 1952px var(--color),
+    987px 249px var(--color),
+    1516px 1971px var(--color),
+    598px 1683px var(--color),
+    740px 12px var(--color),
+    1017px 1917px var(--color),
+    1094px 894px var(--color),
+    596px 71px var(--color),
+    745px 1504px var(--color),
+    1234px 1514px var(--color),
+    13px 25px var(--color),
+    1981px 758px var(--color),
+    714px 853px var(--color),
+    1964px 637px var(--color),
+    373px 1568px var(--color),
+    1580px 1172px var(--color),
+    130px 605px var(--color),
+    1736px 1281px var(--color),
+    65px 1793px var(--color),
+    436px 861px var(--color),
+    33px 161px var(--color),
+    1530px 1981px var(--color),
+    1199px 1707px var(--color),
+    1118px 1175px var(--color),
+    470px 1959px var(--color),
+    1552px 233px var(--color),
+    1450px 1039px var(--color),
+    1012px 543px var(--color),
+    722px 621px var(--color),
+    777px 1365px var(--color),
+    1510px 1339px var(--color),
+    95px 896px var(--color),
+    60px 1765px var(--color),
+    62px 1148px var(--color),
+    720px 763px var(--color),
+    1434px 1114px var(--color),
+    250px 400px var(--color),
+    1903px 490px var(--color),
+    715px 762px var(--color),
+    185px 1156px var(--color),
+    1993px 907px var(--color),
+    389px 95px var(--color),
+    347px 1342px var(--color),
+    189px 1186px var(--color),
+    1498px 1760px var(--color),
+    1525px 358px var(--color),
+    479px 1712px var(--color),
+    483px 418px var(--color),
+    317px 815px var(--color),
+    380px 1413px var(--color),
+    1486px 922px var(--color),
+    1379px 894px var(--color),
+    1149px 1911px var(--color),
+    1360px 1819px var(--color),
+    140px 1776px var(--color),
+    1167px 875px var(--color),
+    332px 1193px var(--color),
+    1252px 1232px var(--color),
+    1713px 1820px var(--color),
+    455px 58px var(--color),
+    1045px 555px var(--color),
+    377px 1058px var(--color),
+    900px 1396px var(--color),
+    288px 592px var(--color),
+    399px 762px var(--color),
+    590px 460px var(--color),
+    126px 1925px var(--color),
+    1429px 890px var(--color),
+    1841px 1712px var(--color),
+    1975px 182px var(--color),
+    1559px 1169px var(--color),
+    1661px 1463px var(--color),
+    1723px 1948px var(--color),
+    1280px 1703px var(--color),
+    713px 1205px var(--color),
+    334px 1816px var(--color),
+    460px 724px var(--color),
+    1573px 1084px var(--color),
+    1543px 1086px var(--color),
+    1319px 1241px var(--color),
+    1014px 880px var(--color),
+    1492px 18px var(--color),
+    330px 153px var(--color),
+    3px 1416px var(--color),
+    1396px 166px var(--color),
+    1482px 1299px var(--color),
+    819px 1966px var(--color),
+    281px 3px var(--color),
+    1072px 1199px var(--color),
+    510px 456px var(--color),
+    1521px 1731px var(--color),
+    1801px 643px var(--color),
+    446px 529px var(--color),
+    1888px 1169px var(--color),
+    893px 683px var(--color),
+    1588px 348px var(--color),
+    1748px 566px var(--color),
+    232px 481px var(--color),
+    769px 200px var(--color),
+    1649px 1016px var(--color),
+    1675px 1930px var(--color),
+    1018px 1607px var(--color),
+    1137px 825px var(--color),
+    491px 608px var(--color),
+    28px 1383px var(--color),
+    329px 746px var(--color),
+    273px 1846px var(--color),
+    1257px 1139px var(--color),
+    258px 1278px var(--color),
+    821px 1393px var(--color),
+    237px 1117px var(--color),
+    172px 771px var(--color),
+    120px 608px var(--color),
+    670px 939px var(--color),
+    1412px 1095px var(--color),
+    1257px 1094px var(--color),
+    996px 1308px var(--color),
+    953px 1799px var(--color),
+    769px 11px var(--color),
+    1586px 864px var(--color),
+    1217px 1677px var(--color),
+    1276px 1159px var(--color),
+    1961px 488px var(--color),
+    1888px 676px var(--color),
+    1965px 634px var(--color),
+    1372px 1360px var(--color),
+    875px 1653px var(--color),
+    939px 408px var(--color),
+    1632px 1895px var(--color),
+    1858px 802px var(--color),
+    574px 1280px var(--color),
+    1800px 1240px var(--color),
+    1484px 537px var(--color),
+    926px 1379px var(--color),
+    1436px 1123px var(--color),
+    136px 506px var(--color),
+    920px 1692px var(--color),
+    1640px 1581px var(--color),
+    426px 528px var(--color),
+    1531px 45px var(--color),
+    634px 991px var(--color),
+    629px 319px var(--color),
+    808px 1818px var(--color),
+    144px 1357px var(--color),
+    69px 409px var(--color),
+    284px 1280px var(--color),
+    1975px 546px var(--color),
+    817px 261px var(--color),
+    1794px 575px var(--color),
+    1747px 1141px var(--color),
+    997px 1824px var(--color),
+    783px 1897px var(--color),
+    597px 1756px var(--color),
+    464px 1327px var(--color),
+    1041px 1795px var(--color),
+    1341px 699px var(--color),
+    1155px 1249px var(--color),
+    1801px 1098px var(--color),
+    1224px 922px var(--color),
+    1548px 85px var(--color),
+    1446px 1746px var(--color),
+    898px 625px var(--color),
+    1374px 742px var(--color),
+    1587px 1468px var(--color),
+    1720px 1268px var(--color),
+    776px 667px var(--color),
+    867px 128px var(--color),
+    841px 1808px var(--color),
+    1825px 1805px var(--color),
+    411px 1851px var(--color),
+    455px 1033px var(--color),
+    1103px 612px var(--color),
+    1066px 1433px var(--color),
+    1068px 835px var(--color),
+    1497px 1510px var(--color),
+    1517px 1457px var(--color),
+    793px 363px var(--color),
+    983px 613px var(--color),
+    655px 1820px var(--color),
+    1244px 1592px var(--color),
+    625px 264px var(--color),
+    744px 248px var(--color),
+    423px 1810px var(--color),
+    36px 428px var(--color),
+    797px 489px var(--color),
+    152px 1855px var(--color);
+  opacity: 0.5;
+}
+.stars.accelerate div:nth-child(2) {
+  animation-duration: 15s !important;
+  opacity: 0.75;
+}
+
+.stars div:nth-child(3) {
+  animation-duration: 200s !important;
+  box-shadow:
+    1101px 12446px var(--color),
+    1029px 11px var(--color),
+    1085px 961px var(--color),
+    1767px 1121px var(--color),
+    78px 1112px var(--color),
+    1969px 440px var(--color),
+    743px 1548px var(--color),
+    1005px 1473px var(--color),
+    1843px 1450px var(--color),
+    1062px 547px var(--color),
+    1105px 1501px var(--color),
+    316px 1466px var(--color),
+    831px 1071px var(--color),
+    879px 1157px var(--color),
+    1400px 1368px var(--color),
+    1491px 1832px var(--color),
+    833px 1040px var(--color),
+    1788px 1114px var(--color),
+    312px 406px var(--color),
+    447px 1127px var(--color),
+    312px 1249px var(--color),
+    577px 1906px var(--color),
+    1673px 1170px var(--color),
+    926px 1822px var(--color),
+    1378px 770px var(--color),
+    55px 1592px var(--color),
+    1377px 419px var(--color),
+    577px 933px var(--color),
+    668px 576px var(--color),
+    1347px 1630px var(--color),
+    1994px 1661px var(--color),
+    856px 1426px var(--color),
+    262px 1304px var(--color),
+    736px 895px var(--color),
+    419px 329px var(--color),
+    1248px 187px var(--color),
+    1584px 1841px var(--color),
+    789px 603px var(--color),
+    1831px 1181px var(--color),
+    1972px 11px var(--color),
+    567px 1408px var(--color),
+    203px 1943px var(--color),
+    502px 961px var(--color),
+    1992px 284px var(--color),
+    153px 1236px var(--color),
+    1395px 491px var(--color),
+    133px 153px var(--color),
+    699px 61px var(--color),
+    511px 1467px var(--color),
+    1069px 909px var(--color),
+    1534px 1962px var(--color),
+    561px 866px var(--color),
+    1392px 1318px var(--color),
+    1524px 369px var(--color),
+    195px 1687px var(--color),
+    707px 1428px var(--color),
+    1528px 208px var(--color),
+    1658px 669px var(--color),
+    1579px 161px var(--color),
+    757px 766px var(--color),
+    72px 4px var(--color),
+    372px 1622px var(--color),
+    515px 1062px var(--color),
+    581px 89px var(--color),
+    818px 860px var(--color),
+    1949px 779px var(--color),
+    1085px 1014px var(--color),
+    1677px 551px var(--color),
+    502px 371px var(--color),
+    1034px 1401px var(--color),
+    1745px 1621px var(--color),
+    857px 1349px var(--color),
+    946px 1184px var(--color),
+    376px 1131px var(--color),
+    781px 1298px var(--color),
+    481px 1846px var(--color),
+    1052px 370px var(--color),
+    1499px 872px var(--color),
+    1606px 905px var(--color),
+    363px 1429px var(--color),
+    319px 177px var(--color),
+    1119px 1019px var(--color),
+    1056px 1981px var(--color),
+    64px 1192px var(--color),
+    572px 1714px var(--color),
+    569px 1206px var(--color),
+    795px 29px var(--color),
+    1125px 1133px var(--color),
+    1495px 862px var(--color),
+    1298px 587px var(--color),
+    1938px 1234px var(--color),
+    1009px 1328px var(--color),
+    1882px 684px var(--color),
+    682px 1022px var(--color),
+    844px 936px var(--color),
+    1246px 1933px var(--color),
+    1044px 1128px var(--color),
+    1973px 395px var(--color),
+    482px 1715px var(--color),
+    695px 528px var(--color),
+    1806px 1908px var(--color),
+    1578px 998px var(--color),
+    143px 1347px var(--color),
+    998px 1688px var(--color),
+    890px 1063px var(--color),
+    1355px 1564px var(--color),
+    1349px 350px var(--color),
+    1225px 1779px var(--color),
+    1841px 1934px var(--color),
+    314px 1913px var(--color),
+    143px 1167px var(--color),
+    1974px 25px var(--color),
+    615px 1143px var(--color),
+    416px 1967px var(--color),
+    1504px 1977px var(--color),
+    1017px 1660px var(--color),
+    580px 1086px var(--color),
+    1974px 1626px var(--color),
+    1014px 1610px var(--color),
+    266px 1343px var(--color),
+    963px 1117px var(--color),
+    82px 1048px var(--color),
+    1963px 1702px var(--color),
+    1294px 1845px var(--color),
+    1758px 1448px var(--color),
+    1829px 1691px var(--color),
+    1299px 279px var(--color),
+    446px 1018px var(--color),
+    1228px 1952px var(--color),
+    1369px 1924px var(--color),
+    1416px 532px var(--color),
+    263px 1688px var(--color),
+    1437px 792px var(--color),
+    469px 692px var(--color),
+    1904px 34px var(--color),
+    1618px 1580px var(--color),
+    663px 1204px var(--color),
+    816px 1628px var(--color),
+    340px 529px var(--color),
+    1404px 287px var(--color),
+    1149px 1846px var(--color),
+    1883px 1682px var(--color),
+    1637px 1057px var(--color),
+    570px 951px var(--color),
+    1623px 205px var(--color),
+    988px 439px var(--color),
+    519px 316px var(--color),
+    1510px 1127px var(--color),
+    120px 115px var(--color),
+    145px 853px var(--color),
+    772px 1379px var(--color),
+    852px 155px var(--color),
+    1741px 817px var(--color),
+    593px 1083px var(--color),
+    456px 260px var(--color),
+    527px 393px var(--color),
+    1763px 1510px var(--color),
+    1643px 1437px var(--color),
+    997px 1537px var(--color),
+    1320px 1844px var(--color),
+    611px 892px var(--color),
+    1242px 879px var(--color),
+    1556px 1491px var(--color),
+    882px 264px var(--color),
+    1632px 1402px var(--color),
+    206px 378px var(--color),
+    745px 1042px var(--color),
+    1734px 26px var(--color),
+    996px 352px var(--color),
+    181px 634px var(--color),
+    1609px 1890px var(--color),
+    1995px 1687px var(--color),
+    381px 547px var(--color),
+    1779px 225px var(--color),
+    1790px 1496px var(--color),
+    1368px 1212px var(--color),
+    140px 1516px var(--color),
+    992px 1470px var(--color),
+    748px 98px var(--color),
+    1682px 1653px var(--color),
+    21px 823px var(--color),
+    539px 789px var(--color),
+    1158px 1232px var(--color),
+    437px 1554px var(--color),
+    1224px 1078px var(--color),
+    262px 254px var(--color),
+    1618px 349px var(--color),
+    945px 1054px var(--color),
+    780px 131px var(--color),
+    605px 157px var(--color),
+    1586px 617px var(--color),
+    1120px 1794px var(--color),
+    1533px 751px var(--color),
+    1391px 1941px var(--color),
+    1920px 1852px var(--color),
+    1860px 1543px var(--color),
+    1621px 695px var(--color),
+    42px 1618px var(--color),
+    362px 428px var(--color),
+    1354px 688px var(--color),
+    1347px 228px var(--color),
+    1956px 1145px var(--color),
+    1160px 1979px var(--color),
+    124px 597px var(--color),
+    1491px 1234px var(--color),
+    1552px 876px var(--color),
+    1066px 1057px var(--color),
+    1420px 316px var(--color),
+    179px 590px var(--color),
+    435px 142px var(--color),
+    772px 861px var(--color),
+    878px 53px var(--color),
+    1172px 1627px var(--color),
+    1847px 580px var(--color),
+    1574px 1056px var(--color),
+    281px 1326px var(--color),
+    443px 1159px var(--color),
+    1768px 1225px var(--color),
+    1883px 1368px var(--color),
+    1957px 1304px var(--color),
+    1666px 1523px var(--color),
+    1607px 593px var(--color),
+    413px 549px var(--color),
+    878px 1579px var(--color),
+    1041px 766px var(--color),
+    638px 1178px var(--color),
+    1985px 534px var(--color),
+    537px 142px var(--color),
+    1376px 1133px var(--color),
+    990px 430px var(--color),
+    1062px 839px var(--color),
+    1658px 1871px var(--color),
+    20px 29px var(--color),
+    336px 219px var(--color),
+    1793px 323px var(--color),
+    1538px 176px var(--color),
+    558px 1227px var(--color),
+    1826px 1132px var(--color),
+    572px 1461px var(--color),
+    1900px 1647px var(--color),
+    1126px 1972px var(--color),
+    703px 358px var(--color),
+    1444px 1988px var(--color),
+    980px 721px var(--color),
+    240px 674px var(--color),
+    1731px 1607px var(--color),
+    49px 293px var(--color),
+    1392px 1831px var(--color),
+    101px 1661px var(--color),
+    1834px 1163px var(--color),
+    1709px 1336px var(--color),
+    88px 1546px var(--color),
+    1688px 1721px var(--color),
+    624px 1058px var(--color),
+    1347px 352px var(--color),
+    1262px 677px var(--color),
+    948px 1820px var(--color),
+    1222px 224px var(--color),
+    365px 633px var(--color),
+    747px 1162px var(--color),
+    527px 1874px var(--color),
+    1146px 1467px var(--color),
+    949px 1127px var(--color),
+    92px 1714px var(--color),
+    546px 657px var(--color),
+    172px 1489px var(--color),
+    587px 970px var(--color),
+    359px 1225px var(--color),
+    641px 1px var(--color),
+    1577px 926px var(--color),
+    608px 111px var(--color),
+    46px 1967px var(--color),
+    1339px 1895px var(--color),
+    723px 1320px var(--color),
+    329px 1730px var(--color),
+    1485px 247px var(--color),
+    824px 944px var(--color),
+    1441px 1462px var(--color),
+    1790px 193px var(--color),
+    909px 219px var(--color),
+    1161px 1469px var(--color),
+    1037px 501px var(--color),
+    1397px 999px var(--color),
+    1863px 1019px var(--color),
+    1956px 406px var(--color),
+    1424px 1301px var(--color),
+    1036px 676px var(--color),
+    1080px 1177px var(--color),
+    3px 696px var(--color),
+    488px 311px var(--color),
+    1907px 334px var(--color),
+    174px 1634px var(--color),
+    1975px 1271px var(--color),
+    947px 64px var(--color),
+    669px 767px var(--color),
+    721px 1159px var(--color),
+    1119px 902px var(--color),
+    1498px 2px var(--color),
+    372px 434px var(--color),
+    1658px 1144px var(--color),
+    178px 1549px var(--color),
+    1207px 1874px var(--color),
+    254px 393px var(--color),
+    1965px 1954px var(--color),
+    1688px 1283px var(--color),
+    359px 1700px var(--color),
+    1518px 394px var(--color),
+    77px 1612px var(--color),
+    216px 387px var(--color),
+    1435px 1841px var(--color),
+    1110px 1563px var(--color),
+    1828px 1710px var(--color),
+    527px 973px var(--color),
+    1471px 674px var(--color),
+    486px 851px var(--color),
+    926px 1590px var(--color),
+    1566px 1940px var(--color),
+    1638px 76px var(--color),
+    1369px 1201px var(--color),
+    1852px 1309px var(--color),
+    675px 1153px var(--color),
+    75px 1758px var(--color),
+    583px 1871px var(--color),
+    170px 655px var(--color),
+    710px 12px var(--color),
+    908px 1634px var(--color),
+    63px 1219px var(--color),
+    974px 1654px var(--color),
+    855px 1576px var(--color),
+    655px 1377px var(--color),
+    980px 1494px var(--color),
+    45px 100px var(--color),
+    1347px 969px var(--color),
+    212px 1349px var(--color),
+    676px 1443px var(--color),
+    1727px 738px var(--color),
+    1724px 513px var(--color),
+    295px 1126px var(--color),
+    582px 722px var(--color),
+    222px 291px var(--color),
+    1264px 731px var(--color),
+    1895px 1348px var(--color),
+    1234px 76px var(--color),
+    47px 1101px var(--color),
+    774px 1279px var(--color),
+    1251px 1960px var(--color),
+    1113px 1422px var(--color),
+    1025px 1581px var(--color),
+    1195px 953px var(--color),
+    1402px 1616px var(--color),
+    537px 92px var(--color),
+    832px 887px var(--color),
+    95px 1596px var(--color),
+    351px 270px var(--color),
+    1231px 1562px var(--color),
+    830px 364px var(--color),
+    664px 128px var(--color),
+    1792px 879px var(--color),
+    1847px 287px var(--color),
+    1140px 615px var(--color),
+    122px 69px var(--color),
+    1881px 1138px var(--color),
+    1221px 1144px var(--color),
+    338px 1372px var(--color),
+    1222px 1110px var(--color),
+    1245px 1334px var(--color),
+    775px 824px var(--color),
+    1829px 1036px var(--color),
+    966px 1438px var(--color),
+    1256px 1511px var(--color),
+    1313px 1398px var(--color),
+    1641px 1165px var(--color),
+    1112px 355px var(--color),
+    69px 1672px var(--color),
+    1251px 453px var(--color),
+    733px 244px var(--color),
+    665px 527px var(--color),
+    829px 975px var(--color),
+    332px 1765px var(--color),
+    1332px 1562px var(--color),
+    1445px 803px var(--color),
+    899px 1365px var(--color),
+    1791px 1417px var(--color),
+    1766px 1682px var(--color),
+    1995px 234px var(--color),
+    407px 660px var(--color),
+    97px 88px var(--color),
+    158px 1614px var(--color),
+    1474px 321px var(--color),
+    776px 889px var(--color),
+    199px 83px var(--color),
+    1999px 1201px var(--color),
+    1591px 1090px var(--color),
+    640px 404px var(--color),
+    92px 1325px var(--color),
+    1802px 1062px var(--color),
+    389px 1731px var(--color),
+    64px 1986px var(--color),
+    334px 25px var(--color),
+    682px 1235px var(--color),
+    19px 1285px var(--color),
+    761px 259px var(--color),
+    1129px 494px var(--color),
+    1272px 677px var(--color),
+    285px 1943px var(--color),
+    938px 1838px var(--color),
+    1942px 66px var(--color),
+    1921px 595px var(--color),
+    1767px 843px var(--color),
+    1018px 1857px var(--color),
+    1487px 904px var(--color),
+    1541px 338px var(--color),
+    842px 593px var(--color),
+    1643px 1017px var(--color),
+    463px 329px var(--color),
+    1903px 1984px var(--color),
+    105px 663px var(--color),
+    975px 116px var(--color),
+    274px 955px var(--color),
+    1421px 1158px var(--color),
+    784px 596px var(--color),
+    218px 796px var(--color),
+    763px 1015px var(--color),
+    494px 36px var(--color),
+    99px 1630px var(--color),
+    91px 21px var(--color),
+    929px 1894px var(--color),
+    670px 1560px var(--color),
+    1096px 1824px var(--color),
+    313px 1784px var(--color),
+    1512px 251px var(--color),
+    1020px 1738px var(--color),
+    714px 671px var(--color),
+    278px 1287px var(--color),
+    1251px 886px var(--color),
+    1852px 545px var(--color),
+    209px 1270px var(--color),
+    128px 1874px var(--color),
+    853px 1429px var(--color),
+    150px 1984px var(--color),
+    991px 709px var(--color),
+    417px 1871px var(--color),
+    1439px 1133px var(--color),
+    702px 1448px var(--color),
+    827px 1661px var(--color),
+    630px 103px var(--color),
+    589px 894px var(--color),
+    1178px 297px var(--color),
+    1202px 1982px var(--color),
+    1728px 679px var(--color),
+    1936px 1470px var(--color),
+    1161px 1711px var(--color),
+    1661px 1092px var(--color),
+    46px 1100px var(--color),
+    187px 388px var(--color),
+    636px 1445px var(--color),
+    171px 1213px var(--color),
+    1646px 1200px var(--color),
+    1182px 157px var(--color),
+    1217px 1015px var(--color),
+    1936px 807px var(--color),
+    1743px 890px var(--color),
+    1825px 27px var(--color),
+    545px 21px var(--color),
+    1895px 993px var(--color),
+    1631px 1180px var(--color),
+    1634px 411px var(--color),
+    1998px 886px var(--color),
+    1479px 906px var(--color),
+    528px 970px var(--color),
+    861px 1238px var(--color),
+    881px 361px var(--color),
+    960px 916px var(--color),
+    280px 950px var(--color),
+    1310px 986px var(--color),
+    768px 1796px var(--color),
+    1187px 980px var(--color),
+    612px 1279px var(--color),
+    377px 1876px var(--color),
+    1170px 736px var(--color),
+    1331px 733px var(--color),
+    450px 233px var(--color),
+    1875px 1317px var(--color),
+    1868px 1315px var(--color),
+    1874px 1018px var(--color),
+    1062px 1949px var(--color),
+    1266px 797px var(--color),
+    1087px 443px var(--color),
+    1984px 369px var(--color),
+    1209px 1726px var(--color),
+    1626px 501px var(--color),
+    1991px 986px var(--color),
+    1467px 356px var(--color),
+    1163px 964px var(--color),
+    1671px 1944px var(--color),
+    374px 1634px var(--color),
+    1556px 820px var(--color),
+    1800px 1600px var(--color),
+    1314px 1935px var(--color),
+    1174px 1293px var(--color);
+  opacity: 0.25;
+}
+.stars.accelerate div:nth-child(3) {
+  animation-duration: 20s !important;
+  opacity: 0.5;
+}
+
+@keyframes risingStarsAnination {
+  0% {
+    transform: translateZ(0) translateY(0);
+  }
+
+  to {
+    transform: translateZ(0) translateY(-2000px);
+  }
+}
+</style>
diff --git a/docs/src/example/particles/ParticlesBackground.vue b/docs/src/example/particles/ParticlesBackground.vue
new file mode 100644
index 0000000..7c8ee19
--- /dev/null
+++ b/docs/src/example/particles/ParticlesBackground.vue
@@ -0,0 +1,43 @@
+<script setup lang='ts'>
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  color?: string
+}>(), {
+  color: '#00DC82',
+})
+
+const { isDark } = useData()
+
+const theme = computed(() => {
+  return isDark.value ? props.color : 'red'
+})
+</script>
+
+<template>
+  <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="path-1-inside-1_414_5526" fill="white">
+      <path d="M0 0H1440V181H0V0Z" />
+    </mask>
+    <path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22" />
+    <path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop :stop-color="theme" />
+        <stop offset="1" :stop-color="theme" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop :stop-color="theme" stop-opacity="0" />
+        <stop offset="0.395" :stop-color="theme" />
+        <stop offset="1" :stop-color="theme" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>