Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

animated illustration that picks a different path every time you see it 🪄✨🛣️ framer motion + tailwind + svg + react

pugson's profile picture

pugson

10,477 subscribers

113,298 Aufrufe • vor 2 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

9 Kommentare

Profilbild von James 🤌🏻
James 🤌🏻vor 2 Jahren

🔥 Loving all of these man!

Profilbild von pugson
pugsonvor 2 Jahren

thanks james! designed by @austinvalleskey

Profilbild von Tim Wong
Tim Wongvor 2 Jahren

unrelated but the sites in your portfolio looks incredible man

Profilbild von pugson
pugsonvor 2 Jahren

thank you!

Profilbild von cdt.eth
cdt.ethvor 2 Jahren

dang, this is sick. i’ve been wanting to learn Framer

Profilbild von pugson
pugsonvor 2 Jahren

unlocks a whole new world of possibilities

Profilbild von Kemdirịm
Kemdirịmvor 2 Jahren

👏🏿👏🏿👏🏿👏🏿

Profilbild von P!
P!vor 2 Jahren

🔥🔥🔥

Profilbild von Adil
Adilvor 2 Jahren

🔥🔥🔥🔥🔥🔥

Ähnliche Videos

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

Four ways to watch a ball fall. Newton: a force pushes it. Lagrange: out of every possible path, it picks the most efficient one. Hamilton: position and momentum chase each other forever. Quantum: it takes every path at once, you just see the ones that didn’t cancel out. Life requires you to navigate all of these trajectories at the same time. Consciousness is moving toward its purpose faster than the physical universe allows.
1:00

Four ways to watch a ball fall. Newton: a force pushes it. Lagrange: out of every possible path, it picks the most efficient one. Hamilton: position and momentum chase each other forever. Quantum: it takes every path at once, you just see the ones that didn’t cancel out. Life requires you to navigate all of these trajectories at the same time. Consciousness is moving toward its purpose faster than the physical universe allows.

Kekius Maximus

14,767 Aufrufe • vor 3 Monaten

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

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴
0:27

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴

daniel petho

188,521 Aufrufe • vor 1 Jahr

have you ever just shipped a video explainer bottom sheet into your app when a new feature was available? 🪄
0:22

have you ever just shipped a video explainer bottom sheet into your app when a new feature was available? 🪄

pugson

15,924 Aufrufe • vor 1 Jahr

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶
0:58

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶

patti

17,909 Aufrufe • vor 8 Monaten

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h
0:35

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

67,623 Aufrufe • vor 3 Monaten

What’s a movie scene that makes you breakdown every time you see it? This one’s mine. 😭 😩
3:35

Sensitive content

What’s a movie scene that makes you breakdown every time you see it? This one’s mine. 😭 😩

Amiri King

44,355 Aufrufe • vor 1 Jahr

Introducing all-new Framer Analytics—completely redesigned and rebuilt to give you real-time insights into your site’s performance. See exactly where your visitors are coming from, how they interact with your site, and do it all without a cookie banner. Included in every plan.
0:38

Introducing all-new Framer Analytics—completely redesigned and rebuilt to give you real-time insights into your site’s performance. See exactly where your visitors are coming from, how they interact with your site, and do it all without a cookie banner. Included in every plan.

Framer

55,338 Aufrufe • vor 1 Jahr

Every time I see a beautiful animated hero section I get nerd-sniped into rebuilding it in shaders. It’s becoming a problem 🧡
0:30

Every time I see a beautiful animated hero section I get nerd-sniped into rebuilding it in shaders. It’s becoming a problem 🧡

Simon Le Marchant

31,841 Aufrufe • vor 10 Monaten

you die a little every time you see how it shines
0:58

you die a little every time you see how it shines

vic 🧸

19,301 Aufrufe • vor 1 Jahr

Model 6 & 7 is the ICT universal Model that' works on every Time Frame !!! The Accuracy is on a different level entirely You need to see this to the end. Retweet it.. Bookmark it
5:15

Model 6 & 7 is the ICT universal Model that' works on every Time Frame !!! The Accuracy is on a different level entirely You need to see this to the end. Retweet it.. Bookmark it

Quinn

46,701 Aufrufe • vor 2 Monaten

Focus on a different player every time you watch it through. Won’t be disappointed
0:39

Focus on a different player every time you watch it through. Won’t be disappointed

Will Sommers

34,185 Aufrufe • vor 3 Monaten

✨ It’s that time of year again, our front page has undergone a well-deserved refresh. With a host of new features that truly showcase what Framer can do. The best part? We pulled it off in just 2 weeks. Ps. Can you spot the Easter eggs using the new Fetch feature?
1:02

✨ It’s that time of year again, our front page has undergone a well-deserved refresh. With a host of new features that truly showcase what Framer can do. The best part? We pulled it off in just 2 weeks. Ps. Can you spot the Easter eggs using the new Fetch feature?

Framer

68,737 Aufrufe • vor 2 Jahren

A goal which gets better every time you see it 🔥
0:40

A goal which gets better every time you see it 🔥

Burnley FC

18,291 Aufrufe • vor 10 Monaten

Portfolio Launch 🪄❤️ Check out my new website! I spent a lot of time after work and on weekends to complete it. Built on Framer with the help of Framer University Figma. Fonts that I used are "Hanuman" and "Hind Siliguri". All illustrations were created by me in Figma. I hope you all enjoy my work
0:25

Portfolio Launch 🪄❤️ Check out my new website! I spent a lot of time after work and on weekends to complete it. Built on Framer with the help of Framer University Figma. Fonts that I used are "Hanuman" and "Hind Siliguri". All illustrations were created by me in Figma. I hope you all enjoy my work

Jeevanshu Narang

59,513 Aufrufe • vor 2 Jahren

🔥 Introducing the Heatmap Image component for Framer. Give your logos/images that Apple-event glow and animated style. Drop a "HEATMAP" in the comments and I’ll DM it to you for free.
0:36

🔥 Introducing the Heatmap Image component for Framer. Give your logos/images that Apple-event glow and animated style. Drop a "HEATMAP" in the comments and I’ll DM it to you for free.

David McBacon

40,872 Aufrufe • vor 11 Monaten

vibe coding in AI Studio just got a major upgrade 🚀 • multiplayer: build real-time games & tools • real services: connect live data • persistent builds: close the tab, it keeps working • pro UI: shadcn, Framer Motion & npm support we can't wait to see what you build!
0:50

vibe coding in AI Studio just got a major upgrade 🚀 • multiplayer: build real-time games & tools • real services: connect live data • persistent builds: close the tab, it keeps working • pro UI: shadcn, Framer Motion & npm support we can't wait to see what you build!

Google AI Studio

4,628,887 Aufrufe • vor 5 Monaten

President Obama pledged to fundamentally transform America. Unfortunately, that meant fundamentally destroy it. America chose a different path in November. Time to clean up the Democrats’ mess.
1:22

President Obama pledged to fundamentally transform America. Unfortunately, that meant fundamentally destroy it. America chose a different path in November. Time to clean up the Democrats’ mess.

Senator Ron Johnson

45,356 Aufrufe • vor 1 Jahr