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

@@ -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,12 @@
     "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",
     "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.1 && gl_FragColor.g < 0.1 && gl_FragColor.b < 0.1) {
+	// 	discard;
+	// }
+}

src/ions/shaders/particle.vert

@@ -0,0 +1,132 @@
+uniform float time;
+uniform float distortion;
+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 = 2.0;
+	gl_Position = projectionMatrix * mvPosition;
+}

src/ions/store/index.ts

@@ -2,12 +2,10 @@ import { Except } from "type-fest";
 import create from "zustand";
 
 export interface StoreModel {
-	count: number;
 	set(modal: Except<StoreModel, "set">): void;
 }
 
 export const useStore = create<StoreModel>(set => ({
-	count: 0,
 	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/organisms/card/index.tsx

@@ -1,7 +1,7 @@
 import { pxToRem } from "@/ions/utils/unit";
-import Typography from "@mui/material/Typography";
 import MuiCard from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
 import React from "react";
 
 export default function Card({ children }) {

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}

src/templates/404.tsx

@@ -1,39 +1,31 @@
-import Typography from "@mui/material/Typography";
+import useDarkMode from "@/ions/hooks/dark-mode";
+import { metal } from "@/ions/materials/metal";
+import { dark, light } from "@/ions/theme";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
-import React, { Suspense, useMemo } from "react";
+import Typography from "@mui/material/Typography";
+import { Center, OrbitControls, Text3D } from "@react-three/drei";
 import { Canvas, useFrame } from "@react-three/fiber";
-import { Center, Float, Text3D } from "@react-three/drei";
+import React, { Suspense, useMemo } from "react";
 import * as THREE from "three";
-import { dark, light } from "@/ions/theme";
-import useDarkMode from "@/ions/hooks/dark-mode";
-
-const material = new THREE.MeshStandardMaterial({
-	color: dark.palette.primary.main,
-	metalness: 1,
-	roughness: 0.5,
-	side: THREE.DoubleSide,
-});
 
 function Scene() {
 	const mode = useDarkMode();
 	const theme = useMemo(() => (mode ? dark : light), [mode]);
 	useFrame(() => {
-		material.color = new THREE.Color(theme.palette.primary.main);
+		metal.color = new THREE.Color(theme.palette.primary.main);
 	});
 	return (
-		<group>
+		<>
 			<color attach="background" args={[theme.palette.background.default]} />
 			<Suspense fallback={null}>
 				<Center>
-					<Float floatIntensity={5} speed={2}>
-						<Text3D font="/fonts/fira_04.json" scale={2} material={material}>
-							404
-						</Text3D>
-					</Float>
+					<Text3D font="/fonts/fira_04.json" scale={2} material={metal}>
+						404
+					</Text3D>
 				</Center>
 			</Suspense>
-		</group>
+		</>
 	);
 }
 
@@ -43,15 +35,14 @@ export default function Template() {
 			<AppBar elevation={0} color="transparent">
 				<Toolbar sx={{ justifyContent: "center" }}>
 					<Typography component="h1" variant="h5">
-						Page not found
+						Warning: unknown universe
 					</Typography>
 				</Toolbar>
 			</AppBar>
-
 			<Canvas style={{ height: "100vh" }}>
-				<ambientLight intensity={2} />
-				<pointLight intensity={2} position={[0, 24, 4]} />
-				<directionalLight intensity={2} position={[0, 12, 24]} />
+				<ambientLight />
+				<OrbitControls />
+				<pointLight intensity={0.3} position={[0, 0, 10]} />
 				<Scene />
 			</Canvas>
 		</>