Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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

7,796 subscribers

136,393 просмотров • 1 месяц назад •via X (Twitter)

Наука и технологии

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

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

220,996 просмотров • 1 год назад

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 просмотров • 2 лет назад

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

198,935 просмотров • 7 месяцев назад

✨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,454 просмотров • 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 просмотров • 11 дней назад

💊 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 просмотров • 9 месяцев назад

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,505,131 просмотров • 5 месяцев назад

Adding midjourney videos to your designs really hits different Creating AI videos on midjourney is the best experience so far. Not only do I have all my best images there but it generates 4 videos at a time in under a minute using fast generation. The explore page is a treasure trove for designers. I made it super easy to add images/videos in Aura.

Adding midjourney videos to your designs really hits different Creating AI videos on midjourney is the best experience so far. Not only do I have all my best images there but it generates 4 videos at a time in under a minute using fast generation. The explore page is a treasure trove for designers. I made it super easy to add images/videos in Aura.

Meng To

13,071 просмотров • 1 год назад

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 просмотров • 4 месяцев назад

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 просмотров • 1 год назад

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,042 просмотров • 1 месяц назад

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

110,274 просмотров • 8 дней назад

“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,742 просмотров • 1 год назад

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,496 просмотров • 1 год назад

"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 🍀

30,314 просмотров • 6 месяцев назад

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 просмотров • 9 месяцев назад

Anthropic Quant Andrej Karpathy to Andrew Ng: "I wrote my own neural net library in JavaScript. Not to ship it - just to see backprop with my own eyes" before any framework, he built convnetjs from scratch - every layer by hand. his advice: skip TensorFlow at first. write it yourself at the lowest level, then pick up the framework once you know what's under the hood. the line that lands: "if all you know is a stack of layers and that dropout helps, you can't debug or improve the model." Watch the talk, then save the loop guide below.

Anthropic Quant Andrej Karpathy to Andrew Ng: "I wrote my own neural net library in JavaScript. Not to ship it - just to see backprop with my own eyes" before any framework, he built convnetjs from scratch - every layer by hand. his advice: skip TensorFlow at first. write it yourself at the lowest level, then pick up the framework once you know what's under the hood. the line that lands: "if all you know is a stack of layers and that dropout helps, you can't debug or improve the model." Watch the talk, then save the loop guide below.

Hanako

61,277 просмотров • 4 дней назад