Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

Framer Motion

Motion is a production-ready motion library for React from Framer. It brings declarative animations, effortless layout transitions and gestures while maintaining HTML and SVG semantics.

https://github.com/magicuidesign/magicui

UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.

components framer-motion nextjs react shadcn-ui tailwindcss typescript

Last synced: 20 Jan 2025

https://github.com/steven-tey/precedent

An opinionated collection of components, hooks, and utilities for your Next.js project.

authjs eslint framer-motion nextauth nextauthjs nextjs nextjs-boilerplate nextjs-starter nextjs-template prettier prisma radix-ui railway tailwindcss typescript vercel

Last synced: 21 Jan 2025

https://github.com/ibelick/motion-primitives

UI kit to make beautiful, animated interfaces, faster. Customizable. Open Source.

animate animated animation components framer-motion library motion tailwindcss ui

Last synced: 22 Jan 2025

https://github.com/hamishmw/portfolio

My personal portfolio website built using React and three js

cyberpunk designer developer framer-motion portfolio react remix threejs

Last synced: 22 Jan 2025

https://github.com/adrianhajdin/project_professional_portfolio

This is a code repository for the corresponding YouTube video. In this tutorial we are going to build and deploy a real time chat application. Covered topics: React.js, SCSS, Framer Motion, Sanity

framer-motion reactjs sanity-io

Last synced: 24 Jan 2025

https://github.com/nolly-studio/cult-ui

Components crafted for Design Engineers. Styled using Tailwind CSS, fully compatible with Shadcn, and easy to integrate—just copy and paste. MIT 🤌

components design-engineering framer-motion nextjs react shadcn-ui tailwindcss typescript

Last synced: 24 Jan 2025

https://github.com/calicastle/cali.so

Cali 的个人官网开源项目

framer-motion nextjs react sanity tailwindcss

Last synced: 23 Jan 2025

https://github.com/CaliCastle/cali.so

Cali 的个人官网开源项目

framer-motion nextjs react sanity tailwindcss

Last synced: 31 Oct 2024

https://github.com/ndimatteo/hull

💀 Headless Shopify Starter – powered by Next.js + Sanity.io

ecommerce framer-motion headless jamstack next-js nextjs react sanity shopify starter starter-template tailwindcss vercel

Last synced: 20 Jan 2025

https://github.com/ndimatteo/HULL

💀 Headless Shopify Starter – powered by Next.js + Sanity.io

ecommerce framer-motion headless jamstack next-js nextjs react sanity shopify starter starter-template tailwindcss vercel

Last synced: 08 Nov 2024

https://github.com/chrisabdo/motionvariants

A collection of handmade Framer Motion variants made for your next project.

animation framer framer-motion nextjs nextjs13 tailwindcss

Last synced: 24 Jan 2025

https://github.com/syntaxui/syntaxui

Get free access to pre-built, Tailwind CSS-powered components, animations and effects - brought to life using Framer Motion. Just copy, paste and you're ready to go!

components css framer-motion nextjs react tailwindcss typescript ui

Last synced: 24 Jan 2025

https://github.com/codebucks27/next.js-developer-portfolio-starter-code

⭐Build a stunning portfolio website with Next.js, Tailwind CSS and Framer-motion. If you want to learn to create this you can follow the tutorial link given in the Read me file.

framer-motion framermotion next-js nextjs nextjs-starter nextjs-template portfolio portfolio-project portfolio-template portfolio-website react reactjs ssg tailwind-css tailwindcss website-development website-template

Last synced: 24 Jan 2025

https://github.com/ChrisAbdo/MotionVariants

A collection of handmade Framer Motion variants made for your next project.

animation framer framer-motion nextjs nextjs13 tailwindcss

Last synced: 24 Oct 2024

https://github.com/unovue/motion-vue

A animation library for Vue

animation framer-motion motion motion-vue vue

Last synced: 22 Jan 2025

https://github.com/yamada-ui/yamada-ui

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion.

a11y animation animation-css dark-mode emotion framer-motion react responsive-design ui ui-components ui-design ui-library uikit yamada-ui

Last synced: 21 Jan 2025

https://github.com/SyntaxUI/syntaxui

Get free access to pre-built, Tailwind CSS-powered components, animations and effects - brought to life using Framer Motion. Just copy, paste and you're ready to go!

components css framer-motion nextjs react tailwindcss typescript ui

Last synced: 04 Dec 2024

https://github.com/temzasse/react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐

accessibility bottom-sheet framer-motion modal reactjs

Last synced: 22 Jan 2025

https://github.com/ccrsxx/twitter-clone

Twitter clone built in Next.js + TypeScript + Tailwind CSS using Cloud Firestore and Storage

firebase framer-motion headlessui nextjs react-hot-toast swr tailwindcss twitter-clone typescript

Last synced: 24 Jan 2025

https://github.com/Temzasse/react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐

accessibility bottom-sheet framer-motion modal reactjs

Last synced: 25 Oct 2024

https://github.com/uixmat/onborda

An onboarding wizard flow / product tour for Next.js animated by framer motion

framer-motion next nextjs onboarding product product-tour product-tours react setup tailwindcss tour wizard

Last synced: 23 Jan 2025

https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code

⭐Build a stunning portfolio website with Next.js, Tailwind CSS and Framer-motion. If you want to learn to create this you can follow the tutorial link given in the Read me file.

framer-motion framermotion next-js nextjs nextjs-starter nextjs-template portfolio portfolio-project portfolio-template portfolio-website react reactjs ssg tailwind-css tailwindcss website-development website-template

Last synced: 27 Oct 2024

https://github.com/sikandarjodd/svelte-animations

Svelte Magic UI, Svelte Aceternity UI, Svelte Components build using Tailwind CSS & Framer Motion

aceternity-ui components framer-motion free-components magicui svelte tailwindcss

Last synced: 25 Jan 2025

https://github.com/barvian/motion-number

A Framer Motion component that transitions, formats, and localizes numbers.

accessible animation framer-motion number-format odometer react-animation

Last synced: 10 Oct 2024

https://github.com/nyxb-ui/ui

Fusion UI library combining Shadcn/UI and MagicUI. Featuring 150+ free and open-source components built with React, Typescript, Tailwind CSS, and Framer Motion. Create stunning, responsive interfaces effortlessly. 100% open-source.

components framer-motion magicui nextjs radix-ui react shadcn-ui tailwindcss typescript ui

Last synced: 25 Jan 2025

https://github.com/SikandarJODD/svelte-animations

Svelte Magic UI, Svelte Aceternity UI, Svelte Components build using Tailwind CSS & Framer Motion

aceternity-ui components framer-motion free-components magicui svelte tailwindcss

Last synced: 19 Nov 2024

https://github.com/damien-schneider/cuicui

Simplify your UI with clean, copy-paste components that minimize JavaScript, maximize CSS, spark creativity, and empower you with code you fully own and understand.

components-library components-react copy-paste framer-motion tailwind-css ui ui-components

Last synced: 26 Jan 2025

https://github.com/micha-lmxt/svelte-motion

An animation library for Svelte based on framer-motion.

animation framer-motion svelte

Last synced: 25 Jan 2025

https://github.com/guhrodrrigues/luxe

Copy & Paste components. Illuminate your apps. Fast and Easy.

components copy-paste framer-motion library motion nextjs react tailwindcss typescript ui ux

Last synced: 25 Jan 2025

https://github.com/w3bdesign/nextjs-woocommerce

🔥 Next.js (React) headless eCommerce site with Typescript, WordPress (WooCommerce) backend and Algolia search

algolia algolia-search animatecss apollo ecommerce ecommerce-site es6 framer-motion graphql nextjs react react-hook-form styled-components tailwindcss typescript woocommerce woocommerce-api wp-graphql

Last synced: 25 Jan 2025

https://github.com/wirtzdan/website

Personal website build with Chakra UI, NextJS and Airtable ✨

airtable airtable-api blog chakra-ui framer-motion next nextjs portfolio reactjs vercel website

Last synced: 22 Jan 2025

https://github.com/ladunjexa/reactjs18-3d-portfolio

incredible 3D developer portfolio website with awesome graphics - built with React & Three.js 🪄

3d-portfolio 3d-web emailjs-browser framer-motion portfolio-website react tailwindcss threejs

Last synced: 25 Jan 2025

https://github.com/kokonut-labs/kokonutui

Access a collection of free-to-use, standalone components with KokonutUI. Built with Tailwind CSS, and optional library such as shadcn and Framer Motion.

components framer-motion library nextjs react shadcn-ui tailwindcss

Last synced: 22 Jan 2025

https://github.com/codebucks27/react-portfolio-final

Build a Stunning portfolio with React JS and framer-motion. This portfolio is created using framer-motion for cool transitions and animation. If you want to learn how to create this portfolio then you can follow below tutorial link in the ReadMe

beginner-project framer-motion frontend javascript portfolio portfolio-website react reactjs styled-components webdesign webdeveloper webdevelopment

Last synced: 25 Jan 2025

https://github.com/kinfe123/farm-ui

Treating UI Libraries as first class citizen and making sure they are headless :)

contentlayer drizzle framer-motion magicui monorepo nextjs pg shadcn tailwindcss turborepo

Last synced: 25 Jan 2025

https://github.com/shaqdeff/portfolio-template

This portfolio template is designed to showcase your skills, experience, and accomplishments in a visually appealing and professional manner.

framer-motion react tailwindcss threejs vite

Last synced: 26 Jan 2025

https://github.com/maggieappleton/maggieappleton.com-v2

⚠️ Now retired. My previous digital garden built with Next.js, React, and MDX. Featuring loosely opinionated notes, half-formed ideas, and content that is always growing.

digital-garden framer-motion nextjs react styled-components

Last synced: 19 Jan 2025

https://github.com/sashenjayathilaka/airbnb-build

Full Stack Airbnb Clone with Next.js 13 Tailwind-css, Prisma, MongoDB, NextAuth, Framer-motionSocial, Login (Google and Facebook), Image upload, Cloudinary CDN, Location selection, Map component, Country autocomplete, Fetching listings with server components

axios bcrypt cloudinary date-fns framer-motion mongodb next-auth next-js-13 prisma-client query-string react-date-range react-hook-form react-icons react-leaflet react-select react-toastify tailwindcss typescript world-countries zustand

Last synced: 20 Jan 2025

https://github.com/k-h-rayhan/nextjs-animated-slider

Stunning animated slider website built using Next.js, Framer Motion, and Tailwind CSS.

framer-motion nextjs13 react reactjs-project tailwindcss

Last synced: 20 Jan 2025

https://github.com/code-env/framer-ground

Elevate your web projects with fine, small animated components.

animation framer-motion javascript nextjs reactjs typscript

Last synced: 22 Jan 2025

https://github.com/leerob/next-minimal-store

Minimal ecommerce store built with Next.js, inspired by yeezy.com.

framer-motion nextjs shadcn-ui tailwindcss

Last synced: 23 Jan 2025

https://github.com/K-H-Rayhan/nextjs-animated-slider

Stunning animated slider website built using Next.js, Framer Motion, and Tailwind CSS.

framer-motion nextjs13 react reactjs-project tailwindcss

Last synced: 09 Nov 2024

https://github.com/codebucks27/next.js-creative-portfolio-website

Interactive 3D Portfolio Website with Next.js, Three.js & Tailwind CSS | Checkout the tutorial link ⚡

ai-images emailjs framer-motion nextjs portfolio portfolio-website react-hook-form sonner tailwindcss threejs

Last synced: 22 Jan 2025

https://github.com/oku-ui/motion

Motion for Vue is a 5kb animation library for Vue 3 and Nuxt 3. Built on Motion, it's capable of springs, independent transforms, and hardware accelerated animations.

framer-motion motion motion-nuxt motion-vue motionone nuxt-motion vue-motion

Last synced: 14 Dec 2024

https://github.com/mehdibha/folio

Make your personal website and blog with Nextjs 14, tailwind and Notion.

blog cms framer-motion nextjs notion notion-blog portfolio portfolio-template react reactjs

Last synced: 10 Oct 2024

https://github.com/itsfaqih/fama

TailwindCSS based personal branding template. Built with react and framer-motion

animation framer-motion portfolio react tailwindcss template

Last synced: 22 Jan 2025

https://github.com/raphaelsalaja/toldo

An elevated dialog component for React.

dialog framer-motion modal radix react

Last synced: 26 Jan 2025

https://github.com/shaifarfan/react-todo-app

A complete Todo application with all features.

framer-motion javascript reactjs redux webcifar

Last synced: 25 Jan 2025

https://github.com/sashenjayathilaka/project-management-app

This repository provides a guide to building a full-stack Project Management Dashboard. The frontend uses Next.js, Tailwind CSS, and Material UI Data Grid. The backend is powered by Node.js, Express, PostgreSQL, and Prisma. Cloud integration includes AWS Lambda and Cognito, ensuring a scalable, efficient, and secure solution for project management

autoprefixer chatgpt-api eslint-config-next firebase-admin firebase-firestore framer-motion google-authentication learn next-auth next-js openai postcss react-firebase-hooks react-hot-toast react-select reactjs swr tailwind-css typescript

Last synced: 21 Jan 2025

https://github.com/sashenjayathilaka/chatgpt-clone

ChatGPT Clone with REACT! (Next.js 13, Firebase, Tailwind CSS, TypeScript, API endpoints in Next.js, ChatGPT models, Dynamic page routing in Next.js 13, App folder structure, NextAuth.js, Google Authentication)

autoprefixer chatgpt-api eslint-config-next firebase-admin firebase-firestore framer-motion google-authentication learn next-auth next-js openai postcss react-firebase-hooks react-hot-toast react-select reactjs swr tailwind-css typescript

Last synced: 16 Jan 2025

https://github.com/ashanime/ashanime-web-app

Watch media ad free through a beautiful UI. Don't forget to 🌟 this repo for updates!

ad-free anime anime-api anime-app anime-scraper anime-search framer-motion react redux tailwindcss vercel

Last synced: 23 Jan 2025

https://github.com/edil-ozi/edil-ozi

Component Library for Developers. Open Source components you can copy and paste to your apps.

aceternity components framer-motion gsap nextjs14 react shadcn tailwind typescript

Last synced: 19 Jan 2025

https://github.com/aod/zhithead

Zhithead is a clone of the original card game shithead made for the browser

card-game framer-motion hacktoberfest motion react shithead tailwindcss vite xstate

Last synced: 19 Dec 2024

https://github.com/rick-hup/motion-vue

A animation library for Vue

component framer-motion motion motion-vue vue

Last synced: 08 Dec 2024

https://github.com/codebucks27/wibe-studio

Build a stunning Fashion Studio Website Landing page with React JS. This website is created using locomotive-scroll for smooth scrolling. Also, GSAP and Framer-Motion for some custom animations and effects. You can learn to make this website by visiting the tutorial link from the description.

fashion framer-motion gsap gsap-scrolltrigger landing-page locomotive-scroll portfolio portfolio-project react reactjs styled-components website website-template

Last synced: 25 Jan 2025

https://github.com/nikhils4/ui-beats

Level up your UI development with reusable components from UI Beats, crafted with React, Typescript, Tailwind CSS, and Framer Motion.

framer-motion nextjs reactjs shadcn-ui tailwindcss typescript

Last synced: 19 Jan 2025

https://github.com/ismamz/next-transition-router

Easily add animated transitions between pages using Next.js App Router and your favorite animation library.

animation app-router framer-motion gsap nextjs page-transitions page-transitions-next react router-transitions transitions view-transitions

Last synced: 20 Jan 2025

https://github.com/sashenjayathilaka/reddit-clone

Reddit Clone with REACTJS (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil, (Image Uploading, Google Authentication, Create Community, Join Community, Leave Community, Upvote and Downvote Posts), Dark Mode & Light Mode, Data Encryption and Decryption)

chakra-ui chakra-ui-icons emotion-react firebase firebase-auth firebase-database firebase-functions firestore fontsource framer-motion learn moment nextjs react react-dom react-firebase-hooks react-icons recoil typescript vercel-deployment

Last synced: 05 Jan 2025

https://github.com/victorcodess/folio-v1

This is a portfolio website I created to showcase my work. I’m always striving to create something unique and innovative. If you like it, be sure to give it a star.

framer-motion gsap nextjs react tailwindcss typescript

Last synced: 25 Jan 2025

https://github.com/tushar-2223/bluebird-movies

BlueBird-Movies is a React-based movie website that allows users to search for movies by title, sort them by genre, view trending and upcoming movies, and bookmark their favorite movies. The website is designed to be user-friendly and visually appealing.

framer-motion google-authentication movie-app-react movie-database movie-website react-movie-app tmdb-api

Last synced: 25 Jan 2025

https://github.com/LauraBeatris/amazon-next

A simple mock and re-concept of Amazon - built with Next.js, Firebase, and Framer Motion

css framer-motion frontend javascript nextjs react tailwind

Last synced: 25 Oct 2024

https://github.com/laurabeatris/amazon-next

A simple mock and re-concept of Amazon - built with Next.js, Firebase, and Framer Motion

css framer-motion frontend javascript nextjs react tailwind

Last synced: 10 Oct 2024

https://github.com/kriziu/shoes-ecommerce

Shop made in Next.JS and Strapi containing products from https://nike.com

ecommerce framer-motion graphql nextjs react strapi stripe typescript

Last synced: 10 Oct 2024

https://github.com/alpayc/portfolio_site

My Portfolio website based on react, typescript and tailwind.

framer-motion gsap portfolio portfolio-site portfolio-website react tailwindcss typescript

Last synced: 19 Jan 2025

https://github.com/AlpayC/portfolio_site

My Portfolio website based on react, typescript and tailwind.

framer-motion gsap portfolio portfolio-site portfolio-website react tailwindcss typescript

Last synced: 07 Dec 2024

https://github.com/codebucks27/react-sidebar

Create awesome sidebar for your portfolio or any projects, It is build using ReactJs and styled-components. React router is already configured, Also it has page transition effect using framer-motion.

framer-motion navbar navigation pagetransition react react-router reactjs sidebar sidebar-menu sidebar-navigation

Last synced: 10 Oct 2024

https://github.com/nuiipointerexception/www.seekvisualartist.com

Personal portfolio made using Next.js, React and TailwindCSS. Make sure to leave a ⭐ if you like it!

framer-motion gsap nextjs portfolio react tailwindcss

Last synced: 10 Oct 2024

https://github.com/eurooooo/zephyrlin.me

A personal website for developers🧑‍💻, built with Next.js

framer-motion javascript nextjs react shadcn-ui supabase tailwindcss

Last synced: 21 Jan 2025

https://github.com/sashenjayathilaka/full-stack-movie-application

Full Stack Movie Application with NEXT.JS 13!(Next.js 13, mongodb, node js, NextAuth.js v4, Tailwind CSS, framer-motion, TMDB Api, Google Authentication, primary information about a movies, Users can Add Bookmark in favorite actors and movies)

cors dotenv express framer-motion learn line-clamp mongoose mui-material next-auth next-js-13 nodemon pusher-js react-icons react-player react-toastify swiper tailwind-css tailwind-scrollbar tailwind-scrollbar-hide typescript

Last synced: 05 Jan 2025

https://github.com/codebucks27/React-Portfolio-starter-code-files

Build a Stunning portfolio with React JS and framer-motion. This portfolio is created using framer-motion for cool transitions and animation. If you want to learn how to create this portfolio then you can follow below tutorial link in the ReadMe

beginner-project framer-motion frontend portfolio portfolio-website react reactjs styled-components webdesign webdeveloper webdevelopment

Last synced: 05 Nov 2024

https://github.com/codebucks27/nextjs-creative-portfolio-starter-code-files

Interactive 3D Portfolio Website with Next.js, Three.js & Tailwind CSS | Checkout the tutorial link ⚡

ai-images emailjs framer-motion nextjs portfolio portfolio-website react-hook-form sonner tailwindcss threejs

Last synced: 21 Jan 2025

https://github.com/codebucks27/react-portfolio-starter-code-files

Build a Stunning portfolio with React JS and framer-motion. This portfolio is created using framer-motion for cool transitions and animation. If you want to learn how to create this portfolio then you can follow below tutorial link in the ReadMe

beginner-project framer-motion frontend portfolio portfolio-website react reactjs styled-components webdesign webdeveloper webdevelopment

Last synced: 10 Oct 2024

https://github.com/gianlucajahn/macos-react

A macOS desktop clone built with TypeScript React, SASS and Framer Motion.

clone framer-motion mac-clone macos macosx nextjs reactjs sass tailwindcss typescript

Last synced: 10 Oct 2024

https://github.com/imhalid/cv-builder

Currently a cv generator where you can design only one page

cv framer-motion nextjs pdf portfolio resume tailwindcss

Last synced: 10 Oct 2024

https://github.com/driaug/country-picker

Minimalistic country picker for React, built with Tailwind and Typescript.

framer-motion react tailwindcss typescript

Last synced: 10 Oct 2024

https://github.com/chingu-voyages/v43-tier3-team-29

This awesome 3D portfolio is built with React and Three.js 💫 | Voyage-43 | https://chingu.io/ | Twitter: https://twitter.com/ChinguCollabs

3d-website chingu framer-motion react react-three-drei react-three-fiber theatre theatrejs three-js threejs

Last synced: 10 Oct 2024

https://github.com/bundui/components

A collection of components that you can copy and paste into your applications. Built with Tailwind CSS and Framer Motion.

animated components framer-motion javascript motion nextjs radix-ui react tailwindcss typescript ui

Last synced: 24 Jan 2025

https://github.com/ryanwiemer/gatsby-using-page-transitions

Gatsby example site using page transitions

framer-motion gatsby page-transitions

Last synced: 10 Oct 2024

https://github.com/ma-ahmad/portfolio

My personal portfolio to show my skills, experience, and articles I published.

chakra-ui framer-motion react react-icons use-sound

Last synced: 10 Oct 2024

https://github.com/joshcawthorne/lunadesk

The people-first scheduling tool, coming in a year starting with a 2. LunaDesk is a web app, originally created by Josh Cawthorne and known as "WorkFrom" for the Supabase Hackathon.

framer-motion nextjs react styled-components supabase

Last synced: 10 Oct 2024

Framer Motion Awesome Lists
Framer Motion Categories