diff --git a/package.json b/package.json
index 2d8d8c6..7efa356 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc6932f..aa23a8e 100644
--- a/pnpm-lock.yaml
+++ b/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:
diff --git a/src/lib/Helper.mjs b/src/lib/Helper.mjs
index 7d50134..1d2f822 100644
--- a/src/lib/Helper.mjs
+++ b/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!!')
- node.style.opacity = '1'
- node.style.scale = '1 1'
- node.style.translate = '0 0'
+ effects.forEach(([effect]) => {
+ if (effect === 'slide') node.style.translate = '0 0'
+ else if (effect === 'fade') node.style.opacity = '1'
+ else if (effect === 'zoom') node.style.scale = '1 1'
+ })
}
return { destroy: observer.destroy }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c4dbf06..0536b58 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -22,7 +22,7 @@