Wrong Akram
Wrong Akram
  • Видео 77
  • Просмотров 2 121 533
React & Three.js | Working with Shaders using React Three Fiber
Hey everyone! Today we will be learning how to use React Three Fiber & Shaders!
Join the discord: discord.com/invite/Cw5SaTA7s4
Source Code:
github.com/wrongakram/R3F-Shader
codesandbox.io/s/r3f-wavey-image-shader-j4uwl?file=/src/App.js
Links:
Written Tutorial: cat-change-b22.notion.site/R3F-Wavey-Shader-69f8edc7244549b3ae0b90caef1edd35
Three.js: threejs.org/
React Three Fiber: github.com/pmndrs/react-three-fiber
Drei: github.com/pmndrs/drei
Article: tympanus.net/codrops/2020/03/17/create-a-wave-motion-effect-on-an-image-with-three-js/
Mario Carrillo: marioecg
Bruno Simon Three.js Course: threejs-journey.xyz/
Social Links:
wrongakram
github.com/wrongakram
dribbble.com/Wrongakram...
Просмотров: 71 903

Видео

Reviewing Subscribers Portfolios and Websites
Просмотров 13 тыс.3 года назад
Hey guys! Back again with another portfolio review :) Thank you all for submitting and if you weren't featured then you will get in next time! Intro: 0:00 Portfolios Reviewed: Rekhchand Sahu: 1:14 rekhchandsahu.com/ r3khchand Dpk: 3:42 apstudiosraipur.com/ dpk.jpg Keshar Wakharkar: 5:34 www.keshar.tech Keshar_08 Yannick: 7:20 yannicknana.fr ...
Smooth Loading Transitions with Framer Motion | AnimateSharedLayout
Просмотров 174 тыс.3 года назад
Hey guys! Hope you have all had a great time so far. I've been on a long break and coming back with some heat for this episode! Hope you enjoy :) Code FIles: github.com/wrongakram/pageloader Preview: pageloader-3cf2b.web.app/ Written Tutorial: www.notion.so/Framer-motion-AnimateSharedLayout-9e35e454cb5c4341a618a213558a857e Framer Motion: www.framer.com/api/motion/ Dribbble post used: dribbble.c...
Micro Interactions using Anime.js | HTML, CSS & Javascript
Просмотров 48 тыс.3 года назад
Whats up everyone! In this video we get inspired from dribbble to build so micro interactions using Anime.js. Let me know what you guys think in the comments. Have a great day! Code Files: github.com/wrongakram/micro-interactions-docket Demo: mi-docket.netlify.app/ XState: xstate.js.org/docs/ Animejs: animejs.com/ Una Kravets's Finessing `feColorMatrix`: alistapart.com/article/finessing-fecolor...
React & Three.js | Building Interactive Minecraft Chest Model with React Three Fiber | Episode 1
Просмотров 29 тыс.3 года назад
Hey everyone! Here is episode 1 of building our Minecraft Chest. Hope you guys have a great start to your new year! Demo: react-three-minecraft.netlify.app/ Starter Files: github.com/wrongakram/React-Three-Minecraft-Chest Join the discord: discord.com/invite/Cw5SaTA7s4 ▬ Timestamps ▬▬▬▬▬▬▬▬▬▬ 0:00 - Intro 1:26 - Clone Repository 2:52 - Project Breakdown 3:51 - Importing Chest Model 4:47 - Creat...
Preview & Sharing | Episode 5 - Desktop Prototyping Essentials in Framer
Просмотров 4,4 тыс.3 года назад
Hey everyone, hope you all are off to an amazing week! In the series, I have teamed up with Framer to bring you all a wonderful and exciting desktop prototyping series. In this episode, we will take a look at working with previews and sharing within Framer Web. Try Framer for Free: framer.com/akram Follow along in Framer: framer.com/projects/new?duplicate=n3lHvAQBeNkQFa10djnv&tutorial=6GrUMg9FJdA
Overrides | Episode 4 - Desktop Prototyping Essentials in Framer
Просмотров 2,2 тыс.3 года назад
Hey everyone, hope you all are off to an amazing week! In the series, I have teamed up with Framer to bring you all a wonderful and exciting desktop prototyping series. In this episode, we will take a look at working with overrides within Framer Web. Try Framer for Free: framer.com/akram Follow along in Framer: framer.com/projects/new?duplicate=3DvvdLOFez0RC3l6vMVw&tutorial=2c5212D1UEs
Interactions & Transitions | Episode 3 - Desktop Prototyping Essentials in Framer
Просмотров 2,8 тыс.3 года назад
Hey everyone, hope you all are off to an amazing week! In the series, I have teamed up with Framer to bring you all a wonderful and exciting desktop prototyping series. In this episode, we will take a look at working with interactions and transitions within Framer Web. Try Framer for Free: framer.com/akram Follow along in Framer: framer.com/projects/new?duplicate=3DvvdLOFez0RC3l6vMVw&tutorial=2...
Page & Scroll | Episode 2 - Desktop Prototyping Essentials in Framer
Просмотров 6 тыс.3 года назад
Hey everyone, hope you all are off to an amazing week! In the series, I have teamed up with Framer to bring you all a wonderful and exciting desktop prototyping series. In this episode, we will take a look at working with pages and scrolls within Framer Web. Try Framer for Free: framer.com/akram Follow along in Framer: framer.com/projects/new?duplicate=mEB283pquID4e4bH1z4t&tutorial=w9lonAXjGjY
Icons & Loading Indicators | Episode 1.2 - Desktop Prototyping Essentials in Framer
Просмотров 4,2 тыс.3 года назад
Hey everyone, hope you all are off to an amazing week! In the series, I have teamed up with Framer to bring you all a wonderful and exciting desktop prototyping series. In this episode, we will take a look at working with icons and loading indicators within Framer Web. Try Framer for Free: framer.com/akram Follow along in Framer: framer.com/projects/new?duplicate=rNKk2xrnYJkwDFMGNVYt&tutorial=M...
Buttons & Inputs | Episode 1.1 - Desktop Prototyping Essentials in Framer
Просмотров 11 тыс.3 года назад
Hey everyone, hope you all are off to an amazing week! In the series, I have teamed up with Framer to bring you all a wonderful and exciting desktop prototyping series. In this episode, we will take a look at working with buttons and inputs within Framer Web. Try Framer for Free: framer.com/akram Follow along in Framer: framer.com/projects/new?duplicate=7f72zClWdXQuscsNfxSC&tutorial=sRV5LNUBbcg
Building a Modal Component with Stencil.js | Design System Components Episode 2
Просмотров 10 тыс.3 года назад
Hey everyone! If you haven't seen "Getting started with stencil" then be sure to check that one our before watching this video. Hope you enjoy! x.svg Icon: github.com/wrongakram/learn-stencil-design-system/blob/apollo-modal/src/components/apollo-modal/assets/x.svg Code: github.com/wrongakram/learn-stencil-design-system.git Stencil: stenciljs.com/docs/introduction Join the discord: discord.com/i...
Build UI Components for all Front End Frameworks with Stencil | Design System Components Episode 1
Просмотров 28 тыс.3 года назад
Hey everyone! Hope you all are doing great :) In this video we will be spending sometime looking into stencil.js and how we can use to help build UI components. Global CSS File: github.com/wrongakram/learn-stencil-design-system/blob/master/src/global/global.css Code: github.com/wrongakram/learn-stencil-design-system.git Stencil: stenciljs.com/docs/introduction Join the discord: discord.com/invi...
Cursor Animations using GSAP | HTML, CSS & Javascript
Просмотров 35 тыс.3 года назад
Whats up everyone! Hope you all are doing well :) In this video we are using html css and javascript to create an amazing cursor animation inspired by cuberto.com. Let me know what you guys think in the comments. Have a great day! ▬ Timestamps ▬▬▬▬▬▬▬▬▬▬ 0:00 - Intro 1:13 - Grab project files 1:24 - Project Breakdown 3:16 - Build HTML & CSS for cursor 5:43 - Add Javascript to animate cursor 15:...
Reviewing Subscribers Portfolios #2
Просмотров 14 тыс.3 года назад
Reviewing Subscribers Portfolios #2
Building with React and Three.js using React Three Fiber
Просмотров 108 тыс.3 года назад
Building with React and Three.js using React Three Fiber
Prototype a Mobile Onboarding Process using ProtoPie
Просмотров 8 тыс.3 года назад
Prototype a Mobile Onboarding Process using ProtoPie
Awwwards Rebuilt Mini | Building a Hamburger Menu using Gatsby and Framer Motion
Просмотров 31 тыс.4 года назад
Awwwards Rebuilt Mini | Building a Hamburger Menu using Gatsby and Framer Motion
Reviewing Your Portfolios
Просмотров 16 тыс.4 года назад
Reviewing Your Portfolios
Smooth Skew Scrolling in React
Просмотров 40 тыс.4 года назад
Smooth Skew Scrolling in React
Page Transitions with React Router and Framer Motion
Просмотров 139 тыс.4 года назад
Page Transitions with React Router and Framer Motion
Get started with React and Three.js using react three fiber
Просмотров 104 тыс.4 года назад
Get started with React and Three.js using react three fiber
Design a File Storage App with Framer Web | Part 3
Просмотров 8 тыс.4 года назад
Design a File Storage App with Framer Web | Part 3
Design a File Storage App with Framer Web | Part 2
Просмотров 8 тыс.4 года назад
Design a File Storage App with Framer Web | Part 2
Design a File Storage App with Framer Web | Part 1
Просмотров 24 тыс.4 года назад
Design a File Storage App with Framer Web | Part 1
Awwwards Rebuilt Season 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 8
Просмотров 12 тыс.4 года назад
Awwwards Rebuilt Season 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 8
Awwwards Rebuilt Episode 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 7
Просмотров 15 тыс.4 года назад
Awwwards Rebuilt Episode 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 7
Awwwards Rebuilt Episode 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 6
Просмотров 6 тыс.4 года назад
Awwwards Rebuilt Episode 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 6
Awwwards Rebuilt Episode 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 5
Просмотров 6 тыс.4 года назад
Awwwards Rebuilt Episode 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 5
Awwwards Rebuilt Episode 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 4
Просмотров 7 тыс.4 года назад
Awwwards Rebuilt Episode 2 | Rebuilding Awwwards Websites using React & Framer Motion | Part 4

Комментарии

  • @sunshinegirl375
    @sunshinegirl375 2 дня назад

    Which font have you used ?

  • @Casper7583
    @Casper7583 7 дней назад

    Great tutorial! How can one alter the colors of the texture periodically? I've a texture whose colors I want to glow periodically.

  • @alisajadahmadi978
    @alisajadahmadi978 15 дней назад

    Thank you so much brother. My Components are now very clean using this method.

  • @tsots2501
    @tsots2501 17 дней назад

    I've been looking for this exact tutorial for a week. Super cool.

  • @aliventurous
    @aliventurous 22 дня назад

    I’m curious about your choice to place the AnimatePresence component inside the ternary expression, and why you opted for an empty AnimatePresence in the else condition, rather than embedding the ternary expression within a single AnimatePresence.

  • @msaikrishna6100
    @msaikrishna6100 Месяц назад

    Can you please continue the series.

  • @eldi
    @eldi 3 месяца назад

    where's the written tutorial? link broken..

  • @londelidess
    @londelidess 4 месяца назад

    I miss this guy so bad

  • @seifnaguib1
    @seifnaguib1 4 месяца назад

    Can you please do a tutorial where the page transition is some svg animation that covers the entire page and moves out to reveal the new page?

  • @namanrai7575
    @namanrai7575 5 месяцев назад

    Hey 👋🏻 this is really cool , but now with NextJS update 2024 we can't really replicate this- is there any way to do it now?

  • @chousonic
    @chousonic 5 месяцев назад

    Thanks

  • @akshitsachdeva8262
    @akshitsachdeva8262 5 месяцев назад

    Bro we need more tutorials brooo

  • @lafkiriachraf
    @lafkiriachraf 6 месяцев назад

    The text appears very small; please zoom in on future videos. Thanks for your video!

  • @IkraamDev
    @IkraamDev 7 месяцев назад

    Wow, so you haven’t uploaded since I got my first job as a software engineer.

  • @cygtrafolia1007
    @cygtrafolia1007 7 месяцев назад

    Best series.

  • @user-et7rl8mq7f
    @user-et7rl8mq7f 8 месяцев назад

    Maybe i'm missing something but how the hidden,show, exit animations work on container variants since they've been declared inside item variants.

  • @filipayaviri1787
    @filipayaviri1787 8 месяцев назад

    Hello, good day! Could someone please share the InVision Studio installer for Windows? It seems it's no longer available for download from the website.

  • @Dom-zy1qy
    @Dom-zy1qy 8 месяцев назад

    i wouldnt say shaders themselves are difficult to learn its more so the pipeline as a whole

  • @MdHuzaifaAnsari222
    @MdHuzaifaAnsari222 8 месяцев назад

    how to add z-index on cursor??

  • @user-eq3nj1ni4q
    @user-eq3nj1ni4q 8 месяцев назад

    very useful tutorial and one of the best explanations of "what the f*** is GLSL" 😅 also, the notion link with the text descriptions doesn't work, can you check please 🙏?

  • @nidhish6966
    @nidhish6966 9 месяцев назад

    Wait a minute... Did I just find a hidden gem !!!

  • @user-xl5oo7xh9h
    @user-xl5oo7xh9h 9 месяцев назад

    hey man! this is a great tutorial. I'm using this for something else but I was wondering if you had any ideas on how I can check what percentage of the drawing element has been erased?

  • @emmanuelkwesimortey9831
    @emmanuelkwesimortey9831 9 месяцев назад

    Has anyone tried setting up this project recently. The install command fails for me

  • @bullettime2808
    @bullettime2808 9 месяцев назад

    where are you man 😢

  • @dave_an
    @dave_an 9 месяцев назад

    Dang, its been 2 years, i hope you come back again with another great video again

  • @GuitarCaendu
    @GuitarCaendu 9 месяцев назад

    Maybe a stupid question. But how can I now embedd this in my framer website?

  • @BMikel
    @BMikel 10 месяцев назад

    Hi Mr. Would you please post more content for us? You are God of react and cool stuff

  • @ehsaanalistudio
    @ehsaanalistudio 10 месяцев назад

    Which VS theme are you using ?

  • @CoryTheSimmons
    @CoryTheSimmons 10 месяцев назад

    Tutorial starts at 4:50

  • @avvarupreethi3063
    @avvarupreethi3063 10 месяцев назад

    Hi, can u please tell me how to change port in stencil.

  • @thedevmachine
    @thedevmachine 10 месяцев назад

    I liked this content. Great explaining!

  • @Lion-mh9rq
    @Lion-mh9rq 10 месяцев назад

    Really high quality video, please keep doing tutorial like this, i will any courses if you provide.

  • @joeyorofino2944
    @joeyorofino2944 10 месяцев назад

    Hey, looks like this tutorial no longer works to follow along. Anyone find out how to fix it?

  • @stanleychukwu7424
    @stanleychukwu7424 11 месяцев назад

    you gon be fine my nigga!!

  • @jlcmarble8722
    @jlcmarble8722 11 месяцев назад

    Hi, is there away to contact you about projects ?

  • @ndekocode
    @ndekocode 11 месяцев назад

    Miss your videos @WrongAkram

  • @boomshakalaka656
    @boomshakalaka656 11 месяцев назад

    Is it possible to three.js on an offScreenCanvas ??

  • @carlosjunod5424
    @carlosjunod5424 11 месяцев назад

    this solve the mystery.. I always wonder how this kind of effect was made keep this kind of videos up!

  • @maskedvillainai
    @maskedvillainai 11 месяцев назад

    "micro" hahahah

  • @user-sf8nd4ds6l
    @user-sf8nd4ds6l Год назад

    In the framer motion container element the initial and animate prop you passed into it was not defined. I didn't see were you defined it

  • @kholula
    @kholula Год назад

    wowww this type of tutor with so much detail normally are paid. thank youuuuuuu

  • @tridsanutaychathunyachot6952

    this such an amazing video for me it show me how the motion work in advance .I expected you would make more good video like this again 🙂

  • @AlpackaCuriosa
    @AlpackaCuriosa Год назад

    You are the fucking best, bro. I'm a web developer from Colombia, and I want to learn to be the best, and your videos are very help for me

  • @maskedvillainai
    @maskedvillainai Год назад

    I mean cool designs but what about the actual work they did. Kinda the entire point id say lol