Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

browsers mostly skip updating hover state while you scroll so I made super-hover, a tiny utility library that checks what's under your cursor every frame! `pnpm add super-hover`

daniel petho

8,204 subscribers

137,906 görüntüleme • 3 ay önce •via X (Twitter)

Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

Meng To

221,140 görüntüleme • 1 yıl önce

So I added a translate button to Twitch chat - If anyone comes in your stream and starts talking in Spanish or some other language that you don’t understand, you can just hover over their message and click a button.

So I added a translate button to Twitch chat - If anyone comes in your stream and starts talking in Spanish or some other language that you don’t understand, you can just hover over their message and click a button.

nutty

141,339 görüntüleme • 2 yıl önce

Gemini 3 is the best model at creating animations. It's not even close. Here are the prompts I used for creating these UI animations. You don't need animations everywhere, but there are key places where it can enhance your design: the hero intro, hover interactions, slow content reveal, background effects and navigation transitions. Gemini 3 relies heavily on good prompting, ideally with image or code. Intro + animation on scroll: "Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. Add a clip animation to the background, column by column using clip-path." Buttons: "Add a 1px border beam animation around the pill-shaped button on hover. " Text animation: "Add a vertical text clip slide down animation letter by letter" Logos looping: "Add a marquis infinite loop slow animation to the logos using alpha mask" Content switching: "Animate the big card to rotate between 3 cards in a loop. Add prev/next arrows to switch between cards." Flashlight on hover: "Add a subtle flashlight effect on hover/mouse position to both background and border of the cards." Testimonials looping: "Make the cards animate marquis in an infinite loop with alpha mask slowly."

Gemini 3 is the best model at creating animations. It's not even close. Here are the prompts I used for creating these UI animations. You don't need animations everywhere, but there are key places where it can enhance your design: the hero intro, hover interactions, slow content reveal, background effects and navigation transitions. Gemini 3 relies heavily on good prompting, ideally with image or code. Intro + animation on scroll: "Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. Add a clip animation to the background, column by column using clip-path." Buttons: "Add a 1px border beam animation around the pill-shaped button on hover. " Text animation: "Add a vertical text clip slide down animation letter by letter" Logos looping: "Add a marquis infinite loop slow animation to the logos using alpha mask" Content switching: "Animate the big card to rotate between 3 cards in a loop. Add prev/next arrows to switch between cards." Flashlight on hover: "Add a subtle flashlight effect on hover/mouse position to both background and border of the cards." Testimonials looping: "Make the cards animate marquis in an infinite loop with alpha mask slowly."

Meng To

200,148 görüntüleme • 9 ay önce

✨SMOLL DEVIL VTUBER GIVEAWAY✨ Super little, super evil! >:D Been a while since I made a giveaway so I figured why not make a Halloween one nyahaha Ends in 48 HOURS, so be sure to join quickly! <3 ❌Ends: October 19th ❌Follow, RT+ Comment your OC Become tiny, commit crimes!

✨SMOLL DEVIL VTUBER GIVEAWAY✨ Super little, super evil! >:D Been a while since I made a giveaway so I figured why not make a Halloween one nyahaha Ends in 48 HOURS, so be sure to join quickly! <3 ❌Ends: October 19th ❌Follow, RT+ Comment your OC Become tiny, commit crimes!

Athy - Commissions: CLOSED

70,482 görüntüleme • 1 yıl önce

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 görüntüleme • 1 ay önce

💊 How Big Pharma Made You Sick — While Getting Richer Than Ever "Unpacking the Lies" film exposes the trillion-dollar medical con that turned every American into a repeat customer. We are SUPER CENSORED, so please SHARE! (Link to watch in comments)

💊 How Big Pharma Made You Sick — While Getting Richer Than Ever "Unpacking the Lies" film exposes the trillion-dollar medical con that turned every American into a repeat customer. We are SUPER CENSORED, so please SHARE! (Link to watch in comments)

The Truth About Vaccines

51,740 görüntüleme • 10 ay önce

I created a Claude Skill that make beautiful slides on the web. The world hasn't woken up to the fact that code can create much better slides than most PPT tools. - Claude interviews you first about aesthetics, then generate a few directions to "show not tell", and you can pick your favorite - Cool transitions and animations - Interactive hover states and cursor effects - Auto-fits on any screen - Supports converting existing PPTX files to web-based slides; preserves original images and brand assets I asked Claude to make a slide show about this skill to showcase what it can do. Link to skill below

Zara Zhang

1,548,112 görüntüleme • 7 ay önce

Finally got around to updating and detailing the coverage library within the specific families. I would’ve given anything to have this resource when I was looking to study every single coverage concept I could find, so hopefully the decade-plus collecting and the many hours put into organizing it pays off for someone else. **Side note: please make sure your email is included or that you DM it to me so that there’s minimal waiting time while I set you up.

Finally got around to updating and detailing the coverage library within the specific families. I would’ve given anything to have this resource when I was looking to study every single coverage concept I could find, so hopefully the decade-plus collecting and the many hours put into organizing it pays off for someone else. **Side note: please make sure your email is included or that you DM it to me so that there’s minimal waiting time while I set you up.

Honest NFL

46,789 görüntüleme • 1 ay önce

As no-code design tools become more common, so do the pitfalls. You know what they look like - the purple gradients, annoying hover effects, sections that fade as you scroll. So how do you avoid a site that feels vibe coded while still taking advantage of these new tools? In this episode of Design Review, Aaron Epstein is joined by Visiting Partner Raphael Schaad, the founder and designer of Cron (now Notion Calendar). Together they’ll review user submitted sites with an eye for how to best use these tools and avoid common vibe coding mistakes. Thanks to the companies that submitted their sites for review. 2.58 - 9.25 - Rosebud AI 13:30 - GetCrux (YC W24) 19:12 - Sphinx 25:43 - Build0 30:30 - Zarna

As no-code design tools become more common, so do the pitfalls. You know what they look like - the purple gradients, annoying hover effects, sections that fade as you scroll. So how do you avoid a site that feels vibe coded while still taking advantage of these new tools? In this episode of Design Review, Aaron Epstein is joined by Visiting Partner Raphael Schaad, the founder and designer of Cron (now Notion Calendar). Together they’ll review user submitted sites with an eye for how to best use these tools and avoid common vibe coding mistakes. Thanks to the companies that submitted their sites for review. 2.58 - 9.25 - Rosebud AI 13:30 - GetCrux (YC W24) 19:12 - Sphinx 25:43 - Build0 30:30 - Zarna

Y Combinator

84,834 görüntüleme • 6 ay önce

I found a great utility app called Dock Pro by Chad Milburn that gives your Vision Pro a floating dock with quick access to apps, bookmarks, iMessage contacts, and shows the time and battery percentage of your Vision Pro. It’s fully customizable, and you can even add separators or gaps. I keep it under my virtual ultrawide monitor all the time and use it to quickly open Music or start an iMessage conversation with my wife. So far, it has boosted my productivity a lot while working. The app’s design looks super cohesive with visionOS, which is always a big plus for me as a designer. I’m giving it a 4/5 Visions 🥽🥽🥽🥽 and highly recommend checking it out!

I found a great utility app called Dock Pro by Chad Milburn that gives your Vision Pro a floating dock with quick access to apps, bookmarks, iMessage contacts, and shows the time and battery percentage of your Vision Pro. It’s fully customizable, and you can even add separators or gaps. I keep it under my virtual ultrawide monitor all the time and use it to quickly open Music or start an iMessage conversation with my wife. So far, it has boosted my productivity a lot while working. The app’s design looks super cohesive with visionOS, which is always a big plus for me as a designer. I’m giving it a 4/5 Visions 🥽🥽🥽🥽 and highly recommend checking it out!

Phil Traut ᯅ

11,599 görüntüleme • 1 yıl önce

Daniel Cormier says UFC stars get "monster checks" from the video game while most fighters get $250 "Guys like Justin Gaethje, Ilia Topuria, Pereira, those guys are getting monster checks. I used to get a lot when I was still fighting" "So UFC will give you every year an envelope that says royalties. You get a paper, and it's literally every single thing you sell. If you sell a T-shirt, it tells you how much you get off that T-shirt, everything" "If you sold a boatload of merch, you get 50, 100 pages of stuff you sold from the UFC and on that paper, you get your video game number"

Daniel Cormier says UFC stars get "monster checks" from the video game while most fighters get $250 "Guys like Justin Gaethje, Ilia Topuria, Pereira, those guys are getting monster checks. I used to get a lot when I was still fighting" "So UFC will give you every year an envelope that says royalties. You get a paper, and it's literally every single thing you sell. If you sell a T-shirt, it tells you how much you get off that T-shirt, everything" "If you sold a boatload of merch, you get 50, 100 pages of stuff you sold from the UFC and on that paper, you get your video game number"

katsu

949,238 görüntüleme • 2 ay önce

THIS GUY UPDATED AN OPEN SOURCE TOOL FOR CLAUDE FABLE 5 THAT TAKES A SINGLE IMAGE AND AUTOMATICALLY REBUILDS IT AS A PREMIUM SCROLL LINKED WEB ANIMATION Instead of slicing videos by hand or exporting individual frames, you just hand it an image and it recreates the entire sequence as a pure scroll mapped experience - Pick an anchor image and set your overall creative direction - The tool automatically scales it into motion clips and uses ffmpeg to rip out every frame in the background - Maps the frames directly to your scroll position, tracking the cursor for an ultra smooth user experience - AND its open source, so you can drop the skill into your own terminal workspace He tested it on a highly detailed origami style travel website and it came out genuinely good for something built completely in one shot Turning a single photo into an automated frame mapped scrolling app is the kind of thing that used to take a developer hours

THIS GUY UPDATED AN OPEN SOURCE TOOL FOR CLAUDE FABLE 5 THAT TAKES A SINGLE IMAGE AND AUTOMATICALLY REBUILDS IT AS A PREMIUM SCROLL LINKED WEB ANIMATION Instead of slicing videos by hand or exporting individual frames, you just hand it an image and it recreates the entire sequence as a pure scroll mapped experience - Pick an anchor image and set your overall creative direction - The tool automatically scales it into motion clips and uses ffmpeg to rip out every frame in the background - Maps the frames directly to your scroll position, tracking the cursor for an ultra smooth user experience - AND its open source, so you can drop the skill into your own terminal workspace He tested it on a highly detailed origami style travel website and it came out genuinely good for something built completely in one shot Turning a single photo into an automated frame mapped scrolling app is the kind of thing that used to take a developer hours

0xMarioNawfal

111,468 görüntüleme • 1 ay önce

“How lucky I am to have something that makes saying goodbye so hard.” I didn’t expect to cry. But this year wasn’t just any year. It was the kind of year that fills your heart up so much, it overflows. From the early mornings to the Super Bowl finale, every single moment meant something. Every hug. Every high five. Every lesson that turned into magic. ⁣ My littles made me better. They taught me to lead with love, to teach with heart, and to celebrate everything. ⁣ To the NFL and every single person who followed along, cheered us on, and helped bring NFeLementary to life, THANK YOU.!!! You made my third graders feel seen, supported, and so very special. ⁣ This was a season I’ll never forget. And while it hurts to say goodbye, it only hurts this much because it was THAT good. See you next season 🧡

“How lucky I am to have something that makes saying goodbye so hard.” I didn’t expect to cry. But this year wasn’t just any year. It was the kind of year that fills your heart up so much, it overflows. From the early mornings to the Super Bowl finale, every single moment meant something. Every hug. Every high five. Every lesson that turned into magic. ⁣ My littles made me better. They taught me to lead with love, to teach with heart, and to celebrate everything. ⁣ To the NFL and every single person who followed along, cheered us on, and helped bring NFeLementary to life, THANK YOU.!!! You made my third graders feel seen, supported, and so very special. ⁣ This was a season I’ll never forget. And while it hurts to say goodbye, it only hurts this much because it was THAT good. See you next season 🧡

Mary Crippen

16,748 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

"How do you post so often?" ✨ I used to post entirely manually... on every single platform! At first I didn't mind it but after a while I was wondering if there's another way 🤔 Something I LOVE to recommend to people over and over again is using scheduling tools to help you. They don't have to be super complicated or something you pay for either, and the support they provide gives you time to focus on other things! I use a website called Buffer - but there are many lovely scheduling tools like it online, so you're bound to find something that you enjoy using! By using a tool like this you can focus on creation while the tool helps you by sorting the posting out. All you have to do is add your content, your description, hashtags, and then schedule it for a set day. Then you can leave it and ta-da! Content! 💛

"How do you post so often?" ✨ I used to post entirely manually... on every single platform! At first I didn't mind it but after a while I was wondering if there's another way 🤔 Something I LOVE to recommend to people over and over again is using scheduling tools to help you. They don't have to be super complicated or something you pay for either, and the support they provide gives you time to focus on other things! I use a website called Buffer - but there are many lovely scheduling tools like it online, so you're bound to find something that you enjoy using! By using a tool like this you can focus on creation while the tool helps you by sorting the posting out. All you have to do is add your content, your description, hashtags, and then schedule it for a set day. Then you can leave it and ta-da! Content! 💛

Chio 🍀 1.0 MODEL DEBUT SOON!

30,891 görüntüleme • 8 ay önce

Being able to move fluidly between Figma Make and the canvas is a pretty big deal Recent example 👇 1️⃣ Started exploring a minified recording toolbar directly on the canvas 2️⃣ Once I had some rough shapes I moved it into Make, imported my style guide, and started bringing it to life with expandable controls, hover states, and tooltips for keyboard shortcuts 3️⃣ A few prompts later, I had something interesting… but the layout wasn’t quite right. 4️⃣ So I jumped back into the canvas and made ~8 quick variations with a bigger video container. 5️⃣ Once I got somewhere interesting I brought that back into Make. All I had to do was copy and paste the frames for my default and hover state of the component and it pretty much nailed the core layout 6️⃣ Then I layered on the timer and made it interactive. But once I got it back into Make I thought "hmm... what if the toolbar layout was based on which quadrant of the screen the component was in 🤔" I was able to one shot this interaction and after playing with it a bunch I kinda love it? 7️⃣ Sent it to the team in Inflight so everyone could play with the prototype. 8️⃣ Brought the up to date UI back into the canvas to polish some of the tooltip details Before this, it always felt like I had to choose between two very different workflows. Now I can bounce between them seamlessly and it’s genuinely changing how I explore ideas.

Being able to move fluidly between Figma Make and the canvas is a pretty big deal Recent example 👇 1️⃣ Started exploring a minified recording toolbar directly on the canvas 2️⃣ Once I had some rough shapes I moved it into Make, imported my style guide, and started bringing it to life with expandable controls, hover states, and tooltips for keyboard shortcuts 3️⃣ A few prompts later, I had something interesting… but the layout wasn’t quite right. 4️⃣ So I jumped back into the canvas and made ~8 quick variations with a bigger video container. 5️⃣ Once I got somewhere interesting I brought that back into Make. All I had to do was copy and paste the frames for my default and hover state of the component and it pretty much nailed the core layout 6️⃣ Then I layered on the timer and made it interactive. But once I got it back into Make I thought "hmm... what if the toolbar layout was based on which quadrant of the screen the component was in 🤔" I was able to one shot this interaction and after playing with it a bunch I kinda love it? 7️⃣ Sent it to the team in Inflight so everyone could play with the prototype. 8️⃣ Brought the up to date UI back into the canvas to polish some of the tooltip details Before this, it always felt like I had to choose between two very different workflows. Now I can bounce between them seamlessly and it’s genuinely changing how I explore ideas.

Ridd 🤿

27,665 görüntüleme • 10 ay önce

[CUT] CORTIS Billboard 21 under 21 Class of 2026 Interview Sienna Spiro asks CORTIS: Q: If you were a sauce, what would you be, and why? 🐢: great question 🦔: I mean, we've been thinking about this, we got an answer. 🦔: What's the word? 🦭: I think it's... ketchup. 🦅: Yeah, it's a classic and it's never boring. 🐢: It can match with so many different things while still keeping its own taste. 🦊: and it's red red, so, you know... THAT'S REDRED! CORTIS asks Freya Skye Q: As both a singer and an actor, what goals do you hope to achieve in each field? Freya Skye: Hey CORTIS! I love you guys. I'm a huge fan, and I think your music is so sick! Okay, so my biggest goal when it comes to music... I'm writing my debut album right now, and I think writing something that feels super personal and authentic to who I am, but also something that will connect to my fans and a broader audience too, is something I'm trying to figure out right now. And then in terms of acting, I think just finding roles that I feel super excited about, honestly, that excite me and also push me out of my comfort zone. #CORTIS #코르티스

[CUT] CORTIS Billboard 21 under 21 Class of 2026 Interview Sienna Spiro asks CORTIS: Q: If you were a sauce, what would you be, and why? 🐢: great question 🦔: I mean, we've been thinking about this, we got an answer. 🦔: What's the word? 🦭: I think it's... ketchup. 🦅: Yeah, it's a classic and it's never boring. 🐢: It can match with so many different things while still keeping its own taste. 🦊: and it's red red, so, you know... THAT'S REDRED! CORTIS asks Freya Skye Q: As both a singer and an actor, what goals do you hope to achieve in each field? Freya Skye: Hey CORTIS! I love you guys. I'm a huge fan, and I think your music is so sick! Okay, so my biggest goal when it comes to music... I'm writing my debut album right now, and I think writing something that feels super personal and authentic to who I am, but also something that will connect to my fans and a broader audience too, is something I'm trying to figure out right now. And then in terms of acting, I think just finding roles that I feel super excited about, honestly, that excite me and also push me out of my comfort zone. #CORTIS #코르티스

coervogue

35,386 görüntüleme • 1 ay önce