diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json index 21c08db..c096b7e 100644 --- a/docs/asset-manifest.json +++ b/docs/asset-manifest.json @@ -1,14 +1,14 @@ { "files": { "main.css": "/react-vfx/static/css/main.b22d7dc7.chunk.css", - "main.js": "/react-vfx/static/js/main.368758dd.chunk.js", - "main.js.map": "/react-vfx/static/js/main.368758dd.chunk.js.map", + "main.js": "/react-vfx/static/js/main.51de99c1.chunk.js", + "main.js.map": "/react-vfx/static/js/main.51de99c1.chunk.js.map", "runtime-main.js": "/react-vfx/static/js/runtime-main.73b26e45.js", "runtime-main.js.map": "/react-vfx/static/js/runtime-main.73b26e45.js.map", "static/js/2.bf7cab29.chunk.js": "/react-vfx/static/js/2.bf7cab29.chunk.js", "static/js/2.bf7cab29.chunk.js.map": "/react-vfx/static/js/2.bf7cab29.chunk.js.map", "index.html": "/react-vfx/index.html", - "precache-manifest.5f427f3ff249379ec06b65d3f5dd8949.js": "/react-vfx/precache-manifest.5f427f3ff249379ec06b65d3f5dd8949.js", + "precache-manifest.1d951fe492ea0efdfffc5888f200d23e.js": "/react-vfx/precache-manifest.1d951fe492ea0efdfffc5888f200d23e.js", "service-worker.js": "/react-vfx/service-worker.js", "static/css/main.b22d7dc7.chunk.css.map": "/react-vfx/static/css/main.b22d7dc7.chunk.css.map", "static/js/2.bf7cab29.chunk.js.LICENSE": "/react-vfx/static/js/2.bf7cab29.chunk.js.LICENSE" @@ -17,6 +17,6 @@ "static/js/runtime-main.73b26e45.js", "static/js/2.bf7cab29.chunk.js", "static/css/main.b22d7dc7.chunk.css", - "static/js/main.368758dd.chunk.js" + "static/js/main.51de99c1.chunk.js" ] } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 299121a..b27cab9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -REACT-VFX - WebGL effects for React! #REACTVFX
\ No newline at end of file +REACT-VFX - WebGL effects for React! #REACTVFX
\ No newline at end of file diff --git a/docs/precache-manifest.5f427f3ff249379ec06b65d3f5dd8949.js b/docs/precache-manifest.1d951fe492ea0efdfffc5888f200d23e.js similarity index 73% rename from docs/precache-manifest.5f427f3ff249379ec06b65d3f5dd8949.js rename to docs/precache-manifest.1d951fe492ea0efdfffc5888f200d23e.js index 99ed78a..9e39273 100644 --- a/docs/precache-manifest.5f427f3ff249379ec06b65d3f5dd8949.js +++ b/docs/precache-manifest.1d951fe492ea0efdfffc5888f200d23e.js @@ -1,10 +1,10 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "a3185328cf63cc74b1c904cca8064ed9", + "revision": "83e8890f8977d4203a4119a060c62df8", "url": "/react-vfx/index.html" }, { - "revision": "bf8c566fc238bd3a7cb3", + "revision": "e6a61d389caa403cb990", "url": "/react-vfx/static/css/main.b22d7dc7.chunk.css" }, { @@ -16,8 +16,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "/react-vfx/static/js/2.bf7cab29.chunk.js.LICENSE" }, { - "revision": "bf8c566fc238bd3a7cb3", - "url": "/react-vfx/static/js/main.368758dd.chunk.js" + "revision": "e6a61d389caa403cb990", + "url": "/react-vfx/static/js/main.51de99c1.chunk.js" }, { "revision": "717b0a951c92951e26a7", diff --git a/docs/service-worker.js b/docs/service-worker.js index 656e9e4..a6b42b3 100644 --- a/docs/service-worker.js +++ b/docs/service-worker.js @@ -14,7 +14,7 @@ importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts( - "/react-vfx/precache-manifest.5f427f3ff249379ec06b65d3f5dd8949.js" + "/react-vfx/precache-manifest.1d951fe492ea0efdfffc5888f200d23e.js" ); self.addEventListener('message', (event) => { diff --git a/docs/static/js/main.368758dd.chunk.js b/docs/static/js/main.368758dd.chunk.js deleted file mode 100644 index 6427f55..0000000 --- a/docs/static/js/main.368758dd.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(this["webpackJsonpreact-vfx-docs"]=this["webpackJsonpreact-vfx-docs"]||[]).push([[0],{100:function(e,t,n){},131:function(e,t,n){},132:function(e,t,n){"use strict";n.r(t);var r=n(0),a=n.n(r),o=n(32),i=n.n(o),s=(n(61),n(15)),l=n(4),c=n(16),u=n.n(c),f=n(5),d=n(8),m=n(55),v=n(18),h=n(3);var p=function(e){var t=e.scroll,n=Object(r.useRef)(),o=Object(v.isMobile)()?7:13;return Object(d.c)((function(){var e=n.current;void 0!==e&&(e.rotation.y+=.004,e.rotation.z+=.01,e.position.set(0,300*t.getValue()-7,-15))})),a.a.createElement("mesh",{ref:n},a.a.createElement("torusBufferGeometry",{attach:"geometry",args:[o,1,2,3]}),a.a.createElement("meshNormalMaterial",{attach:"material"}))};function g(e,t){var n=t-e;return Math.random()*n+e}function x(e){var t=e.geometry,n=e.material,o=Object(r.useRef)(),i=g(-50,50),s=g(-140,100),l=g(-50,50),c=Math.sqrt(i*i+l*l);c<30&&(i*=30/c,l*=30/c,c=30);var u=Object(v.isMobile)()?18:12;return Object(r.useEffect)((function(){if(void 0!==o.current){var e=Math.random()*u,t=Math.random()*u,n=Math.random()*u;o.current.scale.set(e,t,n);var r=Math.floor(900*e)*Math.PI*.5;o.current.rotation.set(r,r,r),o.current.position.set(i,s,l)}}),[u,i,s,l]),a.a.createElement("mesh",{ref:o,material:n,geometry:t})}var y=function(e){var t=e.count,n=e.scroll,o=Object(r.useRef)(),i=Object(d.d)(),s=Object(f.a)(i,2),l=s[0],c=s[1],u=Object(d.d)(),m=Object(f.a)(u,2),v=m[0],h=m[1];return Object(d.c)((function(){if(void 0!==o.current&&"undefined"!==typeof window){var e=n.getValue();o.current.position.set(0,100*e-50,0),o.current.rotation.set(0,Date.now()/8e3+5*e,0)}})),a.a.createElement(a.a.Fragment,null,a.a.createElement("boxBufferGeometry",{ref:l,args:[1e-5,1,1]}),a.a.createElement("meshDepthMaterial",{ref:v}),a.a.createElement("group",{ref:o},c&&new Array(t).fill(0).map((function(e,t){return a.a.createElement(x,{key:t,material:h,geometry:c})}))))},b=n(54),w=n(20),E=n(48),F=n(49);function C(){var e=Object(r.useRef)(),t=Object(d.e)(),n=t.scene,o=t.gl,i=t.size,s=t.camera;return Object(r.useEffect)((function(){void 0!==e.current&&e.current.setSize(i.width,i.height)}),[i]),Object(d.c)((function(){void 0!==e.current&&e.current.render()}),2),a.a.createElement("effectComposer",{ref:e,args:[o]},a.a.createElement("renderPass",{attachArray:"passes",scene:n,camera:s}),a.a.createElement("shaderPass",{attachArray:"passes",args:[E.a],"material-uniforms-resolution-value":[1/i.width,1/i.height],renderToScreen:!0}))}Object(d.b)({EffectComposer:b.a,ShaderPass:w.a,RenderPass:F.a});var _={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:-1,pointerEvents:"none"};function V(){var e=Object(d.e)(),t=e.scene,n=e.camera;t.background=new h.Color(2236962);var o=Object(m.a)((function(){return{scroll:0}})),i=Object(f.a)(o,2),s=i[0].scroll,l=i[1],c=Object(r.useCallback)((function(e){return l({scroll:window.scrollY})}),[l]),u=s.interpolate((function(e){return"undefined"===typeof window||"undefined"===typeof document?0:e/(document.body.scrollHeight-window.innerHeight)}));return Object(r.useEffect)((function(){if("undefined"!==typeof window&&"undefined"!==typeof document)return window.addEventListener("scroll",c),function(){window.removeEventListener("scroll",c)}}),[c]),Object(d.c)((function(){var e=u.getValue();n.rotation.set(.1*-Math.PI-e*Math.PI*.4,0,0)})),a.a.createElement(a.a.Fragment,null,a.a.createElement(p,{scroll:u}),a.a.createElement(y,{count:Object(v.isMobile)()?800:1500,scroll:u}))}var S=function(){return a.a.createElement(d.a,{style:_},a.a.createElement(C,null),a.a.createElement(V,null))},D=(n(88),["#00FFEE","#00FF99","#0099FF","#9900FF","#FF0099"]),X=function(e){var t=Object(r.useState)("#00FFEE"),n=Object(f.a)(t,2),o=n[0],i=n[1],s=Object(r.useState)("inset 0 0 10px #00FFEE"),l=Object(f.a)(s,2),c=l[0],u=l[1],d=e.interval||5e3;return Object(r.useEffect)((function(){var e=0,t=setInterval((function(){var t=D[e++%D.length];i(t),u("inset 0 0 10px ".concat(t))}),d);return function(){clearInterval(t)}}),[d]),a.a.createElement("div",{className:"Frame",style:{borderColor:o,boxShadow:c}})},O=(n(89),function(){return a.a.createElement("section",{className:"LogoSection"},a.a.createElement(l.VFXImg,{className:"logo",src:"logo.png",shader:"rgbShift"}))}),T=(n(90),function(){return a.a.createElement("section",{className:"IntroSection"},a.a.createElement("p",null,a.a.createElement(l.VFXImg,{src:"./logo-oneline.png",shader:"rgbGlitch"})," is a"," ",a.a.createElement(l.VFXImg,{src:"./react-logo-oneline.png",shader:"rainbow"})," ","component library. It allows you to add"," ",a.a.createElement(l.VFXImg,{src:"./webgl-logo.png",shader:"spring"})," powered effects to your"," ",a.a.createElement(l.VFXImg,{src:"./react-logo-oneline.png",shader:"rainbow"})," ","application. You can easily add"," ",a.a.createElement(l.VFXDiv,{shader:"glitch"},"glitched images, "),a.a.createElement(l.VFXDiv,{shader:"sinewave"},"stylized videos")," and",a.a.createElement(l.VFXDiv,{shader:"shine"}," shiny texts "),"to your website!!"))}),k=n(17),I=n.n(k),R=(n(98),function(){return a.a.createElement("section",{className:"ExamplesSection"},a.a.createElement("h2",{id:"examples"},"Examples"),a.a.createElement("section",null,a.a.createElement("h3",null,"Add effects to your images!!"),a.a.createElement("div",{className:"ImgContainer"},a.a.createElement(I.a,{height:320},a.a.createElement(l.VFXImg,{src:"react-logo.png",shader:"rainbow"})),a.a.createElement(I.a,{height:320},a.a.createElement(l.VFXImg,{src:"david.png",shader:"rgbShift"})))),a.a.createElement("section",null,a.a.createElement("h3",null,a.a.createElement("span",{role:"img","aria-label":"zap"},"\u26a1"),"Animated GIFs are also supported!!",a.a.createElement("span",{role:"img","aria-label":"zap"},"\u26a1")),a.a.createElement("div",{className:"ImgContainer"},a.a.createElement(I.a,{height:320},a.a.createElement(l.VFXImg,{src:"chill.gif",shader:"sinewave"})),a.a.createElement(I.a,{height:320},a.a.createElement(l.VFXImg,{src:"octocat.gif",shader:"glitch"})),a.a.createElement(I.a,{height:320},a.a.createElement(l.VFXImg,{src:"cat.gif",shader:"rainbow"})),a.a.createElement(I.a,{height:320},a.a.createElement(l.VFXImg,{src:"doge.gif",shader:"pixelate"})))),a.a.createElement("section",null,a.a.createElement("h3",null,"Videos work well!"),a.a.createElement(I.a,{height:320},a.a.createElement(l.VFXVideo,{src:"mind_blown.mp4",shader:"halftone",autoPlay:!0,loop:!0,muted:!0,playsInline:!0}))),a.a.createElement("section",{className:"VFXSpanExample"},a.a.createElement(l.VFXSpan,{shader:"sinewave"},"You can also add effects to ",a.a.createElement("br",null),"plain text!!!!!")),a.a.createElement("section",null,a.a.createElement("h3",null,"... and make Transition Effects!"),a.a.createElement(l.VFXImg,{shader:"warpTransition",src:"logo.png"}),a.a.createElement("br",null),a.a.createElement(l.VFXImg,{shader:"slitScanTransition",src:"logo.png"}),a.a.createElement("br",null),a.a.createElement(l.VFXImg,{shader:"pixelateTransition",src:"logo.png"}),a.a.createElement("br",null)))}),j=(n(99),function(){var e=Object(r.useState)("Try editing text!"),t=Object(f.a)(e,2),n=t[0],o=t[1],i=Object(r.useState)(n),s=Object(f.a)(i,2),c=s[0],u=s[1],d=Object(r.useCallback)((function(){u(n)}),[n]);return a.a.createElement("section",{className:"InputSection"},a.a.createElement("p",{style:{fontSize:"48px",fontWeight:"bold"}},a.a.createElement(l.VFXSpan,{shader:"rainbow"},c)),a.a.createElement("textarea",{value:n,onChange:function(e){return o(e.target.value)}}),a.a.createElement("button",{type:"button",onClick:d},a.a.createElement(l.VFXSpan,{shader:"rainbow"},"FIRE")))}),P=(n(100),function(){return a.a.createElement("section",{className:"AuthorSection"},a.a.createElement("a",{href:"https://twitter.com/amagitakayosi",target:"_blank",rel:"noopener noreferrer"},a.a.createElement(l.VFXImg,{className:"icon",src:"./amagi.png",shader:"glitch"}),a.a.createElement("h3",{className:"name"},"Made by AMAGI")))}),z=n(136),L=n(51),A=n(135);z.a.registerLanguage("jsx",L.a);var B=function(e){var t=e.children;return a.a.createElement(a.a.Fragment,null,t)},M={fontSize:"20px",width:"960px",maxWidth:"calc(100% - 40px)",margin:"0 auto"},G=function(e){var t=e.children;return a.a.createElement(z.a,{language:"jsx",style:A.a,customStyle:M},t)},U=function(e){var t=e.children;return a.a.createElement(z.a,{language:"jsx",style:A.a,customStyle:M,PreTag:B},t)};n(131);function q(){var e=Object(s.a)(["\n import { VFXImg } from 'react-vfx';\n\n const fadeIn = `\n uniform vec2 resolution;\n uniform vec2 offset;\n uniform float time;\n uniform float enterTime; // Time since entering the viewport\n uniform sampler2D src;\n\n void main() {\n vec2 uv = (gl_FragCoord.xy - offset) / resolution;\n gl_FragColor = texture2D(src, uv);\n\n // Fade alpha by enterTime\n gl_FragColor.a *= smoothstep(0.0, 3.0, enterTime);\n }\n `;\n\n export default = () => (\n I'm fading!\n );\n "],["\n import { VFXImg } from 'react-vfx';\n\n const fadeIn = \\`\n uniform vec2 resolution;\n uniform vec2 offset;\n uniform float time;\n uniform float enterTime; // Time since entering the viewport\n uniform sampler2D src;\n\n void main() {\n vec2 uv = (gl_FragCoord.xy - offset) / resolution;\n gl_FragColor = texture2D(src, uv);\n\n // Fade alpha by enterTime\n gl_FragColor.a *= smoothstep(0.0, 3.0, enterTime);\n }\n \\`;\n\n export default = () => (\n I'm fading!\n );\n "]);return q=function(){return e},e}function N(){var e=Object(s.a)(["\n import { VFXSpan } from 'react-vfx';\n\n const blink = `\n uniform vec2 resolution; // Resolution of the element\n uniform vec2 offset; // Position of the element in the screen\n uniform float time; // Time passed since mount\n uniform sampler2D src; // Input texture\n\n void main() {\n // Get UV in the element\n vec2 uv = (gl_FragCoord.xy - offset) / resolution;\n\n gl_FragColor = texture2D(src, uv) * step(.5, fract(time));\n }\n `;\n\n export default = () => (\n I'm blinking!\n );\n "],["\n import { VFXSpan } from 'react-vfx';\n\n const blink = \\`\n uniform vec2 resolution; // Resolution of the element\n uniform vec2 offset; // Position of the element in the screen\n uniform float time; // Time passed since mount\n uniform sampler2D src; // Input texture\n\n void main() {\n // Get UV in the element\n vec2 uv = (gl_FragCoord.xy - offset) / resolution;\n\n gl_FragColor = texture2D(src, uv) * step(.5, fract(time));\n }\n \\`;\n\n export default = () => (\n I'm blinking!\n );\n "]);return N=function(){return e},e}function H(){var e=Object(s.a)(["\n import { VFXSpan } from 'react-vfx';\n\n Hello world!\n "]);return H=function(){return e},e}function Y(){var e=Object(s.a)(['\n import { VFXVideo } from \'react-vfx\';\n\n \n ']);return Y=function(){return e},e}function K(){var e=Object(s.a)(['\n import { VFXImg } from \'react-vfx\';\n\n \n\n // or add attributes\n \n ']);return K=function(){return e},e}function W(){var e=Object(s.a)(['\n import { VFXImg } from \'react-vfx\';\n\n function Component {\n return (\n \n );\n }\n ']);return W=function(){return e},e}function J(){var e=Object(s.a)(["\n import { VFXProvider } from 'react-vfx';\n\n function App {\n return (\n \n {/* Place your app here */}\n \n );\n }\n "]);return J=function(){return e},e}var Q=function(){return a.a.createElement(l.VFXProvider,{pixelRatio:1},a.a.createElement(S,null),a.a.createElement("div",{className:"App"},a.a.createElement(X,null),a.a.createElement(O,null),a.a.createElement(T,null),a.a.createElement(R,null),a.a.createElement("section",null,a.a.createElement("h2",{id:"install"},"Install"),a.a.createElement("code",null,"npm i react-vfx"),a.a.createElement("p",null,"See"," ",a.a.createElement("a",{href:"https://github.com/fand/react-vfx",target:"_blank",rel:"noopener noreferrer"},"GitHub")," ","for more info.")),a.a.createElement("section",null,a.a.createElement("h2",{id:"usage"},"Usage"),a.a.createElement("p",null,"REACT-VFX consists of"," ",a.a.createElement("b",null,a.a.createElement("i",null,"VFX Provider"))," ","and"," ",a.a.createElement("b",null,a.a.createElement("i",null,"VFX Elements")),"."),a.a.createElement("p",null,"First, wrap your entire app with"," ",a.a.createElement(U,null,""),"."),a.a.createElement(G,null,u()(J())),a.a.createElement("p",null,"Then you can use VFX Elements anywhere in you app. Use"," ",a.a.createElement(U,null,""),","," ",a.a.createElement(U,null,"")," or"," ",a.a.createElement(U,null,"")," instead of"," ",a.a.createElement(U,null,""),","," ",a.a.createElement(U,null,"