![Wrong Akram](/img/default-banner.jpg)
- Видео 77
- Просмотров 2 121 533
Wrong Akram
США
Добавлен 9 янв 2019
Hey there! Welcome to my channel, I am Akram my goal is to bring you great tutorials relating to UI/UX Design and Front End Development. Design tools I focus on using in my videos include Adobe Xd and Invision Studio for UI Design. Anything that proves to be superior I will be open to switching. When it comes to technologies React.js and Node.js will heavily be used.
Subscribe to stay up to date.
Subscribe to stay up to date.
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...
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
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
Which font have you used ?
Great tutorial! How can one alter the colors of the texture periodically? I've a texture whose colors I want to glow periodically.
Thank you so much brother. My Components are now very clean using this method.
I've been looking for this exact tutorial for a week. Super cool.
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.
Can you please continue the series.
where's the written tutorial? link broken..
I miss this guy so bad
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?
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?
Thanks
Bro we need more tutorials brooo
The text appears very small; please zoom in on future videos. Thanks for your video!
Wow, so you haven’t uploaded since I got my first job as a software engineer.
Best series.
Maybe i'm missing something but how the hidden,show, exit animations work on container variants since they've been declared inside item variants.
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.
i wouldnt say shaders themselves are difficult to learn its more so the pipeline as a whole
how to add z-index on cursor??
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 🙏?
Wait a minute... Did I just find a hidden gem !!!
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?
Has anyone tried setting up this project recently. The install command fails for me
where are you man 😢
Dang, its been 2 years, i hope you come back again with another great video again
Maybe a stupid question. But how can I now embedd this in my framer website?
Hi Mr. Would you please post more content for us? You are God of react and cool stuff
Which VS theme are you using ?
Tutorial starts at 4:50
Hi, can u please tell me how to change port in stencil.
I liked this content. Great explaining!
Really high quality video, please keep doing tutorial like this, i will any courses if you provide.
Hey, looks like this tutorial no longer works to follow along. Anyone find out how to fix it?
you gon be fine my nigga!!
Hi, is there away to contact you about projects ?
Miss your videos @WrongAkram
Is it possible to three.js on an offScreenCanvas ??
this solve the mystery.. I always wonder how this kind of effect was made keep this kind of videos up!
"micro" hahahah
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
wowww this type of tutor with so much detail normally are paid. thank youuuuuuu
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 🙂
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
I mean cool designs but what about the actual work they did. Kinda the entire point id say lol