- 13
- 6 565
pragmattic
United Kingdom
Приєднався 5 жов 2024
Build cool web experiences with React, Next, GSAP, ThreeJS and more!
Code: github.com/prag-matt-ic/pragmattic-tutorials
Code: github.com/prag-matt-ic/pragmattic-tutorials
Cloning the Stripe website header. Uncut process. Responsive Tailwind CSS | Next.js | WebGL shader
I rebuilt the Stripe website header from scratch using Next.js and Tailwind CSS!
Code along with me, or dive into the resources below =]
Challenges we'll tackle:
- Responsive layout
- Layered heading text with blend-mode over the canvas
- Animated gradient shader inside a WebGL canvas
- SVG icon with hover effect
- Making it look just right!
🔗 Resources
See it live: pragmattic.vercel.app/rebuilds/stripe
The code: github.com/prag-matt-ic/pragmattic-tutorials/blob/main/src/app/rebuilds/stripe/page.tsx
Original site: stripe.com/
🤝 Looking for a dev team to hire?
Reach out to pragmattic.ltd@gmail.com and start a conversation
Code along with me, or dive into the resources below =]
Challenges we'll tackle:
- Responsive layout
- Layered heading text with blend-mode over the canvas
- Animated gradient shader inside a WebGL canvas
- SVG icon with hover effect
- Making it look just right!
🔗 Resources
See it live: pragmattic.vercel.app/rebuilds/stripe
The code: github.com/prag-matt-ic/pragmattic-tutorials/blob/main/src/app/rebuilds/stripe/page.tsx
Original site: stripe.com/
🤝 Looking for a dev team to hire?
Reach out to pragmattic.ltd@gmail.com and start a conversation
Переглядів: 776
Відео
Learn React Three particles - build a dynamic Star Wars inspired site with scroll driven effects
Переглядів 434День тому
Learn the basics of ThreeJS particles (points) in React Three Fiber, before animating them with a custom GLSL vertex shader and the user's scroll position. We'll also cover 3D transforms in CSS and create the Star Wars inspired scrolling text effect using GSAP scroll trigger. #javascript #react #threejs #gsap #pragmattic 🔗 Resources See it live: pragmattic.vercel.app/examples/stars-particles Ge...
Build a magical animated gradient background that scrolls with the user - Next.js | Three.js | GLSL
Переглядів 234День тому
Learn how to build an enormous piece of scrolling art. We’re using the ScreenQuad component to render a full screen shader into our scene. It uses time, noise and a neat cosine colour function to generate the effect. Adding UI controls makes it easy and fun to configure. Groovy! Ps. If you copy or adapt the code from my repo, please give me a thumbs up and consider subscribing to support the ch...
Simple 3D scrolling website with animations - full build + code in React Three Fiber, Next.js
Переглядів 97528 днів тому
It’s hard to work with text and buttons in 3D, the optimal solution is to display those elements as HTML tags, and then use the 3D scene for models, images and shaders. In this way we can combine the best of 3D graphics with HTML appropriate content. But how do we keep the content aligned as the user scrolls down? That’s the topic of this video. You’ll learn how to build a scrolling 2D-3D page,...
React Three scroll controlled image sequence & custom post processing effects shader with useFBO
Переглядів 126Місяць тому
In this one we’ll be setting up our image sequence, and then rendering our main scene to an off-screen render target, enabling more complex visual effects when we then feed the render target texture into a custom effects shader. By learning to write custom shaders, you can create truly unique effects like this one here: pragmattic-tutorials.vercel.app/fbo-effects #javascript #react #threejs #gl...
Rebuilding Apple MacBook Pro Display section. Animated with GSAP ScrollTrigger - Next.js + Tailwind
Переглядів 1,2 тис.Місяць тому
I thought it would be a fun little challenge to recreate part of the new MacbookPro M4 website! Code along as we build the "Display" section from scratch. #javascript #react #gsap #pragmattic 🔗 Resources Inspiration: www.apple.com/uk/macbook-pro/ GSAP ScrollTrigger: gsap.com/docs/v3/Plugins/ScrollTrigger/ Steps 00:00 Intro and end result 01:18 Adding the HTML 12:58 Image animation 25:31 Paragr...
Create a smooth animated background using shaders in React Three Fiber
Переглядів 626Місяць тому
In this one we'll code a dynamic fragment shader from scratch in Next.js, using React Three Fiber. You'll learn: - React component setup in Typescript - The basics of GLSL - Some of the important core functions - Importing and working with noise - Using an image texture and putting it all together for a one-of-a-kind final result: pragmattic-tutorials.vercel.app/examples/scroll-driven-image-seq...
Dope website header! Scroll controlled image sequence in Next.js. Apple inspired. Plus free code!
Переглядів 1,7 тис.Місяць тому
This scroll controlled image sequence can be found on world class sites such as the Apple AirPods Pro landing page. I’ve implemented something similar on a global project for a leading retail brand. In this video I'll share how to build a scrolling image sequence to in Next.js with GSAP to help take your web experiences to the next level. Shoutout to Derek Elliott for the 3D assets! Ps. If you ...
Build an Apple header image sequence in Next.js using GSAP and TailwindCSS
Переглядів 284Місяць тому
Rendering 3D models in the browser is expensive, and they never look as good as pre-rendered outputs with their soft lighting and shadows. But what about when you want motion? An image sequence is often a good solution - what it lacks in frame-rate, it makes up for in high fidelity. In this video I'l be sharing how I recreated the AirPods Pro 2 header using HTML canvas and GSAP. It’s less chall...
Build an animated cursor with custom hover state - React, Next.js, GSAP, Zustand, Typescript
Переглядів 104Місяць тому
Custom cursors are easy to implement badly, especially in React! In this video I share how I've implemented a custom cursor on a variety of professional Next.js websites. The final solution is performant and customisable. There's a common mistake you need to avoid if you want it to be performant (spoiler: don’t set state!) If you end up adapting the code for your own project, please consider gi...
Building a smooth animated modal [Next.js, React Transition Group, GSAP, Typescript, TailwindCSS]
Переглядів 96Місяць тому
Ugly modals are everywhere! In this video I’ll show you how to neatly animate modals or menus in and out of the DOM using React Transition Group, GSAP and TailwindCSS. #javascript #react #gsap #pragmattic 🔗 Resources Repo on GitHub: github.com/prag-matt-ic/pragmattic-tutorials Live Site: pragmattic.vercel.app/ React Transition Group: reactcommunity.org/react-transition-group/transition GSAP Tim...
Infinite scrolling marquee for logos or testimonials [Typescript, Next.js, GSAP]
Переглядів 181Місяць тому
Scrolling marquees are a great way to showcase company logos, testimonials or headline text on your website. It's actually quite simple when you know how… so let’s go! #javascript #react #gsap #pragmattic 🔗 Resources Live Site: pragmattic.vercel.app/examples/infinite-scrolling-marquee Repo on GitHub github.com/prag-matt-ic/pragmattic-tutorials GSAP Tween: gsap.com/docs/v3/GSAP/Tween Summary In...
Building a cool animated page nav in React with GSAP ScrollTrigger
Переглядів 126Місяць тому
Build a smooth animated navigation in React using the GSAP ScrollTrigger plugin. Great for landing pages, personal sites or blog articles! #javascript #react #gsap #pragmattic 🔗 Resources Repo on GitHub: github.com/prag-matt-ic/pragmattic-tutorials Live Site: pragmattic-tutorials.vercel.app/ GSAP ScrollTrigger: gsap.com/docs/v3/Plugins/ScrollTrigger/ GSAP ScrollToPlugin: gsap.com/docs/v3/Plugin...
This is great! Timestamps would be a good add in the future
Cheers Ryan. I got a bit lazy with this one! 😅 Better videos to follow :)
These tutorials are super helpful, I'm def not advanced as you though! Do do you have any courses??
Thank you Ariadne! I'm enjoying sharing behind the scenes and what I've learned along the way. I'm working on ideas and content for a full-length course so stay tuned!
That is Amazing!!!
@@ignaciogomez3716 glad you like it!
following from malawi
"the warm heart of Africa". Absolute pleasure to have you here
great work
Respect bro
Subscribed immediately 😊
Appreciate you! What would you like to see more of?
explained so nicely
Many thanks
I see this as an interesting topic, but it would be great to have a bit shorter videos! Thank you
Feedback noted!
What will be your advice for the young developers.
Time is on your side. Build, build, build! =] It's a numbers game, you have to put in the hours. Start with smaller projects and aim to finish them and move on - getting stuff done is an important skill. My first paid project was a single page website for a chef in my local town. You could see if there are any opportunities like that in your community. This will help you gain experience and build confidence to take on bigger projects. Use AI to review your code if you get stuck - but don't copy/paste without understanding what the code does.
Incredible work, watched the video in entirety. Learned a ton.10/10
Really appreciate the comment! made my morning :)
Amazing, thanks so much bro!!
Glad you like it!
Thank you 🎉
my pleasure bro
keep going, love ur content
appreciate it my guy
00:00 Intro and end result 01:18 Adding the HTML 12:58 Image animation 25:31 Paragraph animation 34:40 Hacky mobile styling 40:40 Recap
heyy man Keep it you❤🔥🔥
Appreciate you 💫
Thanks for all the support on this video. After reviewing the code I've made a few changes which are in the repo main branch now. The 2 ScrollTriggers have been combined into 1 because they use the same trigger element, start and end values. The heading timeline can be created immediately which is more desirable than creating it after animating in, incase a user scrolls before the entry animation finishes! Enjoy!
if you can create a course from beginner of tailwind CSS to basic animation to gsap to thinking of design to this I would buy it . just make it move gradually from basic to advanced but such that we can problem solve these things not just follow you
Thanks for the feedback! I'll think about a suitable project which would help someone go from beginner to advanced, or perhaps intermediate to advanced. I know I skipped over a lot of stuff in this one 😅 how long do you think the course should be ideally?
@@pragmattic-dev 15 hours should be enough
Best in the game!
@@sinasadrzadeh4783 we making progress my friend 😎
Too good. Thanks for this 💯
Looks awesommmmeee! Fun to see the BTS or how this all comes together
Team work makes the dream work!
wow.. amazing! keep uploading..
@@anvrag thanks! I’ve got lots of ideas for future content solving real world challenges ranging from dynamic background shaders to Nexts localisation with Google Sheets :)
@@pragmattic-dev and i am waiting for such content! already subscribed!! hope u grow faster :)
Really nice
Thank you sir!
Very nice!! Extremely useful, just started using GSAP again so perfect timing for this tutorial! Nice one Matt!!!
Thank you Hannah! Let me know if there are any specific topics or components you would like me to make a video on in the future :)