feat: add basic pages

next.config.js

@@ -4,4 +4,12 @@ const { i18n } = require("./next-i18next.config");
 module.exports = withTM({
 	i18n,
 	reactStrictMode: true,
+	webpack: config => {
+		config.module.rules.push({
+			test: /\.(glsl|vs|fs|vert|frag)$/,
+			exclude: /node_modules/,
+			use: ["raw-loader", "glslify-loader"],
+		});
+		return config;
+	},
 });

package.json

@@ -12,7 +12,7 @@
     "cypress:run": "yarn dlx cypress@9 run",
     "dev": "next dev",
     "eslint": "eslint '{**/*,*}.{js,ts,tsx}'",
-    "jest": "jest",
+    "jest": "jest --passWithNoTests",
     "jest:watch": "jest --watch",
     "lint": "yarn tsc:noEmit && yarn xo && yarn stylelint && next lint",
     "ncu": "yarn dlx npm-check-updates@11 -u --dep='prod,dev'",
@@ -45,10 +45,16 @@
     "@mui/icons-material": "5.8.0",
     "@mui/material": "5.8.0",
     "@mui/styles": "^5.8.0",
+    "@popmotion/easing": "^1.0.2",
+    "@react-spring/core": "^9.4.5",
+    "@react-spring/three": "^9.4.5",
     "@react-three/drei": "9.11.0",
     "@react-three/fiber": "8.0.17",
-    "next": "12.1.5",
+    "@react-three/postprocessing": "^2.3.2",
+    "leva": "^0.9.27",
+    "next": "12.1.7-canary.7",
     "next-i18next": "11.0.0",
+    "postprocessing": "^6.26.4",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "three": "0.140.2",
@@ -89,10 +95,13 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
+    "glslify-loader": "^2.0.0",
     "husky": "^8.0.1",
     "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "next-transpile-modules": "^9.0.0",
     "prettier": "^2.6.2",
+    "raw-loader": "^4.0.2",
     "stylelint": "^13.13.1",
     "stylelint-a11y": "^1.2.3",
     "stylelint-config-prettier": "^8.0.2",

src/ions/materials/metal.ts

@@ -0,0 +1,9 @@
+import { dark } from "@/ions/theme";
+import * as THREE from "three";
+
+export const metal = new THREE.MeshStandardMaterial({
+	color: dark.palette.primary.main,
+	metalness: 0.8,
+	roughness: 0.2,
+	side: THREE.DoubleSide,
+});

src/ions/shaders/particle.frag

@@ -0,0 +1,16 @@
+uniform float time;
+uniform float progress;
+uniform sampler2D texture1;
+uniform sampler2D texture2;
+varying vec2 vUv;
+varying vec3 vPosition;
+
+void main() {
+	vec4 t1 = texture2D(texture1, vUv);
+	vec4 t2 = texture2D(texture2, vUv);
+	vec4 finalTexture = mix(t1, t2, progress);
+	gl_FragColor = finalTexture;
+	if (gl_FragColor.r < 0.01 && gl_FragColor.g < 0.01 && gl_FragColor.b < 0.01) {
+		discard;
+	}
+}

src/ions/shaders/particle.vert

@@ -0,0 +1,133 @@
+uniform float time;
+uniform float distortion;
+uniform float particleSize;
+varying vec2 vUv;
+varying vec3 vPosition;
+uniform sampler2D texture1;
+uniform sampler2D texture2;
+
+// CURL NOISE
+
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0;  }
+
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0;  }
+
+// snoise.glsl
+vec4 permute(vec4 x) {  return mod(((x*34.0)+1.0)*x, 289.0);    }
+vec4 taylorInvSqrt(vec4 r) {    return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v){
+	const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
+	const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+	vec3 i  = floor(v + dot(v, C.yyy));
+	vec3 x0 = v - i + dot(i, C.xxx) ;
+
+	vec3 g = step(x0.yzx, x0.xyz);
+	vec3 l = 1.0 - g;
+	vec3 i1 = min(g.xyz, l.zxy);
+	vec3 i2 = max(g.xyz, l.zxy);
+
+	vec3 x1 = x0 - i1 + 1.0 * C.xxx;
+	vec3 x2 = x0 - i2 + 2.0 * C.xxx;
+	vec3 x3 = x0 - 1.0 + 3.0 * C.xxx;
+
+	i = mod(i, 289.0);
+	vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+	float n_ = 1.0/7.0;
+	vec3  ns = n_ * D.wyz - D.xzx;
+
+	vec4 j = p - 49.0 * floor(p * ns.z *ns.z);
+
+	vec4 x_ = floor(j * ns.z);
+	vec4 y_ = floor(j - 7.0 * x_);
+
+	vec4 x = x_ *ns.x + ns.yyyy;
+	vec4 y = y_ *ns.x + ns.yyyy;
+	vec4 h = 1.0 - abs(x) - abs(y);
+
+	vec4 b0 = vec4(x.xy, y.xy);
+	vec4 b1 = vec4(x.zw, y.zw);
+
+	vec4 s0 = floor(b0)*2.0 + 1.0;
+	vec4 s1 = floor(b1)*2.0 + 1.0;
+	vec4 sh = -step(h, vec4(0.0));
+
+	vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+	vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+
+	vec3 p0 = vec3(a0.xy,h.x);
+	vec3 p1 = vec3(a0.zw,h.y);
+	vec3 p2 = vec3(a1.xy,h.z);
+	vec3 p3 = vec3(a1.zw,h.w);
+
+	vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+	p0 *= norm.x;
+	p1 *= norm.y;
+	p2 *= norm.z;
+	p3 *= norm.w;
+
+	vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+	m = m * m;
+	return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
+}
+
+float snoise(float x, float y, float z){
+	return snoise(vec3(x, y, z));
+}
+
+vec3 snoiseVec3(vec3 x){
+
+	float s  = snoise(vec3(x));
+	float s1 = snoise(vec3(x.y - 19.1 , x.z + 33.4 , x.x + 47.2));
+	float s2 = snoise(vec3(x.z + 74.2 , x.x - 124.5 , x.y + 99.4));
+	vec3 c = vec3(s , s1 , s2);
+	return c;
+
+}
+
+vec3 curlNoise(vec3 p){
+
+	const float e = 0.1;
+	vec3 dx = vec3(e, 0.0 , 0.0);
+	vec3 dy = vec3(0.0 , e, 0.0);
+	vec3 dz = vec3(0.0 , 0.0 , e);
+
+	vec3 p_x0 = snoiseVec3(p - dx);
+	vec3 p_x1 = snoiseVec3(p + dx);
+	vec3 p_y0 = snoiseVec3(p - dy);
+	vec3 p_y1 = snoiseVec3(p + dy);
+	vec3 p_z0 = snoiseVec3(p - dz);
+	vec3 p_z1 = snoiseVec3(p + dz);
+
+	float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
+	float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
+	float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;
+
+	const float divisor = 1.0 / (2.0 * e);
+	return normalize(vec3(x , y , z) * divisor);
+
+}
+
+// MAIN
+
+void main() {
+	vUv = uv;
+
+	vec3 distortion1 = vec3(
+		position.x,
+		position.y,
+		(position.x + position.y) / 2.0
+	) * curlNoise(vec3(
+		position.x / 100.0 + time / 10.0,
+		position.y / 100.0 + time / 10.0,
+		(position.x + position.y) / 2.0
+	)) * distortion;
+	vec3 finalPosition = position + distortion1;
+
+	vPosition = position;
+	vec4 mvPosition =  modelViewMatrix * vec4(finalPosition, 1.0);
+	gl_PointSize = particleSize;
+	gl_Position = projectionMatrix * mvPosition;
+}

src/ions/store/index.ts

@@ -2,12 +2,23 @@ import { Except } from "type-fest";
 import create from "zustand";
 
 export interface StoreModel {
-	count: number;
+	animation: {
+		start: boolean;
+	};
+	page: number;
+	animating: boolean;
+	particleSize: number;
 	set(modal: Except<StoreModel, "set">): void;
 }
 
 export const useStore = create<StoreModel>(set => ({
-	count: 0,
+	animation: {
+		direction: 1,
+		start: true,
+	},
+	page: 0,
+	particleSize: 4,
+	animating: false,
 	set(partial) {
 		set(partial);
 	},

src/ions/theme/index.ts

@@ -13,7 +13,7 @@ export const dark = createTheme({
 			main: "#663399",
 		},
 		secondary: {
-			main: "#993366",
+			main: "#339999",
 		},
 	},
 	typography,
@@ -23,10 +23,10 @@ export const light = createTheme({
 	palette: {
 		mode: "light",
 		primary: {
-			main: "#663399",
+			main: "#993399",
 		},
 		secondary: {
-			main: "#993366",
+			main: "#339966",
 		},
 	},
 	typography,

src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import { cache } from "@/ions/configs/emotion";
+import useDarkMode from "@/ions/hooks/dark-mode";
 import { fontFaces, globalStyles } from "@/ions/styles";
 import { dark, light } from "@/ions/theme";
 import {
@@ -9,12 +10,16 @@ import CssBaseline from "@mui/material/CssBaseline";
 import { appWithTranslation } from "next-i18next";
 import Head from "next/head";
 import React, { useMemo } from "react";
-import useDarkMode from "@/ions/hooks/dark-mode";
 
-function App({ Component, pageProps }) {
+if (typeof window === "undefined") {
+	React.useLayoutEffect = () => {
+		/**/
+	};
+}
+
+function App({ Component, pageProps: { canvas, ...pageProps } }) {
 	const mode = useDarkMode();
 	const theme = useMemo(() => (mode ? dark : light), [mode]);
-
 	return (
 		<>
 			{fontFaces}