chore: cleanup docs (#83)

* chore: fix repo link

* chore: fix repo link

* chore: rename root monorepo

* chore: replace README.md

Author: fand

README.md

@@ -1,130 +1,42 @@
 <div align="center">
-  <img alt="REACT-VFX" src="https://user-images.githubusercontent.com/1403842/71323457-c69e6900-2516-11ea-958c-b96b2121387b.png" width="100%"/>
-  <h1>REACT-VFX: WebGL effects for React elements!!</h1>
+  <a href="https://amagi.dev/vfx-js/" target="_blank"><img alt="VFX-JS" src="packages/docs/public/og_image.jpg" width="100%"/></a>
+  <h1>VFX-JS: Visual Effects Framework for Web</h1>
   <br/>
   <br/>
 </div>
 
-## Install
+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.
 
-```
-npm i react-vfx
-```
-
-## Usage
-
-REACT-VFX exports `VFXImg`, `VFXVideo`, `VFXSpan` and `VFXDiv`.
-These components works just like `<img>`, `<video>`, `<span>` and `<div>` - accepts all properties they have, but they are rendered in WebGL world with shader effects!
 
-```ts
-import * as VFX from 'react-vfx';
+This is the core implementation of [REACT-VFX](https://amagi.dev/react-vfx).
 
-export default () => (
-    <VFX.VFXProvider>
-        {/* Render image with shader */}
-        <VFX.VFXImg src="cat.png" alt="image" shader="rgbShift"/>
-
-        {/* It also supports animated GIFs! */}
-        <VFX.VFXImg src="doge.gif" shader="pixelate"/>
-
-        {/* and videos! */}
-        <VFX.VFXVideo src="mind_blown.mp4"
-            autoplay playsinline loop muted
-            shader="halftone"/>
-
-        {/* Render text as image, then apply the shader effect! */}
-        <VFX.VFXSpan shader="rainbow">Hi there!</VFX.VFXSpan>
-
-        {/* Or even inputs! */}
-        <VFX.VFXDiv shader="rainbow">
-            <input type="text" value="hello" />
-        </VFX.VFXDiv>
-    </VFX.VFXProvider>
-);
-```
 
-NOTE: `VFXSpan` doesn't work if the content includes child nodes.
+## Usage
 
-```ts
-// OK
-<a href="https://example.com"><VFXSpan>Yo</VFXSpan></a>
+Install via npm:
 
-// NG: link styles are not rendered correctly
-<VFXSpan><a href="https://example.com">Yo</a></VFXSpan>
 ```
-
-### Custom Shader
-
-```ts
-import { VFXSpan } from 'react-vfx';
-
-const blink = `
-uniform vec2 resolution;
-uniform vec2 offset;
-uniform float time;
-uniform sampler2D src;
-
-void main() {
-    vec2 uv = (gl_FragCoord.xy - offset) / resolution;
-    gl_FragColor = texture2D(src, uv) * step(.5, fract(time));
-}
-`;
-
-export default = () => (
-    <VFXSpan shader={blink}></VFXSpan>
-);
+npm i @vfx-js/core
 ```
 
-<!-- #### Passing Uniforms
-
-```ts
-type Uniform = THREE.IUniform | number | number[];
+Then create `VFX` object in your script:
 
-type UniformObject = {
-    [name: string]: THREE.IUniform;
-}
+```js
+import { VFX } from '@vfx-js/core';
 
-type Uniforms = UniformObject | () => UniformObject;
-```
+const img = document.querySelector('#img');
 
-```ts
-import React, { useState } from 'react';
-
-export default () => {
-    const [count, setCount] = useState(0);
-
-    return (
-        <VFXImg src="main_texture.png"
-            uniforms={{
-                foo: [1, 2, 3], // vec3
-                foo: [1, 2, 3], // vec3
-                foo: [1, 2, 3] // vec3
-            }}/>
-
-        <button type="button" onClick={() => setCount(count + 1)}>
-        <VFXImg src="main_texture.png"
-            shader={animated}
-            uniforms={{ count }}/>
-    );
-};
+const vfx = new VFX();
+vfx.add(img, { shader: "glitch", overflow: 100 });
 ```
 
-### Textures
-
-```ts
-<VFXImg src="main_texture.png" textures={["tex1.png", "tex2.png"]}/>
-```
+## Examples
 
-```glsl
-uniform sampler2D input;
-uniform sampler2D texture1;
-uniform sampler2D texture2;
-``` -->
+TBD: See VFX-JS website for now.
 
-## Future work
+https://amagi.dev/vfx-js/
 
--   Passing custom uniforms
--   Passing custom textures
 
 ## Author
 

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-vfx-monorepo",
+  "name": "vfx-js-monorepo",
   "private": true,
   "packageManager": "[email protected]",
   "workspaces": [
@@ -23,13 +23,13 @@
     "turbo": "^2.0.3"
   },
   "author": "AMAGI <[email protected]> (https://amagi.dev/)",
-  "homepage": "https://github.com/fand/react-vfx#readme",
+  "homepage": "https://github.com/fand/vfx-js#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/fand/react-vfx.git"
+    "url": "git+https://github.com/fand/vfx-js.git"
   },
   "bugs": {
-    "url": "https://github.com/fand/react-vfx/issues"
+    "url": "https://github.com/fand/vfx-js/issues"
   },
   "keywords": [],
   "license": "MIT"

packages/docs-react-vfx/src/dom/UsageSection.tsx

@@ -63,7 +63,7 @@ const UsageSection: React.VFC = () => (
             <p>
                 See{" "}
                 <a
-                    href="https://github.com/fand/react-vfx"
+                    href="https://github.com/fand/vfx-js/tree/main/packages/react-vfx"
                     target="_blank"
                     rel="noopener noreferrer"
                 >

packages/docs/index.html

@@ -60,9 +60,7 @@
 
         <header>
             <div class="HeaderTop GitHub">
-                <a
-                    href="https://github.com/fand/react-vfx/tree/main/packages/vfx-js"
-                    target="_blank"
+                <a href="https://github.com/fand/vfx-js" target="_blank"
                     >GITHUB</a
                 >
             </div>