init kampos playground

.github/workflows/pages.yml

@@ -0,0 +1,44 @@
+name: Build and deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-22.04
+    permissions:
+      contents: write
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.16.0'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies for all workspaces
+        run: npm ci --workspaces
+
+      - name: Build all projects
+        run: npm run build --workspaces
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        if: github.ref == 'refs/heads/master'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./

.gitignore

@@ -1,6 +1,6 @@
 node_modules/
-package-lock.json
 api.key
 .history
 .idea/
 .vscode
+kampos/dist/

gradients/package.json

@@ -4,7 +4,8 @@
   "description": "wow!Team playground for gradients",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"no test specified\"",
+    "build": "echo \"no build specified\""
   },
   "repository": {
     "type": "git",

index.html

@@ -38,6 +38,9 @@ <h1>Wow!Team Demos</h1>
             <li>
                 <a href="./text-effects/index.html">Text Effects Playground</a>
             </li>
+            <li>
+                <a href="./kampos/dist/index.html">Kampos Playground</a>
+            </li>
             <li class="deprecated">
                 <a href="./text-mask/index.html">Text Mask Playground</a>
             </li>

kampos/README.md

@@ -0,0 +1,34 @@
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

kampos/global.d.ts

@@ -0,0 +1,78 @@
+import { Pane } from "tweakpane";
+
+export {};
+
+
+declare global {
+
+type State = {
+    video: string;
+    video2: string;
+    effects: {
+        duotone: {
+            active: boolean;
+            dark: string;
+            light: string;
+        };
+        brightnessContrast: {
+            active: boolean;
+            brightness: number;
+            contrast: number;
+        };
+        hueSaturation: {
+            active: boolean;
+            hue: number;
+            saturation: number;
+        };
+        blend: {
+            active: boolean;
+            mode: string;
+            color: string;
+            image: string;
+        };
+        alphaMask: {
+            active: boolean;
+            isLuminance: boolean;
+            mask: string;
+        };
+        displacement: {
+            active: boolean;
+            wrap: string;
+            scaleX: number;
+            scaleY: number;
+            map: string;
+        };
+        turbulence: {
+            active: boolean;
+            noise: string;
+            output: string;
+            frequencyX: number;
+            frequencyY: number;
+            octaves: number;
+            isFractal: boolean;
+            time: number;
+        };
+        kaleidoscope: {
+            active: boolean;
+            segments: number;
+            offset: number;
+        };
+        fadeTransition: {
+            active: boolean;
+            progress: number;
+        };
+        displacementTransition: {
+            active: boolean;
+            progress: number;
+        };
+        dissolveTransition: {
+            active: boolean;
+            progress: number;
+        };
+    }
+}
+  interface Window {
+    state: State;
+    pane: Pane;
+  }
+}

kampos/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Wow!Team Demo of kampos</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>