From 5471c2ad1cc6dd23436b931693e74145bb070783 Mon Sep 17 00:00:00 2001 From: AMAGI / Jun Yuri Date: Tue, 9 Jul 2024 12:37:15 -0700 Subject: [PATCH] refactor: reorganize docs (#82) * ci: deploy REACT-VFX docs to react-vfx-docs * refactor: rename docs to docs-react-vfx * ci: replace deploy key * refactor: rename docs-vfx-js to docs * docs: deploy VFX-JS docs to GitHub Pages of this repository * chore: remove unused * chore: rename * chore: update package-lock.json --- .github/workflows/deploy-react-vfx.yml | 37 ++ .github/workflows/deploy-vfx-js.yml | 15 +- .github/workflows/deploy.yml | 31 -- package-lock.json | 104 ++-- .../.gitignore | 3 - packages/docs-react-vfx/index.html | 78 +++ .../package.json | 21 +- .../public/amagi.png | Bin .../public/cat.gif | Bin .../{docs => docs-react-vfx}/public/chill.gif | Bin .../{docs => docs-react-vfx}/public/david.png | Bin .../{docs => docs-react-vfx}/public/doge.gif | Bin .../favicon/favicon-144-precomposed.png | Bin .../favicon/favicon-180-precomposed.png | Bin .../public/favicon/favicon-192.png | Bin 0 -> 2719 bytes .../public/favicon/favicon-36.png | Bin .../public/favicon/favicon-48.png | Bin .../public/favicon/favicon-72.png | Bin .../public/favicon/favicon-96.png | Bin .../docs-react-vfx/public/favicon/favicon.ico | Bin 0 -> 5558 bytes .../public/index.html | 0 .../public/logo-oneline.png | Bin .../public/logo-with-bg.png | Bin .../public/logo.png | Bin .../public/mind_blown.gif | Bin .../public/mind_blown.mp4 | Bin .../public/octocat.gif | Bin .../public/react-logo-oneline.png | Bin .../public/react-logo.png | Bin .../public/robots.txt | 0 .../public/vfx-js-blob.webp | Bin .../public/vfx-js-logo-no-padding.svg | 8 + .../public/vfx-js-logo.svg | 17 +- .../public/vfx-js-top-blob.png | Bin .../public/webgl-logo.png | Bin packages/{docs => docs-react-vfx}/src/App.css | 0 packages/{docs => docs-react-vfx}/src/App.tsx | 0 packages/{docs => docs-react-vfx}/src/Bg.tsx | 0 .../src/dom/AuthorSection.css | 0 .../src/dom/AuthorSection.tsx | 0 .../{docs => docs-react-vfx}/src/dom/Code.tsx | 0 .../src/dom/DivSection.css | 0 .../src/dom/DivSection.tsx | 0 .../src/dom/ExamplesSection.css | 0 .../src/dom/ExamplesSection.tsx | 0 .../src/dom/Frame.css | 0 .../src/dom/Frame.tsx | 0 .../src/dom/InputSection.css | 0 .../src/dom/InputSection.tsx | 0 .../src/dom/IntroSection.css | 0 .../src/dom/IntroSection.tsx | 0 .../src/dom/LogoSection.css | 0 .../src/dom/LogoSection.tsx | 0 .../src/dom/UsageSection.tsx | 0 .../src/gl/Effects.tsx | 0 .../src/gl/Fragments.tsx | 0 .../src/gl/Triangle.tsx | 0 .../{docs => docs-react-vfx}/src/index.css | 0 .../{docs => docs-react-vfx}/src/main.tsx | 0 .../{docs => docs-react-vfx}/src/types.d.ts | 0 .../src/vite-env.d.ts | 0 .../tsconfig.json | 0 .../tsconfig.node.json | 0 packages/docs-react-vfx/vite.config.ts | 12 + packages/docs-vfx-js/index.html | 522 ------------------ .../public/favicon/favicon-192.png | Bin 796 -> 0 bytes .../docs-vfx-js/public/favicon/favicon.ico | Bin 5558 -> 0 bytes .../public/vfx-js-logo-no-padding.svg | 8 - packages/docs-vfx-js/vite.config.ts | 20 - packages/docs/.gitignore | 3 + packages/{docs-vfx-js => docs}/CHANGELOG.md | 0 packages/{docs-vfx-js => docs}/index.css | 0 packages/docs/index.html | 498 ++++++++++++++++- .../manifest.webmanifest | 0 packages/docs/package.json | 19 +- .../public/favicon/favicon-180.png | Bin packages/docs/public/favicon/favicon-192.png | Bin 2719 -> 796 bytes .../public/favicon/favicon-512.png | Bin packages/docs/public/favicon/favicon.ico | Bin 5558 -> 5558 bytes .../public/favicon/favicon.svg | 0 .../{docs-vfx-js => docs}/public/github.svg | 0 .../public/jellyfish.mp4 | Bin .../{docs-vfx-js => docs}/public/nyancat.gif | Bin .../{docs-vfx-js => docs}/public/og_image.jpg | Bin .../{docs-vfx-js => docs}/public/threads.svg | 0 .../{docs-vfx-js => docs}/public/twitter.svg | 0 .../docs/public/vfx-js-logo-no-padding.svg | 14 +- packages/docs/public/vfx-js-logo.svg | 17 +- packages/{docs-vfx-js => docs}/src/main.ts | 0 packages/docs/vite.config.ts | 14 +- packages/vfx-js/README.md | 2 +- packages/vfx-js/package.json | 2 +- 92 files changed, 733 insertions(+), 712 deletions(-) create mode 100644 .github/workflows/deploy-react-vfx.yml delete mode 100644 .github/workflows/deploy.yml rename packages/{docs-vfx-js => docs-react-vfx}/.gitignore (84%) create mode 100644 packages/docs-react-vfx/index.html rename packages/{docs-vfx-js => docs-react-vfx}/package.json (52%) rename packages/{docs-vfx-js => docs-react-vfx}/public/amagi.png (100%) rename packages/{docs-vfx-js => docs-react-vfx}/public/cat.gif (100%) rename packages/{docs => docs-react-vfx}/public/chill.gif (100%) rename packages/{docs => docs-react-vfx}/public/david.png (100%) rename packages/{docs => docs-react-vfx}/public/doge.gif (100%) rename packages/{docs => docs-react-vfx}/public/favicon/favicon-144-precomposed.png (100%) rename packages/{docs => docs-react-vfx}/public/favicon/favicon-180-precomposed.png (100%) create mode 100644 packages/docs-react-vfx/public/favicon/favicon-192.png rename packages/{docs => docs-react-vfx}/public/favicon/favicon-36.png (100%) rename packages/{docs => docs-react-vfx}/public/favicon/favicon-48.png (100%) rename packages/{docs => docs-react-vfx}/public/favicon/favicon-72.png (100%) rename packages/{docs => docs-react-vfx}/public/favicon/favicon-96.png (100%) create mode 100644 packages/docs-react-vfx/public/favicon/favicon.ico rename packages/{docs => docs-react-vfx}/public/index.html (100%) rename packages/{docs => docs-react-vfx}/public/logo-oneline.png (100%) rename packages/{docs => docs-react-vfx}/public/logo-with-bg.png (100%) rename packages/{docs-vfx-js => docs-react-vfx}/public/logo.png (100%) rename packages/{docs => docs-react-vfx}/public/mind_blown.gif (100%) rename packages/{docs => docs-react-vfx}/public/mind_blown.mp4 (100%) rename packages/{docs-vfx-js => docs-react-vfx}/public/octocat.gif (100%) rename packages/{docs => docs-react-vfx}/public/react-logo-oneline.png (100%) rename packages/{docs => docs-react-vfx}/public/react-logo.png (100%) rename packages/{docs-vfx-js => docs-react-vfx}/public/robots.txt (100%) rename packages/{docs-vfx-js => docs-react-vfx}/public/vfx-js-blob.webp (100%) create mode 100644 packages/docs-react-vfx/public/vfx-js-logo-no-padding.svg rename packages/{docs-vfx-js => docs-react-vfx}/public/vfx-js-logo.svg (75%) rename packages/{docs-vfx-js => docs-react-vfx}/public/vfx-js-top-blob.png (100%) rename packages/{docs => docs-react-vfx}/public/webgl-logo.png (100%) rename packages/{docs => docs-react-vfx}/src/App.css (100%) rename packages/{docs => docs-react-vfx}/src/App.tsx (100%) rename packages/{docs => docs-react-vfx}/src/Bg.tsx (100%) rename packages/{docs => docs-react-vfx}/src/dom/AuthorSection.css (100%) rename packages/{docs => docs-react-vfx}/src/dom/AuthorSection.tsx (100%) rename packages/{docs => docs-react-vfx}/src/dom/Code.tsx (100%) rename packages/{docs => docs-react-vfx}/src/dom/DivSection.css (100%) rename packages/{docs => docs-react-vfx}/src/dom/DivSection.tsx (100%) rename packages/{docs => docs-react-vfx}/src/dom/ExamplesSection.css (100%) rename packages/{docs => docs-react-vfx}/src/dom/ExamplesSection.tsx (100%) rename packages/{docs => docs-react-vfx}/src/dom/Frame.css (100%) rename packages/{docs => docs-react-vfx}/src/dom/Frame.tsx (100%) rename packages/{docs => docs-react-vfx}/src/dom/InputSection.css (100%) rename packages/{docs => docs-react-vfx}/src/dom/InputSection.tsx (100%) rename packages/{docs => docs-react-vfx}/src/dom/IntroSection.css (100%) rename packages/{docs => docs-react-vfx}/src/dom/IntroSection.tsx (100%) rename packages/{docs => docs-react-vfx}/src/dom/LogoSection.css (100%) rename packages/{docs => docs-react-vfx}/src/dom/LogoSection.tsx (100%) rename packages/{docs => docs-react-vfx}/src/dom/UsageSection.tsx (100%) rename packages/{docs => docs-react-vfx}/src/gl/Effects.tsx (100%) rename packages/{docs => docs-react-vfx}/src/gl/Fragments.tsx (100%) rename packages/{docs => docs-react-vfx}/src/gl/Triangle.tsx (100%) rename packages/{docs => docs-react-vfx}/src/index.css (100%) rename packages/{docs => docs-react-vfx}/src/main.tsx (100%) rename packages/{docs => docs-react-vfx}/src/types.d.ts (100%) rename packages/{docs => docs-react-vfx}/src/vite-env.d.ts (100%) rename packages/{docs-vfx-js => docs-react-vfx}/tsconfig.json (100%) rename packages/{docs-vfx-js => docs-react-vfx}/tsconfig.node.json (100%) create mode 100644 packages/docs-react-vfx/vite.config.ts delete mode 100644 packages/docs-vfx-js/index.html delete mode 100644 packages/docs-vfx-js/public/favicon/favicon-192.png delete mode 100644 packages/docs-vfx-js/public/favicon/favicon.ico delete mode 100644 packages/docs-vfx-js/public/vfx-js-logo-no-padding.svg delete mode 100644 packages/docs-vfx-js/vite.config.ts rename packages/{docs-vfx-js => docs}/CHANGELOG.md (100%) rename packages/{docs-vfx-js => docs}/index.css (100%) rename packages/{docs-vfx-js => docs}/manifest.webmanifest (100%) rename packages/{docs-vfx-js => docs}/public/favicon/favicon-180.png (100%) rename packages/{docs-vfx-js => docs}/public/favicon/favicon-512.png (100%) rename packages/{docs-vfx-js => docs}/public/favicon/favicon.svg (100%) rename packages/{docs-vfx-js => docs}/public/github.svg (100%) rename packages/{docs-vfx-js => docs}/public/jellyfish.mp4 (100%) rename packages/{docs-vfx-js => docs}/public/nyancat.gif (100%) rename packages/{docs-vfx-js => docs}/public/og_image.jpg (100%) rename packages/{docs-vfx-js => docs}/public/threads.svg (100%) rename packages/{docs-vfx-js => docs}/public/twitter.svg (100%) rename packages/{docs-vfx-js => docs}/src/main.ts (100%) diff --git a/.github/workflows/deploy-react-vfx.yml b/.github/workflows/deploy-react-vfx.yml new file mode 100644 index 0000000..dfe1783 --- /dev/null +++ b/.github/workflows/deploy-react-vfx.yml @@ -0,0 +1,37 @@ +name: Deploy to amagi.dev/react-vfx-docs + +on: + push: + branches: + - main + workflow_dispatch: + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: "20" + cache: "npm" + cache-dependency-path: "**/package-lock.json" + + - name: Install dependencies + run: npm ci + + - name: Build + run: npm run build + + - name: Pushes to another repository + uses: cpina/github-action-push-to-another-repository@main + env: + SSH_DEPLOY_KEY: ${{ secrets.REACT_VFX_DEPLOY_KEY }} + with: + source-directory: "packages/docs-react-vfx/dist" + destination-github-username: "fand" + destination-repository-name: "react-vfx-docs" + user-email: mail@amagi.dev + target-branch: main diff --git a/.github/workflows/deploy-vfx-js.yml b/.github/workflows/deploy-vfx-js.yml index 627f919..f656a06 100644 --- a/.github/workflows/deploy-vfx-js.yml +++ b/.github/workflows/deploy-vfx-js.yml @@ -27,17 +27,12 @@ jobs: - name: Sync TypeDoc run: | - cd packages/docs-vfx-js + cd packages/docs rm -rf dist/docs mv docs dist/docs - - name: Pushes to another repository - uses: cpina/github-action-push-to-another-repository@main - env: - SSH_DEPLOY_KEY: ${{ secrets.VFX_JS_DEPLOY_KEY }} + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 with: - source-directory: "packages/docs-vfx-js/dist" - destination-github-username: "fand" - destination-repository-name: "vfx-js" - user-email: mail@amagi.dev - target-branch: main + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./packages/docs/dist diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml deleted file mode 100644 index dbb41a5..0000000 --- a/.github/workflows/deploy.yml +++ /dev/null @@ -1,31 +0,0 @@ -name: Deploy to amagi.dev/react-vfx - -on: - push: - branches: - - main - -jobs: - deploy: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - node-version: "20" - cache: "npm" - cache-dependency-path: "**/package-lock.json" - - - name: Install dependencies - run: npm ci - - - name: Build REACT-VFX and docs - run: npm run build - - - name: Deploy - uses: peaceiris/actions-gh-pages@v3 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./packages/docs/dist diff --git a/package-lock.json b/package-lock.json index a7c33ec..70b33fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3460,8 +3460,8 @@ "resolved": "packages/docs", "link": true }, - "node_modules/docs-vfx-js": { - "resolved": "packages/docs-vfx-js", + "node_modules/docs-react-vfx": { + "resolved": "packages/docs-react-vfx", "link": true }, "node_modules/doctrine": { @@ -9838,22 +9838,14 @@ } }, "packages/docs": { - "version": "0.0.0", + "version": "0.0.2", "dependencies": { - "@react-spring/web": "^9.7.3", - "@react-three/fiber": "^8.16.8", - "@react-three/postprocessing": "^2.16.2", + "@vfx-js/core": "0.3.0", "dedent": "^1.5.3", "is-mobile": "^4.0.0", "lodash.debounce": "^4.0.8", - "postprocessing": "^6.35.5", - "prism-react-renderer": "^2.3.1", + "prism-themes": "^1.9.0", "prismjs": "^1.29.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-lazyload": "^3.2.1", - "react-vfx": "*", - "three": "^0.165.0", "vh-check": "^2.0.5" }, "devDependencies": { @@ -9862,25 +9854,28 @@ "@types/is-mobile": "^2.1.4", "@types/lodash.debounce": "^4.0.9", "@types/node": "^20.14.2", - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0", - "@types/react-lazyload": "^3.2.3", - "@types/three": "^0.165.0", - "@vitejs/plugin-react": "^4.3.0", "rimraf": "^5.0.7", "typescript": "^5.4.5", "vite": "^5.2.13" } }, - "packages/docs-vfx-js": { - "version": "0.0.1", + "packages/docs-react-vfx": { + "version": "0.0.0", "dependencies": { - "@vfx-js/core": "0.2.0", + "@react-spring/web": "^9.7.3", + "@react-three/fiber": "^8.16.8", + "@react-three/postprocessing": "^2.16.2", "dedent": "^1.5.3", "is-mobile": "^4.0.0", "lodash.debounce": "^4.0.8", - "prism-themes": "^1.9.0", + "postprocessing": "^6.35.5", + "prism-react-renderer": "^2.3.1", "prismjs": "^1.29.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-lazyload": "^3.2.1", + "react-vfx": "*", + "three": "^0.165.0", "vh-check": "^2.0.5" }, "devDependencies": { @@ -9889,12 +9884,17 @@ "@types/is-mobile": "^2.1.4", "@types/lodash.debounce": "^4.0.9", "@types/node": "^20.14.2", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "@types/react-lazyload": "^3.2.3", + "@types/three": "^0.165.0", + "@vitejs/plugin-react": "^4.3.0", "rimraf": "^5.0.7", "typescript": "^5.4.5", "vite": "^5.2.13" } }, - "packages/docs-vfx-js/node_modules/brace-expansion": { + "packages/docs-react-vfx/node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", @@ -9903,10 +9903,10 @@ "balanced-match": "^1.0.0" } }, - "packages/docs-vfx-js/node_modules/glob": { - "version": "10.4.2", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz", - "integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==", + "packages/docs-react-vfx/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", "dev": true, "dependencies": { "foreground-child": "^3.1.0", @@ -9919,17 +9919,14 @@ "bin": { "glob": "dist/esm/bin.mjs" }, - "engines": { - "node": ">=16 || 14 >=14.18" - }, "funding": { "url": "https://github.com/sponsors/isaacs" } }, - "packages/docs-vfx-js/node_modules/minimatch": { - "version": "9.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", - "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "packages/docs-react-vfx/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dev": true, "dependencies": { "brace-expansion": "^2.0.1" @@ -9941,10 +9938,10 @@ "url": "https://github.com/sponsors/isaacs" } }, - "packages/docs-vfx-js/node_modules/rimraf": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.7.tgz", - "integrity": "sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==", + "packages/docs-react-vfx/node_modules/rimraf": { + "version": "5.0.9", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.9.tgz", + "integrity": "sha512-3i7b8OcswU6CpU8Ej89quJD4O98id7TtVM5U4Mybh84zQXdrFmDLouWBEEaD/QfO3gDDfH+AGFCGsR7kngzQnA==", "dev": true, "dependencies": { "glob": "^10.3.7" @@ -9953,12 +9950,35 @@ "rimraf": "dist/esm/bin.mjs" }, "engines": { - "node": ">=14.18" + "node": "14 >=14.20 || 16 >=16.20 || >=18" }, "funding": { "url": "https://github.com/sponsors/isaacs" } }, + "packages/docs-vfx-js": { + "version": "0.0.1", + "extraneous": true, + "dependencies": { + "@vfx-js/core": "0.2.0", + "dedent": "^1.5.3", + "is-mobile": "^4.0.0", + "lodash.debounce": "^4.0.8", + "prism-themes": "^1.9.0", + "prismjs": "^1.29.0", + "vh-check": "^2.0.5" + }, + "devDependencies": { + "@originjs/vite-plugin-commonjs": "^1.0.3", + "@types/dedent": "^0.7.2", + "@types/is-mobile": "^2.1.4", + "@types/lodash.debounce": "^4.0.9", + "@types/node": "^20.14.2", + "rimraf": "^5.0.7", + "typescript": "^5.4.5", + "vite": "^5.2.13" + } + }, "packages/docs/node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -10024,10 +10044,10 @@ } }, "packages/react-vfx": { - "version": "0.7.0", + "version": "0.8.0", "license": "MIT", "dependencies": { - "@vfx-js/core": "0.2.0" + "@vfx-js/core": "0.3.0" }, "devDependencies": { "@types/node": "^20.14.2", @@ -10118,7 +10138,7 @@ }, "packages/vfx-js": { "name": "@vfx-js/core", - "version": "0.2.0", + "version": "0.3.0", "license": "MIT", "dependencies": { "three": "^0.165.0" diff --git a/packages/docs-vfx-js/.gitignore b/packages/docs-react-vfx/.gitignore similarity index 84% rename from packages/docs-vfx-js/.gitignore rename to packages/docs-react-vfx/.gitignore index a6940a8..7f94111 100644 --- a/packages/docs-vfx-js/.gitignore +++ b/packages/docs-react-vfx/.gitignore @@ -11,6 +11,3 @@ dist .vscode/* !.vscode/extensions.json .DS_Store - -# Typedoc outputs -docs/* diff --git a/packages/docs-react-vfx/index.html b/packages/docs-react-vfx/index.html new file mode 100644 index 0000000..e9a52be --- /dev/null +++ b/packages/docs-react-vfx/index.html @@ -0,0 +1,78 @@ + + + + + + + REACT-VFX - WebGL effects for React! #REACTVFX + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + diff --git a/packages/docs-vfx-js/package.json b/packages/docs-react-vfx/package.json similarity index 52% rename from packages/docs-vfx-js/package.json rename to packages/docs-react-vfx/package.json index 18656f5..5f0776f 100644 --- a/packages/docs-vfx-js/package.json +++ b/packages/docs-react-vfx/package.json @@ -1,7 +1,7 @@ { - "name": "docs-vfx-js", + "name": "docs-react-vfx", "private": true, - "version": "0.0.2", + "version": "0.0.0", "type": "module", "scripts": { "dev": "vite --host", @@ -9,12 +9,20 @@ "preview": "vite preview" }, "dependencies": { - "@vfx-js/core": "0.3.0", + "@react-spring/web": "^9.7.3", + "@react-three/fiber": "^8.16.8", + "@react-three/postprocessing": "^2.16.2", "dedent": "^1.5.3", "is-mobile": "^4.0.0", "lodash.debounce": "^4.0.8", - "prism-themes": "^1.9.0", + "postprocessing": "^6.35.5", + "prism-react-renderer": "^2.3.1", "prismjs": "^1.29.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-lazyload": "^3.2.1", + "react-vfx": "*", + "three": "^0.165.0", "vh-check": "^2.0.5" }, "devDependencies": { @@ -23,6 +31,11 @@ "@types/is-mobile": "^2.1.4", "@types/lodash.debounce": "^4.0.9", "@types/node": "^20.14.2", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "@types/react-lazyload": "^3.2.3", + "@types/three": "^0.165.0", + "@vitejs/plugin-react": "^4.3.0", "rimraf": "^5.0.7", "typescript": "^5.4.5", "vite": "^5.2.13" diff --git a/packages/docs-vfx-js/public/amagi.png b/packages/docs-react-vfx/public/amagi.png similarity index 100% rename from packages/docs-vfx-js/public/amagi.png rename to packages/docs-react-vfx/public/amagi.png diff --git a/packages/docs-vfx-js/public/cat.gif b/packages/docs-react-vfx/public/cat.gif similarity index 100% rename from packages/docs-vfx-js/public/cat.gif rename to packages/docs-react-vfx/public/cat.gif diff --git a/packages/docs/public/chill.gif b/packages/docs-react-vfx/public/chill.gif similarity index 100% rename from packages/docs/public/chill.gif rename to packages/docs-react-vfx/public/chill.gif diff --git a/packages/docs/public/david.png b/packages/docs-react-vfx/public/david.png similarity index 100% rename from packages/docs/public/david.png rename to packages/docs-react-vfx/public/david.png diff --git a/packages/docs/public/doge.gif b/packages/docs-react-vfx/public/doge.gif similarity index 100% rename from packages/docs/public/doge.gif rename to packages/docs-react-vfx/public/doge.gif diff --git a/packages/docs/public/favicon/favicon-144-precomposed.png b/packages/docs-react-vfx/public/favicon/favicon-144-precomposed.png similarity index 100% rename from packages/docs/public/favicon/favicon-144-precomposed.png rename to packages/docs-react-vfx/public/favicon/favicon-144-precomposed.png diff --git a/packages/docs/public/favicon/favicon-180-precomposed.png b/packages/docs-react-vfx/public/favicon/favicon-180-precomposed.png similarity index 100% rename from packages/docs/public/favicon/favicon-180-precomposed.png rename to packages/docs-react-vfx/public/favicon/favicon-180-precomposed.png diff --git a/packages/docs-react-vfx/public/favicon/favicon-192.png b/packages/docs-react-vfx/public/favicon/favicon-192.png new file mode 100644 index 0000000000000000000000000000000000000000..bfcf37bf6534b4235cdcc5317d702516463fbf01 GIT binary patch literal 2719 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 literal 0 HcmV?d00001 diff --git a/packages/docs/public/favicon/favicon-36.png b/packages/docs-react-vfx/public/favicon/favicon-36.png similarity index 100% rename from packages/docs/public/favicon/favicon-36.png rename to packages/docs-react-vfx/public/favicon/favicon-36.png diff --git a/packages/docs/public/favicon/favicon-48.png b/packages/docs-react-vfx/public/favicon/favicon-48.png similarity index 100% rename from packages/docs/public/favicon/favicon-48.png rename to packages/docs-react-vfx/public/favicon/favicon-48.png diff --git a/packages/docs/public/favicon/favicon-72.png b/packages/docs-react-vfx/public/favicon/favicon-72.png similarity index 100% rename from packages/docs/public/favicon/favicon-72.png rename to packages/docs-react-vfx/public/favicon/favicon-72.png diff --git a/packages/docs/public/favicon/favicon-96.png b/packages/docs-react-vfx/public/favicon/favicon-96.png similarity index 100% rename from packages/docs/public/favicon/favicon-96.png rename to packages/docs-react-vfx/public/favicon/favicon-96.png diff --git a/packages/docs-react-vfx/public/favicon/favicon.ico b/packages/docs-react-vfx/public/favicon/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..0c95fcdd68b7e09522e15d7fe1b5ce20c7e254ee GIT binary patch literal 5558 zcmeI0yK7WI6vihHH0d@m8tfJo35a455FeoFjDnBC|3Jk`!OB0tMi85bmZlW75)>a1 zB`MWTF+o8T6hW|1)J9x?AGs5DkF%M3=WebDd*GLuIdi`A-Mx?O!?_;U>*{sKSa)MX z&TV$i)oP3DQ~k~zA~!~k61NXj_rFG?(HMsH|Kj-Z9fBFyU$sA;HMkFoi7Nf^Yxb_x zA2VHV|GMR^sO0tI(+9U?Xriz``UyB4;4Hb|{X~8hEP#zd{)msk58EVLzh&GOx}V6) z|0USS?T=92-))0zt=^kL-pa98${&5QcUk|k-evqd;hpN=Den~ji1!QjH>hvkpg#Bg z7xC6Jyfy1L$SC?^$C1_R8L`pw{IR**eJ<^1cm=PU*xLzz`o+8{3C4l4{&Y?C)&WhH z@ZW*{Ftq!hs{XM^_5VfV%kVX35ZO=l|4rXBup4&fKy~wABh_Dh_QbAT^FH;@tU2p4 z{=1s{$L4rF?Xdqv`W=T8IXFqpJFrpa_1j)4>#l#~#^I#u{pU@}$<3iT7_ryquYR}+ zcUFM$n16S_dj_gL1NxnWpH5sIivCW*Gtz^saG+ZU`X1O@RE%Z>p1|XxTGgYw28z2O zJ^8h89xlNYw7mDSegulY^yH+~vH7^cM5lKtSU<=%TlD0tcADJkC1ExR>5W#Om#$cy zUt7J=vTS^UbD;Oz0k88TIe+}Ond_KmArxOouJJlQlJojG<~QLRsMhn7x#9y1dz~N2 zdHoFYQPmhOuvWzM_TIKuimDB9^CE^bHvexxFF{P)P~8pU|uM!%8#_8e@XCi + + + + + + + diff --git a/packages/docs-vfx-js/public/vfx-js-logo.svg b/packages/docs-react-vfx/public/vfx-js-logo.svg similarity index 75% rename from packages/docs-vfx-js/public/vfx-js-logo.svg rename to packages/docs-react-vfx/public/vfx-js-logo.svg index cc8e35b..5d1df49 100644 --- a/packages/docs-vfx-js/public/vfx-js-logo.svg +++ b/packages/docs-react-vfx/public/vfx-js-logo.svg @@ -1,13 +1,8 @@ - - - - - - - + + + + + + diff --git a/packages/docs-vfx-js/public/vfx-js-top-blob.png b/packages/docs-react-vfx/public/vfx-js-top-blob.png similarity index 100% rename from packages/docs-vfx-js/public/vfx-js-top-blob.png rename to packages/docs-react-vfx/public/vfx-js-top-blob.png diff --git a/packages/docs/public/webgl-logo.png b/packages/docs-react-vfx/public/webgl-logo.png similarity index 100% rename from packages/docs/public/webgl-logo.png rename to packages/docs-react-vfx/public/webgl-logo.png diff --git a/packages/docs/src/App.css b/packages/docs-react-vfx/src/App.css similarity index 100% rename from packages/docs/src/App.css rename to packages/docs-react-vfx/src/App.css diff --git a/packages/docs/src/App.tsx b/packages/docs-react-vfx/src/App.tsx similarity index 100% rename from packages/docs/src/App.tsx rename to packages/docs-react-vfx/src/App.tsx diff --git a/packages/docs/src/Bg.tsx b/packages/docs-react-vfx/src/Bg.tsx similarity index 100% rename from packages/docs/src/Bg.tsx rename to packages/docs-react-vfx/src/Bg.tsx diff --git a/packages/docs/src/dom/AuthorSection.css b/packages/docs-react-vfx/src/dom/AuthorSection.css similarity index 100% rename from packages/docs/src/dom/AuthorSection.css rename to packages/docs-react-vfx/src/dom/AuthorSection.css diff --git a/packages/docs/src/dom/AuthorSection.tsx b/packages/docs-react-vfx/src/dom/AuthorSection.tsx similarity index 100% rename from packages/docs/src/dom/AuthorSection.tsx rename to packages/docs-react-vfx/src/dom/AuthorSection.tsx diff --git a/packages/docs/src/dom/Code.tsx b/packages/docs-react-vfx/src/dom/Code.tsx similarity index 100% rename from packages/docs/src/dom/Code.tsx rename to packages/docs-react-vfx/src/dom/Code.tsx diff --git a/packages/docs/src/dom/DivSection.css b/packages/docs-react-vfx/src/dom/DivSection.css similarity index 100% rename from packages/docs/src/dom/DivSection.css rename to packages/docs-react-vfx/src/dom/DivSection.css diff --git a/packages/docs/src/dom/DivSection.tsx b/packages/docs-react-vfx/src/dom/DivSection.tsx similarity index 100% rename from packages/docs/src/dom/DivSection.tsx rename to packages/docs-react-vfx/src/dom/DivSection.tsx diff --git a/packages/docs/src/dom/ExamplesSection.css b/packages/docs-react-vfx/src/dom/ExamplesSection.css similarity index 100% rename from packages/docs/src/dom/ExamplesSection.css rename to packages/docs-react-vfx/src/dom/ExamplesSection.css diff --git a/packages/docs/src/dom/ExamplesSection.tsx b/packages/docs-react-vfx/src/dom/ExamplesSection.tsx similarity index 100% rename from packages/docs/src/dom/ExamplesSection.tsx rename to packages/docs-react-vfx/src/dom/ExamplesSection.tsx diff --git a/packages/docs/src/dom/Frame.css b/packages/docs-react-vfx/src/dom/Frame.css similarity index 100% rename from packages/docs/src/dom/Frame.css rename to packages/docs-react-vfx/src/dom/Frame.css diff --git a/packages/docs/src/dom/Frame.tsx b/packages/docs-react-vfx/src/dom/Frame.tsx similarity index 100% rename from packages/docs/src/dom/Frame.tsx rename to packages/docs-react-vfx/src/dom/Frame.tsx diff --git a/packages/docs/src/dom/InputSection.css b/packages/docs-react-vfx/src/dom/InputSection.css similarity index 100% rename from packages/docs/src/dom/InputSection.css rename to packages/docs-react-vfx/src/dom/InputSection.css diff --git a/packages/docs/src/dom/InputSection.tsx b/packages/docs-react-vfx/src/dom/InputSection.tsx similarity index 100% rename from packages/docs/src/dom/InputSection.tsx rename to packages/docs-react-vfx/src/dom/InputSection.tsx diff --git a/packages/docs/src/dom/IntroSection.css b/packages/docs-react-vfx/src/dom/IntroSection.css similarity index 100% rename from packages/docs/src/dom/IntroSection.css rename to packages/docs-react-vfx/src/dom/IntroSection.css diff --git a/packages/docs/src/dom/IntroSection.tsx b/packages/docs-react-vfx/src/dom/IntroSection.tsx similarity index 100% rename from packages/docs/src/dom/IntroSection.tsx rename to packages/docs-react-vfx/src/dom/IntroSection.tsx diff --git a/packages/docs/src/dom/LogoSection.css b/packages/docs-react-vfx/src/dom/LogoSection.css similarity index 100% rename from packages/docs/src/dom/LogoSection.css rename to packages/docs-react-vfx/src/dom/LogoSection.css diff --git a/packages/docs/src/dom/LogoSection.tsx b/packages/docs-react-vfx/src/dom/LogoSection.tsx similarity index 100% rename from packages/docs/src/dom/LogoSection.tsx rename to packages/docs-react-vfx/src/dom/LogoSection.tsx diff --git a/packages/docs/src/dom/UsageSection.tsx b/packages/docs-react-vfx/src/dom/UsageSection.tsx similarity index 100% rename from packages/docs/src/dom/UsageSection.tsx rename to packages/docs-react-vfx/src/dom/UsageSection.tsx diff --git a/packages/docs/src/gl/Effects.tsx b/packages/docs-react-vfx/src/gl/Effects.tsx similarity index 100% rename from packages/docs/src/gl/Effects.tsx rename to packages/docs-react-vfx/src/gl/Effects.tsx diff --git a/packages/docs/src/gl/Fragments.tsx b/packages/docs-react-vfx/src/gl/Fragments.tsx similarity index 100% rename from packages/docs/src/gl/Fragments.tsx rename to packages/docs-react-vfx/src/gl/Fragments.tsx diff --git a/packages/docs/src/gl/Triangle.tsx b/packages/docs-react-vfx/src/gl/Triangle.tsx similarity index 100% rename from packages/docs/src/gl/Triangle.tsx rename to packages/docs-react-vfx/src/gl/Triangle.tsx diff --git a/packages/docs/src/index.css b/packages/docs-react-vfx/src/index.css similarity index 100% rename from packages/docs/src/index.css rename to packages/docs-react-vfx/src/index.css diff --git a/packages/docs/src/main.tsx b/packages/docs-react-vfx/src/main.tsx similarity index 100% rename from packages/docs/src/main.tsx rename to packages/docs-react-vfx/src/main.tsx diff --git a/packages/docs/src/types.d.ts b/packages/docs-react-vfx/src/types.d.ts similarity index 100% rename from packages/docs/src/types.d.ts rename to packages/docs-react-vfx/src/types.d.ts diff --git a/packages/docs/src/vite-env.d.ts b/packages/docs-react-vfx/src/vite-env.d.ts similarity index 100% rename from packages/docs/src/vite-env.d.ts rename to packages/docs-react-vfx/src/vite-env.d.ts diff --git a/packages/docs-vfx-js/tsconfig.json b/packages/docs-react-vfx/tsconfig.json similarity index 100% rename from packages/docs-vfx-js/tsconfig.json rename to packages/docs-react-vfx/tsconfig.json diff --git a/packages/docs-vfx-js/tsconfig.node.json b/packages/docs-react-vfx/tsconfig.node.json similarity index 100% rename from packages/docs-vfx-js/tsconfig.node.json rename to packages/docs-react-vfx/tsconfig.node.json diff --git a/packages/docs-react-vfx/vite.config.ts b/packages/docs-react-vfx/vite.config.ts new file mode 100644 index 0000000..499bfe1 --- /dev/null +++ b/packages/docs-react-vfx/vite.config.ts @@ -0,0 +1,12 @@ +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import { viteCommonjs } from "@originjs/vite-plugin-commonjs"; + +// https://vitejs.dev/config/ +export default defineConfig(() => ({ + server: { + port: 3000, + }, + base: "", + plugins: [react(), viteCommonjs()], +})); diff --git a/packages/docs-vfx-js/index.html b/packages/docs-vfx-js/index.html deleted file mode 100644 index 8474bd0..0000000 --- a/packages/docs-vfx-js/index.html +++ /dev/null @@ -1,522 +0,0 @@ - - - - - - - VFX-JS - Visual Effects Framework for Web #VFXJS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- GITHUB -
-
- API -
- -
GITHUB
-
API
-
- - - -
- - -

- VFX-JS is a JavaScript library to add WebGL-powered effects to - your website.
You can easily attach it to normal - <img>, <video> elements - etc. -

-
- -
-

Usage

- -

Install via npm:

-
npm i @vfx-js/core
- -

Then create VFX object in your script:

-

-import { VFX } from '@vfx-js/core';
-
-const img = document.querySelector('#img');
-
-const vfx = new VFX();
-vfx.add(img, { shader: "glitch", overflow: 100 });
-            
-

This will be rendered as follows:

- - -

- VFX-JS is also available on CDNs (esm.sh - or - jsDeliver). So you can use VFX-JS in CodePen etc: -

-

-// Load VFX-JS from esm.sh
-import { VFX } from "https://esm.sh/@vfx-js/core";
-
-// or jsDeliver
-// import { VFX } from 'https://cdn.jsdelivr.net/npm/@vfx-js/core/+esm'
-
-// Then use VFX-JS
-const vfx = new VFX();
-vfx.add(img { shader: 'rgbShift' });
-            
- - -
- -
-

Examples

- -
-
-
-

Image

-

-<img src="example.png" />
-                    
-

-vfx.add(img, { shader: "rgbShift" });
-                    
-
-
-

Output

- -
-
- -
-
-

GIF

-

-<img src="example.gif" />
-                    
-

-vfx.add(gif, { shader: "rainbow" });
-                    
-
-
-

Output

- -
-
-
-
-

Video

-

-<video src="example.mp4" autoplay loop muted/>
-                    
- -

-vfx.add(video, { shader: "halftone" });
-                    
-
-
-

Output:

-
-
- -
-
-

Div (experimental)

-

-<div id="div">
-    <p>You can interact with these inputs.</p>
-    <input type="text" value="Edit me" />
-    <input type="range" min="0" max="100" value="0" />
-    <textarea>Edit me</textarea>
-</div>
-                        
- -

-vfx.add(div, { shader: "rgbShift", overflow: 100 });
-
-// Update on input
-input.addEventListener('input', () => vfx.update(div));
-
-// Update on textarea resize
-const mo = new MutationObserver(() => vfx.update(div));
-mo.observe(textarea, { attributes: true });
-
-                    
-
-
-

Output:

-
-

You can interact with these inputs.

- - - -
-
-
- -
-
-

Canvas

-

-<!--
-  VFX-JS also supports HTMLCanvasElement as the input.
-  You can draw 2D graphics and text in canvas,
-  then pass it to VFX-JS to add post effects.
--->
-<canvas id="canvas"/>
-                        
- -

-const canvas = document.getElementById("canvas");
-const ctx = canvas.getContext("2d");
-
-function drawCanvas() {
-    ...
-
-    // Update texture when the canvas has been updated
-    vfx.update(canvas);
-
-    requestAnimationFrame(drawCanvas);
-}
-drawCanvas();
-
-vfx.add(canvas, { shader });
-                    
-
-
-

Output:

- -
-
-
- -
-

Presets

-
-
-

-vfx.add(el, { shader: "rainbow" });
-                    
-
-
- -
-
-
-
-

-vfx.add(el, { shader: "rgbShift" });
-                        
-
-
- -
-
-
-
-

-// Some shaders require "overflow" property
-// so that they can render beyond the original area.
-//
-// In this example, the "glitch" shader can render
-// outside the original element up to 100px.
-vfx.add(el, { shader: "glitch", overflow: 100 });
-                        
-
-
- -
-
-
- -
-

Parameters

-

- Some shaders take parameters (e.g. duotone). You can pass - the params to the uniforms property. -

-
-
-

-vfx.add(el, {
-    shader: "duotone",
-    uniforms: {
-        color1: [0, 0, 1, 1],
-        color2: [0, 1, 0, 1],
-        speed: 0.2
-    }
-});
-                        
-
-
-
-
-
- -
-

Transitions

-

- VFX-JS presets for transition animation. These animation - start when the element gets in the viewport. -

-
-
-

-vfx.add(el, { shader: "slitScanTransition" });
-                        
-
-
- -
-
-
-
-

-vfx.add(el, { shader: "warpTransition" });
-                        
-
-
- -
-
-
-
-

-vfx.add(el, { shader: "pixelateTransition" });
-                        
-
-
- -
-
-
- -
-

Custom Shaders

-

You can write GLSL shader by yourself.

-
-
-

-const shader = `
-precision highp float;
-uniform vec2 resolution;
-uniform vec2 offset;
-uniform float time;
-uniform sampler2D src;
-
-uniform float scroll;
-
-void main (void) {
-    vec2 uv = (gl_FragCoord.xy - offset) / resolution;
-
-    // Scroll X
-    uv.x = fract(uv.x + scroll + time * 0.2);
-
-    gl_FragColor = texture2D(src, uv);
-}
-`;
-
-vfx.add(el, {
-    shader,
-    uniforms: {
-        // Uniform functions are evaluated every frame
-        scroll: () => window.scrollY / window.innerHeight,
-    }
-});
-                        
-
-
- -
-
-
-
- -
-
- -
-

Made by Amagi

- -
-
-
- -
-
-
- - - - - - - - diff --git a/packages/docs-vfx-js/public/favicon/favicon-192.png b/packages/docs-vfx-js/public/favicon/favicon-192.png deleted file mode 100644 index 6545d61b57b3e4ef43c94f80294109a46be8a060..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 796 zcmeAS@N?(olHy`uVBq!ia0vp^2SAvG8AvYpRA>UEBm#UwT!A!J5N0l;1(aYf3GxeO z(Df^veEP$N59)yo3`}c0T^vIyZoR!_n14Ayr0wD4ZEscvoXTp{$PSpetIFY3Ou$PS ztCTj2Z};2dLTabkEe_wfj{QjG)R(ueot!*b(OK#ACLLt-`P#;U`AHA+ZZBmo@#dGf zwUpgQIBfdT(pJXHEw2;r|F3(i^yu&56yJ*HyY^gb@I2JM@XO*mMmNuYD0%(;!bA?c zgzw)OYacVj#`Lq7s3%ae#&W#fDVI{DX{A7aAEj*gjkqW7)vU ze4~Mn#lfIKe!Bug6Jw48JClOMf%CT`oAxm_%zNj+z{0#^4Xfk#$}4fvGgwxfO<)oK zVZB={QD{L}zgt10eWjU_1OtacK@(#G1C#QXUd9;*nsx{sWN=_;%zro+Bq%tA!6l(l zn1_Ky$l@TQ&kV5~Ij{KM1O^o!?t47-x4M9=9S7KDTmsw~8yc7dWe%_iNE|djz#{eq zXfmgQK~ru6r;bEl;I7L@0(=q<*4mWoIqv6WWf6M8yi@kdWlk0W4g(FfJwlAEOlMRY z4lphi-p0Vh_)K^iYkIzSFGDfsWG2-EIfte=a2m`$z{I%ktfI{%hla;b|FJYNH8OlJ zG;L>S5=@X?EzF@);4sIv8_6+XZ8ybLgM}o9N6SvHQFgAuJP8kNqgDiXv z4GB$L41zHm)^Z3qHaV*{a0rF4b|^T80vQ|yfs6`GETN1_9s#AyN**7WcC2Oss=CD> z*tNjUp+#v0zraF{d8_JMT{N0r0Rnw)HPE_m(T+CD~mpbiU<@D`0FFEm=#=r^RN%<;CHD8L-o)F-xE%g zR@;X`*w_Y*&;;rXL?6so%Lmtd6nbDBbi+bW)%HQ#N5FNyfidt1K0^z*=4$znwypiw zp#6JbxeZh$9~`q8e1-#6)^?u#1F6ZfKD5(T3nSnLIQ|51LRM7P_IpNDvL7e)U9hio zz|~awAo)u6v$i`KvniP)8~;7jPlJmI%Sea7N%#uUk1yo+LM3HwUt+*eSOIzK-$nhL zq|NrX!0n^FNAxw?e?s2p^D}AtFvKz19-a(Xoz&;8e+q5K;TX(^QE(mNJf`2E9gIz$ ztnbgZ{rj`unwd=7HzC?K=K2=P?uR@dW~Tb2*G+X<{n>Y4K2Gt9e6;1cpnT^}L9Ea7 zVRq7fnKZ_nY@gPXb9@hsg{Mh5&Y4Z4ZMv1^o=^MW+11e7RQ{aHXWqJF7ya|y*$(xv z4tC_Qle#sKCw=fc$UeR|vmnanmbdQMUZh0?iU<@DC?fEWMZo__Jcvrr_dkgz#s4GE zy?Nld{;TrboCs&(8BB$NY62a-Z)}BC&%Yh^Fz1>GvEa{z8kiHztfh3_aX1XjSy8!<~H1dVbBEL zXZ8OB?1nb@2pgaS^usNx9McLTEucx@Z_=gE1y{g$t^`#Fhrm0NJ6ijN{!j#d0JRm! AQ2+n{ diff --git a/packages/docs-vfx-js/public/vfx-js-logo-no-padding.svg b/packages/docs-vfx-js/public/vfx-js-logo-no-padding.svg deleted file mode 100644 index 50b439f..0000000 --- a/packages/docs-vfx-js/public/vfx-js-logo-no-padding.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/packages/docs-vfx-js/vite.config.ts b/packages/docs-vfx-js/vite.config.ts deleted file mode 100644 index b7a2c71..0000000 --- a/packages/docs-vfx-js/vite.config.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { resolve } from "node:path"; -import { defineConfig } from "vite"; -import { viteCommonjs } from "@originjs/vite-plugin-commonjs"; - -// https://vitejs.dev/config/ -export default defineConfig(() => ({ - server: { - port: 3001, - }, - base: "", - plugins: [viteCommonjs()], - build: { - rollupOptions: { - input: { - index: resolve(__dirname, "index.html"), - docs: resolve(__dirname, "docs/index.html"), - }, - }, - }, -})); diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore index 7f94111..a6940a8 100644 --- a/packages/docs/.gitignore +++ b/packages/docs/.gitignore @@ -11,3 +11,6 @@ dist .vscode/* !.vscode/extensions.json .DS_Store + +# Typedoc outputs +docs/* diff --git a/packages/docs-vfx-js/CHANGELOG.md b/packages/docs/CHANGELOG.md similarity index 100% rename from packages/docs-vfx-js/CHANGELOG.md rename to packages/docs/CHANGELOG.md diff --git a/packages/docs-vfx-js/index.css b/packages/docs/index.css similarity index 100% rename from packages/docs-vfx-js/index.css rename to packages/docs/index.css diff --git a/packages/docs/index.html b/packages/docs/index.html index e9a52be..8474bd0 100644 --- a/packages/docs/index.html +++ b/packages/docs/index.html @@ -4,68 +4,512 @@ - REACT-VFX - WebGL effects for React! #REACTVFX + VFX-JS - Visual Effects Framework for Web #VFXJS - - + - + - + - - - - + + + + + + + -
- + +
+
+ GITHUB +
+
+ API +
+ +
GITHUB
+
API
+
+ + + +
+ + +

+ VFX-JS is a JavaScript library to add WebGL-powered effects to + your website.
You can easily attach it to normal + <img>, <video> elements + etc. +

+
+ +
+

Usage

+ +

Install via npm:

+
npm i @vfx-js/core
+ +

Then create VFX object in your script:

+

+import { VFX } from '@vfx-js/core';
+
+const img = document.querySelector('#img');
+
+const vfx = new VFX();
+vfx.add(img, { shader: "glitch", overflow: 100 });
+            
+

This will be rendered as follows:

+ + +

+ VFX-JS is also available on CDNs (esm.sh + or + jsDeliver). So you can use VFX-JS in CodePen etc: +

+

+// Load VFX-JS from esm.sh
+import { VFX } from "https://esm.sh/@vfx-js/core";
+
+// or jsDeliver
+// import { VFX } from 'https://cdn.jsdelivr.net/npm/@vfx-js/core/+esm'
+
+// Then use VFX-JS
+const vfx = new VFX();
+vfx.add(img { shader: 'rgbShift' });
+            
+ + +
+ +
+

Examples

+ +
+
+
+

Image

+

+<img src="example.png" />
+                    
+

+vfx.add(img, { shader: "rgbShift" });
+                    
+
+
+

Output

+ +
+
+ +
+
+

GIF

+

+<img src="example.gif" />
+                    
+

+vfx.add(gif, { shader: "rainbow" });
+                    
+
+
+

Output

+ +
+
+
+
+

Video

+

+<video src="example.mp4" autoplay loop muted/>
+                    
+ +

+vfx.add(video, { shader: "halftone" });
+                    
+
+
+

Output:

+
+
+ +
+
+

Div (experimental)

+

+<div id="div">
+    <p>You can interact with these inputs.</p>
+    <input type="text" value="Edit me" />
+    <input type="range" min="0" max="100" value="0" />
+    <textarea>Edit me</textarea>
+</div>
+                        
+ +

+vfx.add(div, { shader: "rgbShift", overflow: 100 });
+
+// Update on input
+input.addEventListener('input', () => vfx.update(div));
+
+// Update on textarea resize
+const mo = new MutationObserver(() => vfx.update(div));
+mo.observe(textarea, { attributes: true });
+
+                    
+
+
+

Output:

+
+

You can interact with these inputs.

+ + + +
+
+
+ +
+
+

Canvas

+

+<!--
+  VFX-JS also supports HTMLCanvasElement as the input.
+  You can draw 2D graphics and text in canvas,
+  then pass it to VFX-JS to add post effects.
+-->
+<canvas id="canvas"/>
+                        
+ +

+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+function drawCanvas() {
+    ...
+
+    // Update texture when the canvas has been updated
+    vfx.update(canvas);
+
+    requestAnimationFrame(drawCanvas);
+}
+drawCanvas();
+
+vfx.add(canvas, { shader });
+                    
+
+
+

Output:

+ +
+
+
+ +
+

Presets

+
+
+

+vfx.add(el, { shader: "rainbow" });
+                    
+
+
+ +
+
+
+
+

+vfx.add(el, { shader: "rgbShift" });
+                        
+
+
+ +
+
+
+
+

+// Some shaders require "overflow" property
+// so that they can render beyond the original area.
+//
+// In this example, the "glitch" shader can render
+// outside the original element up to 100px.
+vfx.add(el, { shader: "glitch", overflow: 100 });
+                        
+
+
+ +
+
+
+ +
+

Parameters

+

+ Some shaders take parameters (e.g. duotone). You can pass + the params to the uniforms property. +

+
+
+

+vfx.add(el, {
+    shader: "duotone",
+    uniforms: {
+        color1: [0, 0, 1, 1],
+        color2: [0, 1, 0, 1],
+        speed: 0.2
+    }
+});
+                        
+
+
+
+
+
+ +
+

Transitions

+

+ VFX-JS presets for transition animation. These animation + start when the element gets in the viewport. +

+
+
+

+vfx.add(el, { shader: "slitScanTransition" });
+                        
+
+
+ +
+
+
+
+

+vfx.add(el, { shader: "warpTransition" });
+                        
+
+
+ +
+
+
+
+

+vfx.add(el, { shader: "pixelateTransition" });
+                        
+
+
+ +
+
+
+ +
+

Custom Shaders

+

You can write GLSL shader by yourself.

+
+
+

+const shader = `
+precision highp float;
+uniform vec2 resolution;
+uniform vec2 offset;
+uniform float time;
+uniform sampler2D src;
+
+uniform float scroll;
+
+void main (void) {
+    vec2 uv = (gl_FragCoord.xy - offset) / resolution;
+
+    // Scroll X
+    uv.x = fract(uv.x + scroll + time * 0.2);
+
+    gl_FragColor = texture2D(src, uv);
+}
+`;
+
+vfx.add(el, {
+    shader,
+    uniforms: {
+        // Uniform functions are evaluated every frame
+        scroll: () => window.scrollY / window.innerHeight,
+    }
+});
+                        
+
+
+ +
+
+
+
+ +
+
+ +
+

Made by Amagi

+ +
+
+
+ +
+
+
+ +