Next.js 14 UI Showcase with Framer Motion Animations

Live In Greece

This project is a showcase of modern UI design and fluid animations built with Next.js 14, Framer Motion, TypeScript, and Tailwind CSS. It demonstrates advanced animation techniques, including cursor follow effects and dynamic color changes.

Features ✨

• Next.js 14: Leveraging the latest features of Next.js for optimal performance and developer experience.
• TypeScript: Ensuring type safety and enhancing code quality.
• Tailwind CSS: Utilizing utility-first CSS for rapid and responsive design implementation.
• Framer Motion: Implementing smooth, physics-based animations for an engaging user experience.
• ESLint: Maintaining code quality and consistency.

Animations 🎭

• Cursor Follow Animation: A custom cursor that follows the user's mouse movements, creating an interactive experience.
• Dynamic Cursor Color: The cursor color changes based on the content it's hovering over, providing visual feedback.
• Smooth Page Transitions: Utilizing Framer Motion for seamless transitions between pages.
• Element Animations: Various UI elements are animated to enhance the overall user experience.

Framer Motion Highlights 🚀

This project extensively uses Framer Motion to create fluid and responsive animations:

• motion components for declarative animations
• useAnimation hook for programmatic control of animations
• AnimatePresence for handling component mount/unmount animations
• Custom variants for reusable animation configurations
• Gesture animations using Framer Motion's drag, hover, and tap features

Click here to visit the live demo website.