├── README.md
├── asset-manifest.json
├── assets
    ├── icons
    │   └── github.svg
    └── images
    │   ├── wlop1.jpg
    │   ├── wlop10.jpg
    │   ├── wlop11.jpg
    │   ├── wlop12.jpg
    │   ├── wlop2.jpg
    │   ├── wlop3.jpg
    │   ├── wlop4.jpg
    │   ├── wlop5.jpg
    │   ├── wlop6.jpg
    │   ├── wlop7.jpg
    │   ├── wlop8.jpg
    │   └── wlop9.jpg
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
        └── main.b52d30a4.css
    └── js
        ├── 27.ef0cb643.chunk.js
        ├── main.c676cab9.js
        └── main.c676cab9.js.LICENSE.txt


/README.md:
--------------------------------------------------------------------------------
 1 | # About
 2 | 
 3 | - This application is a reconstruction of the effects on the pages of [unshift's works](https://unshift.jp/works#aimessenger).<br>
 4 |   [Takumi HASEGAWA / 長谷川 巧 (unshift Inc.)](https://twitter.com/_unshift)<br>
 5 | 
 6 | - The images are borrowed from the wonderful work of [WLOP](https://twitter.com/wlopwangling).<br>
 7 | 
 8 | - The background is based on the following great video.<br>
 9 |   [How To Create a Parallax Text Scrolling Effect on Mousemove | Website Parallax Effects 2021](https://www.youtube.com/watch?v=ADAmKlVs25w)
10 | 
11 | https://nemutas.github.io/r3f-unshift-effect/
12 | 
13 | ![output(video-cutter-js com) (1)](https://user-images.githubusercontent.com/46724121/156519951-494103aa-8996-4564-a0a6-6ecefd65063a.gif)
14 | 
15 | # Technology
16 | 
17 | - TypeScript
18 | - React（Create React App）
19 | - React Three Fiber（Three.js）
20 | - GLSL
21 | - InstancedMesh
22 | - gsap
23 | 
24 | # Source Code
25 | 
26 | Source code is not available.<br>
27 | If there are many requests for it, I will consider distributing it through Patreon.
28 | 
29 | # License
30 | 
31 | This source code is not MIT License.
32 | 
33 | ❗ In particular, please do not redistribute the images.<br>
34 | ❌ Commercial use is prohibited.<br>
35 | ❌ Redistribution is prohibited.<br>
36 | ❌ Diversion is prohibited.<br>
37 | ✅ You can look at the application and reproduce the representation.
38 | 


--------------------------------------------------------------------------------
/asset-manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": {
 3 |     "main.css": "/r3f-unshift-effect/static/css/main.b52d30a4.css",
 4 |     "main.js": "/r3f-unshift-effect/static/js/main.c676cab9.js",
 5 |     "static/js/27.ef0cb643.chunk.js": "/r3f-unshift-effect/static/js/27.ef0cb643.chunk.js",
 6 |     "index.html": "/r3f-unshift-effect/index.html"
 7 |   },
 8 |   "entrypoints": [
 9 |     "static/css/main.b52d30a4.css",
10 |     "static/js/main.c676cab9.js"
11 |   ]
12 | }


--------------------------------------------------------------------------------
/assets/icons/github.svg:
--------------------------------------------------------------------------------
1 | <svg width="165" height="165" viewBox="0 0 165 165" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M82.5 0C36.9188 0 0 36.9188 0 82.5C0 119.006 23.6156 149.841 56.4094 160.772C60.5344 161.494 62.0812 159.019 62.0812 156.853C62.0812 154.894 61.9781 148.397 61.9781 141.488C41.25 145.303 35.8875 136.434 34.2375 131.794C33.3094 129.422 29.2875 122.1 25.7812 120.141C22.8937 118.594 18.7687 114.778 25.6781 114.675C32.175 114.572 36.8156 120.656 38.3625 123.131C45.7875 135.609 57.6469 132.103 62.3906 129.938C63.1125 124.575 65.2781 120.966 67.65 118.903C49.2938 116.841 30.1125 109.725 30.1125 78.1688C30.1125 69.1969 33.3094 61.7719 38.5688 55.9969C37.7438 53.9344 34.8563 45.4781 39.3937 34.1344C39.3937 34.1344 46.3031 31.9688 62.0812 42.5906C68.6813 40.7344 75.6937 39.8063 82.7062 39.8063C89.7188 39.8063 96.7312 40.7344 103.331 42.5906C119.109 31.8656 126.019 34.1344 126.019 34.1344C130.556 45.4781 127.669 53.9344 126.844 55.9969C132.103 61.7719 135.3 69.0938 135.3 78.1688C135.3 109.828 116.016 116.841 97.6594 118.903C100.65 121.481 103.228 126.431 103.228 134.166C103.228 145.2 103.125 154.069 103.125 156.853C103.125 159.019 104.672 161.597 108.797 160.772C125.174 155.242 139.406 144.717 149.488 130.676C159.57 116.635 164.995 99.7857 165 82.5C165 36.9188 128.081 0 82.5 0Z" fill="#fff"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/images/wlop1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop1.jpg


--------------------------------------------------------------------------------
/assets/images/wlop10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop10.jpg


--------------------------------------------------------------------------------
/assets/images/wlop11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop11.jpg


--------------------------------------------------------------------------------
/assets/images/wlop12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop12.jpg


--------------------------------------------------------------------------------
/assets/images/wlop2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop2.jpg


--------------------------------------------------------------------------------
/assets/images/wlop3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop3.jpg


--------------------------------------------------------------------------------
/assets/images/wlop4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop4.jpg


--------------------------------------------------------------------------------
/assets/images/wlop5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop5.jpg


--------------------------------------------------------------------------------
/assets/images/wlop6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop6.jpg


--------------------------------------------------------------------------------
/assets/images/wlop7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop7.jpg


--------------------------------------------------------------------------------
/assets/images/wlop8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop8.jpg


--------------------------------------------------------------------------------
/assets/images/wlop9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/assets/images/wlop9.jpg


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/r3f-unshift-effect/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/r3f-unshift-effect/logo192.png"/><link rel="manifest" href="/r3f-unshift-effect/manifest.json"/><title>React App</title><script defer="defer" src="/r3f-unshift-effect/static/js/main.c676cab9.js"></script><link href="/r3f-unshift-effect/static/css/main.b52d30a4.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>


--------------------------------------------------------------------------------
/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/logo192.png


--------------------------------------------------------------------------------
/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/435042660b3aa9034c95da2f5475128d1cc3e111/logo512.png


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/static/css/main.b52d30a4.css:
--------------------------------------------------------------------------------
1 | body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:62.5%;margin:0;padding:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;overflow:hidden}


--------------------------------------------------------------------------------
/static/js/27.ef0cb643.chunk.js:
--------------------------------------------------------------------------------
1 | "use strict";(self.webpackChunkr3f_unshift_effect=self.webpackChunkr3f_unshift_effect||[]).push([[27],{27:function(e,t,n){n.r(t),n.d(t,{getCLS:function(){return y},getFCP:function(){return h},getFID:function(){return C},getLCP:function(){return P},getTTFB:function(){return D}});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},f=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){f((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=p(),d(),s((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},h=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(f&&f.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],f=o?null:c("paint",a);(o||f)&&(n=m(e,r,t),o&&a(o),s((function(i){r=u("FCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,n(!0)}))}))})))},g=!1,T=-1,y=function(e,t){g||(h((function(e){T=e.value})),g=!0);var n,i=function(t){T>-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},p=c("layout-shift",v);p&&(n=m(i,r,t),f((function(){p.takeRecords().map(v),n(!0)})),s((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach((function(t){t(e)})),o=[]}},b=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),p=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),n(!0))},d=c("first-input",p);n=m(e,v,t),d&&f((function(){d.takeRecords().map(p),d.disconnect()}),!0),d&&s((function(){var a;v=u("FID"),n=m(e,v,t),o=[],r=-1,i=null,F(addEventListener),a=p,o.push(a),S()}))},k={},P=function(e,t){var n,i=l(),r=u("LCP"),a=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},o=c("largest-contentful-paint",a);if(o){n=m(e,r,t);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),f(v,!0),s((function(i){r=u("LCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,n(!0)}))}))}))}},D=function(e){var t,n=u("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]);


--------------------------------------------------------------------------------
/static/js/main.c676cab9.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 | object-assign
 3 | (c) Sindre Sorhus
 4 | @license MIT
 5 | */
 6 | 
 7 | /*!
 8 |  * GSAP 3.9.1
 9 |  * https://greensock.com
10 |  *
11 |  * @license Copyright 2008-2021, GreenSock. All rights reserved.
12 |  * Subject to the terms at https://greensock.com/standard-license or for
13 |  * Club GreenSock members, the agreement issued with that membership.
14 |  * @author: Jack Doyle, jack@greensock.com
15 | */
16 | 
17 | /** @license React v0.20.2
18 |  * scheduler.production.min.js
19 |  *
20 |  * Copyright (c) Facebook, Inc. and its affiliates.
21 |  *
22 |  * This source code is licensed under the MIT license found in the
23 |  * LICENSE file in the root directory of this source tree.
24 |  */
25 | 
26 | /** @license React v0.26.2
27 |  * react-reconciler.production.min.js
28 |  *
29 |  * Copyright (c) Facebook, Inc. and its affiliates.
30 |  *
31 |  * This source code is licensed under the MIT license found in the
32 |  * LICENSE file in the root directory of this source tree.
33 |  */
34 | 
35 | /** @license React v17.0.2
36 |  * react-dom.production.min.js
37 |  *
38 |  * Copyright (c) Facebook, Inc. and its affiliates.
39 |  *
40 |  * This source code is licensed under the MIT license found in the
41 |  * LICENSE file in the root directory of this source tree.
42 |  */
43 | 
44 | /** @license React v17.0.2
45 |  * react-jsx-runtime.production.min.js
46 |  *
47 |  * Copyright (c) Facebook, Inc. and its affiliates.
48 |  *
49 |  * This source code is licensed under the MIT license found in the
50 |  * LICENSE file in the root directory of this source tree.
51 |  */
52 | 
53 | /** @license React v17.0.2
54 |  * react.production.min.js
55 |  *
56 |  * Copyright (c) Facebook, Inc. and its affiliates.
57 |  *
58 |  * This source code is licensed under the MIT license found in the
59 |  * LICENSE file in the root directory of this source tree.
60 |  */
61 | 


--------------------------------------------------------------------------------