正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

🚀 Launch day! Meet⚡️Micro-Interactions ready to use micro-interactions library made for Webflow. 🟡20+ Button Hover Interactions included. 🟡Copy & paste into your projects. 🟡Totally free to use, no strings attached. #webflow #NoCode #uiuxdesign

Hafiz - Webflow Designer & Developer

3,066 subscribers

29,616 次观看 • 2 年前 •via X (Twitter)

#webflow #NoCode #uiuxdesign

Anya Rossi• Live Now

Private livecam show

74 条评论

brryant 的头像

brryant2 年前

@webflow this is so cool! Maybe turn this into a Designer Extension app? (could still utilize copy/paste) but would make it easier for folks to find and use.

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks @bryantchou means a lot. 🙌 Yes, that’s the next step to tap into extension app. Just need to figure out how to make one. 😍

Tony Seets 的头像

Tony Seets2 年前

@webflow I'll just be here hovering over buttons all day. 🤤 Thanks Hafiz. Excellent work dude!

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Haha thanks Tony. 😍 We’ll keep for hover now but planning add some more fun stuff too.

Aonnoy Sengupta | Product Designer & WWX Developer 的头像

Aonnoy Sengupta | Product Designer & WWX Developer2 年前

@peces @webflow Hafiz thank you for blessing the community with this library! Amazing work 🔥🔥🚀🚀

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@peces @webflow Ah, glad to see your appreciation. Thanks buddy.

Jordan Gilroy 的头像

Jordan Gilroy2 年前

@webflow Bravo sir

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thank you.😊

Vimalan 的头像

Vimalan2 年前

@webflow Killer work man! Can't wait for it to grow!💪🏽

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks buddy. I hope it helps people save some time. 🤞

Anish | Web Developer 的头像

Anish | Web Developer2 年前

@webflow This is some work. Perfectly executed. Thanks.

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@the_webflow_guy @webflow Thanks Anish.

Rajan Dave | The Vector Box 的头像

Rajan Dave | The Vector Box2 年前

@webflow Great Great work brother! all the interactions are really good ⚡️

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks man. 🙌

Web Bae 的头像

Web Bae2 年前

@webflow I’ll just be hovering all day today then.

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow All day, everyday. 🙌

Espinosa 的头像

Espinosa2 年前

@webflow Good job man, thanks for the effort!

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thank you buddy. Road to become a better designer. 😊

Espinosa 的头像

Espinosa2 年前

@webflow You'll become better, you are already

Matt Vidal 的头像

Matt Vidal2 年前

@webflow Legend! What a wonderful job! 🔥

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@eumateusvidal @webflow Thanks man. Appreciate it.

Palatium • Portfolio designer 的头像

Palatium • Portfolio designer1 年前

@webflow Looks amazing!

Trist 的头像

Trist2 年前

@webflow 😍 Have been working on my own collection of these too! 😅 Awesome work Hafiz.

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Ah, coincidence 😉 Would love to see your collection bro. I’m sure they will be awesome.

Victor 🧢 的头像

Victor 🧢2 年前

@webflow Love your micro interaction

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thank you Victor. Appreciate the support.

Alaba-Odu | Lowcode dev 的头像

Alaba-Odu | Lowcode dev2 年前

@webflow This are great Hafiz. Baroqa Allah fih brother

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow JAZAKALLAH Brother.🙌

Alaba-Odu | Lowcode dev 的头像

Alaba-Odu | Lowcode dev2 年前

@webflow Aameen, wa iyakum ❤️

Maggy | Webflow Premium Certified Partner 的头像

Maggy | Webflow Premium Certified Partner2 年前

@webflow So cool, thanks Hafiz!!!

Alex Teillet 的头像

Alex Teillet2 年前

@webflow Insane work !

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks Alex. Glad you find it helpful 🙌

Zest for Webflow - Custom CSS extension 的头像

Zest for Webflow - Custom CSS extension2 年前

@robhope @webflow This is beautiful work! 🙌

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@robhope @webflow Thank you. Glad you liked it. 🙌

Darragh Lynch 🇮🇪 | Freelance Webflow Developer 的头像

Darragh Lynch 🇮🇪 | Freelance Webflow Developer2 年前

@webflow Bookmarked straight away and already implemented into a one-page client project. Amazing resource Hafiz 👏

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Ah thank you Darragh. Appreciate the support and I hope it has saves you some time. 🤞

Darragh Lynch 🇮🇪 | Freelance Webflow Developer 的头像

Darragh Lynch 🇮🇪 | Freelance Webflow Developer2 年前

@webflow Already saved me a bit of time as I was about to finish off this page with some micro interactions on the buttons of this site!

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Love that Darragh. This is coming out so good. Thanks for giving it a try 🙌

Martynas_ 的头像

Martynas_2 年前

@webflow Amazing work!! Will definetly use some in next project

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks, Woudl love to hear your feedback once you use it. 😊

Nicholas Ryan Howard 的头像

Nicholas Ryan Howard2 年前

@webflow Amazing!

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks Nicholas. 😊

Sako 的头像

Sako2 年前

@webflow Amazing work Hafiz, thanks for sharing.

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thank you buddy. 🙌

Muhammad Junaid 的头像

Muhammad Junaid2 年前

@webflow These looks really nice - Do work on text animation as well :)

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@juni_fied @webflow Sure. One step at a time. 😊

Ludovic Losco 的头像

Ludovic Losco2 年前

@webflow Awesome! Congrats 🥳

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks man, would love your feedback.

Ludovic Losco 的头像

Ludovic Losco2 年前

@webflow What to say other than: I love it? Keep it up man 💪

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Love it bro. Thanks

Sara Brunettini 的头像

Sara Brunettini2 年前

@webflow Thank you very much!

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks Sara. Glad this got your attention 😍

Parth Gaurav | Official Webflow Expert / Partner 的头像

Parth Gaurav | Official Webflow Expert / Partner2 年前

@webflow This looks great Hafiz! Congrats on the launch 🚀

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thank you Parth. Glad you liked it.🙌

David Minelli 的头像

David Minelli2 年前

@webflow Good stuff, Thanks Hafiz!

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks David. I hope it can save some of you time. 🤞

Assa 的头像

Assa2 年前

@webflow Thanks for sharing that's so dope !

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks @assa_uxdesign for your feedback.

Pir Ahmed - Product Designer 的头像

Pir Ahmed - Product Designer2 年前

@webflow Incredible work, bro! Can't wait to see your project grow - all the very best! 🙌💯

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks buddy. Always appreciate your support.

Ali | Webflow Developer 的头像

Ali | Webflow Developer2 年前

@webflow Yayyy congrats Hafiz! Love them. Those gradient strokes are sick

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Ah thank you Ali. Glad you've catch this. 😊

Charlie Osborne 的头像

Charlie Osborne2 年前

@webflow these are soooo nice!

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thank you Charlie. Means a lot 🙌

Dale Janzen 的头像

Dale Janzen2 年前

@webflow Your collection looks really good... thanks for sharing!

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thanks Dale, really menaas alot. I laready have the next batch almost ready to add. Would love your feedback on this 🙌

Muaaz 的头像

Muaaz2 年前

@webflow cooking ayy

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow 🧑‍🍳

Ben Hammond | Webflow Certified Partner 👨‍🍳 的头像

Ben Hammond | Webflow Certified Partner 👨‍🍳2 年前

@webflow Amazing work dude! Absolutely love it.

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@webflow Thank you Ben. Glad you landed. Would love to hear your feedback. 🙌

Michael Henein 的头像

Michael Henein2 年前

@elsaaamri @webflow Oh wow, this is great. Bookmarked!

Shaheer Ud Din | Websites 的头像

Shaheer Ud Din | Websites2 年前

@webflow Oh my God, these are very very beautiful. I just literally loved them. Now, I don't have to design buttons from scratch, I can use these to speed up my work. Thanks, Hafiz.🫶

Hafiz - Webflow Designer & Developer 的头像

Hafiz - Webflow Designer & Developer2 年前

@shaheeruidesign @webflow You are moset welcome Shaheer. Aim is to save some dev time, I hope it will do the job. 🙌

opensourceCM 的头像

opensourceCM1 年前

What’s the cost of mistakes in your contracts? If you work with contracts day-to-day, it’s time to automate. Track every detail, streamline workflows ... ✨ Make managing contracts as easy as a few clicks. Visit our new website & book your demo today!

相关视频

If you want to design faster in Figma, Use blocks. → A free library of ready-to-use Figma UI blocks. Copy any component, paste it into your file, and start building instantly. Perfect for landing pages, layouts, and UI sections. Use it for: • landing page sections • UI components • layout structures • quick prototypes • design inspiration you can actually use Stop designing everything from scratch.

If you want to design faster in Figma, Use blocks. → A free library of ready-to-use Figma UI blocks. Copy any component, paste it into your file, and start building instantly. Perfect for landing pages, layouts, and UI sections. Use it for: • landing page sections • UI components • layout structures • quick prototypes • design inspiration you can actually use Stop designing everything from scratch.

Kailash

84,239 次观看 • 2 个月前

It’s time for the Osmo Loading-Animation Challenge! 🏆📣 Since Webflow has launched their new Interaction powered by GSAP, it's become easier than ever to use our favourite animation library on the web. Therefore we want to challenge you all to create a Website Loading Animation! No further rules or briefing, we want you to have complete creative freedom. What's in it for you? 🏆 The winner will get a free year of Osmo, or $250 USD! 🔵 The winner will get a free Webflow CMS siteplan (1 year) ✨ Top 5 will be featured across all of our social channels How to participate: 1. While we encourage you to try and use the new Webflow Interactions, we also accept coded entries. 2. Post a link here in a thread of this post, or share on your social channels (and tag us so we can see!) 3. Deadline is next week Tuesday, July 22nd!

It’s time for the Osmo Loading-Animation Challenge! 🏆📣 Since Webflow has launched their new Interaction powered by GSAP, it's become easier than ever to use our favourite animation library on the web. Therefore we want to challenge you all to create a Website Loading Animation! No further rules or briefing, we want you to have complete creative freedom. What's in it for you? 🏆 The winner will get a free year of Osmo, or $250 USD! 🔵 The winner will get a free Webflow CMS siteplan (1 year) ✨ Top 5 will be featured across all of our social channels How to participate: 1. While we encourage you to try and use the new Webflow Interactions, we also accept coded entries. 2. Post a link here in a thread of this post, or share on your social channels (and tag us so we can see!) 3. Deadline is next week Tuesday, July 22nd!

Osmo

14,293 次观看 • 1 年前

Introducing the CONSO Extension - Prompt to Earn, turning your everyday AI activity into real rewards 🐻‍❄️⚡️ Every day, millions of people use AI to search, create, code, learn and make decisions But there’s a hidden trade: - You pay for the models - Your interactions make those models more valuable - Yet you get almost nothing back from the value you create CONSO flips that equation

Introducing the CONSO Extension - Prompt to Earn, turning your everyday AI activity into real rewards 🐻‍❄️⚡️ Every day, millions of people use AI to search, create, code, learn and make decisions But there’s a hidden trade: - You pay for the models - Your interactions make those models more valuable - Yet you get almost nothing back from the value you create CONSO flips that equation

Conso

43,256 次观看 • 10 天前

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,497 次观看 • 1 年前

most people spend hours describing what they want to Claude Code this guy just browsed a catalog of thousands of animated UI components, found one he liked, and hit "copy prompt" that's it. the prompt goes into Claude Code and it builds it. > 21st(.)dev - a library of community-made components built for React, Next.js, Tailwind > every component has a ready-made prompt attached > you pick the effect, copy, paste, done no describing animations from scratch. no explaining what "smooth scroll" or "hover glow" means. someone already figured out the exact prompt that produces it. gap between people who know this exists and people who don't is measured in hours per project full walkthrough in the article below

most people spend hours describing what they want to Claude Code this guy just browsed a catalog of thousands of animated UI components, found one he liked, and hit "copy prompt" that's it. the prompt goes into Claude Code and it builds it. > 21st(.)dev - a library of community-made components built for React, Next.js, Tailwind > every component has a ready-made prompt attached > you pick the effect, copy, paste, done no describing animations from scratch. no explaining what "smooth scroll" or "hover glow" means. someone already figured out the exact prompt that produces it. gap between people who know this exists and people who don't is measured in hours per project full walkthrough in the article below

monokern

64,484 次观看 • 2 个月前

So many little UX/UI edits with the change from web to mobile! So many people said 'just do a wrapper, or pwa'. So glad we went native... coming in a few weeks! We've... - ⏱️ moved the List and End time info from the bottom, all the way to the top. Because they are there to be 'seen' but not 'tapped' - 🟡 added a FAB button to make it easier to add tasks when your list is long - 🧭 added tab bar navigation - woo!! - added modals instead of drop-downs for interactions - 📳 added haptics! and they seriously make it so awesome - 🐣 included some easter eggs - Lulu is now on the screen and tapping her will reveal Barry.. and other stuff (later)

So many little UX/UI edits with the change from web to mobile! So many people said 'just do a wrapper, or pwa'. So glad we went native... coming in a few weeks! We've... - ⏱️ moved the List and End time info from the bottom, all the way to the top. Because they are there to be 'seen' but not 'tapped' - 🟡 added a FAB button to make it easier to add tasks when your list is long - 🧭 added tab bar navigation - woo!! - added modals instead of drop-downs for interactions - 📳 added haptics! and they seriously make it so awesome - 🐣 included some easter eggs - Lulu is now on the screen and tapping her will reveal Barry.. and other stuff (later)

Marie Ng 🦙

10,329 次观看 • 2 年前

As of June 2025, California’s new “No Touch” Phone Law is officially in effect. California Vehicle Code 23123.5 strictly prohibits drivers from physically handling their phones while driving.🚨 🚫 No Holding Allowed It is now illegal to hold a phone while driving, whether or not it’s in use. Simply holding the device is a violation. ✅ Hands-Free Use Drivers may use their phones if the device is mounted on the dashboard or windshield, and all interactions are made via voice commands/a single tap/ or swipe. 📍Navigation and Music Using your phone for GPS or music? It must still be mounted and used hands-free. Holding the phone at any time is not permitted—even for quick adjustments. Please stay off your phone while driving and stay alert.‼️

As of June 2025, California’s new “No Touch” Phone Law is officially in effect. California Vehicle Code 23123.5 strictly prohibits drivers from physically handling their phones while driving.🚨 🚫 No Holding Allowed It is now illegal to hold a phone while driving, whether or not it’s in use. Simply holding the device is a violation. ✅ Hands-Free Use Drivers may use their phones if the device is mounted on the dashboard or windshield, and all interactions are made via voice commands/a single tap/ or swipe. 📍Navigation and Music Using your phone for GPS or music? It must still be mounted and used hands-free. Holding the phone at any time is not permitted—even for quick adjustments. Please stay off your phone while driving and stay alert.‼️

LA County Sheriffs

14,306 次观看 • 1 年前

🚨 launch alert 🚨 most SEO audit tools give you a tacky report and leave you stuck with jargon and numbers in red - they never tell you how to fix it so I built something different 👉 enter your domain and get a clean SEO report with a ready-to-use PROMPT you copy & paste straight into ChatGPT, Claude, or Cursor to fix everything get a full crawl across 8 SEO pillars - foundation, content, metadata, performance, crawl & index, media, architecture, and AI search readiness every issue is flagged, prioritized, and explained 100% free - no setup, just takes a few seconds go fix your SEO 💥 (600+ websites audited in the last 24 hours btw 👀)

🚨 launch alert 🚨 most SEO audit tools give you a tacky report and leave you stuck with jargon and numbers in red - they never tell you how to fix it so I built something different 👉 enter your domain and get a clean SEO report with a ready-to-use PROMPT you copy & paste straight into ChatGPT, Claude, or Cursor to fix everything get a full crawl across 8 SEO pillars - foundation, content, metadata, performance, crawl & index, media, architecture, and AI search readiness every issue is flagged, prioritized, and explained 100% free - no setup, just takes a few seconds go fix your SEO 💥 (600+ websites audited in the last 24 hours btw 👀)

Tibo

22,378 次观看 • 5 个月前

🚨 BREAKING NEWS!! 🚨 SOLID TRADER is live! A full trade/snipe interface exclusively for Pulsechain. This is by far the fastest and most convenient way to make your trades! ⚡️ Ultra fast trades ❌ No more stuck tx's 🟢 One click buys 💳 Multiple wallet set up 🎯 Limit orders 🔴 Stop losses 📈 Charting 🔒 Protection from scams 🔹 All in Telegram! 🔹 To use it just: 💰 Fund your wallet, 📄 Paste the contract address of the token you want to buy ❇️ Click BUY! It's that simple. 🟡 This is a $SOLIDX protocol and as such, all fees collected will be used to buying $SOLIDX and either burning it or sending it to stakers. On top of that, there is a 5 layer deep referral program that pays you 35% of all fees collected! 🟢 Use this link to get started:

🚨 BREAKING NEWS!! 🚨 SOLID TRADER is live! A full trade/snipe interface exclusively for Pulsechain. This is by far the fastest and most convenient way to make your trades! ⚡️ Ultra fast trades ❌ No more stuck tx's 🟢 One click buys 💳 Multiple wallet set up 🎯 Limit orders 🔴 Stop losses 📈 Charting 🔒 Protection from scams 🔹 All in Telegram! 🔹 To use it just: 💰 Fund your wallet, 📄 Paste the contract address of the token you want to buy ❇️ Click BUY! It's that simple. 🟡 This is a $SOLIDX protocol and as such, all fees collected will be used to buying $SOLIDX and either burning it or sending it to stakers. On top of that, there is a 5 layer deep referral program that pays you 35% of all fees collected! 🟢 Use this link to get started:

SolidX.win

20,100 次观看 • 1 年前

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

495,891 次观看 • 2 年前

You can now try Llama 3.1 405B for free (link below)! This is the largest open-source model out there, and for the first time, an open model is competitive with closed models. This time around, Meta did something new: Llama 3.1 has a license that allows developers to use it to enhance other models. For the first time, you can distill Llama 3.1 405B's capabilities into a smaller, more practical model for your use case. First, here is the link where you can play with Llama 3.1 for free: The model is hosted in Tune Studio, an end-to-end platform for developing applications using Large Language Models. They are sponsoring this post. Take a look at the attached video. It will show you how you can fine-tune a simple model using Llama 3.1 without leaving the platform: 1. You can create an empty dataset 2. Use the playground to generate and record interactions with Llama 3.1 3. Modify the dataset directly using the playground 4. Export the data and fine-tune a smaller model Fast and easy! As long as you have a web browser, you can start experimenting with fine-tuning and Llama 3.1. That's all it takes!

You can now try Llama 3.1 405B for free (link below)! This is the largest open-source model out there, and for the first time, an open model is competitive with closed models. This time around, Meta did something new: Llama 3.1 has a license that allows developers to use it to enhance other models. For the first time, you can distill Llama 3.1 405B's capabilities into a smaller, more practical model for your use case. First, here is the link where you can play with Llama 3.1 for free: The model is hosted in Tune Studio, an end-to-end platform for developing applications using Large Language Models. They are sponsoring this post. Take a look at the attached video. It will show you how you can fine-tune a simple model using Llama 3.1 without leaving the platform: 1. You can create an empty dataset 2. Use the playground to generate and record interactions with Llama 3.1 3. Modify the dataset directly using the playground 4. Export the data and fine-tune a smaller model Fast and easy! As long as you have a web browser, you can start experimenting with fine-tuning and Llama 3.1. That's all it takes!

Santiago

55,609 次观看 • 2 年前

Launching a token on BNB Chain, Solana or Base? 🚀 Don’t let complex UX kill your momentum. Use the Qwerti Widget & Magic Link for free and turn the attention into real onchain actions. It takes only a few minutes to integrate, but completely changes the game for your community. Why Qwerti? ✅ Best Routes: We aggregate top DEX protocols (Jupiter, Relay, OKX, Mayan, Uniswap, and more) to find the cheapest cross-chain routes for swapping into your token from 70+ chains. ✅ Fiat On-ramp: Allow your users to buy your token directly via Credit Card, Apple Pay, or Google Pay. ✅ Pro Analysis: Real-time token data and advanced charts to analyze your token on the spot. ✅ AI Agent: A built-in assistant that helps both newbies and pros optimize their analysis and buying process using natural language. 🔥 BECOME A LAUNCH PARTNER: We are looking for projects to join our free White-label program! Secure your spot and get: 🔹 Fully customizable Widget colors & styles 🔹 Custom Magic Link banner 🔹 Verified badge for your token 🔹 Marketing support by our community 🔹 Additional incentives by Qwerti Ready to scale? Try out the Widget & Magic Link and contact us for a White-label solution for your token:

Launching a token on BNB Chain, Solana or Base? 🚀 Don’t let complex UX kill your momentum. Use the Qwerti Widget & Magic Link for free and turn the attention into real onchain actions. It takes only a few minutes to integrate, but completely changes the game for your community. Why Qwerti? ✅ Best Routes: We aggregate top DEX protocols (Jupiter, Relay, OKX, Mayan, Uniswap, and more) to find the cheapest cross-chain routes for swapping into your token from 70+ chains. ✅ Fiat On-ramp: Allow your users to buy your token directly via Credit Card, Apple Pay, or Google Pay. ✅ Pro Analysis: Real-time token data and advanced charts to analyze your token on the spot. ✅ AI Agent: A built-in assistant that helps both newbies and pros optimize their analysis and buying process using natural language. 🔥 BECOME A LAUNCH PARTNER: We are looking for projects to join our free White-label program! Secure your spot and get: 🔹 Fully customizable Widget colors & styles 🔹 Custom Magic Link banner 🔹 Verified badge for your token 🔹 Marketing support by our community 🔹 Additional incentives by Qwerti Ready to scale? Try out the Widget & Magic Link and contact us for a White-label solution for your token:

Qwerti

89,584 次观看 • 5 个月前

Claude Skills are a cheat code for DTC creative teams 🤯 One setup, reusable forever. Claude automatically follows your exact creative process — briefs, hooks, ad copy, research — without you explaining anything twice. Perfect for e-comm brands and agencies who are using Claude for creative work but wasting time re-explaining context every single conversation. Here's the problem: You open Claude: you paste in your brand guidelines, explain your brief format, write the copy, you close the chat. Next day, you do it all over again. Every conversation starts from zero. You're burning 20 minutes on setup before you even get to the actual work. Claude Skills fix this: → Write your creative process once as a Skill (a simple markdown file) → Claude reads it automatically whenever the task comes up → Skills compose — research triggers the research Skill, briefs trigger the brief Skill, copy triggers the copy Skill → All in one conversation, all building on each other → Share across your team so everyone gets the same quality output No re-explaining your brand voice. No pasting the same context every chat. No siloed projects that don't talk to each other. What's in the playbook: → The full architecture (how Skills trigger, chain, and compose) → 5 ready-to-use Skill templates built for DTC and agency creative teams → Step-by-step setup from zero to working Skills → How to write instructions that produce consistent output every time → The composability framework for running multi-step creative workflows in one conversation I put together the complete Claude Skills Playbook for DTC brands and creative agencies. Want it for free? >Like this post >Comment "SKILLS" And I'll send it over (must be following so I can DM)

Mike Futia

31,963 次观看 • 6 个月前

-> someone cloned claude -> design interface and -> made it completely free -> it's work on YouTube -> and also suitable for kids -> it’s called open design -> and it’s live on github -> same clean split-screen ui -> you get in claude artifacts -> prompt on the left, live -> design/code preview on -> the right, type what you -> want to build and it -> generates the ui in real -> time, but here’s the twist -> you pick the ai model -> not locked into one -> company, want to use -> gemini, mistral, llama, -> deepseek any model -> with an api work -> if you’re running local -> models with ollama -> that works too -> no subscription walls -> the big difference -> vs claude artifacts -> works with any free -> ai model you’re not -> paying $20/mo just to -> design, use free tiers -> local models, or whatever -> you already have access to -> fully local, your prompts -> and code never leave -> your machine unless -> you want them to -> no data training -> no cloud storage -> privacy by default -> no usage limits -> claude cuts you off -> after a few designs -> here you can generate, -> iterate, break things -> and rebuild all day -> the only limit is your -> don’t like how a button -> works, change it -> want to add your own -> components, go ahead -> you own the tool -> so if you’ve been gatekept -> by paywalls or worried -> about sensitive prompts -> going to some company’s -> servers, this fixes that. -> same workflow, more -> control, zero monthly fee

-> someone cloned claude -> design interface and -> made it completely free -> it's work on YouTube -> and also suitable for kids -> it’s called open design -> and it’s live on github -> same clean split-screen ui -> you get in claude artifacts -> prompt on the left, live -> design/code preview on -> the right, type what you -> want to build and it -> generates the ui in real -> time, but here’s the twist -> you pick the ai model -> not locked into one -> company, want to use -> gemini, mistral, llama, -> deepseek any model -> with an api work -> if you’re running local -> models with ollama -> that works too -> no subscription walls -> the big difference -> vs claude artifacts -> works with any free -> ai model you’re not -> paying $20/mo just to -> design, use free tiers -> local models, or whatever -> you already have access to -> fully local, your prompts -> and code never leave -> your machine unless -> you want them to -> no data training -> no cloud storage -> privacy by default -> no usage limits -> claude cuts you off -> after a few designs -> here you can generate, -> iterate, break things -> and rebuild all day -> the only limit is your -> don’t like how a button -> works, change it -> want to add your own -> components, go ahead -> you own the tool -> so if you’ve been gatekept -> by paywalls or worried -> about sensitive prompts -> going to some company’s -> servers, this fixes that. -> same workflow, more -> control, zero monthly fee

BeingInvested

12,134 次观看 • 3 个月前

One of my favorite upgrades to Claude Cowork right now: Projects Here's the problem it solves: By default, every new thread starts blank Claude has no memory of what you were working on, what other threads figured out, or what your instructions were So you'd re-explain yourself at the start of every session Or your agents would overlap, contradict each other, or miss context that another thread already had If you've been following my Cowork setup guides, you've already solved part of this — local files and a CLAUDE.md get you most of the way there Projects takes it the rest of the way Shared memory across every thread in the project Permanent instructions that apply everywhere — set once, always on Scheduled tasks that prep your work before you open the app One project HQ to launch every agent from The day-one prompt I paste into every new project: "I just created this project. Read every file in the folder. Then summarize what you know about this workspace — what's here, what I probably use it for, and what instructions you'll follow. If anything is unclear, ask me some questions." Run that once and Claude builds its own understanding of your project workspace from scratch Full video with my live build, including my 4 tips for getting Projects right, and where projects still lack. Send to someone whose ready to Do More with AI, or bookmark to implement this weekend!

One of my favorite upgrades to Claude Cowork right now: Projects Here's the problem it solves: By default, every new thread starts blank Claude has no memory of what you were working on, what other threads figured out, or what your instructions were So you'd re-explain yourself at the start of every session Or your agents would overlap, contradict each other, or miss context that another thread already had If you've been following my Cowork setup guides, you've already solved part of this — local files and a CLAUDE.md get you most of the way there Projects takes it the rest of the way Shared memory across every thread in the project Permanent instructions that apply everywhere — set once, always on Scheduled tasks that prep your work before you open the app One project HQ to launch every agent from The day-one prompt I paste into every new project: "I just created this project. Read every file in the folder. Then summarize what you know about this workspace — what's here, what I probably use it for, and what instructions you'll follow. If anything is unclear, ask me some questions." Run that once and Claude builds its own understanding of your project workspace from scratch Full video with my live build, including my 4 tips for getting Projects right, and where projects still lack. Send to someone whose ready to Do More with AI, or bookmark to implement this weekend!

JJ Englert

29,809 次观看 • 5 个月前

growing your Twitch stream means posting short-form video on TikTok/Shorts/Reels. love it or hate it, that's the reality now. "at least one video a day" you hear everywhere. you probably already know this. you probably feel guilty for not posting enough. THAT ENDS NOW Shortify was just released into Early Access, and it changes the dynamic entirely. you already create mountains of content every time you go live. you just need help getting it out. the Highlight Hunter from FrostyTools already does incredible work finding those great moments for you at the press of a button. now, you can Shortify any of those hunted clips into a postable vertical video for short-form content, complete with dead air removal, advanced captions, attention-keeping cuts, and dynamic focus. these are the "daily vitamins" of content. you have to keep up with them every day, but they bring huge benefits when you do. you probably just don't have the time to keep up with it, especially if you're still learning how. it doesn't have to be like that anymore! if you're already editing, this can free up your time and focus to work on more ambitious projects, especially longer-form content. using it is SUPER easy: - sign into your FrostyTools dashboard via your Twitch account - run the Highlight Hunter on one of your VODs (or go to a hunted VOD if you already use it) - hit the 'Shortify' button on the moments you like best for your socials - in a minute or two, have your Shortified video ready to download and post! remember: you already make tons of content, you just need tools to get it out!

growing your Twitch stream means posting short-form video on TikTok/Shorts/Reels. love it or hate it, that's the reality now. "at least one video a day" you hear everywhere. you probably already know this. you probably feel guilty for not posting enough. THAT ENDS NOW Shortify was just released into Early Access, and it changes the dynamic entirely. you already create mountains of content every time you go live. you just need help getting it out. the Highlight Hunter from FrostyTools already does incredible work finding those great moments for you at the press of a button. now, you can Shortify any of those hunted clips into a postable vertical video for short-form content, complete with dead air removal, advanced captions, attention-keeping cuts, and dynamic focus. these are the "daily vitamins" of content. you have to keep up with them every day, but they bring huge benefits when you do. you probably just don't have the time to keep up with it, especially if you're still learning how. it doesn't have to be like that anymore! if you're already editing, this can free up your time and focus to work on more ambitious projects, especially longer-form content. using it is SUPER easy: - sign into your FrostyTools dashboard via your Twitch account - run the Highlight Hunter on one of your VODs (or go to a hunted VOD if you already use it) - hit the 'Shortify' button on the moments you like best for your socials - in a minute or two, have your Shortified video ready to download and post! remember: you already make tons of content, you just need tools to get it out!

Ken aka Frosty

90,540 次观看 • 7 个月前

Trillions have been spent on anti-natal propaganda and ensuring women have fewer interactions with babies. Specifically in White countries. Playgrounds gutted post-COVID, overrun by addicts in US cities or boat migrants in Britain. The few parents we have feel like pariahs for existing, with nowhere to go. Heck, even McDonald’s went from bright, chaotic kid heaven to grey corporate plastic hell. Uncomfortable seats, no fun, quick turnover, all inside your "happy meal". Family pub meals or restaurant nights which were once a weekly tradition are now rare due to sheer cost and time poverty. Children are no longer seen as a natural part of your life cycle and a societal duty. They're not even seen as a fashionable accessory - not that this was healthy either. They've been relegated to impositions that inconvenience lives of others, with parents treated as pariahs should their child be anything but silent and obedient. Don't get me started on the push of women into education since the 70s and how 2/3rds of students are now women. All graduating into pointless make-believe office work that brings them no satisfaction like a family would. No wonder female anti-depressant usage is at a record high. This anti-family programming runs deep in every part of our culture, media and society. The good news is that we CAN undo it. We can give social reward to native women who have kids. They crave attention and recognition. Use that. Make society child-friendly again too. Tax breaks for businesses that meet these criteria. Use incentive structures. We need to signal that we're a society that invests in its next generation. We can flip the script faster than it took to build the current one. It's all so simple - it's hard wired into us. It's as simple as getting women to interact with children:

Trillions have been spent on anti-natal propaganda and ensuring women have fewer interactions with babies. Specifically in White countries. Playgrounds gutted post-COVID, overrun by addicts in US cities or boat migrants in Britain. The few parents we have feel like pariahs for existing, with nowhere to go. Heck, even McDonald’s went from bright, chaotic kid heaven to grey corporate plastic hell. Uncomfortable seats, no fun, quick turnover, all inside your "happy meal". Family pub meals or restaurant nights which were once a weekly tradition are now rare due to sheer cost and time poverty. Children are no longer seen as a natural part of your life cycle and a societal duty. They're not even seen as a fashionable accessory - not that this was healthy either. They've been relegated to impositions that inconvenience lives of others, with parents treated as pariahs should their child be anything but silent and obedient. Don't get me started on the push of women into education since the 70s and how 2/3rds of students are now women. All graduating into pointless make-believe office work that brings them no satisfaction like a family would. No wonder female anti-depressant usage is at a record high. This anti-family programming runs deep in every part of our culture, media and society. The good news is that we CAN undo it. We can give social reward to native women who have kids. They crave attention and recognition. Use that. Make society child-friendly again too. Tax breaks for businesses that meet these criteria. Use incentive structures. We need to signal that we're a society that invests in its next generation. We can flip the script faster than it took to build the current one. It's all so simple - it's hard wired into us. It's as simple as getting women to interact with children:

Russian Garbage Human

36,038 次观看 • 3 个月前

I've used Claude Code to build 20+ projects in the last 6 months. Thousands of new users across them. And I've never written a single line of code. I just dropped a 24-min video with my top 10 tips for non-developers — the exact playbook I use every day to run multiple AI agents that handle work that used to take me a full week. This is the best beginner guide to learning and building with Claude Code out right now. Every tutorial I found assumes you're a developer. This one doesn't. I cover everything from first install to running multi-agent workflows — with live demos and real examples for every single tip. How I set up new projects, how I got Claude to match my writing style, how I automate repeatable workflows with one command, and how I run multiple agents working on different tasks at the same time. I also built a full resource repo to go alongside the video — curated video tutorials, the best skill libraries, plugin directories, MCP server guides, written docs, community links, and a starter template you can copy-paste into your first project today. Comment "GUIDE" and I'll send you the full guide with everything you need to learn Claude Code! (make sure we're connected so I can DM you)

I've used Claude Code to build 20+ projects in the last 6 months. Thousands of new users across them. And I've never written a single line of code. I just dropped a 24-min video with my top 10 tips for non-developers — the exact playbook I use every day to run multiple AI agents that handle work that used to take me a full week. This is the best beginner guide to learning and building with Claude Code out right now. Every tutorial I found assumes you're a developer. This one doesn't. I cover everything from first install to running multi-agent workflows — with live demos and real examples for every single tip. How I set up new projects, how I got Claude to match my writing style, how I automate repeatable workflows with one command, and how I run multiple agents working on different tasks at the same time. I also built a full resource repo to go alongside the video — curated video tutorials, the best skill libraries, plugin directories, MCP server guides, written docs, community links, and a starter template you can copy-paste into your first project today. Comment "GUIDE" and I'll send you the full guide with everything you need to learn Claude Code! (make sure we're connected so I can DM you)

JJ Englert

419,864 次观看 • 6 个月前