Next js 14 Animated Aceternity UI Website Using Tailwind CSS | Next js Beginner
🔔 Subscribe for more tutorials !!
/ @frontendadvance
💚 Get Project Source Code by Buy Me a Coffee
https://www.buymeacoffee.com/frontend...
❤️ Get Project Source Code by Patreon
/ frontendadvances
🩷 Get Project Source Code by Ko-fi
https://ko-fi.com/frontendadvance
==========================================
In this video, you will learn to Build Next js 14 Animated Website Using Tailwind CSS, Framer Motion. Just follow the steps and run examples!
Aceternity UI : Beautiful Tailwind CSS and Framer Motion Components, built with Next.js and TypeScript. Make your websites look 10x better, Modern, Beautiful and Awesome. Copy paste the most trending components and use them in your websites without having to worry about styling and animations.
Next JS: Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations. Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more.
React JS: React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript.
Framer Motion: Framer Motion provides the Animate Presence component to keep components in the DOM while they perform an exit animation.
📂Assets:
https://drive.google.com/drive/folder...
⏱ Time Stamps
00:00:05 - Project Intro
00:07:38 - Project Setup
00:09:50 - Hero Section
00:11:13 - Spotlight
00:17:56 - Spark Preview
00:22:15 - Typewriter Effect
00:27:48 - Magical Button
00:36:32 - Experience Section
00:47:47 - Floating Navbar Section
00:54:18 - Project Section
01:04:36 - Features Section
01:10:19 - Canvas Reveal Effect
01:20:02 - Clients Section
01:28:00 - Layout Grid Section
01:35:03 - Footer Section
01:46:40 - Final Output
🔗 Resources
https://nextjs.org/
https://ui.aceternity.com/
https://www.framer.com/motion/
https://tailwindcss.com/
==========================================
💙 Support me by PayPal
https://www.paypal.com/paypalme/Rajac...
👍 Thanks for watching!Support me with a like + A Subscription! ❤️