Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Subscription Calendar with more details. Made with Tailwind and Framer Motion. Inspired by @KumailNanji

ln_dev7's profile picture

LN

12,119 subscribers

133,665 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von LN
LNvor 1 Jahr

Code : .

Profilbild von LN
LNvor 1 Jahr

⚠️ It's not a real project and I don't intend to put the application into production, it's just for fun and to learn animations.

Profilbild von Kumail Nanji
Kumail Nanjivor 1 Jahr

🔥🔥

Profilbild von Le papa de Kenaya
Le papa de Kenayavor 1 Jahr

@KumailNanji Good Job (as usual) 👌🏿👌🏿👌🏿

Profilbild von LN
LNvor 1 Jahr

@KumailNanji Thanks :)

Profilbild von bbxbeats
bbxbeatsvor 1 Jahr

@KumailNanji Very clean! Love it!

Profilbild von LN
LNvor 1 Jahr

@KumailNanji Thanksss

Profilbild von Devon Cayer
Devon Cayervor 1 Jahr

@KumailNanji Nice work

Profilbild von Andu 🇺🇦🇪🇺
Andu 🇺🇦🇪🇺vor 1 Jahr

@KumailNanji Not sure if date is what one would optimize for. You may want to see value you’re paying, subscription time / how much you paid and for how long. The date doesn’t really matter - it’s mainly monthly.

Profilbild von Dera 🦥
Dera 🦥vor 1 Jahr

@KumailNanji Good stuff If I may ask how did you animate the icons to their position in the calendar hen returning to it ? AnimateLayout?

Profilbild von LN
LNvor 1 Jahr

@KumailNanji Yeah, LayoutId 🌟

Ähnliche Videos

Subscriptions Calendar. Made with Tailwind and Framer Motion. Inspired by @KumailNanji
0:20

Subscriptions Calendar. Made with Tailwind and Framer Motion. Inspired by @KumailNanji

LN

418,561 Aufrufe • vor 1 Jahr

Subscription Calendar with more views. Made with Tailwind and Framer Motion. Inspired by Kumail Nanji x @dana_daniellaa
0:34

Subscription Calendar with more views. Made with Tailwind and Framer Motion. Inspired by Kumail Nanji x @dana_daniellaa

LN

49,789 Aufrufe • vor 1 Jahr

Send Money Interaction ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal
0:21

Send Money Interaction ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal

LN

10,919 Aufrufe • vor 1 Jahr

Gallery. Made with Tailwind and Framer Motion. Navigation inspired by Manrope. Thanks to Hari · animata.design for the challenge. Hari is building an easy-to-install, open-source interaction library with hundreds of hand-crafted components. Check it out if that seems relevant to you.
0:20

Gallery. Made with Tailwind and Framer Motion. Navigation inspired by Manrope. Thanks to Hari · animata.design for the challenge. Hari is building an easy-to-install, open-source interaction library with hundreds of hand-crafted components. Check it out if that seems relevant to you.

Preet

17,363 Aufrufe • vor 2 Jahren

Admin dashboard With Ai AI assistant ! built with - Next.js 16. - Tailwind CSS 4. - TanStack Query. - Framer Motion. Comes with NestJS backend, TypeORM, JWT auth, RBAC, WebSocket-powered updates, AI assistant, and multilingual support. Demo + Source Code (Not Free) :
0:33

Admin dashboard With Ai AI assistant ! built with - Next.js 16. - Tailwind CSS 4. - TanStack Query. - Framer Motion. Comes with NestJS backend, TypeORM, JWT auth, RBAC, WebSocket-powered updates, AI assistant, and multilingual support. Demo + Source Code (Not Free) :

Mohamed Djoudir

114,400 Aufrufe • vor 9 Monaten

Next.js Admin Dashboard with AI Assistant! built with - Next.js 16 - Tailwind CSS - TanStack Query - Framer Motion - next-intl (Full RTL support) Comes with NestJS backend, TypeORM, JWT auth, RBAC, real-time WebSocket updates, AI assistant powered by Gemini & DeepSeek APIs, and multilingual support. Demo + Source Code First comment 👇
0:22

Next.js Admin Dashboard with AI Assistant! built with - Next.js 16 - Tailwind CSS - TanStack Query - Framer Motion - next-intl (Full RTL support) Comes with NestJS backend, TypeORM, JWT auth, RBAC, real-time WebSocket updates, AI assistant powered by Gemini & DeepSeek APIs, and multilingual support. Demo + Source Code First comment 👇

Mohamed Djoudir

87,878 Aufrufe • vor 7 Monaten

Next.js Dashboard (Financial Edition)! built with - Next.js 16. - Tailwind CSS 4. - Framer Motion. - Next-intl (RTL support) Comes with Dark / Light mode, Charts & analytics, Drag & Drop widgets, JWT auth and multilingual support. Demo + Source Code (First comment) 👇
0:21

Next.js Dashboard (Financial Edition)! built with - Next.js 16. - Tailwind CSS 4. - Framer Motion. - Next-intl (RTL support) Comes with Dark / Light mode, Charts & analytics, Drag & Drop widgets, JWT auth and multilingual support. Demo + Source Code (First comment) 👇

Mohamed Djoudir

198,740 Aufrufe • vor 7 Monaten

🚧 Adding a few slider details. 🛠️ Built /w Matt Perry's framer-motion & Radix by WorkOS
0:22

🚧 Adding a few slider details. 🛠️ Built /w Matt Perry's framer-motion & Radix by WorkOS

Mikk Martin 🇪🇪🇺🇦

61,183 Aufrufe • vor 3 Jahren

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~
0:26

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

119,817 Aufrufe • vor 10 Monaten

Stop designing hierarchy without motion The perfect layout still needs motion to create hierarchy Try my rule of 3 to apply better hierarchy with motion to your Framer #framer #ui #framerpartner
0:31

Stop designing hierarchy without motion The perfect layout still needs motion to create hierarchy Try my rule of 3 to apply better hierarchy with motion to your Framer #framer #ui #framerpartner

Zander Whitehurst

15,773 Aufrufe • vor 5 Monaten

Had a lot fun on this one! Art direction, design, dev, motion, music, and anything else I could throw in, by yours truly. Made with C4D, Framer, Cursor, Figma, Midjourney, Logic Pro, Cavalry, and a bit of wizardry
0:54

Had a lot fun on this one! Art direction, design, dev, motion, music, and anything else I could throw in, by yours truly. Made with C4D, Framer, Cursor, Figma, Midjourney, Logic Pro, Cavalry, and a bit of wizardry

Cam Sackett

19,969 Aufrufe • vor 9 Monaten

Mini calendar component designed in Paper, animated with Motion
0:22

Mini calendar component designed in Paper, animated with Motion

Jeet

84,182 Aufrufe • vor 3 Monaten

Next.js SaaS Template (2026 Edition) built with - Next.js 16 & React 19 - Tailwind CSS 4 - Framer Motion - Next-intl (RTL support) Comes with Dark-themed design, i18n (EN + AR), Pricing pages, Blog, Auth pages, Charts & animations. Demo + Source Code (First comment) 👇
0:23

Next.js SaaS Template (2026 Edition) built with - Next.js 16 & React 19 - Tailwind CSS 4 - Framer Motion - Next-intl (RTL support) Comes with Dark-themed design, i18n (EN + AR), Pricing pages, Blog, Auth pages, Charts & animations. Demo + Source Code (First comment) 👇

Mohamed Djoudir

107,636 Aufrufe • vor 7 Monaten

Made a copy of the monthly calendar used by Cal.com with shadcn UI, Radix by WorkOS Colors and React Aria
0:35

Made a copy of the monthly calendar used by Cal.com with shadcn UI, Radix by WorkOS Colors and React Aria

Damián Ricobelli

54,160 Aufrufe • vor 2 Jahren

Made with Figma Make. I paid more attention to micro interactions and smooth motion
0:34

Made with Figma Make. I paid more attention to micro interactions and smooth motion

Stefan

41,009 Aufrufe • vor 6 Monaten

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic
0:47

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

CodeHagen

241,680 Aufrufe • vor 1 Jahr

Introducing the Motion MCP... Connect Motion directly into Claude, Codex, Cursor, OpenClaw, Perplexity, Hermes, and more with one-click. Your agent is now your motion designer. Launch video made by prompting Motion in Claude 👇🏽 Available now at motion [dot] so.
0:25

Introducing the Motion MCP... Connect Motion directly into Claude, Codex, Cursor, OpenClaw, Perplexity, Hermes, and more with one-click. Your agent is now your motion designer. Launch video made by prompting Motion in Claude 👇🏽 Available now at motion [dot] so.

Motion

17,332 Aufrufe • vor 2 Monaten