├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .prettierrc.js ├── README.md ├── global.d.ts ├── next-env.d.ts ├── next.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── fonts │ ├── 1.woff2 │ ├── openSans400.woff │ └── openSans800.woff2 └── vercel.svg ├── src ├── assets │ └── tileImages │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 21.jpg │ │ ├── 22.jpg │ │ ├── 23.jpg │ │ ├── 24.jpg │ │ ├── 25.jpg │ │ ├── 26.jpg │ │ ├── 27.jpg │ │ ├── 28.jpg │ │ ├── 29.jpg │ │ ├── 3.jpg │ │ ├── 30.jpg │ │ ├── 31.jpg │ │ ├── 32.jpg │ │ ├── 33.jpg │ │ ├── 34.jpg │ │ ├── 35.jpg │ │ ├── 36.jpg │ │ ├── 37.jpg │ │ ├── 38.jpg │ │ ├── 39.jpg │ │ ├── 4.jpg │ │ ├── 40.jpg │ │ ├── 41.jpg │ │ ├── 42.jpg │ │ ├── 43.jpg │ │ ├── 44.jpg │ │ ├── 45.jpg │ │ ├── 46.jpg │ │ ├── 47.jpg │ │ ├── 48.jpg │ │ ├── 49.jpg │ │ ├── 5.jpg │ │ ├── 50.jpg │ │ ├── 51.jpg │ │ ├── 52.jpg │ │ ├── 53.jpg │ │ ├── 54.jpg │ │ ├── 55.jpg │ │ ├── 56.jpg │ │ ├── 57.jpg │ │ ├── 58.jpg │ │ ├── 59.jpg │ │ ├── 6.jpg │ │ ├── 60.jpg │ │ ├── 61.jpg │ │ ├── 62.jpg │ │ ├── 63.jpg │ │ ├── 64.jpg │ │ ├── 65.jpg │ │ ├── 66.jpg │ │ ├── 67.jpg │ │ ├── 68.jpg │ │ ├── 69.jpg │ │ ├── 7.jpg │ │ ├── 70.jpg │ │ ├── 71.jpg │ │ ├── 72.jpg │ │ ├── 8.jpg │ │ └── 9.jpg ├── components │ ├── Animations │ │ └── framerTransitions.ts │ ├── CodeViewer │ │ ├── CodeViewer.module.scss │ │ └── CodeViewer.tsx │ ├── Layout │ │ ├── Layout.module.scss │ │ └── Layout.tsx │ ├── LinkHandler │ │ └── LinkHandler.tsx │ ├── PreloadImage │ │ ├── PreloadImage.module.scss │ │ └── PreloadImage.tsx │ ├── ShaderTile │ │ ├── ShaderTile.module.scss │ │ └── ShaderTile.tsx │ └── TilesRenderer │ │ ├── TilesRenderer.module.scss │ │ └── TilesRenderer.tsx ├── containers │ ├── IndexPage │ │ ├── IndexPage.module.scss │ │ └── IndexPage.tsx │ └── Shaders │ │ ├── 1 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 2 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 3 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 4 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 5 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 6 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 7 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 8 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 9 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 10 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 11 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 12 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 13 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 14 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 15 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 16 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 17 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 18 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 19 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 20 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 21 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 22 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 23 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 24 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 25 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 26 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 27 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 28 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 29 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 30 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 31 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 32 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 33 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 34 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 35 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 36 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 37 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 38 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 39 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 40 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 41 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 42 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 43 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 44 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 45 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 46 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 47 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 48 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 49 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 50 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 51 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 52 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 53 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 54 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 55 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 56 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 57 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 58 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 59 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 60 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 61 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 62 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 63 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 64 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 65 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 66 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 67 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 68 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 69 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 70 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ ├── 71 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ └── 72 │ │ ├── data.ts │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── hooks │ ├── useElementSize.ts │ └── useMediaPreload.ts ├── pages │ ├── 404.tsx │ ├── _app.tsx │ ├── index.tsx │ └── shaders │ │ ├── 1.tsx │ │ ├── 10.tsx │ │ ├── 11.tsx │ │ ├── 12.tsx │ │ ├── 13.tsx │ │ ├── 14.tsx │ │ ├── 15.tsx │ │ ├── 16.tsx │ │ ├── 17.tsx │ │ ├── 18.tsx │ │ ├── 19.tsx │ │ ├── 2.tsx │ │ ├── 20.tsx │ │ ├── 21.tsx │ │ ├── 22.tsx │ │ ├── 23.tsx │ │ ├── 24.tsx │ │ ├── 25.tsx │ │ ├── 26.tsx │ │ ├── 27.tsx │ │ ├── 28.tsx │ │ ├── 29.tsx │ │ ├── 3.tsx │ │ ├── 30.tsx │ │ ├── 31.tsx │ │ ├── 32.tsx │ │ ├── 33.tsx │ │ ├── 34.tsx │ │ ├── 35.tsx │ │ ├── 36.tsx │ │ ├── 37.tsx │ │ ├── 38.tsx │ │ ├── 39.tsx │ │ ├── 4.tsx │ │ ├── 40.tsx │ │ ├── 41.tsx │ │ ├── 42.tsx │ │ ├── 43.tsx │ │ ├── 44.tsx │ │ ├── 45.tsx │ │ ├── 46.tsx │ │ ├── 47.tsx │ │ ├── 48.tsx │ │ ├── 49.tsx │ │ ├── 5.tsx │ │ ├── 50.tsx │ │ ├── 51.tsx │ │ ├── 52.tsx │ │ ├── 53.tsx │ │ ├── 54.tsx │ │ ├── 55.tsx │ │ ├── 56.tsx │ │ ├── 57.tsx │ │ ├── 58.tsx │ │ ├── 59.tsx │ │ ├── 6.tsx │ │ ├── 60.tsx │ │ ├── 61.tsx │ │ ├── 62.tsx │ │ ├── 63.tsx │ │ ├── 64.tsx │ │ ├── 65.tsx │ │ ├── 66.tsx │ │ ├── 67.tsx │ │ ├── 68.tsx │ │ ├── 69.tsx │ │ ├── 7.tsx │ │ ├── 70.tsx │ │ ├── 71.tsx │ │ ├── 72.tsx │ │ ├── 8.tsx │ │ └── 9.tsx ├── seo │ ├── GoogleAnalytics │ │ └── GoogleAnalytics.tsx │ └── Head │ │ └── Head.tsx ├── styles │ ├── base │ │ ├── fonts.scss │ │ ├── global.scss │ │ └── reset.scss │ ├── index.scss │ └── utils │ │ └── variables.scss └── utils │ ├── functions │ └── isTouchDevice.ts │ ├── globalState.ts │ ├── shaderPage │ ├── Coords2D.ts │ ├── Experience.ts │ ├── MouseMove.ts │ ├── ShaderPage.module.scss │ └── ShaderPage.tsx │ ├── sharedStyles.module.scss │ └── sharedTypes.ts └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "prettier", 5 | "next/core-web-vitals", 6 | "plugin:react-hooks/recommended" 7 | ], 8 | "plugins": ["prettier"], 9 | "rules": { 10 | "prettier/prettier": "error", 11 | "@typescript-eslint/no-unused-vars": "off", 12 | "react/react-in-jsx-scope": "off", 13 | "@next/next/no-document-import-in-page": "off", 14 | "@typescript-eslint/no-empty-interface": "off", 15 | "react/prop-types": 0 16 | }, 17 | "settings": { 18 | "react": { 19 | "version": "detect" 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ...require('./node_modules/gts/.prettierrc.json'), 3 | bracketSpacing: true, 4 | endOfLine: 'auto', 5 | printWidth: 100, 6 | }; 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Getting Started 2 | 3 | First install dependencies with: 4 | 5 | ```bash 6 | npm install 7 | # or 8 | yarn install 9 | ``` 10 | 11 | Then, run the development server: 12 | 13 | ```bash 14 | npm run dev 15 | # or 16 | yarn dev 17 | ``` 18 | 19 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 20 | -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.glsl' { 2 | const value: string; 3 | export default value; 4 | } 5 | 6 | declare module '*.glb' { 7 | const value: string; 8 | export default value; 9 | } 10 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | module.exports = { 3 | reactStrictMode: true, 4 | webpack: config => { 5 | config.module.rules.push({ 6 | test: /\.(glsl|vs|fs|vert|frag)$/, 7 | exclude: /node_modules/, 8 | use: ['raw-loader', 'glslify-loader'], 9 | }); 10 | 11 | config.module.rules.push({ 12 | test: /\.(glb|gltf)$/, 13 | use: { 14 | loader: 'file-loader', 15 | options: { 16 | publicPath: '/_next/static/images', 17 | outputPath: 'static/images/', 18 | }, 19 | }, 20 | }); 21 | 22 | return config; 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@tweenjs/tween.js": "^18.6.4", 13 | "clsx": "^1.1.1", 14 | "focus-visible": "^5.2.0", 15 | "fontfaceobserver": "^2.1.0", 16 | "framer-motion": "^6.2.3", 17 | "glsl-noise": "^0.0.0", 18 | "glslify-loader": "^2.0.0", 19 | "next": "12.0.7", 20 | "raw-loader": "^4.0.2", 21 | "react": "17.0.2", 22 | "react-dom": "17.0.2", 23 | "react-syntax-highlighter": "^15.4.5", 24 | "three": "^0.136.0", 25 | "three-stdlib": "^2.6.2", 26 | "troika-three-text": "^0.45.0" 27 | }, 28 | "devDependencies": { 29 | "@types/fontfaceobserver": "^2.1.0", 30 | "@types/lodash": "^4.14.178", 31 | "@types/node": "17.0.5", 32 | "@types/react": "17.0.38", 33 | "@types/react-syntax-highlighter": "^13.5.2", 34 | "@types/three": "^0.135.0", 35 | "eslint": "8.5.0", 36 | "eslint-config-next": "12.0.7", 37 | "eslint-plugin-react-hooks": "^4.3.0", 38 | "gts": "^3.1.0", 39 | "prettier": "^2.5.1", 40 | "sass": "^1.45.1", 41 | "typescript": "4.5.4" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/1.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/public/fonts/1.woff2 -------------------------------------------------------------------------------- /public/fonts/openSans400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/public/fonts/openSans400.woff -------------------------------------------------------------------------------- /public/fonts/openSans800.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/public/fonts/openSans800.woff2 -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/tileImages/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/1.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/10.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/11.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/12.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/13.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/14.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/15.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/16.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/17.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/18.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/19.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/2.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/20.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/21.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/22.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/23.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/24.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/25.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/26.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/27.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/28.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/29.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/3.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/30.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/31.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/32.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/33.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/34.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/35.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/36.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/36.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/37.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/37.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/38.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/38.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/39.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/39.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/4.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/40.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/40.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/41.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/41.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/42.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/42.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/43.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/43.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/44.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/45.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/45.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/46.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/46.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/47.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/47.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/48.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/48.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/49.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/49.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/5.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/50.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/51.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/51.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/52.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/52.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/53.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/53.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/54.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/54.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/55.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/55.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/56.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/56.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/57.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/57.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/58.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/58.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/59.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/59.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/6.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/60.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/60.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/61.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/61.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/62.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/62.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/63.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/63.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/64.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/64.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/65.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/65.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/66.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/66.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/67.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/67.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/68.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/68.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/69.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/69.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/7.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/70.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/70.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/71.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/71.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/72.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/72.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/8.jpg -------------------------------------------------------------------------------- /src/assets/tileImages/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michalzalobny/book-of-shaders-playground/bfac3532ac8ca1e082f04165e608cf4781cb7e64/src/assets/tileImages/9.jpg -------------------------------------------------------------------------------- /src/components/Animations/framerTransitions.ts: -------------------------------------------------------------------------------- 1 | import { Transition } from 'framer-motion'; 2 | 3 | export const tween: Transition = { 4 | type: 'tween', 5 | ease: 'easeInOut', 6 | duration: 0.4, 7 | }; 8 | 9 | export const springSlow: Transition = { 10 | type: 'spring', 11 | stiffness: 350, 12 | damping: 80, 13 | mass: 5, 14 | restDelta: 0.001, 15 | restSpeed: 0.001, 16 | }; 17 | 18 | export const springMedium: Transition = { 19 | type: 'spring', 20 | stiffness: 100, 21 | damping: 20, 22 | mass: 1, 23 | restDelta: 0.001, 24 | restSpeed: 0.001, 25 | }; 26 | 27 | export const springQuick: Transition = { 28 | type: 'spring', 29 | stiffness: 150, 30 | damping: 15, 31 | restDelta: 0.01, 32 | restSpeed: 0.01, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/CodeViewer/CodeViewer.module.scss: -------------------------------------------------------------------------------- 1 | .codeContainer { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | opacity: 1; 7 | 8 | &Hidden { 9 | pointer-events: none; 10 | user-select: none; 11 | } 12 | 13 | pre { 14 | overflow: auto; 15 | padding: 40px !important; 16 | position: relative; 17 | line-height: 1.5; 18 | font-size: 14px; 19 | background: transparent !important; 20 | max-height: 65vh; 21 | 22 | @media screen and (min-width: 767px) { 23 | max-height: 70vh; 24 | } 25 | } 26 | } 27 | 28 | .codeContainerWrapper { 29 | border-radius: 10px; 30 | background-color: rgba(0, 0, 0, 0.55); 31 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); 32 | transition: opacity 0.5s cubic-bezier(0.24, 0.05, 0.16, 0.97), 33 | transform 0.5s cubic-bezier(0.36, 0.02, 0.16, 0.97); 34 | 35 | transform: translateY(0); 36 | 37 | &Hidden { 38 | pointer-events: none; 39 | user-select: none; 40 | opacity: 0; 41 | transform: translateY(50px); 42 | } 43 | } 44 | 45 | .background { 46 | position: fixed; 47 | width: 100%; 48 | height: 100%; 49 | top: 0; 50 | left: 0; 51 | z-index: 15; 52 | background-color: rgba(0, 0, 0, 0.7); 53 | backdrop-filter: saturate(180%) blur(8px); 54 | 55 | pointer-events: none; 56 | user-select: none; 57 | 58 | &Opened { 59 | pointer-events: initial; 60 | user-select: initial; 61 | } 62 | } 63 | 64 | .codeBtnWrapper { 65 | cursor: pointer; 66 | position: fixed; 67 | z-index: 5; 68 | bottom: 20px; 69 | right: 40px; 70 | display: flex; 71 | mix-blend-mode: difference; 72 | 73 | @media screen and (min-width: 767px) { 74 | right: initial; 75 | left: 50%; 76 | transform: translateX(-50%); 77 | } 78 | } 79 | 80 | .buttonsWrapper { 81 | display: flex; 82 | position: absolute; 83 | z-index: 1; 84 | bottom: 0; 85 | left: 0; 86 | margin-bottom: 25px; 87 | 88 | &Spacer { 89 | width: 20px; 90 | } 91 | } 92 | 93 | .containersWrapper { 94 | z-index: 20; 95 | width: 85%; 96 | position: fixed; 97 | top: 110px; 98 | left: 50%; 99 | transform: translateX(-50%); 100 | opacity: 1; 101 | 102 | pointer-events: none; 103 | user-select: none; 104 | 105 | &Opened { 106 | pointer-events: initial; 107 | user-select: initial; 108 | } 109 | 110 | @media screen and (min-width: 767px) { 111 | top: 120px; 112 | width: 100rem; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/components/Layout/Layout.module.scss: -------------------------------------------------------------------------------- 1 | .readyWrapper { 2 | position: fixed; 3 | z-index: 50; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | background-color: var(--white); 9 | opacity: 1; 10 | transition: opacity 0.9s; 11 | transition-delay: 0.3s; 12 | } 13 | 14 | //Check if body has given class 15 | :global(body.isReady) .readyWrapper { 16 | opacity: 0; 17 | user-select: none; 18 | pointer-events: none; 19 | } 20 | 21 | .codeWrapper { 22 | position: fixed; 23 | z-index: 35; 24 | top: 20px; 25 | right: 40px; 26 | display: flex; 27 | mix-blend-mode: difference; 28 | } 29 | 30 | .authorWrapper { 31 | display: none; 32 | 33 | @media screen and (min-width: 767px) { 34 | display: initial; 35 | position: fixed; 36 | z-index: 5; 37 | bottom: 20px; 38 | right: 40px; 39 | display: flex; 40 | mix-blend-mode: difference; 41 | } 42 | } 43 | 44 | .contactSpacer { 45 | width: 8px; 46 | } 47 | 48 | .appBackground { 49 | position: fixed; 50 | z-index: -1; 51 | top: 0; 52 | left: 0; 53 | width: 100%; 54 | height: 100%; 55 | background-color: var(--white); 56 | user-select: none; 57 | pointer-events: none; 58 | } 59 | -------------------------------------------------------------------------------- /src/components/Layout/Layout.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import clsx from 'clsx'; 3 | 4 | import { LinkHandler } from 'components/LinkHandler/LinkHandler'; 5 | import { useRouter } from 'next/router'; 6 | import sharedStyles from 'utils/sharedStyles.module.scss'; 7 | 8 | import styles from './Layout.module.scss'; 9 | 10 | interface Props { 11 | isReady: boolean; 12 | children: React.ReactChild; 13 | } 14 | 15 | export const Layout = (props: Props) => { 16 | const { children, isReady } = props; 17 | 18 | const router = useRouter(); 19 | 20 | useEffect(() => { 21 | if (isReady && !document.body.classList.contains('isReady')) { 22 | document.body.classList.add('isReady'); 23 | } 24 | 25 | return () => { 26 | document.body.classList.remove('isReady'); 27 | }; 28 | }, [isReady]); 29 | 30 | return ( 31 | <> 32 |
33 |
34 |
35 | Shaders Playground by 36 | 37 | 38 | 41 | Michal Zalobny 42 | 43 | 44 |
45 | 46 | {router.pathname === '/' && ( 47 |
48 | 52 | GitHub Repo 53 | 54 |
55 | )} 56 | {children} 57 | 58 | ); 59 | }; 60 | -------------------------------------------------------------------------------- /src/components/LinkHandler/LinkHandler.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Link from 'next/link'; 3 | 4 | interface Props { 5 | elHref?: string; 6 | isExternal?: boolean; 7 | onClickFn?: () => void; 8 | children: React.ReactNode; 9 | } 10 | 11 | export const LinkHandler = (props: Props) => { 12 | const { elHref, children, isExternal, onClickFn } = props; 13 | 14 | return ( 15 | <> 16 | {isExternal ? ( 17 | 18 | {children} 19 | 20 | ) : onClickFn ? ( 21 | 24 | ) : ( 25 | elHref && ( 26 | 27 | {children} 28 | 29 | ) 30 | )} 31 | 32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/PreloadImage/PreloadImage.module.scss: -------------------------------------------------------------------------------- 1 | .image { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | object-fit: cover; 8 | opacity: 0; 9 | transition: opacity 0.45s; 10 | user-select: none; 11 | pointer-events: none; 12 | 13 | &Loaded { 14 | opacity: 1; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/PreloadImage/PreloadImage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import React from 'react'; 3 | import clsx from 'clsx'; 4 | 5 | import { useMediaPreload } from 'hooks/useMediaPreload'; 6 | 7 | import styles from './PreloadImage.module.scss'; 8 | 9 | interface Props { 10 | imageSrc: string; 11 | alt: string; 12 | } 13 | 14 | export const PreloadImage = (props: Props) => { 15 | const { alt, imageSrc } = props; 16 | 17 | const { isLoaded } = useMediaPreload({ isImage: true, mediaSrc: imageSrc }); 18 | 19 | return ( 20 | <> 21 | {alt} 26 | 27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /src/components/ShaderTile/ShaderTile.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | 4 | import { LinkHandler } from 'components/LinkHandler/LinkHandler'; 5 | import { PreloadImage } from 'components/PreloadImage/PreloadImage'; 6 | 7 | import styles from './ShaderTile.module.scss'; 8 | 9 | interface Props { 10 | imageSrc: string; 11 | number: string; 12 | elHref: string; 13 | isPro?: boolean; 14 | isSpatial?: boolean; 15 | isMotion?: boolean; 16 | } 17 | 18 | export const ShaderTile = (props: Props) => { 19 | const { isSpatial, isMotion, isPro, elHref, imageSrc, number } = props; 20 | 21 | return ( 22 | <> 23 | 24 |
25 |
26 | {isSpatial &&
3D
} 27 | {isPro &&
Pro
} 28 | 29 | {isMotion &&
Motion
} 30 |
31 |
32 | {number} 33 |
34 |
35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 |
43 | 44 | 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /src/components/TilesRenderer/TilesRenderer.module.scss: -------------------------------------------------------------------------------- 1 | .tilesWrapper { 2 | margin-top: 4rem; 3 | display: grid; 4 | grid-template-columns: 1fr 1fr; 5 | grid-gap: 2rem; 6 | margin-bottom: 8rem; 7 | 8 | @media screen and (min-width: 767px) { 9 | grid-gap: 2rem; 10 | grid-template-columns: 1fr 1fr 1fr; 11 | margin-bottom: 15rem; 12 | } 13 | 14 | @media screen and (min-width: 1024px) { 15 | grid-gap: 4rem; 16 | grid-template-columns: 1fr 1fr 1fr 1fr; 17 | } 18 | } 19 | 20 | .filterText { 21 | display: none; 22 | 23 | @media screen and (min-width: 767px) { 24 | display: initial; 25 | } 26 | } 27 | 28 | .filterWrapper { 29 | margin-top: 2rem; 30 | display: flex; 31 | align-items: center; 32 | } 33 | 34 | .filterBtn { 35 | padding: 6px 18px; 36 | cursor: pointer; 37 | 38 | &:not(:first-child) { 39 | margin-left: 10px; 40 | } 41 | } 42 | 43 | .floatingBorder { 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | height: 100%; 48 | width: 90px; 49 | border: 2px solid var(--black); 50 | border-radius: 15px; 51 | user-select: none; 52 | pointer-events: none; 53 | transition: width 0.75s cubic-bezier(0.64, 0.02, 0.16, 0.97), 54 | transform 0.75s cubic-bezier(0.64, 0.02, 0.16, 0.97); 55 | } 56 | 57 | .buttonsWrapper { 58 | display: flex; 59 | align-items: center; 60 | position: relative; 61 | 62 | @media screen and (min-width: 767px) { 63 | margin-left: 10px; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/containers/IndexPage/IndexPage.module.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | width: 75%; 3 | margin: 0 auto; 4 | 5 | @media screen and (min-width: 767px) { 6 | width: 100rem; 7 | } 8 | } 9 | 10 | .title { 11 | font-weight: 800; 12 | font-size: 3.5rem; 13 | color: var(--black); 14 | margin-right: 30px; 15 | } 16 | 17 | .text { 18 | font-size: 13px; 19 | color: var(--black); 20 | white-space: nowrap; 21 | margin-right: 10px; 22 | } 23 | 24 | .titleWrapper { 25 | display: flex; 26 | align-items: center; 27 | flex-wrap: wrap; 28 | } 29 | 30 | .bookInfoWrapper { 31 | display: flex; 32 | align-items: center; 33 | margin-top: 2.5rem; 34 | 35 | @media screen and (min-width: 767px) { 36 | margin-top: 0; 37 | } 38 | } 39 | 40 | .header { 41 | margin-top: 8rem; 42 | display: flex; 43 | flex-direction: column; 44 | 45 | @media screen and (min-width: 767px) { 46 | margin-top: 15rem; 47 | } 48 | } 49 | 50 | .contactWrapper { 51 | display: flex; 52 | align-items: center; 53 | margin-top: 2rem; 54 | } 55 | 56 | .spacer { 57 | margin: 0 8px; 58 | &:before { 59 | content: '/'; 60 | font-size: 15px; 61 | color: var(--black); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/containers/IndexPage/IndexPage.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import clsx from 'clsx'; 3 | 4 | import { Head } from 'seo/Head/Head'; 5 | import { LinkHandler } from 'components/LinkHandler/LinkHandler'; 6 | import { TilesRenderer } from 'components/TilesRenderer/TilesRenderer'; 7 | import sharedStyles from 'utils/sharedStyles.module.scss'; 8 | import { globalState } from 'utils/globalState'; 9 | 10 | import styles from './IndexPage.module.scss'; 11 | 12 | export default function IndexPage() { 13 | //Marks that the user has visited landing, and can use the back button on the shader subpage 14 | useEffect(() => { 15 | if (globalState.hasVisitedLanding) return; 16 | globalState.hasVisitedLanding = true; 17 | }, []); 18 | 19 | return ( 20 | <> 21 | 22 |
23 |
24 |
25 |

Shaders Playground

26 |
27 |

based on

28 | 29 | 36 | The Book Of Shaders 37 | 38 | 39 |
40 |
41 |
42 | 43 | 50 | Michal Zalobny 51 | 52 | 53 | 54 | 55 | 63 | michalzalobny 64 | 65 | 66 |
67 |
68 | 69 |
70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /src/containers/Shaders/1/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/1/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | 10 | float getStartXValue(){ 11 | return (uCanvasRes.x - uPlaneRes.x) * 0.5 * uPixelRatio; 12 | } 13 | 14 | float getStartYValue(){ 15 | return (uCanvasRes.y - uPlaneRes.y) * 0.5 * uPixelRatio; 16 | } 17 | 18 | 19 | void main() 20 | { 21 | vec2 st = gl_FragCoord.xy; 22 | gl_FragColor = vec4((st.x - getStartXValue()) / uPlaneRes.x , (st.y - getStartYValue()) / uPlaneRes.y, 0.0, 1.0); 23 | } -------------------------------------------------------------------------------- /src/containers/Shaders/1/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/10/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/10/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.x - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec2 st = vUv; 21 | 22 | //Bottom left 23 | vec2 bl = step(vec2(0.1), st); 24 | float pct = bl.x * bl.y; 25 | 26 | //Top right 27 | vec2 tr = step(vec2(0.1), 1.-st); 28 | pct *= tr.x * tr.y; 29 | 30 | vec3 color = vec3(pct); 31 | 32 | gl_FragColor = vec4(color, 1.0); 33 | } 34 | 35 | //Same but using floor : 36 | //Bottom left 37 | // float b = floor(st.y * 10.); 38 | // float l = floor(st.x * 10.); 39 | // float pct = b * l; 40 | 41 | // //Top right 42 | // float t = floor((1. - st.y) * 10.); 43 | // float r = floor((1. - st.x) * 10.); 44 | // pct *= t*r; -------------------------------------------------------------------------------- /src/containers/Shaders/10/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/11/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/11/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.x - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec2 st = vUv; 21 | 22 | //Bottom left 23 | float b = smoothstep(0., 0.1, st.y); 24 | float l = smoothstep(0., 0.1, st.x); 25 | float pct = b * l; 26 | 27 | //Top right 28 | float t = smoothstep(1., .9, st.y); 29 | float r = smoothstep(1., .9, st.x); 30 | pct *= t*r; 31 | 32 | vec3 color = vec3(pct); 33 | 34 | gl_FragColor = vec4(color, 1.0); 35 | } -------------------------------------------------------------------------------- /src/containers/Shaders/11/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/12/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/12/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 cRed = vec3(169. / 255., 33. / 255., 33. / 255.); 12 | vec3 cYellow = vec3(252. / 255., 195. / 255., 40. / 255.); 13 | vec3 cBlue = vec3(2. / 255., 96. / 255., 157. / 255.); 14 | vec3 cBackground = vec3(247. / 255., 240. / 255., 222. / 255.); 15 | vec3 cBlack = vec3(0., 0., 0.); 16 | 17 | float square(vec2 st, float width, float offsetX, float offsetY){ 18 | st.x -=0.5 - offsetX; 19 | st.y -=0.5 - offsetY; 20 | float lineX = abs(st.x * 2.); 21 | float lineY = abs(st.y * 2.); 22 | float smoothSquare = max(lineX,lineY); 23 | return (1.0 - step(width , smoothSquare)); 24 | } 25 | 26 | 27 | float squareStroke(vec2 st, float width , float offsetX, float offsetY, float stroke){ 28 | float squareBig = square(st, width, offsetX, offsetY); 29 | float squareSmall = square(st, width - 2. * stroke, offsetX, offsetY); 30 | return squareBig - squareSmall; 31 | 32 | //Alternative function for strokes: 33 | // float strength = step(width / 2. - stroke, max(abs(st.x - 0.5 + offsetX), abs(st.y - 0.5 + offsetY))); 34 | // return strength *= 1.0 - step(width / 2., max(abs(st.x - 0.5 + offsetX), abs(st.y - 0.5 + offsetY))); 35 | } 36 | 37 | void main() 38 | { 39 | vec2 st = vUv; 40 | 41 | float redSquare = square(st, 0.4, 0.45, -0.31); 42 | float yellowSquare = square(st, 0.4, -0.52, -0.31); 43 | float blueSquare = square(st, 0.5, -0.3, 0.62); 44 | 45 | float squareStroke1 = squareStroke(st, 0.4, 0.43, -0.3, 0.025); 46 | float squareStroke2 = squareStroke(st, 0.4, -0.5, -0.305, 0.025); 47 | float squareStroke3 = squareStroke(st, 0.6, -0.35, 0.65, 0.025); 48 | float squareStroke4 = squareStroke(st, 1.1, 0., -0.65, 0.025); 49 | float squareStroke5 = squareStroke(st, 1.1, 0., -0.85, 0.025); 50 | float squareStroke6 = squareStroke(st, 1.1, -0.295, -0., 0.025); 51 | 52 | float strokes = squareStroke1 + squareStroke2 + squareStroke3 + squareStroke4 + squareStroke5 + squareStroke6; 53 | 54 | float squares = redSquare + yellowSquare + blueSquare; 55 | vec3 background = (1. - squares) * cBackground; 56 | 57 | vec3 color = vec3(redSquare * cRed + yellowSquare * cYellow + blueSquare * cBlue) + background - strokes; 58 | 59 | gl_FragColor = vec4(color, 1.0); 60 | } -------------------------------------------------------------------------------- /src/containers/Shaders/12/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/13/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/13/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | 12 | void main() 13 | { 14 | float verticalP = floor(vUv.x * 10.) * 0.1 + 0.1; 15 | float horizontalP = floor(vUv.y * 10.) * 0.1 + 0.1; 16 | 17 | float color = horizontalP * verticalP; 18 | 19 | gl_FragColor = vec4(vec3(color), 1.0); 20 | } -------------------------------------------------------------------------------- /src/containers/Shaders/13/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/14/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/14/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | void main() 17 | { 18 | float verticalP = floor(vUv.x * 10.) * 0.1 + 0.1; 19 | float horizontalP = floor(vUv.y * 10.) * 0.1 + 0.1; 20 | vec2 gridUv = vec2(verticalP, horizontalP); 21 | 22 | float color = random(gridUv); 23 | 24 | gl_FragColor = vec4(vec3(color), 1.0); 25 | } -------------------------------------------------------------------------------- /src/containers/Shaders/14/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/15/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/15/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | void main() 17 | { 18 | float verticalP = floor(vUv.x * 10.) * 0.1 + 0.1; 19 | float horizontalP = floor((vUv.y + vUv.x * 0.5) * 10.) * 0.1 + 0.1; 20 | vec2 gridUv = vec2(verticalP, horizontalP); 21 | 22 | float color = random(gridUv); 23 | 24 | gl_FragColor = vec4(vec3(color), 1.0); 25 | } -------------------------------------------------------------------------------- /src/containers/Shaders/15/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/16/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/16/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | void main() 17 | { 18 | float r = (distance(vUv, vec2(0.5))); 19 | //Or 20 | r = length(vUv - 0.5); 21 | 22 | float color = max(min(0.025 / r, 1.), 0.); 23 | 24 | gl_FragColor = vec4(vec3(color), 1.0); 25 | } -------------------------------------------------------------------------------- /src/containers/Shaders/16/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/17/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/17/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | void main() 17 | { 18 | float r = (distance( vec2(vUv.x, (vUv.y -0.5) * 6.0 + 0.5), vec2(0.5))); 19 | 20 | float color = max(min(0.15 / r, 1.), 0.); 21 | 22 | gl_FragColor = vec4(vec3(color), 1.0); 23 | } -------------------------------------------------------------------------------- /src/containers/Shaders/17/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/18/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/18/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | void main() 17 | { 18 | float color = 1.- (abs(length(vUv - 0.5) - 0.2) * 10.0); 19 | 20 | //Same but squshed 21 | // float color = 1.- (abs(distance(vec2(vUv.x, (vUv.y - 0.5) * 4. + 0.5), vec2(0.5)) - 0.2) * 10.0); 22 | 23 | color = max(min(color, 1.0), 0.0); 24 | 25 | gl_FragColor = vec4(vec3(color), 1.0); 26 | } -------------------------------------------------------------------------------- /src/containers/Shaders/18/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/19/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/19/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | void main() 17 | { 18 | vec2 mouseNormalized; 19 | mouseNormalized.x = (uMouse.x - (uCanvasRes.x - uPlaneRes.x) * 0.5) / uPlaneRes.x; 20 | mouseNormalized.y = ((uCanvasRes.y - uMouse.y) - (uCanvasRes.y - uPlaneRes.y) * 0.5) / uPlaneRes.y; 21 | 22 | float change = (sin(uTime * 0.6) + 1.) / 2.; 23 | float angle = atan(vUv.x - mouseNormalized.x, vUv.y - mouseNormalized.y); //The values of atan(x,y) go from -PI to PI 24 | angle /= PI * 2.0 * change; 25 | angle += 0.5; 26 | float strength = angle; 27 | 28 | strength = step(0.5,mod(strength * 20.* change , 1.)); 29 | 30 | //similar result: 31 | //float strength = sin(angle * 100.0); 32 | 33 | gl_FragColor = vec4(vec3(strength), 1.0); 34 | } -------------------------------------------------------------------------------- /src/containers/Shaders/19/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/2/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/2/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | 10 | void main() 11 | { 12 | vec2 st = uMouse.xy; 13 | gl_FragColor = vec4(st.x/uCanvasRes.x ,0., 0.0, 1.0); 14 | } -------------------------------------------------------------------------------- /src/containers/Shaders/2/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/20/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/20/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | void main() 17 | { 18 | //The atan values go from -PI to PI so we divide it by 2 PI and add +0.5 to make it go from 0 to 1 19 | float angle = atan(vUv.x - 0.5, vUv.y - 0.5) / (PI * 2.0) + 0.5; 20 | float radius = 0.25 + sin(angle * 100.0) * 0.02; 21 | float strength = 1.0 - step(0.01, abs(distance(vUv, vec2(0.5)) - radius)); 22 | 23 | gl_FragColor = vec4(vec3(strength), 1.0); 24 | } -------------------------------------------------------------------------------- /src/containers/Shaders/20/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/21/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/21/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | 12 | 13 | 14 | void main() 15 | { 16 | vec2 st = vUv; 17 | //Re-map vUv, so its 0 at the center and 1 or -1 on the edges 18 | st = st * 2. -1.; 19 | 20 | float d = length( abs(st) - 0.5 ); 21 | //Same d: 22 | // d = distance( abs(st) - 0.5, vec2(0.0) ); 23 | 24 | //returns the fractional part of x. This is calculated as x - floor(x) 25 | float dField = fract(d*10.0); 26 | 27 | gl_FragColor = vec4(vec3(dField), 1.0); 28 | } -------------------------------------------------------------------------------- /src/containers/Shaders/21/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/22/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/22/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | 12 | 13 | 14 | void main() 15 | { 16 | float change = (sin(uTime *2.) + 1.) / 2.; 17 | vec2 st = vUv; 18 | //Re-map vUv, so its 0 at the center and 1 or -1 on the edges 19 | st = st * 2. -1.; 20 | 21 | float d = length( max(abs(st) - 0.5* change , 0.) ); 22 | 23 | //returns the fractional part of x. This is calculated as x - floor(x) 24 | float dField = step(0.5,fract(d*10.0 * change)); 25 | 26 | gl_FragColor = vec4(vec3(dField), 1.0); 27 | } -------------------------------------------------------------------------------- /src/containers/Shaders/22/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/23/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/23/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | 12 | 13 | 14 | void main() 15 | { 16 | float change = (sin(uTime *2.) + 1.) / 2.; 17 | change = smoothstep( 0., 1., change); 18 | change *= change; 19 | 20 | vec2 st = vUv; 21 | 22 | // drawing shapes using polar coordinates 23 | vec3 color = vec3(0.0); 24 | vec2 pos = st - vec2(0.5 ); 25 | 26 | float r = length(pos)*2.0; 27 | float a = atan(pos.y,pos.x); 28 | 29 | float f = smoothstep(-.5,1., cos(a*10.))*0.2+0.5; 30 | 31 | color = vec3( 1.-smoothstep(f,f,r) ); 32 | 33 | gl_FragColor = vec4(vec3(color), 1.0); 34 | } -------------------------------------------------------------------------------- /src/containers/Shaders/23/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/24/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/24/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | 12 | 13 | 14 | void main() 15 | { 16 | float change = (sin(uTime *2.) + 1.) / 2.; 17 | change = smoothstep( 0., 1., change); 18 | change *= change; 19 | 20 | vec2 st = vUv; 21 | 22 | vec3 color = vec3(0.0); 23 | float d = 0.0; 24 | 25 | // Remap the space to -1. to 1. 26 | st = st *2.-1.; 27 | 28 | // Number of sides of your shape 29 | int N = 3; 30 | 31 | // Angle and radius from the current pixel 32 | float a = atan(st.x,st.y)+ PI * change; //PI controls the rotation of shape 33 | float r = 2. * PI/float(N); 34 | 35 | // Shaping function that modulate the distance 36 | d = cos(floor(.5+a/r)*r-a)*length(st); 37 | 38 | color = vec3(1.0-smoothstep(.4,.41,d)); 39 | // color = vec3(d); 40 | 41 | gl_FragColor = vec4(color,1.0); 42 | } -------------------------------------------------------------------------------- /src/containers/Shaders/24/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/25/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/25/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | 12 | mat2 rotate2d(float _angle){ 13 | return mat2(cos(_angle),-sin(_angle), 14 | sin(_angle),cos(_angle)); 15 | } 16 | 17 | float box(in vec2 _st, in vec2 _size){ 18 | _size = vec2(0.5) - _size*0.5; 19 | vec2 uv = smoothstep(_size, 20 | _size+vec2(0.001), 21 | _st); 22 | uv *= smoothstep(_size, 23 | _size+vec2(0.001), 24 | vec2(1.0)-_st); 25 | return uv.x*uv.y; 26 | } 27 | 28 | float cross(in vec2 _st, float _size){ 29 | return box(_st, vec2(_size,_size/4.)) + 30 | box(_st, vec2(_size/4.,_size)); 31 | } 32 | 33 | mat2 scale(vec2 _scale){ 34 | return mat2(_scale.x,0.0, 35 | 0.0,_scale.y); 36 | } 37 | 38 | 39 | void main() 40 | { 41 | float change = (sin(uTime *PI) ); 42 | 43 | vec2 st = vUv; 44 | vec3 color = vec3(0.0); 45 | 46 | 47 | // move space from the center to the vec2(0.0) 48 | st -= vec2(0.5); 49 | st = rotate2d( uTime * -2. ) * st; 50 | st = scale( vec2(sin(uTime)+1.0) ) * st; 51 | 52 | //Reset the space to the default value after all transformations 53 | st += vec2(0.5); 54 | 55 | // Show the coordinates of the space on the background 56 | color = vec3(st.x,st.y,0.0); 57 | 58 | // Add the shape on the foreground 59 | color += vec3(cross(st,0.2)); 60 | 61 | 62 | gl_FragColor = vec4(color,1.0); 63 | } -------------------------------------------------------------------------------- /src/containers/Shaders/25/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/26/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/26/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/27/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/27/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | //The way of drawing a circle from the book of shaders (two options) 12 | // float circle( vec2 st, float radius){ 13 | // vec2 stC = st - vec2(0.5); 14 | // return step(radius, dot(stC,stC) * 4.); 15 | // return smoothstep(radius-(radius*0.01), 16 | // radius+(radius*0.01), 17 | // dot(stC,stC)*4.0); 18 | // } 19 | 20 | //The most accurate way of drawing a circle 21 | float circle( vec2 st, float radius){ 22 | vec2 stC = st - vec2(0.5); 23 | return 1. - step(radius , length(stC)); 24 | } 25 | 26 | void main() 27 | { 28 | vec2 st = vUv; 29 | vec3 color; 30 | st*= 5.0 ; 31 | st = fract(st); 32 | float c1 = circle(st, 0.2); 33 | color = vec3(c1); 34 | gl_FragColor = vec4(color, 1.0); 35 | } -------------------------------------------------------------------------------- /src/containers/Shaders/27/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/28/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/28/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Shader code inspiration from: https://www.shadertoy.com/view/ltBXRc (Created by phil) 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | 13 | mat2 rotate2d(float angle){ 14 | return mat2(cos(angle),-sin(angle), 15 | sin(angle),cos(angle)); 16 | } 17 | 18 | float variation(vec2 v1, vec2 v2, float strength, float speed) { 19 | return sin( 20 | dot(normalize(v1), normalize(v2)) * strength + uTime * speed 21 | ) / 100.0; 22 | } 23 | 24 | vec3 paintCircle (vec2 uv, vec2 center, float rad, float width) { 25 | 26 | vec2 diff = center-uv; 27 | float len = length(diff); 28 | 29 | len += variation(diff, vec2(0.0, 1.0), 5.0, 2.0); 30 | len -= variation(diff, vec2(1.0, 0.0), 5.0, 2.0); 31 | 32 | float circle = smoothstep(rad-width, rad, len) - smoothstep(rad, rad+width, len); 33 | return vec3(circle); 34 | } 35 | 36 | void main() 37 | { 38 | vec3 color; 39 | float radius = 0.25; 40 | vec2 center = vec2(0.5); 41 | 42 | //paint color circle 43 | color = paintCircle(vUv, center, radius, 0.02); 44 | 45 | //color with gradient 46 | vec2 v = rotate2d(uTime) * vUv; 47 | color *= vec3(v.x, v.y, 1.2-v.y*v.x); 48 | 49 | //paint white circle 50 | color += paintCircle(vUv, center, radius, 0.01); 51 | gl_FragColor = vec4(color, 1.0); 52 | } -------------------------------------------------------------------------------- /src/containers/Shaders/28/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/29/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/29/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | 12 | vec2 rotate2D(vec2 _st, float _angle){ 13 | _st -= 0.5; 14 | _st = mat2(cos(_angle),-sin(_angle), 15 | sin(_angle),cos(_angle)) * _st; 16 | _st += 0.5; 17 | return _st; 18 | } 19 | 20 | vec2 tile(vec2 _st, float _zoom){ 21 | _st *= _zoom; 22 | return fract(_st); 23 | } 24 | 25 | float box(vec2 st, vec2 center, float width, float smoothEdges){ 26 | vec2 stCenter = st - center; 27 | //Converts 1 width to a width of the whole st 28 | width *= 0.5; 29 | float xEdges = smoothstep(-width, -(width-smoothEdges) ,stCenter.x) - smoothstep(width-smoothEdges, width ,stCenter.x); 30 | float yEdges = smoothstep(-width, -(width-smoothEdges) ,stCenter.y) - smoothstep(width-smoothEdges, width ,stCenter.y); 31 | return xEdges * yEdges; 32 | } 33 | 34 | void main() 35 | { 36 | // Divide the space in 4 37 | vec2 st = tile(vUv, 4.0); 38 | 39 | // Use a matrix to rotate the space 45 degrees 40 | st = rotate2D(st, PI * 0.25 ); 41 | 42 | float color = box(st, vec2(0.5), 0.71, 0.01); 43 | gl_FragColor = vec4(vec3(color), 1.0); 44 | } -------------------------------------------------------------------------------- /src/containers/Shaders/29/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/3/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/3/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | //mix() used for linear interpolation from value a to b using the function : a(1-x) + xb 10 | 11 | float plot(vec2 st) { 12 | return smoothstep(0.02, 0.0, abs(st.y - st.x)); //Used to turn elements on or off => goes from 0 to 1 smoothly in the range of the first and second argument 13 | } 14 | 15 | void main() 16 | { 17 | vec2 st = vUv; 18 | st.x -= 0.5; 19 | float fork = smoothstep(0.6, 0.8 ,st.y); 20 | vec3 col = vec3(smoothstep(0.03 * (1.-fork * 0.8), 0., abs(abs(st.x)-0.05 * fork))); 21 | gl_FragColor = vec4(col, 1.0); 22 | } -------------------------------------------------------------------------------- /src/containers/Shaders/3/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/30/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/30/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | 12 | vec2 rotate2D(vec2 _st, float _angle){ 13 | _st -= 0.5; 14 | _st = mat2(cos(_angle),-sin(_angle), 15 | sin(_angle),cos(_angle)) * _st; 16 | _st += 0.5; 17 | return _st; 18 | } 19 | 20 | vec2 brick(vec2 st, float zoom, float speed){ 21 | st *= zoom; 22 | 23 | //Offset element on even rows (its like using the ternary operator : mod(x, 2.0) < 1.0 ? 0.0 : 1.0;) 24 | st.x += step(1.0, mod(st.y,2.0)) * 0.5; 25 | 26 | return fract(st); 27 | } 28 | 29 | float box(vec2 st, vec2 center, float width, float smoothEdges){ 30 | vec2 stCenter = st - center; 31 | //Converts 1 width to a width of the whole st 32 | width *= 0.5; 33 | float xEdges = smoothstep(-width, -(width-smoothEdges) ,stCenter.x) - smoothstep(width-smoothEdges, width ,stCenter.x); 34 | float yEdges = smoothstep(-width, -(width-smoothEdges) ,stCenter.y) - smoothstep(width-smoothEdges, width ,stCenter.y); 35 | return xEdges * yEdges; 36 | } 37 | 38 | void main() 39 | { 40 | vec2 st = vUv; 41 | 42 | st /= vec2(1.0,0.5); 43 | // Divide the space in 10 44 | st = brick(st, 6.0, 0.8); 45 | 46 | // Use a matrix to rotate the space 45 degrees 47 | st = rotate2D(st, PI * 0.25 * 0. ); 48 | 49 | float color = box(st, vec2(0.5), 0.8, 0.01); 50 | gl_FragColor = vec4(vec3(color), 1.0); 51 | } -------------------------------------------------------------------------------- /src/containers/Shaders/30/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/31/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/31/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Circle shader code from: https://www.shadertoy.com/view/ltBXRc (Created by phil) 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | 13 | 14 | mat2 rotate2d(float angle){ 15 | return mat2(cos(angle),-sin(angle), 16 | sin(angle),cos(angle)); 17 | } 18 | 19 | float variation(vec2 v1, vec2 v2, float strength, float speed) { 20 | return sin( 21 | dot(normalize(v1), normalize(v2)) * strength + uTime * speed 22 | ) / 100.0; 23 | } 24 | 25 | vec3 paintCircle (vec2 uv, vec2 center, float rad, float width) { 26 | 27 | vec2 diff = center-uv; 28 | float len = length(diff); 29 | 30 | len += variation(diff, vec2(0.0, 1.0), 4.0, 10.0); 31 | len -= variation(diff, vec2(1.0, 0.0), 4.0, 10.0); 32 | 33 | float circle = smoothstep(rad-width, rad, len) - smoothstep(rad, rad+width, len); 34 | return vec3(circle); 35 | } 36 | 37 | vec2 brick(vec2 st, float zoom, float speed){ 38 | st *= zoom; 39 | 40 | float onOffTime = mod(speed * uTime, 1.0); 41 | float onOffTimeM = mod(speed * uTime * 0.5, 1.0) * 2.0; 42 | 43 | //Offset element on even rows (its like using the ternary operator : mod(x, 2.0) < 1.0 ? 0.0 : 1.0;) 44 | st.x += step(1.0, mod(st.y,2.0)) * onOffTime * step(1.0, onOffTimeM); 45 | st.x -= (1.0 - step(1.0, mod(st.y,2.0))) * onOffTime * step(1.0, onOffTimeM); 46 | 47 | st.y += step(1.0, mod(st.x,2.0)) * onOffTime * (1.0 - step(1.0, onOffTimeM)); 48 | st.y -= (1.0 - step(1.0, mod(st.x,2.0))) * onOffTime * (1.0 - step(1.0, onOffTimeM)); 49 | return fract(st); 50 | } 51 | 52 | void main() 53 | { 54 | vec2 st = vUv; 55 | 56 | // Divide the space in 10 57 | st = brick(st, 7.0, 0.8); 58 | 59 | // Use a matrix to rotate the space 45 degrees 60 | st -= vec2(0.5); 61 | st = rotate2d(PI * 0.25 ) * st; 62 | st += vec2(0.5); 63 | 64 | vec3 color; 65 | float radius = 0.3; 66 | vec2 center = vec2(0.5); 67 | 68 | //paint color circle 69 | color = paintCircle(st, center, radius, 0.04); 70 | 71 | //color with gradient 72 | vec2 v = rotate2d(uTime) * st; 73 | color *= vec3(v.x, v.y, 0.5 - v.x * v.y) + 0.8; 74 | 75 | gl_FragColor = vec4(color, 1.0); 76 | } -------------------------------------------------------------------------------- /src/containers/Shaders/31/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/32/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/32/fragment.glsl: -------------------------------------------------------------------------------- 1 | //https://en.wikipedia.org/wiki/Truchet_tiles 2 | //Truchet tiles 3 | 4 | uniform float uTime; 5 | uniform vec2 uPlaneRes; 6 | uniform vec2 uCanvasRes; 7 | uniform vec2 uMouse; 8 | uniform float uPixelRatio; 9 | 10 | varying vec2 vUv; 11 | 12 | #define PI 3.14159265359 13 | 14 | 15 | vec2 rotate2D(vec2 _st, float _angle){ 16 | _st -= 0.5; 17 | _st = mat2(cos(_angle),-sin(_angle), 18 | sin(_angle),cos(_angle)) * _st; 19 | _st += 0.5; 20 | return _st; 21 | } 22 | 23 | vec2 zoom(vec2 st, float zoom){ 24 | st *= zoom; 25 | return fract(st); 26 | } 27 | 28 | float box(vec2 st, vec2 center, float width, float smoothEdges){ 29 | vec2 stCenter = st - center; 30 | //Converts 1 width to a width of the whole st 31 | width *= 0.5; 32 | float xEdges = smoothstep(-width, -(width-smoothEdges) ,stCenter.x) - smoothstep(width-smoothEdges, width ,stCenter.x); 33 | float yEdges = smoothstep(-width, -(width-smoothEdges) ,stCenter.y) - smoothstep(width-smoothEdges, width ,stCenter.y); 34 | return xEdges * yEdges; 35 | } 36 | 37 | vec2 rotateTilePattern(vec2 _st){ 38 | 39 | // Scale the coordinate system by 2x2 40 | _st *= 2.0; 41 | 42 | // Give each cell an index number 43 | // according to its position 44 | float index = 0.0; 45 | index += step(1., mod(_st.x,2.0)); 46 | index += step(1., mod(_st.y,2.0))*2.0; 47 | 48 | // | 49 | // 2 | 3 50 | // | 51 | //-------------- 52 | // | 53 | // 0 | 1 54 | // | 55 | 56 | // Make each cell between 0.0 - 1.0 57 | _st = fract(_st); 58 | 59 | // Rotate each cell according to the index 60 | if(index == 1.0){ 61 | // Rotate cell 1 by 90 degrees 62 | _st = rotate2D(_st,PI*0.5); 63 | } else if(index == 2.0){ 64 | // Rotate cell 2 by -90 degrees 65 | _st = rotate2D(_st,PI*-0.5); 66 | } else if(index == 3.0){ 67 | // Rotate cell 3 by 180 degrees 68 | _st = rotate2D(_st,PI); 69 | } 70 | 71 | return _st; 72 | } 73 | 74 | void main() 75 | { 76 | vec2 st = vUv; 77 | st = rotate2D(st,PI*uTime*-0.15); 78 | st = zoom(st, 4.0); 79 | 80 | st = rotate2D(st,PI*uTime*0.15); 81 | st = rotateTilePattern(st); 82 | 83 | gl_FragColor = vec4(vec3(step(st.x,st.y)),1.0); 84 | } -------------------------------------------------------------------------------- /src/containers/Shaders/32/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/33/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/33/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random (in vec2 _st) { 12 | return fract(sin(dot(_st.xy, 13 | vec2(12.9898,78.233)))* 14 | 43758.5453123); 15 | } 16 | 17 | vec2 truchetPattern(in vec2 _st, in float _index){ 18 | _index = _index; 19 | 20 | //These are some random offsets for st 21 | if (_index > 0.75) { 22 | _st = vec2(1.0) - _st; 23 | } else if (_index > 0.5) { 24 | _st = vec2(1.0-_st.x,_st.y); 25 | } else if (_index > 0.25) { 26 | _st = 1.0-vec2(1.0-_st.x,_st.y); 27 | } 28 | return _st; 29 | } 30 | 31 | void main() { 32 | vec2 st = vUv; 33 | st *= 10.0; 34 | st.x += uTime*2.0; 35 | 36 | vec2 ipos = floor(st); // integer 37 | vec2 fpos = fract(st); // fraction - acts as UV for certain tile 38 | 39 | vec2 tile = truchetPattern(fpos, random( ipos )); 40 | 41 | float color = 0.0; 42 | 43 | // Maze 44 | color = smoothstep(tile.x-0.3,tile.x,tile.y)- 45 | smoothstep(tile.x,tile.x+0.3,tile.y); 46 | 47 | // Circles 48 | color = (step(length(tile),0.6) - 49 | step(length(tile),0.4) ) + 50 | (step(length(tile-vec2(1.)),0.6) - 51 | step(length(tile-vec2(1.)),0.4) ); 52 | 53 | // Truchet (2 triangles) 54 | // color = step(tile.x,tile.y); 55 | 56 | gl_FragColor = vec4(vec3(color),1.0); 57 | } -------------------------------------------------------------------------------- /src/containers/Shaders/33/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/34/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/34/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random (in float x) { 12 | return fract(sin(x)*1e4); 13 | } 14 | 15 | float randomSerie(float x, float freq) { 16 | return step(0.2, random(floor(x*freq))); 17 | } 18 | 19 | void main() 20 | { 21 | vec2 st = vUv; 22 | st.y = st.y * 2.0; 23 | 24 | vec2 ipos = floor(st); // integer 25 | vec2 fpos = fract(st); // fraction 26 | 27 | st = fract(st); 28 | 29 | float isTop = step(1.0, ipos.y); 30 | 31 | float freq1 = 0.3 * uTime * isTop; 32 | float freq2 = 0.3 * uTime * (1.0 - isTop); 33 | 34 | float color =randomSerie(st.x + 50.0 * isTop - freq1 + freq2 , 50.0); 35 | 36 | gl_FragColor = vec4(vec3(color), 1.0); 37 | } -------------------------------------------------------------------------------- /src/containers/Shaders/34/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/35/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/35/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random (in vec2 st) { 12 | return fract(sin(dot(st.xy, 13 | vec2(12.9898,78.233))) 14 | * 43758.5453123); 15 | } 16 | 17 | // Value noise by Inigo Quilez - iq/2013 18 | // https://www.shadertoy.com/view/lsf3WH 19 | float noise(vec2 st) { 20 | vec2 i = floor(st); 21 | vec2 f = fract(st); 22 | vec2 u = f*f*(3.0-2.0*f); 23 | return mix( mix( random( i + vec2(0.0,0.0) ), 24 | random( i + vec2(1.0,0.0) ), u.x), 25 | mix( random( i + vec2(0.0,1.0) ), 26 | random( i + vec2(1.0,1.0) ), u.x), u.y); 27 | } 28 | 29 | mat2 rotate2d(float angle){ 30 | return mat2(cos(angle),-sin(angle), 31 | sin(angle),cos(angle)); 32 | } 33 | 34 | void main() 35 | { 36 | vec2 st = vUv; 37 | st = st * 10.0; 38 | 39 | st = rotate2d( noise(st * 0.4 - uTime * 0.4) ) * st; 40 | 41 | float color = step(1.0 ,mod( st.y, 2.0 )); 42 | 43 | gl_FragColor = vec4(vec3(color), 1.0); 44 | } -------------------------------------------------------------------------------- /src/containers/Shaders/35/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/36/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/36/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random (in vec2 st) { 12 | return fract(sin(dot(st.xy, 13 | vec2(12.9898,78.233))) 14 | * 43758.5453123); 15 | } 16 | 17 | // Value noise by Inigo Quilez - iq/2013 18 | // https://www.shadertoy.com/view/lsf3WH 19 | float noise(vec2 st) { 20 | vec2 i = floor(st); 21 | vec2 f = fract(st); 22 | vec2 u = f*f*(3.0-2.0*f); 23 | return mix( mix( random( i + vec2(0.0,0.0) ), 24 | random( i + vec2(1.0,0.0) ), u.x), 25 | mix( random( i + vec2(0.0,1.0) ), 26 | random( i + vec2(1.0,1.0) ), u.x), u.y); 27 | } 28 | 29 | mat2 rotate2d(float angle){ 30 | return mat2(cos(angle),-sin(angle), 31 | sin(angle),cos(angle)); 32 | } 33 | 34 | void main() 35 | { 36 | vec2 st = vUv; 37 | float color; 38 | 39 | vec2 mouseNormalized; 40 | mouseNormalized.x = (uMouse.x - (uCanvasRes.x - uPlaneRes.x) * 0.5) / uPlaneRes.x; 41 | mouseNormalized.y = ((uCanvasRes.y - uMouse.y) - (uCanvasRes.y - uPlaneRes.y) * 0.5) / uPlaneRes.y; 42 | 43 | // Cell positions 44 | vec2 point[5]; 45 | point[0] = vec2(0.83,0.55); 46 | point[1] = vec2(0.60,0.07); 47 | point[2] = vec2(0.28,0.64); 48 | point[3] = vec2(0.31,0.26); 49 | point[4] = mouseNormalized; 50 | 51 | float m_dist = 1.; // minimum distance 52 | 53 | // Iterate through the points positions 54 | for (int i = 0; i < 5; i++) { 55 | float dist = distance(st, point[i]); 56 | // Keep the closer distance 57 | m_dist = min(m_dist, dist); 58 | } 59 | 60 | // Draw the min distance (distance field) 61 | color += m_dist; 62 | 63 | gl_FragColor = vec4(vec3(color), 1.0); 64 | } -------------------------------------------------------------------------------- /src/containers/Shaders/36/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/37/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/37/fragment.glsl: -------------------------------------------------------------------------------- 1 | //https://thebookofshaders.com/12/ 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | 13 | vec2 random2(vec2 st){ 14 | st = vec2( dot(st,vec2(127.1,311.7)), 15 | dot(st,vec2(269.5,183.3)) ); 16 | return fract(sin(st)*43758.5453123); 17 | } 18 | 19 | void main() 20 | { 21 | float onOff = 0.5*(sin(uTime) + 1.0); 22 | float m_dist = 1.0; 23 | 24 | vec2 st = vUv; 25 | 26 | st *= 3.0 ; 27 | 28 | vec2 i_st = floor(st); 29 | vec2 f_st = fract(st); 30 | 31 | for (int y= -1; y <= 1; y++) { 32 | for (int x= -1; x <= 1; x++) { 33 | // Neighbor place in the grid 34 | vec2 neighbor = vec2(float(x),float(y)); 35 | vec2 point = random2(i_st + neighbor ); 36 | 37 | vec2 diff = neighbor* onOff + point - f_st ; 38 | 39 | // Distance to the point 40 | float dist = length(diff ); 41 | 42 | // Keep the closer distance 43 | m_dist = min(m_dist, dist); 44 | } 45 | } 46 | 47 | float color = m_dist; 48 | 49 | gl_FragColor = vec4(vec3(color), 1.0); 50 | } -------------------------------------------------------------------------------- /src/containers/Shaders/37/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/38/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/38/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: noise = require('glsl-noise/classic/2d') 2 | uniform float uTime; 3 | uniform vec2 uPlaneRes; 4 | uniform vec2 uCanvasRes; 5 | uniform vec2 uMouse; 6 | uniform float uPixelRatio; 7 | 8 | varying vec2 vUv; 9 | 10 | #define PI 3.14159265359 11 | #define NUM_OCTAVES 5 12 | 13 | 14 | float fbm ( in vec2 _st) { 15 | float v = 0.0 ; 16 | float a = 0.5; 17 | vec2 shift = vec2(100.0) ; 18 | // Rotate to reduce axial bias 19 | mat2 rot = mat2(cos(0.5), sin(0.5), 20 | -sin(0.5), cos(0.50)); 21 | for (int i = 0; i < NUM_OCTAVES; ++i) { 22 | v += a * noise(_st); 23 | _st = rot * _st * 2.0 + shift ; 24 | a *= 0.5 ; 25 | } 26 | return v; 27 | } 28 | 29 | float pattern( in vec2 p, out vec2 q, out vec2 r ) 30 | { 31 | p -= vec2(0.5); 32 | float time = 0.5 * (sin(uTime * 0.8) + 1.0); 33 | 34 | q.x = fbm( p + vec2(0.0,0.0) ) ; 35 | q.y = fbm( p + vec2(5.2,1.3) ) ; 36 | 37 | r.x = fbm( p + 4.0*q + vec2(1.7,9.2)); 38 | r.y = fbm( p * time + 4.0*q + vec2(8.3,2.8) );// 39 | 40 | return fbm( p + 4.0*r ); 41 | } 42 | 43 | void main() 44 | { 45 | vec3 gold = vec3(242.0 / 255.0 , 178.0 / 255.0 , 58.0 / 255.0 ); 46 | vec3 lightBlue = vec3(83.0 / 255.0 , 227.0 / 255.0 , 252.0 / 255.0 ) ; 47 | vec3 blue = vec3(9.0 / 255.0 , 100.0 / 255.0 , 156.0 / 255.0 ); 48 | vec3 darkBlue = vec3(7.0 / 255.0 , 33.0 / 255.0 , 60.0 / 255.0 ); 49 | vec3 white = vec3(255.0 / 255.0 , 255.0 / 255.0 , 255.0 / 255.0 ); 50 | 51 | vec2 st = vUv; 52 | vec2 q; 53 | vec2 r; 54 | float f = pattern(st, q, r ); 55 | vec3 color; 56 | 57 | color = mix(blue,gold,clamp((f*f)*4.5,0.0,1.0)); 58 | color = mix(color, darkBlue,clamp(length(q),0.0,1.0)); 59 | color = mix(color,lightBlue,clamp(length(r.x),0.0,1.0)); 60 | 61 | gl_FragColor = vec4(color,1.0); 62 | } -------------------------------------------------------------------------------- /src/containers/Shaders/38/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/39/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/39/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | void main() 17 | { 18 | vec2 st = vUv; 19 | float color = step(0.5 + sin(st.y * PI * 2.0) * 0.15, st.x); 20 | 21 | gl_FragColor = vec4(vec3(color), 1.0); 22 | } -------------------------------------------------------------------------------- /src/containers/Shaders/39/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/4/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/4/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | 10 | float plot(vec2 st) { 11 | return smoothstep(0.02, 0.0, abs(st.x-st.y)); //Used to turn elements on or off => goes from 0 to 1 smoothly in the range of the first and second argument 12 | } 13 | 14 | void main() 15 | { 16 | vec2 st = vUv; 17 | float pct = plot(st); 18 | vec3 col = (1. - pct ) * vec3(st.x) + vec3(0., pct, 0.); 19 | gl_FragColor = vec4(col, 1.0); 20 | } -------------------------------------------------------------------------------- /src/containers/Shaders/4/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/40/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/40/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | float stroke (float x, float s, float w){ 17 | float d = step(s, x + w * 0.5) - step(s, x - w * 0.5); 18 | return clamp(d, 0.0, 1.0); 19 | } 20 | 21 | void main() 22 | { 23 | vec2 st = vUv; 24 | float color; 25 | 26 | float offset = cos(st.y * PI) * 0.15; 27 | 28 | color += stroke(st.x, 0.395 + offset, 0.05); 29 | color += stroke(st.x, 0.5 + offset, 0.05); 30 | color += stroke(st.x, 0.605 + offset, 0.05); 31 | 32 | gl_FragColor = vec4(vec3(color), 1.0); 33 | } -------------------------------------------------------------------------------- /src/containers/Shaders/40/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/41/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/41/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float random(vec2 st) 12 | { 13 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 14 | } 15 | 16 | float stroke (float x, float s, float w){ 17 | float d = step(s, x + w * 0.5) - step(s, x - w * 0.5); 18 | return clamp(d, 0.0, 1.0); 19 | } 20 | 21 | float fill(float x, float size){ 22 | return 1. - step(size, x); 23 | } 24 | 25 | float circleSDF(vec2 st){ 26 | return length(st - 0.5) * 2.0; 27 | } 28 | 29 | float rectSDF(vec2 st, vec2 s){ 30 | st = st * 2.0 - 1.0; 31 | return max( abs(st.x/s.x), abs(st.y/s.y)); 32 | } 33 | 34 | float spiralSDF(vec2 st, float t){ 35 | st -= 0.5; 36 | float r = dot(st,st ); 37 | float a = atan(st.y, st.x); 38 | return abs(sin(fract(log(r)* t + a * 0.159))); 39 | } 40 | 41 | void main() 42 | { 43 | vec2 st = vUv; 44 | float color; 45 | 46 | color += step(0.5, spiralSDF(st, .13)); 47 | 48 | 49 | gl_FragColor = vec4(vec3(color), 1.0); 50 | } -------------------------------------------------------------------------------- /src/containers/Shaders/41/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/42/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/42/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: cnoise = require('glsl-noise/classic/3d') 2 | uniform float uTime; 3 | uniform vec2 uPlaneRes; 4 | uniform vec2 uCanvasRes; 5 | uniform vec2 uMouse; 6 | uniform float uPixelRatio; 7 | 8 | varying vec2 vUv; 9 | 10 | #define PI 3.14159265359 11 | 12 | 13 | void main() 14 | { 15 | vec3 colorEnd =vec3(0.0 / 255.0 , 9.0 / 255.0 , 0.0 / 255.0 ); 16 | vec3 colorStart = vec3(0.0 / 255.0 , 200.0 / 255.0 , 156.0 / 255.0 ); 17 | 18 | // Displace the UV 19 | vec2 displacedUv = vUv + cnoise(vec3(vUv * 5.0, uTime * 0.1)); 20 | float strength; 21 | // Perlin noise 22 | strength += cnoise(vec3(displacedUv * 5.0, uTime * 0.2)); 23 | 24 | // Outer glow 25 | float outerGlow = distance(vUv, vec2(0.5)) * 5.0 - 1.4; 26 | strength += outerGlow; 27 | 28 | // Apply cool step 29 | strength += step(- 0.2, strength) * 0.6; 30 | 31 | // Final color 32 | vec3 color = mix(colorStart, colorEnd, strength); 33 | gl_FragColor = vec4(color, 1.0); 34 | } -------------------------------------------------------------------------------- /src/containers/Shaders/42/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/43/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | vertexShader, 10 | fragmentShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/43/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Inspiration : https://www.youtube.com/watch?v=xDxAnguEOn8 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | #define NUM_PARTICLES 40.0 13 | #define NUM_EXPLOSIONS 4.0 14 | 15 | //random hashing function that takes one float and returns two (vec2) 16 | vec2 Hash12(float t){ 17 | float x = fract(sin(t*674.3)*453.2); 18 | float y = fract(sin((t+x)*714.3)*263.2); 19 | return vec2(x,y); 20 | } 21 | 22 | vec2 Hash12_Polar(float t){ 23 | float a = fract(sin(t*674.3)*453.2) * 2.0 * PI; //Angle from 0 to 2PI 24 | float d = fract(sin((t+a)*714.3)*263.2); //Distance from 0 to 1 25 | return vec2(sin(a) , cos(a)) * d; //Converting polar coords to cartesian coords system 26 | } 27 | 28 | float explosion (vec2 st, float t){ 29 | float sparks = 0.0; 30 | for(float i = 0.0 ; i< NUM_PARTICLES; i++) { 31 | vec2 dir = Hash12_Polar(i + 1.0) * 0.5; 32 | float d = length(st - dir * t); 33 | float brightness = mix(0.0, 0.0005, smoothstep(0.0, 0.1, t)); 34 | brightness *= sin(t * 15. + i) * 0.5 + 0.5; // blinking of firework while alive 35 | brightness *= smoothstep(1.0, 0.5, t); // fades out the effect before it restarts 36 | sparks += brightness / d ; 37 | } 38 | return sparks; 39 | } 40 | 41 | void main() 42 | { 43 | vec3 color; 44 | vec2 st = vUv; 45 | st -= 0.5; 46 | 47 | for(float i = 0.0 ; i< NUM_EXPLOSIONS; i++) { 48 | float part = i / NUM_EXPLOSIONS; 49 | float t = uTime * (part + 0.2) + part * 0.8; 50 | float ft = floor(t); 51 | vec3 colorValue = sin(vec3(.34 * part, .54 * (1.0 - part), 0.45) * ft) * 0.45 + 0.55; 52 | vec2 offset = Hash12(i + 1.0 + ft) - 0.5; 53 | offset *= vec2(0.85, 0.15); //Shrink the possible explosion area 54 | offset += vec2(0.0, 0.25); //Move the possible explosion area up 55 | color += explosion(st - offset, fract(t)) * colorValue; 56 | } 57 | 58 | color *= 2.0; 59 | 60 | gl_FragColor = vec4(vec3(color), 1.0); 61 | } -------------------------------------------------------------------------------- /src/containers/Shaders/43/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | 4 | void main() 5 | { 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 7 | vUv = uv; 8 | } -------------------------------------------------------------------------------- /src/containers/Shaders/44/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/44/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/45/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/45/fragment.glsl: -------------------------------------------------------------------------------- 1 | //inspiration source: https://www.youtube.com/watch?v=bigjgiavOM0 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | 13 | mat2 rotate2d(float _angle){ 14 | return mat2(cos(_angle),-sin(_angle), 15 | sin(_angle),cos(_angle)); 16 | } 17 | 18 | float circle( vec2 uv, float radius, vec2 position, float blur){ 19 | uv -= position; 20 | float d = length(uv); 21 | return smoothstep(radius, radius - blur, d); 22 | } 23 | 24 | 25 | float band(float t, float start, float end, float blur){ 26 | float step1 = smoothstep(start - blur, start + blur, t); 27 | float step2 = smoothstep(end + blur, end - blur, t); 28 | return step1 * step2; 29 | } 30 | 31 | 32 | float rect(vec2 uv, vec2 position, float width, float height, float blur){ 33 | uv -= position; 34 | float band1 = band(uv.x, -width/2.0, width/2.0, blur); 35 | float band2 = band(uv.y, -height/2.0, height/2.0, blur); 36 | return band1 * band2; 37 | } 38 | 39 | float remap01 (float a, float b, float t){ 40 | return (t-a) / (b-a); 41 | } 42 | 43 | float remap(float a, float b, float c, float d, float t){ 44 | return remap01(a, b, t) * (d-c) + c; 45 | } 46 | 47 | void main() 48 | { 49 | vec2 st = vUv; 50 | float strength; 51 | 52 | float m = sin(vUv.x * 20. + uTime * 5.5) * 0.04; 53 | st.y = st.y - m; 54 | float blur = remap(0.2, 0.8, 0.45, 0.001, st.x); //remaps 0.3 to 0.001 from 0.2 to 0.8 of st.x (<0, 1>) 55 | blur = pow(blur * 0.9, 0.95 * (sin(uTime) * 0.5 + 0.5 + 0.9)); 56 | 57 | strength += rect(st, vec2(0.5), 0.8, 0.003, blur); 58 | strength = clamp(strength, 0.0, 1.0); 59 | 60 | vec3 col = sin(vec3(.44 * uTime * 0.1, .14 * (30.0 - uTime * 0.4), 0.45) * st.y ) * 0.85 + 0.85; 61 | 62 | strength *= 2.0; 63 | col = col * strength; 64 | 65 | gl_FragColor = vec4(col, 1.0); 66 | } -------------------------------------------------------------------------------- /src/containers/Shaders/45/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/46/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/46/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying float vFresnel; 3 | 4 | #define uFresnelOffset 0.4 5 | #define uFresnelPower 0.5 6 | #define uFresnelScale 2.0 7 | 8 | void main() 9 | { 10 | //Default settings 11 | vec4 modelPosition = modelMatrix * vec4(position, 1.0); 12 | vec4 viewPosition = viewMatrix * modelPosition; 13 | 14 | //Fresnel computation 15 | vec3 viewDirection = normalize(modelPosition.xyz - cameraPosition); 16 | vec3 worldNormal = normalize(mat3(modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz) * normal); 17 | //Offsets the halo 18 | // vec3 newNormal = mix(worldNormal, vec3(0.0, 1.0, 0.0), 0.5); 19 | float fresnel = uFresnelOffset + uFresnelScale * (1.0 + dot(viewDirection, worldNormal)); 20 | fresnel = pow(fresnel, uFresnelPower); 21 | 22 | gl_Position = projectionMatrix * viewPosition; 23 | 24 | vFresnel = fresnel; 25 | vUv = uv; 26 | } -------------------------------------------------------------------------------- /src/containers/Shaders/47/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/47/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Simple 3D renderer in shader 2 | //Based on : https://www.youtube.com/watch?v=dKA5ZVALOhs 3 | 4 | uniform float uTime; 5 | uniform vec2 uPlaneRes; 6 | uniform vec2 uCanvasRes; 7 | uniform vec2 uMouse; 8 | uniform float uPixelRatio; 9 | 10 | varying vec2 vUv; 11 | 12 | #define PI 3.14159265359 13 | 14 | float DistLine(vec3 ro, vec3 rd, vec3 p){ //Calculates the distance between the point p and the direction of the ray 15 | return length(cross(p - ro, rd)) / length(rd); 16 | } 17 | 18 | void main() 19 | { 20 | vec2 uv = vUv; 21 | uv -= 0.5; 22 | 23 | vec3 ro = vec3(0.0, 0.0, -2.0); //ray origin (camera position) 24 | vec3 rd = vec3(uv.x, uv.y, 0.0) - ro; //ray direction is (intersection point - ray origin) 25 | 26 | vec3 p = vec3(sin(uTime) * 0.45, 0.0, cos(uTime) * 0.45); //Point we want to display 27 | float d = DistLine(ro, rd, p); //distance between a point and a ray direction shooted from camera 28 | 29 | d = smoothstep(0.03, 0.02, d); 30 | gl_FragColor = vec4(vec3(d), 1.0); 31 | } -------------------------------------------------------------------------------- /src/containers/Shaders/47/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/48/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | vertexShader, 10 | fragmentShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/48/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Based on : https://www.youtube.com/watch?v=PBxuVlp7nuM 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | 13 | float DistLine(vec3 ro, vec3 rd, vec3 p){ //Calculates the distance between the point p and the direction of the ray 14 | return length(cross(p - ro, rd)) / length(rd); 15 | } 16 | 17 | float DrawPoint (vec3 ro, vec3 rd, vec3 p){ 18 | float d = DistLine(ro, rd, p); //distance between a point and a ray direction shooted from camera 19 | return d = smoothstep(0.06, 0.05, d); 20 | } 21 | 22 | void main() 23 | { 24 | vec2 uv = vUv; 25 | uv -= 0.5; 26 | 27 | float zoom = 1.0; 28 | vec3 ro = vec3(sin(uTime) * 4., 2.0, cos(uTime) * 4.); //ray origin (camera position) 29 | vec3 lookAt = vec3(0.0); //center of a cube 30 | vec3 f = normalize(lookAt - ro);//forward vector 31 | vec3 r = normalize(cross(vec3(0.0, 1.0, 0.0), f));//right vector is the cross product of world UP vector and forward vector f 32 | vec3 u = cross(f, r); //Camera up vector 33 | 34 | vec3 c = ro + f*zoom;//center of the screen 35 | vec3 i = c + uv.x * r + uv.y * u;//intersection point 36 | vec3 rd = i - ro; 37 | 38 | //Drawing 8 points 39 | float d = 0.0; 40 | d += DrawPoint(ro, rd, vec3(-0.5, 0.5, 0.5)); 41 | d += DrawPoint(ro, rd, vec3(0.5, 0.5, 0.5)); 42 | d += DrawPoint(ro, rd, vec3(0.5, -0.5, 0.5)); 43 | d += DrawPoint(ro, rd, vec3(-0.5, -0.5, 0.5)); 44 | d += DrawPoint(ro, rd, vec3(-0.5, 0.5, -0.5)); 45 | d += DrawPoint(ro, rd, vec3(0.5, 0.5, -0.5)); 46 | d += DrawPoint(ro, rd, vec3(0.5, -0.5, -0.5)); 47 | d += DrawPoint(ro, rd, vec3(-0.5, -0.5, -0.5)); 48 | 49 | gl_FragColor = vec4(vec3(d), 1.0); 50 | } -------------------------------------------------------------------------------- /src/containers/Shaders/48/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/49/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/49/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/5/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/5/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | //Alternative plot function: 12 | // float plot(vec2 st, float pct){ 13 | // return smoothstep( pct-0.02, pct, st.y) - smoothstep( pct, pct+0.02, st.y); 14 | // } 15 | 16 | float plot(vec2 st, float pct){ 17 | return smoothstep( 0.02, 0., abs(st.y - pct)); 18 | } 19 | 20 | void main() 21 | { 22 | vec2 st = vUv; 23 | 24 | float y = pow(st.x,5.0); 25 | float pct = plot(st, y); 26 | 27 | vec3 color = vec3(y); 28 | color = (1.0 - pct) * color + pct * vec3 (0.0,1.0,0.0); 29 | gl_FragColor = vec4(color, 1.0); 30 | } -------------------------------------------------------------------------------- /src/containers/Shaders/5/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/50/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/50/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | 12 | 13 | void main() 14 | { 15 | vec2 uv = vUv; 16 | uv -= 0.5; 17 | 18 | //atan2 (of two components, x and y) returns the single value between -PI and PI 19 | vec2 st = vec2(atan(uv.x, uv.y), length(uv)); 20 | 21 | float speed = uTime * 0.5 * 0.6; 22 | float skew = st.y * sin(speed); 23 | 24 | uv = vec2(st.x / (2.0 * PI) + speed + skew, st.y); 25 | 26 | float x = uv.x * 6.0; 27 | float m = min(fract(x), fract(1.0 - x)); 28 | 29 | float c = smoothstep(0.0, 0.05, m * 0.6 + 0.2 -uv.y); 30 | 31 | gl_FragColor = vec4(vec3(c), 1.0); 32 | } -------------------------------------------------------------------------------- /src/containers/Shaders/50/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/51/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/51/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/52/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/52/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Ray sphere intersection from: https://www.youtube.com/watch?v=HFPlKQGChpE 2 | uniform float uTime; 3 | uniform vec2 uPlaneRes; 4 | uniform vec2 uCanvasRes; 5 | uniform vec2 uMouse; 6 | uniform float uPixelRatio; 7 | 8 | varying vec2 vUv; 9 | 10 | #define PI 3.14159265359 11 | 12 | float remap01(float a, float b, float t){ 13 | return (t-a) / (b-a); 14 | } 15 | 16 | 17 | void main() 18 | { 19 | vec2 uv = vUv; 20 | uv -= 0.5; 21 | vec3 col = vec3(0.0); 22 | 23 | vec3 ro = vec3(0.0); 24 | vec3 rd = normalize(vec3(uv.x, uv.y, 1.0)); 25 | 26 | vec3 s = vec3(0.0, 0.0, 4.0); //center of sphere 27 | float r = 1.0; //radius 28 | 29 | float t = dot(s - ro, rd); 30 | vec3 p = ro + rd * t; 31 | float y = length(s - p); 32 | 33 | if( y { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/53/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Based on the art of code video : https://www.youtube.com/watch?v=dXyPOLf2MbU 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | #define S(a, b, t) smoothstep(a, b, t) 13 | #define HEART_COLOR vec3(0.79, 0.41, 0.98) 14 | 15 | //smooth max function 16 | float smax(float a, float b, float k){ 17 | float h = clamp((b-a)/k + 0.5, 0.0, 1.0); 18 | return mix(a,b,h) + h*(1.0 - h) * k * 0.5; 19 | } 20 | 21 | float Heart(vec2 uv, float b){ 22 | float r = 0.2; //radius 23 | b *= r;//blur 24 | uv.x *= 0.7; 25 | uv.y -= smax(sqrt(abs(uv.x)) * 0.5, b, 0.1); //shape circle 26 | uv.y += 0.1 + b * 0.5; 27 | float d = length(uv); 28 | 29 | return S(r+b, r-b -0.001, d); 30 | } 31 | 32 | void main() 33 | { 34 | //mouse 35 | vec2 m; 36 | m.x = uMouse.x / uCanvasRes.x; 37 | m.y = (uCanvasRes.y - uMouse.y) / uCanvasRes.y; 38 | //Move the center 39 | m.x -= 0.5; 40 | 41 | vec2 uv = vUv; 42 | uv -= 0.5; 43 | vec3 col = vec3(0.0); 44 | 45 | float c = Heart(uv, m.y); 46 | 47 | col = vec3(c * HEART_COLOR); 48 | 49 | gl_FragColor = vec4(col, 1.0); 50 | } -------------------------------------------------------------------------------- /src/containers/Shaders/53/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/54/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/54/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Noise from https://www.youtube.com/watch?v=zXsWftRdsvU 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | 13 | 14 | float N21 (vec2 p){ 15 | return fract(sin(p.x * 100.0 + p.y * 657.0) * 5647.0); 16 | } 17 | 18 | float SmoothNoise(vec2 uv){ 19 | vec2 lv = fract(uv); 20 | vec2 id = floor(uv); 21 | 22 | lv = lv * lv * (3.0 - 2.0 * lv); //3x^2 - 2x^3 23 | 24 | float bl = N21(id); 25 | float br = N21(id + vec2(1.0, 0.0)); 26 | float b = mix(bl, br, lv.x); 27 | 28 | float tl = N21(id + vec2(0.0, 1.0)); 29 | float tr = N21(id + vec2(1.0, 1.0)); 30 | float t = mix(tl, tr, lv.x); 31 | 32 | return mix(b, t, lv.y); 33 | } 34 | 35 | float SmoothNoise2(vec2 uv){ 36 | float c = SmoothNoise(uv * 4.0); 37 | c += SmoothNoise(uv * 8.0) * 0.5; 38 | c += SmoothNoise(uv * 16.0) * 0.25; 39 | c += SmoothNoise(uv * 32.0) * 0.125; 40 | c += SmoothNoise(uv * 65.0) * 0.0625; 41 | 42 | return c /= 1.9375; // (sum of all possible maximum values)so that it's always between 0 - 1 43 | } 44 | 45 | void main() 46 | { 47 | vec2 uv = vUv; 48 | 49 | uv += uTime * 0.1; 50 | float c = SmoothNoise2(uv); 51 | 52 | vec3 col = vec3(c); 53 | 54 | 55 | 56 | gl_FragColor = vec4(col, 1.0); 57 | } -------------------------------------------------------------------------------- /src/containers/Shaders/54/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/55/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/55/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Voronoi effect based on art of code video : https://www.youtube.com/watch?v=l-07BXzNdPw 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | 13 | vec2 N22 (vec2 p){ 14 | vec3 a = fract(p.xyx * vec3(123.34, 234.34, 345.65)); 15 | a+= dot(a,a+34.45); 16 | return fract(vec2(a.x*a.y, a.y*a.z)); 17 | } 18 | 19 | void main() 20 | { 21 | vec2 uv = vUv; 22 | uv -= 0.5; 23 | uv *= 2.0; 24 | 25 | float m = 0.0; 26 | float t = uTime * 0.5; 27 | 28 | float minDist = 100.0; 29 | float cellIndex = 0.0; 30 | 31 | vec3 col = vec3(cellIndex/50.0); 32 | 33 | //Naive approach 34 | if(false){ 35 | for(float i =0.0; i<50.0; i++){ 36 | vec2 n = N22(vec2(i)); 37 | vec2 p = sin(n*t); 38 | 39 | float d = length(uv - p); 40 | m += smoothstep(0.02, 0.01, d); 41 | 42 | if(d < minDist){ 43 | minDist = d; 44 | cellIndex = i; 45 | } 46 | } 47 | //quicker approach 48 | }else{ 49 | uv*= 3.0; 50 | vec2 gv = fract(uv) - 0.5;//grid uv 51 | vec2 id = floor(uv); 52 | vec2 cid = vec2(0.0);//cell id 53 | 54 | for(float y = -1.0; y <= 1.0; y++){ 55 | for(float x = -1.0; x <= 1.0; x++){ 56 | vec2 offs = vec2(x,y); 57 | vec2 n = N22(id + offs); 58 | vec2 p = offs + sin(n*t) * 0.5; 59 | p-=gv; 60 | float ed = length(p); //euclidian distance 61 | float md = abs(p.x) + abs(p.y); //Manhattan distance 62 | float d = mix(ed, md, sin(uTime * 3.0)*0.5 + 0.5); 63 | 64 | if(d < minDist){ 65 | minDist = d; 66 | cid = id + offs; 67 | } 68 | } 69 | } 70 | col = vec3(minDist); 71 | } 72 | 73 | gl_FragColor = vec4(col, 1.0); 74 | } -------------------------------------------------------------------------------- /src/containers/Shaders/55/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/56/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/56/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/57/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/57/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/58/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/58/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/59/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/59/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Gif based on art of code video : https://www.youtube.com/watch?v=cQXAbndD5CQ 2 | 3 | uniform float uTime; 4 | uniform vec2 uPlaneRes; 5 | uniform vec2 uCanvasRes; 6 | uniform vec2 uMouse; 7 | uniform float uPixelRatio; 8 | 9 | varying vec2 vUv; 10 | 11 | #define PI 3.14159265359 12 | 13 | float Xor(float a, float b){ 14 | return a * (1.0 - b) + b*(1.0-a); 15 | } 16 | 17 | void main() 18 | { 19 | vec2 uv = vUv; 20 | float amount = 15.0; 21 | uv.y -= (0.5 + 1.0 / amount * 0.5); 22 | uv.x -= (0.5 - 1.0 / amount * 0.5); 23 | float a = PI * 0.5; //angle; 24 | float c= cos(a); 25 | float s= sin(a); 26 | uv*= mat2(c,-s,s,c); 27 | uv *= amount; 28 | 29 | vec3 col = vec3(0.0); 30 | vec2 gv = fract(uv) - 0.5;//grid uv 31 | vec2 id = floor( uv); 32 | 33 | float d = length(gv); 34 | float m = 0.0; 35 | 36 | float t = uTime; 37 | 38 | for(float y = -1.0; y<=1.0; y++){ 39 | for(float x = -1.0; x<=1.0; x++){ 40 | vec2 offs = vec2(x,y); 41 | 42 | float d = length(gv - offs); 43 | float dist = length(id + offs) * 0.3; 44 | float r = mix(0.3, 1.5, sin(dist - t)*0.5 + 0.5); 45 | m = Xor(m, smoothstep(r, r * 0.95, d)); 46 | } 47 | } 48 | 49 | // col.rg = gv; 50 | col += m; 51 | 52 | gl_FragColor = vec4(col, 1.0); 53 | } -------------------------------------------------------------------------------- /src/containers/Shaders/59/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/6/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/6/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float plot(vec2 st, float pct){ 12 | return smoothstep( 0.02, 0., abs(st.y - pct)); 13 | } 14 | 15 | void main() 16 | { 17 | vec2 st = vUv; 18 | 19 | float y = step(0.5,st.x); //First one is the threshold, second one is value we check. If its greater than first it returns 1 otherwise 0 20 | float pct = plot(st, y); 21 | 22 | vec3 color = vec3(y); 23 | color = (1.0 - pct) * color + pct * vec3 (0.0,1.0,0.0); 24 | gl_FragColor = vec4(color, 1.0); 25 | } -------------------------------------------------------------------------------- /src/containers/Shaders/6/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/60/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/60/fragment.glsl: -------------------------------------------------------------------------------- 1 | //Twisted toroid 2 | //Based on : https://www.youtube.com/watch?v=rA9NmBRqfjI 3 | 4 | uniform float uTime; 5 | uniform vec2 uPlaneRes; 6 | uniform vec2 uCanvasRes; 7 | uniform vec2 uMouse; 8 | uniform float uPixelRatio; 9 | 10 | varying vec2 vUv; 11 | 12 | #define MAX_STEPS 100 //integer 13 | #define MAX_DIST 100.0 //float 14 | #define SURF_DIST 0.001 15 | 16 | //returns distance of a point p to a torus 17 | float dTorus(vec3 p, vec2 r){ 18 | float x = length(p.xz) - r.x; 19 | return length(vec2(x, p.y)) - r.y; 20 | } 21 | 22 | float GetDist(vec3 p) { 23 | float td = dTorus(p - vec3(0.0, 0.0, 0.0), vec2(1.0, 0.75)); 24 | return td; 25 | } 26 | 27 | void main() 28 | { 29 | vec2 uv = vUv; 30 | uv -= 0.5; 31 | float t = uTime * 0.4; 32 | 33 | uv *= mat2(cos(t), -sin(t), sin(t), cos(t)); 34 | 35 | vec3 col = vec3(0.0); 36 | 37 | vec3 ro = vec3(0.0, 0.0, -1.0); //ray origin (camera position) 38 | vec3 lookAt = mix(vec3(0.0), vec3(-1.0, 0.0, -0.5), sin(t * 1.65) * 0.5 + 0.5); 39 | float zoom = mix(0.35, 0.7, sin(t * 2.0) * 0.5 + 0.5); 40 | 41 | vec3 f = normalize(lookAt - ro); 42 | vec3 r = normalize(cross(vec3(0.0, 1.0, 0.0), f)); 43 | vec3 u = normalize(cross(f, r)); 44 | vec3 c = ro + f * zoom; 45 | vec3 i = c + uv.x * r + uv.y * u; 46 | vec3 rd = normalize(i-ro); 47 | 48 | float dS = 0.0; 49 | float dO = 0.0; 50 | vec3 p = vec3(0.0); 51 | 52 | for(int i = 0; i MAX_DIST || dS < SURF_DIST) break; 57 | } 58 | 59 | float m = 0.0; 60 | 61 | if(dS < 0.001){ 62 | float x = atan(p.x, p.z) + t; 63 | float y = atan(length(p.xz) - r.x, p.y); 64 | float bands = sin(y * 10.0 + x * 20.0); 65 | float ripples = sin((x * 10.0 - y * 30.0) * 3.0) * 0.5 + 0.5; 66 | float waves = sin(x * 2.0 - y * 6.0 + t * 20.0); 67 | float b1 = smoothstep(-0.2, 0.2, bands); 68 | float b2 = smoothstep(-0.2, 0.2, bands - 0.5); 69 | 70 | m = b1 * (1.0 - b2); 71 | 72 | m = max(m, ripples * b2 * max(0.0, waves)); 73 | m += max(0.0, waves * 0.3*b2); 74 | } 75 | 76 | col = mix(vec3(0.078, 0.376, 1.0), vec3(0.698, 0.941, 0.960), m); 77 | 78 | 79 | gl_FragColor = vec4(col, 1.0); 80 | } -------------------------------------------------------------------------------- /src/containers/Shaders/60/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/61/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/61/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/62/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/62/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/62/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/63/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/63/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/63/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/64/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/64/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/64/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/65/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/65/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/65/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/66/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/66/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/66/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/67/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/67/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/67/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/68/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/68/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/68/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/69/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/69/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/69/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/7/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/7/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | float plot(vec2 st, float pct){ 12 | return smoothstep( 0.02, 0., abs(st.y - pct)); 13 | } 14 | 15 | void main() 16 | { 17 | vec2 st = vUv; 18 | 19 | float y = smoothstep(0.,1.,st.x); 20 | float pct = plot(st, y); 21 | 22 | vec3 color = vec3(y); 23 | color = (1.0 - pct) * color + pct * vec3 (0.0,1.0,0.0); 24 | gl_FragColor = vec4(color, 1.0); 25 | } -------------------------------------------------------------------------------- /src/containers/Shaders/7/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/70/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/70/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/70/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/71/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/71/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/71/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/72/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/72/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/72/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/8/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/8/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.x); 23 | 24 | // pct.r = smoothstep(0.0,0.968, vUv.x); 25 | pct.g = sin(vUv.x*PI); 26 | // pct.b = pow(vUv.x,0.5); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | // color = mix(color,vec3(1.0,0.0,0.0),plot(vUv , pct.r)); 32 | color = mix(color,vec3(0.0,1.0,0.0),plot(vUv,pct.g)); 33 | // color = mix(color,vec3(0.0,0.0,1.0),plot(vUv,pct.b)); 34 | 35 | gl_FragColor = vec4(color, 1.0); 36 | } -------------------------------------------------------------------------------- /src/containers/Shaders/8/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/containers/Shaders/9/data.ts: -------------------------------------------------------------------------------- 1 | import { GetStaticProps } from 'next'; 2 | 3 | import fragmentShader from './fragment.glsl'; 4 | import vertexShader from './vertex.glsl'; 5 | 6 | export const getStaticProps: GetStaticProps = async () => { 7 | return { 8 | props: { 9 | fragmentShader, 10 | vertexShader, 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/containers/Shaders/9/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uPlaneRes; 3 | uniform vec2 uCanvasRes; 4 | uniform vec2 uMouse; 5 | uniform float uPixelRatio; 6 | 7 | varying vec2 vUv; 8 | 9 | #define PI 3.14159265359 10 | 11 | vec3 colorA = vec3(0.149,0.141,0.912); 12 | vec3 colorB = vec3(1.000,0.833,0.224); 13 | 14 | float plot (vec2 st, float pct){ 15 | return smoothstep(0.01, 0.0, abs(st.y - pct)); 16 | } 17 | 18 | void main() 19 | { 20 | vec3 color = vec3(0.0); 21 | 22 | vec3 pct = vec3(vUv.y); 23 | 24 | float waveMove = -pow(cos((uTime)/2.), 2.); 25 | 26 | pct = vec3(waveMove * 0.6 + pow(cos((PI*(vUv.x - uTime * 0.5 ))/2.), 2.)); 27 | 28 | color = mix(colorA, colorB, pct); 29 | 30 | // Plot transition lines for each channel 31 | color = mix(color, vec3(1., 1., 1.) , plot(vUv , pct.r)); 32 | gl_FragColor = vec4(color, 1.0); 33 | } -------------------------------------------------------------------------------- /src/containers/Shaders/9/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /src/hooks/useElementSize.ts: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from 'react'; 2 | import { debounce } from 'lodash'; 3 | 4 | import { DomRectSSR } from 'utils/sharedTypes'; 5 | 6 | type ElRef = React.RefObject; 7 | 8 | interface Size { 9 | clientRect: DomRectSSR; 10 | offsetTop: number; 11 | isReady: boolean; 12 | } 13 | 14 | const EmptySSRRect: DomRectSSR = { 15 | bottom: 1, 16 | height: 1, 17 | left: 1, 18 | right: 1, 19 | top: 1, 20 | width: 1, 21 | x: 1, 22 | y: 1, 23 | }; 24 | 25 | const emptySize: Size = { 26 | clientRect: EmptySSRRect, 27 | offsetTop: 0, 28 | isReady: false, 29 | }; 30 | 31 | export const useElementSize = (elRef: ElRef) => { 32 | const [size, setSize] = useState(emptySize); 33 | 34 | const onResize = useCallback(() => { 35 | if (!elRef.current) { 36 | return () => {}; 37 | } 38 | const rect = elRef.current.getBoundingClientRect(); 39 | 40 | return setSize({ 41 | clientRect: rect, 42 | isReady: true, 43 | offsetTop: elRef.current.offsetTop, 44 | }); 45 | }, [elRef]); 46 | 47 | useEffect(() => { 48 | const onResizeDebounced = debounce(onResize, 300); 49 | 50 | window.addEventListener('resize', onResizeDebounced); 51 | onResize(); 52 | 53 | return () => { 54 | window.removeEventListener('resize', onResizeDebounced); 55 | }; 56 | }, [onResize]); 57 | 58 | return { 59 | onResize, 60 | size, 61 | }; 62 | }; 63 | -------------------------------------------------------------------------------- /src/hooks/useMediaPreload.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | interface Props { 4 | mediaSrc: string; 5 | isImage: boolean; 6 | shouldLoad?: boolean; 7 | } 8 | 9 | export const useMediaPreload = (props: Props) => { 10 | const { shouldLoad = true, mediaSrc, isImage } = props; 11 | const [isLoaded, setIsLoaded] = useState(false); 12 | 13 | //Handle images 14 | useEffect(() => { 15 | if (!isImage || !shouldLoad || !mediaSrc) { 16 | return () => {}; 17 | } 18 | const onMediaLoad = () => { 19 | setIsLoaded(true); 20 | }; 21 | 22 | const image = new Image(); 23 | image.src = mediaSrc; 24 | 25 | if (image.complete) { 26 | return setIsLoaded(true); 27 | } 28 | 29 | const load = () => onMediaLoad(); 30 | 31 | image.addEventListener('load', load); 32 | return () => { 33 | image.removeEventListener('load', load); 34 | }; 35 | }, [isImage, mediaSrc, shouldLoad]); 36 | 37 | //Handle videos 38 | useEffect(() => { 39 | if (isImage || !shouldLoad || !mediaSrc) { 40 | return () => {}; 41 | } 42 | 43 | const onMediaLoad = () => { 44 | setIsLoaded(true); 45 | }; 46 | 47 | const videoEl = document.createElement('video'); 48 | videoEl.setAttribute('src', mediaSrc); 49 | 50 | videoEl.addEventListener('canplay', onMediaLoad); 51 | videoEl.addEventListener('loadedmetadata', onMediaLoad); 52 | 53 | return () => { 54 | videoEl.removeEventListener('canplay', onMediaLoad); 55 | videoEl.removeEventListener('loadedmetadata', onMediaLoad); 56 | }; 57 | }, [isImage, mediaSrc, shouldLoad]); 58 | 59 | return { isLoaded }; 60 | }; 61 | -------------------------------------------------------------------------------- /src/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useCallback } from 'react'; 2 | import { useRouter } from 'next/router'; 3 | 4 | export default function Error404() { 5 | const router = useRouter(); 6 | 7 | const goToLanding = useCallback(() => { 8 | router.push('/'); 9 | }, [router]); 10 | 11 | useEffect(() => { 12 | goToLanding(); 13 | }, [goToLanding]); 14 | 15 | return null; 16 | } 17 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import 'focus-visible'; 3 | import '../styles/index.scss'; 4 | import type { AppProps } from 'next/app'; 5 | import { useRouter } from 'next/router'; 6 | import FontFaceObserver from 'fontfaceobserver'; 7 | 8 | import { Layout } from 'components/Layout/Layout'; 9 | 10 | export default function MyApp(props: AppProps) { 11 | const { Component, pageProps } = props; 12 | const router = useRouter(); 13 | 14 | const [isReady, setIsReady] = useState(false); 15 | 16 | useEffect(() => { 17 | const fontA = new FontFaceObserver('opensans'); 18 | 19 | Promise.all([fontA.load(null, 1500)]) 20 | .then( 21 | () => { 22 | setIsReady(true); 23 | }, 24 | () => { 25 | setIsReady(true); 26 | console.warn('Fonts were loading too long (over 1500ms)'); 27 | } 28 | ) 29 | .catch(err => { 30 | setIsReady(true); 31 | console.warn('Some critical font are not available:', err); 32 | }); 33 | }, []); 34 | 35 | return ( 36 | <> 37 | 38 | 39 | 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'containers/IndexPage/IndexPage'; 2 | -------------------------------------------------------------------------------- /src/pages/shaders/1.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/1/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/10.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/10/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/11.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/11/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/12.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/12/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/13.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/13/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/14.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/14/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/15.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/15/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/16.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/16/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/17.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/17/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/18.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/18/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/19.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/19/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/2.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/2/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/20.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/20/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/21.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/21/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/22.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/22/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/23.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/23/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/24.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/24/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/25.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/25/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/26.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/26/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/27.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/27/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/28.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/28/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/29.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/29/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/3.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/3/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/30.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/30/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/31.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/31/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/32.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/32/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/33.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/33/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/34.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/34/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/35.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/35/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/36.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/36/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/37.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/37/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/38.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/38/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/39.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/39/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/4.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/4/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/40.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/40/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/41.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/41/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/42.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/42/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/43.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/43/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/44.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/44/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/45.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/45/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/46.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/46/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/47.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/47/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/48.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/48/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/49.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/49/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/5.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/5/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/50.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/50/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/51.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/51/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/52.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/52/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/53.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/53/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/54.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/54/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/55.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/55/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/56.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/56/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/57.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/57/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/58.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/58/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/59.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/59/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/6.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/6/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/60.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/60/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/61.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/61/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/62.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/62/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/63.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/63/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/64.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/64/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/65.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/65/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/66.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/66/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/67.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/67/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/68.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/68/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/69.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/69/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/7.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/7/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/70.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/70/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/71.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/71/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/72.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/72/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/8.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/8/data'; 3 | -------------------------------------------------------------------------------- /src/pages/shaders/9.tsx: -------------------------------------------------------------------------------- 1 | export { default } from 'utils/shaderPage/ShaderPage'; 2 | export { getStaticProps } from 'containers/Shaders/9/data'; 3 | -------------------------------------------------------------------------------- /src/seo/GoogleAnalytics/GoogleAnalytics.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const GoogleAnalytics = () => { 4 | const googleAnalyticsTag = process.env.NEXT_PUBLIC_GA_KEY; 5 | return ( 6 | <> 7 |