├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── assets ├── images │ ├── wlop1.jpg │ ├── wlop2.jpg │ ├── wlop3.jpg │ ├── wlop4.jpg │ ├── wlop5.jpg │ ├── wlop6.jpg │ ├── wlop7.jpg │ ├── wlop8.jpg │ ├── wlop9.jpg │ ├── wlop10.jpg │ ├── wlop11.jpg │ └── wlop12.jpg └── icons │ └── github.svg ├── static ├── css │ └── main.b52d30a4.css └── js │ ├── main.c676cab9.js.LICENSE.txt │ └── 27.ef0cb643.chunk.js ├── asset-manifest.json ├── manifest.json ├── index.html └── README.md /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/favicon.ico -------------------------------------------------------------------------------- /logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/logo192.png -------------------------------------------------------------------------------- /logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/logo512.png -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /assets/images/wlop1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop1.jpg -------------------------------------------------------------------------------- /assets/images/wlop2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop2.jpg -------------------------------------------------------------------------------- /assets/images/wlop3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop3.jpg -------------------------------------------------------------------------------- /assets/images/wlop4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop4.jpg -------------------------------------------------------------------------------- /assets/images/wlop5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop5.jpg -------------------------------------------------------------------------------- /assets/images/wlop6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop6.jpg -------------------------------------------------------------------------------- /assets/images/wlop7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop7.jpg -------------------------------------------------------------------------------- /assets/images/wlop8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop8.jpg -------------------------------------------------------------------------------- /assets/images/wlop9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop9.jpg -------------------------------------------------------------------------------- /assets/images/wlop10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop10.jpg -------------------------------------------------------------------------------- /assets/images/wlop11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop11.jpg -------------------------------------------------------------------------------- /assets/images/wlop12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nemutas/r3f-unshift-effect/HEAD/assets/images/wlop12.jpg -------------------------------------------------------------------------------- /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} -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /assets/icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /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).
4 | [Takumi HASEGAWA / 長谷川 巧 (unshift Inc.)](https://twitter.com/_unshift)
5 | 6 | - The images are borrowed from the wonderful work of [WLOP](https://twitter.com/wlopwangling).
7 | 8 | - The background is based on the following great video.
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.
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.
34 | ❌ Commercial use is prohibited.
35 | ❌ Redistribution is prohibited.
36 | ❌ Diversion is prohibited.
37 | ✅ You can look at the application and reproduce the representation. 38 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-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&&r1e12?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.startTimeperformance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]); --------------------------------------------------------------------------------