polish readme and example

Examples/AdvancedEffects/index.js

@@ -5,4 +5,4 @@ document.body.style.margin = "0";
 document.body.style.color = "#fff";
 document.body.style.backgroundColor = "#000";
 
-React.render(<AdvancedEffects width={400} height={800} />, document.body);
+React.render(<AdvancedEffects width={400} height={700} />, document.body);

Examples/AdvancedEffects/src/Banner.js

@@ -12,13 +12,13 @@ void main( void ) {
 	color += sin( uv.x * cos( time / 15.0 ) * 80.0 ) + cos( uv.y * cos( time / 15.0 ) * 10.0 );
 	color += sin( uv.y * sin( time / 10.0 ) * 40.0 ) + cos( uv.x * sin( time / 25.0 ) * 40.0 );
 	color += sin( uv.x * sin( time / 5.0 ) * 10.0 ) + sin( uv.y * sin( time / 35.0 ) * 80.0 );
-	color *= sin( time / 10.0 ) * 0.5;
+	color *= sin( time / 10.0 );
 	gl_FragColor = vec4(
-    smoothstep(0.0, 1.5, color),
-    smoothstep(0.0, 0.5, color),
-    smoothstep(1.0, 0.6, color) - smoothstep(0.1, 0.0, color),
+    smoothstep(0.8, 1.6, color),
+    smoothstep(0.1, 0.3, color),
+    smoothstep(1.0, 0.2, color) - smoothstep(0.1, 0.0, color),
     color
-  ) * (pow(uv.y, 2.0));
+  ) * (pow(uv.y, 0.8));
 }
 `
   }

Examples/AdvancedEffects/src/index.js

@@ -8,7 +8,7 @@ const styles = {
   root: {
     position: "relative",
     display: "block",
-    margin: "20px auto",
+    margin: "0px auto",
     backgroundColor: "#111"
   }
 };

README.md

@@ -1,10 +1,43 @@
 # gl-react
 
-WebGL bindings for react to implement complex effects over images in VDOM descriptive paradigm.
+WebGL bindings for react to implement complex effects over images, in VDOM descriptive paradigm.
 
-## Demo
+### HelloGL Gist
 
-[![](https://cloud.githubusercontent.com/assets/211411/9384480/0ccb45a4-4751-11e5-845c-de00bfe30b6a.png)](http://projectseptemberinc.github.io/gl-react)
+```js
+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  helloGL: {
+    frag: `
+precision highp float;
+varying vec2 uv;
+void main () {
+  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
+}`
+  }
+});
+
+class HelloGL extends React.Component {
+  render () {
+    const { width, height } = this.props;
+    return <GL.View
+      shader={shaders.helloGL}
+      width={width}
+      height={height}
+    />;
+  }
+}
+```
+
+![](https://cloud.githubusercontent.com/assets/211411/9386550/432492c6-475c-11e5-9328-f3d5187298c1.jpg)
+
+## Installation
+
+```
+npm i --save gl-react
+```
 
 ## Docs and difference with `gl-react-native`
 
@@ -22,3 +55,8 @@ Instead of adopting React Native `{uri: "http://..."}` format, you can simply se
 `GL.Target` have a more limited support because the web does not allow to draw DOM element in Canvas.
 
 Only one child is supported per `GL.Target` and it MUST be either: an `<img />`, a `<video />` or a `<canvas />`.
+
+
+## Advanced Effects demo
+
+[![](https://cloud.githubusercontent.com/assets/211411/9387055/de7a4732-475e-11e5-8bc3-e86e48814097.png)](http://projectseptemberinc.github.io/gl-react)