Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer

aceternitylabs's profile picture

Aceternity

4,301 subscribers

43,234 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Introducing Motion-Primitives: a collection of reusable animated components built with Framer Motion and Tailwind CSS.
0:15

Introducing Motion-Primitives: a collection of reusable animated components built with Framer Motion and Tailwind CSS.

Ibelick

88,818 görüntüleme • 1 yıl önce

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,769 görüntüleme • 8 ay önce

The magic of clip paths. Animated tooltip component in NextJS and Matt Perry's motion.
0:12

The magic of clip paths. Animated tooltip component in NextJS and Matt Perry's motion.

Seyi

42,710 görüntüleme • 9 ay önce

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.
0:17

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.

Dillion

324,567 görüntüleme • 2 yıl önce

Made by Framer Motion and Tailwind CSS Inspired by Lokki
0:17

Made by Framer Motion and Tailwind CSS Inspired by Lokki

Ali Samadi

49,604 görüntüleme • 1 yıl önce

Added a glow feature to my shadcn cards with tailwind v4, no component duplication, just blendmode and css shananigans ✨
0:14

Added a glow feature to my shadcn cards with tailwind v4, no component duplication, just blendmode and css shananigans ✨

Dev Ed

60,593 görüntüleme • 1 yıl önce

Exclusion tabs. Made with Tailwind and Framer Motion.
0:10

Exclusion tabs. Made with Tailwind and Framer Motion.

Preet

127,954 görüntüleme • 1 yıl önce

Assisted password confirmation. Made with Tailwind and Framer Motion.
0:17

Assisted password confirmation. Made with Tailwind and Framer Motion.

Preet

405,978 görüntüleme • 1 yıl önce

✨ Build Next.js, Tailwind CSS & shadcn websites with drag and drop. And yes, you can export the code. Link below.
0:16

✨ Build Next.js, Tailwind CSS & shadcn websites with drag and drop. And yes, you can export the code. Link below.

Mattia

204,806 görüntüleme • 1 yıl önce

✨ Build Next.js, Tailwind CSS & shadcn UIs with a visual editor. Export the code with one click. Link below.
0:14

✨ Build Next.js, Tailwind CSS & shadcn UIs with a visual editor. Export the code with one click. Link below.

Mattia

107,114 görüntüleme • 1 yıl önce

Animated Inline Table ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal
0:15

Animated Inline Table ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal

LN

23,710 görüntüleme • 1 yıl önce

Create New Interaction ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal
0:16

Create New Interaction ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal

LN

23,854 görüntüleme • 1 yıl önce

Animated Transactions Card ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal
0:10

Animated Transactions Card ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal

LN

10,354 görüntüleme • 1 yıl önce

Hour 56.5/100: Learning Framer Motion Made with React and Tailwind Design inspired by Arkady
0:10

Hour 56.5/100: Learning Framer Motion Made with React and Tailwind Design inspired by Arkady

Vaun Blu

92,193 görüntüleme • 1 yıl önce

My SVG icons won't be boring anymore 🤯 → Microanimations → Ready-to-copy components → CSS and Tailwind supported So simple, so impressive 🔥 #buildinpublic
0:15

My SVG icons won't be boring anymore 🤯 → Microanimations → Ready-to-copy components → CSS and Tailwind supported So simple, so impressive 🔥 #buildinpublic

Bart ⚡

132,998 görüntüleme • 1 yıl önce

I don't think its usable but it was a fun little experiment built with Three.js Motion Tailwind CSS and Next.js
0:15

I don't think its usable but it was a fun little experiment built with Three.js Motion Tailwind CSS and Next.js

Manu Arora

25,757 görüntüleme • 4 ay önce

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔
0:17

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔

Surjith S M ✪

173,050 görüntüleme • 3 yıl önce

Crafts and designs for august All built in Next using Framer Motion and Tailwind
0:17

Crafts and designs for august All built in Next using Framer Motion and Tailwind

Vaun Blu

71,261 görüntüleme • 1 yıl önce

Figma design vs Claude Code output Here's my workflow: → Built the component on shadcn/ui foundations → Wrote a SKILLS.md file that systematized design-token extraction (included inputs, extraction protocol, tech selection, tailwind rules, layout etc) → Fed Claude the Figma CSS + 2x-scaled component PNGs (halved the measurements) → Iterated bit-by-bit in Claude Code until I as satisfied with the output
0:18

Figma design vs Claude Code output Here's my workflow: → Built the component on shadcn/ui foundations → Wrote a SKILLS.md file that systematized design-token extraction (included inputs, extraction protocol, tech selection, tailwind rules, layout etc) → Fed Claude the Figma CSS + 2x-scaled component PNGs (halved the measurements) → Iterated bit-by-bit in Claude Code until I as satisfied with the output

CJ @ Jackie Brown

27,054 görüntüleme • 2 ay önce

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.
0:10

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.

Dillion

89,955 görüntüleme • 2 yıl önce