playing around

package.json

@@ -47,6 +47,9 @@
 	"type": "module",
 	"dependencies": {
 		"clsx": "^1.2.1",
+		"less": "^4.1.3",
+		"remeda": "^1.24.0",
+		"sass": "^1.64.1",
 		"simplex-noise": "^4.0.1",
 		"svelte-inview": "^4.0.1",
 		"tailwindcss-animate": "^1.0.6",

pnpm-lock.yaml

@@ -8,6 +8,15 @@ dependencies:
   clsx:
     specifier: ^1.2.1
     version: 1.2.1
+  less:
+    specifier: ^4.1.3
+    version: 4.1.3
+  remeda:
+    specifier: ^1.24.0
+    version: 1.24.0
+  sass:
+    specifier: ^1.64.1
+    version: 1.64.1
   simplex-noise:
     specifier: ^4.0.1
     version: 4.0.1
@@ -66,7 +75,7 @@ devDependencies:
     version: 4.0.1
   svelte-check:
     specifier: ^3.4.3
-    version: 3.4.4(postcss@8.4.25)(svelte@4.0.1)
+    version: 3.4.4(less@4.1.3)(postcss@8.4.25)(sass@1.64.1)(svelte@4.0.1)
   tailwindcss:
     specifier: ^3.3.2
     version: 3.3.2
@@ -75,7 +84,7 @@ devDependencies:
     version: 5.1.6
   vite:
     specifier: ^4.3.6
-    version: 4.3.9
+    version: 4.3.9(less@4.1.3)(sass@1.64.1)
 
 packages:
 
@@ -473,7 +482,7 @@ packages:
       sirv: 2.0.3
       svelte: 4.0.1
       undici: 5.22.1
-      vite: 4.3.9
+      vite: 4.3.9(less@4.1.3)(sass@1.64.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -489,7 +498,7 @@ packages:
       '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.0.1)(vite@4.3.9)
       debug: 4.3.4
       svelte: 4.0.1
-      vite: 4.3.9
+      vite: 4.3.9(less@4.1.3)(sass@1.64.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -508,7 +517,7 @@ packages:
       magic-string: 0.30.0
       svelte: 4.0.1
       svelte-hmr: 0.15.2(svelte@4.0.1)
-      vite: 4.3.9
+      vite: 4.3.9(less@4.1.3)(sass@1.64.1)
       vitefu: 0.2.4(vite@4.3.9)
     transitivePeerDependencies:
       - supports-color
@@ -715,6 +724,11 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /copy-anything@2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+    dependencies:
+      is-what: 3.14.1
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -735,6 +749,17 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    optional: true
+
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -785,6 +810,14 @@ packages:
     resolution: {integrity: sha512-pmf1rbAStw8UEQ0sr2cdJtWl48ZMuPD9Sto8HVQOq9vx9j2WgDEN6lYoaqFvqEHYOmGA9oRGn7LqWI9ta0YugQ==}
     dev: true
 
+  /errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      prr: 1.0.1
+    optional: true
+
   /es6-promise@3.3.1:
     resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
     dev: true
@@ -1107,7 +1140,6 @@ packages:
 
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: true
 
   /graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
@@ -1129,11 +1161,28 @@ packages:
     engines: {node: '>=10.17.0'}
     dev: false
 
+  /iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    optional: true
+
   /ignore@5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
     dev: true
 
+  /image-size@0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    requiresBuild: true
+    optional: true
+
+  /immutable@4.3.1:
+    resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -1200,6 +1249,9 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /is-what@3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -1235,6 +1287,25 @@ packages:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
     dev: false
 
+  /less@4.1.3:
+    resolution: {integrity: sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.6.0
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.2.0
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -1288,6 +1359,15 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+    optional: true
+
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
@@ -1306,6 +1386,13 @@ packages:
       braces: 3.0.2
       picomatch: 2.3.1
 
+  /mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    requiresBuild: true
+    optional: true
+
   /mime@3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
@@ -1367,6 +1454,19 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
+  /needle@3.2.0:
+    resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      debug: 3.2.7
+      iconv-lite: 0.6.3
+      sax: 1.2.4
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   /node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
     dev: true
@@ -1438,6 +1538,10 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1475,6 +1579,11 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  /pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+    optional: true
+
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -1598,6 +1707,10 @@ packages:
     hasBin: true
     dev: true
 
+  /prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    optional: true
+
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -1617,6 +1730,10 @@ packages:
     dependencies:
       picomatch: 2.3.1
 
+  /remeda@1.24.0:
+    resolution: {integrity: sha512-tjLxwU4yLtvX8yHlePnE7CdQXRe2pKatlVY+AunqAQV5t9FNw1yuiIAqKpu6zevd+No5LQHEJ/HK3r3ZFK7KXg==}
+    dev: false
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -1668,6 +1785,10 @@ packages:
       mri: 1.2.0
     dev: true
 
+  /safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    optional: true
+
   /sander@0.5.1:
     resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
     dependencies:
@@ -1677,6 +1798,24 @@ packages:
       rimraf: 2.7.1
     dev: true
 
+  /sass@1.64.1:
+    resolution: {integrity: sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.1
+      source-map-js: 1.0.2
+
+  /sax@1.2.4:
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    optional: true
+
+  /semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+    optional: true
+
   /semver@7.5.3:
     resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==}
     engines: {node: '>=10'}
@@ -1730,6 +1869,12 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    optional: true
+
   /streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
@@ -1783,7 +1928,7 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /svelte-check@3.4.4(postcss@8.4.25)(svelte@4.0.1):
+  /svelte-check@3.4.4(less@4.1.3)(postcss@8.4.25)(sass@1.64.1)(svelte@4.0.1):
     resolution: {integrity: sha512-Uys9+R65cj8TmP8f5UpS7B2xKpNLYNxEWJsA5ZoKcWq/uwvABFF7xS6iPQGLoa7hxz0DS6xU60YFpmq06E4JxA==}
     hasBin: true
     peerDependencies:
@@ -1796,7 +1941,7 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 4.0.1
-      svelte-preprocess: 5.0.4(postcss@8.4.25)(svelte@4.0.1)(typescript@5.1.6)
+      svelte-preprocess: 5.0.4(less@4.1.3)(postcss@8.4.25)(sass@1.64.1)(svelte@4.0.1)(typescript@5.1.6)
       typescript: 5.1.6
     transitivePeerDependencies:
       - '@babel/core'
@@ -1844,7 +1989,7 @@ packages:
       svelte: 4.0.1
     dev: false
 
-  /svelte-preprocess@5.0.4(postcss@8.4.25)(svelte@4.0.1)(typescript@5.1.6):
+  /svelte-preprocess@5.0.4(less@4.1.3)(postcss@8.4.25)(sass@1.64.1)(svelte@4.0.1)(typescript@5.1.6):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -1884,8 +2029,10 @@ packages:
     dependencies:
       '@types/pug': 2.0.6
       detect-indent: 6.1.0
+      less: 4.1.3
       magic-string: 0.27.0
       postcss: 8.4.25
+      sass: 1.64.1
       sorcery: 0.11.0
       strip-indent: 3.0.0
       svelte: 4.0.1
@@ -1982,6 +2129,9 @@ packages:
     resolution: {integrity: sha512-ZyNm28Lsg34Co5DS3e9DVyjlX2Y+2exkI4jqTKyU+9/OL6Y2fKOOuL8i+7no71o74C6mVS+UFoP3ekM3iCT1HQ==}
     dev: false
 
+  /tslib@2.6.0:
+    resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==}
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -2064,7 +2214,7 @@ packages:
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  /vite@4.3.9:
+  /vite@4.3.9(less@4.1.3)(sass@1.64.1):
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -2090,8 +2240,10 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.17.19
+      less: 4.1.3
       postcss: 8.4.25
       rollup: 3.26.0
+      sass: 1.64.1
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -2104,7 +2256,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.3.9
+      vite: 4.3.9(less@4.1.3)(sass@1.64.1)
     dev: true
 
   /webpack-sources@3.2.3:

src/lib/Helper.mjs

@@ -1,5 +1,5 @@
 import { inview } from 'svelte-inview'
-
+import { pick } from 'remeda'
 // const mappingAnimate = {
 // 	slide: 'translate',
 // 	zoom: 'scale',
@@ -23,7 +23,9 @@ export function animateIn(node, options) {
 
 	options.duration ??= 840
 
-	const style = Object.entries(options)
+	const effects = Object.entries(pick(options, ['fade', 'zoom', 'slide']))
+
+	const style = effects
 		.map(([effect, value], _, all) => {
 			if (effect === 'slide') return `translate: 0px ${value}px`
 
@@ -42,10 +44,11 @@ export function animateIn(node, options) {
 	node.addEventListener('inview_enter', callback)
 
 	function callback() {
-		console.log('Callbacked!!')
+		effects.forEach(([effect]) => {
-		node.style.opacity = '1'
+			if (effect === 'slide') node.style.translate = '0 0'
-		node.style.scale = '1 1'
+			else if (effect === 'fade') node.style.opacity = '1'
-		node.style.translate = '0 0'
+			else if (effect === 'zoom') node.style.scale = '1 1'
+		})
 	}
 
 	return { destroy: observer.destroy }

src/routes/+page.svelte

@@ -22,7 +22,7 @@
 
 	<HallOfFameSlice />
 
-	<div class="px-8 lg:px-32"><Community /></div>
+	<Community />
 </div>
 
 <div class="mt-[16rem]" />

src/routes/Community.svelte

@@ -1,9 +1,59 @@
 <script lang="ts">
+	import Button from '$lib/components/Button.svelte'
+	import DiscordIcon from '~icons/prime/discord'
 </script>
 
-<section>
+<section class="relative overflow-hidden w-screen min-h-max h-[850px]">
 	<h1 class="text-8xl font-bold text-center mb-8">Join a great community</h1>
 	<div class="text-center font-extrabold text-slate-300">
 		Get help from Distro Hoppers, Haiku writers, Hydrohomies and human_(probably)
 	</div>
+
+	<div class="flex flex-col w-full items-center">
+		<div class="w-28 h-28"><DiscordIcon class="h-full w-full" /></div>
+
+		<a href="https://discord.com/invite/hQ9XvMUjjr">
+			<Button type="fancyOutline">Join us on Discord</Button>
+		</a>
+	</div>
+
+	<div class=" absolute inset-0 w-[1024px]">
+		<div class="_bg-color bg-yellow-500 top-[146px] right-[17px] w-[359px] h-[207px] opacity-20" />
+		<div class="_bg-color bg-orange-500 top-[411px] right-0 w-[400px] h-[300px] opacity-30" />
+		<div class="_bg-color bg-purple-500 opacity-30 w-[321px] h-[295px] top-[209px] left-[368px]" />
+		<div class="_bg-color bg-cyan-500 opacity-30 w-[363px] h-[250px] left-[402px] top-[462px]" />
+		<div class="_bg-color bg-red-500 opacity-30 w-[323px] h-[482px] left-[53px] top-[179px]" />
+		<div class="_bg-color bg-fuchsia-500 opacity-30 w-[243px] h-[167px] left-[135px] top-[596px]" />
+	</div>
 </section>
+
+<style lang="sass">
+// taken from https://codepen.io/mikegolus/pen/Jegvym?editors=1100 
+$quantity: 6
+
+._bg-color
+    position: absolute
+    animation: ease 200s alternate infinite
+    pointer-events: none
+    animation: drift ease alternate infinite
+    filter: blur(80px)
+    border-radius: 50%
+    z-index: -50
+
+
+// Randomize Motion
+@for $i from 1 through $quantity
+  $steps: random(12) + 16
+  
+  ._bg-color:nth-child(#{$i})
+    // animation-name: move#{$i}
+    animation-duration:  random(6000) + 50000ms
+    animation-delay: 0ms, random(8000) + 500ms
+
+  @keyframes move#{$i}
+    @for $step from 0 through $steps
+      #{$step * (100 / $steps)}%
+        transform: translateX(random(50) - 50px) translateY(random(50) - 50px) scale(calc(random(5) / 100 + 0.95))
+
+
+</style>

src/routes/FameRicePreview.svelte

@@ -0,0 +1,46 @@
+<script>
+	import { animateIn } from '$lib/Helper.mjs'
+
+	/** @type {{ name: string, url: string }} */
+	export let createdBy
+	/** @type {string}
+	 * The path to the image. Usually the file within `static`, but can also be an URL
+	 */
+	export let image
+	/** @type {string | undefined} */
+	export let imageClass = undefined
+	/** @type {string | undefined} */
+	export let containerClass = undefined
+</script>
+
+<div
+	class="rice {containerClass} group"
+	use:animateIn={{ fade: 0, duration: 1200, threshold: 0.4 }}
+>
+	<img
+		src={image}
+		alt="Rice desktop"
+		class="w-full nice-hover object-cover object-top rounded-xl overflow-hidden shadow-2xl hover:scale-[1.01] {imageClass}"
+	/>
+	<img src={image} alt="Rice desktop" aria-hidden="true" class="rice-bg" />
+	<div class="group-hover:opacity-100 opacity-0 transition-opacity absolute top-6 right-6 p-4">
+		{createdBy.name}
+		{createdBy.url}
+	</div>
+</div>
+
+<style lang="postcss">
+	.rice {
+		@apply relative w-full max-w-[1100px];
+	}
+	.nice-hover {
+		transition: transform 540ms cubic-bezier(0.1, -0.81, 0.31, 2);
+	}
+	.rice-bg {
+		@apply w-[calc(100%-24px)] pointer-events-none transition-[filter] duration-500   absolute left-3 brightness-150 rounded-3xl -z-10 saturate-[5] h-full blur-2xl -bottom-10 opacity-50;
+
+		.rice:hover & {
+			@apply brightness-200;
+		}
+	}
+</style>

src/routes/HallOfFameSlice.svelte

@@ -1,78 +1,56 @@
 <script lang="ts">
 	import { animateIn } from '$lib/Helper.mjs'
 	import Button from '$lib/components/Button.svelte'
+	import FameRicePreview from './FameRicePreview.svelte'
 </script>
 
 <section
 	class="w-full relative"
 	use:animateIn={{ fade: 0, slide: 24, duration: 1200, threshold: 0.1 }}
 >
-	<div class="text-center font-extrabold mb-3 text-slate-300">Memorials of the ricing legends</div>
+	<div class="absolute inset-0">
+		<div class="text-center font-extrabold mb-3 text-slate-300">
+			Memorials of the ricing legends
+		</div>
 		<h1 class="text-8xl font-bold text-center">Hall of Fame</h1>
+	</div>
 
 	<div
-		class="w-full flex relative flex-col gap-16 lg:gap-24 items-center pt-16 overflow-hidden px-16"
+		class="w-full flex relative flex-col gap-16 lg:gap-24 items-center justify-end pt-16 overflow-hidden px-16 [perspective:100px]"
 	>
-		<div class="rice" use:animateIn={{ fade: 0, slide: 24, duration: 1200, threshold: 0.4 }}>
+		<a class="absolute bottom-24 left-1/2 z-20 -translate-x-1/2" href="/hall-of-fame">
-			<img
-				src="/imgs/env_4 novelknock-10.png"
-				alt="Rice desktop"
-				class="w-full nice-hover rounded-xl overflow-hidden shadow-2xl hover:scale-[1.01]"
-			/>
-			<img
-				src="/imgs/env_4 novelknock-10.png"
-				alt="Rice desktop"
-				aria-hidden="true"
-				class="rice-bg"
-			/>
-		</div>
-		<div class="rice" use:animateIn={{ slide: 48, duration: 1400, threshold: 0.4 }}>
-			<img
-				src="/imgs/ricingcomp1/amadeus.png"
-				alt="Rice desktop"
-				class="w-full rounded-t-xl overflow-hidden nice-hover hover:scale-[1.005] shadow-2xl object-cover object-top h-[200px] sm:h-[250px] lg:h-[500px] ] bottom-rice"
-			/>
-			<img
-				src="/imgs/ricingcomp1/amadeus.png"
-				alt="Rice desktop"
-				aria-hidden="true"
-				class="rice-bg clop"
-			/>
-		</div>
-
-		<a class="absolute bottom-16 left-1/2 z-20 -translate-x-1/2" href="/hall-of-fame">
 			<Button size="lg" type="fancyOutline">Go to Hall of Fame</Button>
 		</a>
+
+		<FameRicePreview
+			createdBy={{ name: 'flicko', url: 'http://flicko.com' }}
+			image="/imgs/ricingcomp1/flicko.png"
+			containerClass="[translate:0px_0px_-100px] -mb-[30%] hover:[translate:0px_0px_-70px] hover:mb-[-15%] transition-all duration-500"
+			imageClass="[mask-image:linear-gradient(black_50%,transparent_95%)] "
+		/>
+		<FameRicePreview
+			createdBy={{ name: 'flicko', url: 'http://flicko.com' }}
+			image="/imgs/env_4 novelknock-10.png"
+			containerClass="[translate:0px_0px_-40px] -mb-[30%]"
+			imageClass="[mask-image:linear-gradient(black,transparent_95%)]"
+		/>
+		<FameRicePreview
+			createdBy={{ name: 'flicko', url: 'http://flicko.com' }}
+			image="/imgs/ricingcomp1/amadeus.png"
+			imageClass="rounded-none [mask-image:linear-gradient(black,transparent)] rounded-t-xl  h-[200px] sm:h-[250px] lg:h-[500px]"
+		/>
 	</div>
 
 	<div class="glow" />
 </section>
 
 <style lang="postcss">
-	.rice {
-		@apply relative w-full max-w-[1100px];
-	}
-	.nice-hover {
-		transition: transform 540ms cubic-bezier(0.1, -0.81, 0.31, 2);
-	}
-	.rice-bg {
-		@apply w-[calc(100%-24px)] pointer-events-none transition-[filter] duration-500   absolute left-3 brightness-150 rounded-3xl -z-10 saturate-[5] h-full blur-2xl -bottom-10 opacity-50;
-
-		.rice:hover & {
-			@apply brightness-200;
-		}
-	}
-
-	.bottom-rice {
-		mask-image: linear-gradient(black, transparent);
-	}
-
 	.glow {
 		@apply h-[200px] lg:h-[400px];
 		width: 100%;
 		/* min-width: 8800px; */
 		position: absolute;
-		opacity: 0.8;
+		opacity: 0.5;
 		bottom: 0;
 		left: 0;
 		right: 0;

src/routes/Hero.svelte

@@ -96,19 +96,6 @@
 		animate: title_effect 1s ease infinite alternate;
 	}
 
-	@keyframes title_effect {
-		0% {
-			transform: translateX(-99px);
-			opacity: 0;
-		}
-		50% {
-			transform: translateX(0px);
-		}
-		100% {
-			transform: translateX(9px);
-		}
-	}
-
 	@keyframes move {
 		0% {
 			transform: translate3d(