正在加载视频...

视频加载失败

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

Did you know React 19's ViewTransition component can create smooth, animated transitions between pages? Just wrap elements with the same name prop and React handles the rest. No complex animation libraries needed! 🎬

Kent C. Dodds 🏹

313,892 subscribers

26,001 次观看 • 7 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure

you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure

david fant

325,052 次观看 • 6 个月前

💙 Easy GSAP animation in React with useGSAP() useGSAP() automatically handles animation cleanup and more, so that you can just focus on the fun stuff. 🤘🏻 To learn more, head over to

💙 Easy GSAP animation in React with useGSAP() useGSAP() automatically handles animation cleanup and more, so that you can just focus on the fun stuff. 🤘🏻 To learn more, head over to

GSAP

50,241 次观看 • 2 年前

Furina : Did You Know, I Love You | Animated Short | #GenshinImpact Absolutely Incredible animation Covering The Complex Dynamics between Focalors and Furina. Production : Hamelin_哈米伦的弄笛者 #Furina

Furina : Did You Know, I Love You | Animated Short | #GenshinImpact Absolutely Incredible animation Covering The Complex Dynamics between Focalors and Furina. Production : Hamelin_哈米伦的弄笛者 #Furina

HoYoverse Animation Info

76,352 次观看 • 3 个月前

What if we could animate theme transitions just like the OS does for dark and light mode? Well, now you can with Uniwind Pro 🥳 Enable smooth transitions directly from JS, from ANY theme to ANY theme (even OS triggered theme changes). The animation runs in Swift/Kotlin, while C++ handles the ShadowTree update

What if we could animate theme transitions just like the OS does for dark and light mode? Well, now you can with Uniwind Pro 🥳 Enable smooth transitions directly from JS, from ANY theme to ANY theme (even OS triggered theme changes). The animation runs in Swift/Kotlin, while C++ handles the ShadowTree update

Jacek

22,176 次观看 • 7 个月前

My vibe coded mosaic thing is live. - Web GL - Unplash API - Lil’ configurators - Built in React (I don’t know react very well at all) Built it so that I can feed it svg icons or photos. Use the same component through the site. Upload your own avatar, mess around with the pixels and download. ✨

MDS

19,063 次观看 • 7 个月前

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

Meng To

171,763 次观看 • 1 年前

To all the fathers out there, your kids won't remember all the gifts they did or didn't get on Christmas. They'll remember the things that made them feel SAFE: the sound of your voice, how you react, that even when you were worried, YOU were the one who stood between them and fear. That's not failure. That's fatherhood, and no gift you can wrap will ever replace that.

To all the fathers out there, your kids won't remember all the gifts they did or didn't get on Christmas. They'll remember the things that made them feel SAFE: the sound of your voice, how you react, that even when you were worried, YOU were the one who stood between them and fear. That's not failure. That's fatherhood, and no gift you can wrap will ever replace that.

Glenn Beck

92,064 次观看 • 7 个月前

With the new scrambleText() feature, you can control reveal direction, create cursor effects, apply perturbation and easing, and chain it in keyframes and timelines like any other Anime.js animation property. It's crazy how just a few lines of code can create such visually complex effects.

With the new scrambleText() feature, you can control reveal direction, create cursor effects, apply perturbation and easing, and chain it in keyframes and timelines like any other Anime.js animation property. It's crazy how just a few lines of code can create such visually complex effects.

Julian Garnier

132,324 次观看 • 2 个月前

Built an e-commerce yesterday within just a couple of hours. Backend services in Java and the frontend was in React. Have a running business, with significant visibility? I can deploy this in your business name so you can fly even wider. Free, you just maintain it afterward.

Built an e-commerce yesterday within just a couple of hours. Backend services in Java and the frontend was in React. Have a running business, with significant visibility? I can deploy this in your business name so you can fly even wider. Free, you just maintain it afterward.

EzugwuUgwu

26,795 次观看 • 5 个月前

🚀 Rocket tracking app with Expo Router and React Server Components! ◆ Started with DOM Components ◆ Migrated to native one route at a time ◆ iOS, Android, web, even runs in Expo Go! ◆ Data fetched securely on the server, no hooks needed ◆ Offline support for layouts, loading, scrolling, animations, transitions, and error states We're just getting started ⚡️

🚀 Rocket tracking app with Expo Router and React Server Components! ◆ Started with DOM Components ◆ Migrated to native one route at a time ◆ iOS, Android, web, even runs in Expo Go! ◆ Data fetched securely on the server, no hooks needed ◆ Offline support for layouts, loading, scrolling, animations, transitions, and error states We're just getting started ⚡️

Evan Bacon 🥓

25,393 次观看 • 1 年前

Did you know is full stack? This means you can run a node server in your browser! I created this full stack auth system with React + Express + SQLite DB. All running from my project file with no outside dependencies. This is the real power of Bolt.

Did you know is full stack? This means you can run a node server in your browser! I created this full stack auth system with React + Express + SQLite DB. All running from my project file with no outside dependencies. This is the real power of Bolt.

Wes Winder

27,747 次观看 • 1 年前

EVERYTHING’S MADE OF ELEMENTS - THE LAST ONE STILL HAS NO NAME From stars to skin cells, everything we know is built from the same cosmic alphabet: chemical elements. Here, a tiny droplet reveals the secrets of our universe as it's fed chemical after chemical - rippling like a nebula, glowing like a newborn planet. Each reaction reveals something primal, something ancient... something fundamental. It's not just chemistry anymore. It's creation. And we're watching it learn how to react. Source: brokenaxe23

EVERYTHING’S MADE OF ELEMENTS - THE LAST ONE STILL HAS NO NAME From stars to skin cells, everything we know is built from the same cosmic alphabet: chemical elements. Here, a tiny droplet reveals the secrets of our universe as it's fed chemical after chemical - rippling like a nebula, glowing like a newborn planet. Each reaction reveals something primal, something ancient... something fundamental. It's not just chemistry anymore. It's creation. And we're watching it learn how to react. Source: brokenaxe23

Mario Nawfal

29,343 次观看 • 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 次观看 • 14 天前

$13K with an affiliate store Did you know that you can create affiliate shopify stores? Just get the amazon link and it’s done You don’t need to deal with the product rt + comment “affiliate” and I’ll show you how (follow for dm)

$13K with an affiliate store Did you know that you can create affiliate shopify stores? Just get the amazon link and it’s done You don’t need to deal with the product rt + comment “affiliate” and I’ll show you how (follow for dm)

Henry

21,214 次观看 • 11 个月前

Did you know? In Hinduism, science was never separate from the sacred? Rishi Kanada, whose name means "atom eater," wrote in the Vaiśeșika Sutra that all matter is made of tiny indivisible particles, and he described how objects move, rest, and react to force. In Sanatana Dharma, science was never a separate world from the divine. It was written into Sanatana texts thousands of years ago. The knowledge was always here. We just forgot to read it.

Did you know? In Hinduism, science was never separate from the sacred? Rishi Kanada, whose name means "atom eater," wrote in the Vaiśeșika Sutra that all matter is made of tiny indivisible particles, and he described how objects move, rest, and react to force. In Sanatana Dharma, science was never a separate world from the divine. It was written into Sanatana texts thousands of years ago. The knowledge was always here. We just forgot to read it.

JIX5A

16,541 次观看 • 11 天前

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 年前

“am i that powerful? guess thats why rumors around the world are saying that mark is absolutely fully capable” “who the main of this game? i know you cant stand my name and you know that that wont change” “name somebody who can juggle three teams, still come up with the best solo album. at the same time with no rest time. kpop should all look at me now” HES SUCH A MAIN SLAYER SINCE DAY 1

“am i that powerful? guess thats why rumors around the world are saying that mark is absolutely fully capable” “who the main of this game? i know you cant stand my name and you know that that wont change” “name somebody who can juggle three teams, still come up with the best solo album. at the same time with no rest time. kpop should all look at me now” HES SUCH A MAIN SLAYER SINCE DAY 1

ٰ

80,035 次观看 • 1 年前

Claude Code can now make full videos from your terminal.. Not slideshows. Not text on screen.. Actual motion graphics with animations, transitions, custom photos, and background music. [ SHARED A TUTORIAL BELOW EDITED WITH THIS SETUP IN JUST 5mins ] ▫️Here's the setup: Claude Code + Remotion Remotion is a React based framework that renders video programmatically. You describe what you want in plain English, Claude writes the React components and Remotion renders it into a real MP4. What you can actually do with this: > Generate 9:16 vertical videos for TikTok / Reels / Shorts > Add animated text with viral hooks and safe zones > Pull live web screenshots directly into your scenes using Chrome MCP > Fact-check your content in real time with Perplexity MCP > Drop in your own photos and background music > Edit existing talking-head footage cut bloopers, add captions > Schedule posts to your socials straight from the terminal ▫️How to set it up (takes 5 minutes) : > Make sure you have Node.js installed ( node -v to check ) > Create a new Remotion project: npx create-video@latest Pick the Blank template, enable TailwindCSS, and install the Skills package when prompted. > Install dependencies: cd my-video npm install > Start the preview server: npm run dev > Open Claude Code in the same project folder: cd my-video claude That's it. You can now prompt videos in plain English. If you already have a Remotion project, just add the skill directly: npx skills add remotion-dev/skills This drops a SKILL.md into your project that gives Claude expert knowledge of Remotion.. animations, compositions, captions, assets, 3D content everything. Example prompt you can steal: "Create a 30-second 9:16 vertical video about the top 3 AI tools this week. Use animated text with a hook in the first 2 seconds. Add smooth transitions between scenes. Keep text in the safe zone for TikTok. Use a dark tech aesthetic with blue accent colors." Claude writes all the React code, renders a preview, you tweak with natural language, and export when ready. The crazy part is this whole pipeline is local, free (minus your Claude sub), and you never open a video editor. imo this kills CapCut for anyone making info-style content. You describe the video in English and get back a rendered MP4. try it now.

Claude Code can now make full videos from your terminal.. Not slideshows. Not text on screen.. Actual motion graphics with animations, transitions, custom photos, and background music. [ SHARED A TUTORIAL BELOW EDITED WITH THIS SETUP IN JUST 5mins ] ▫️Here's the setup: Claude Code + Remotion Remotion is a React based framework that renders video programmatically. You describe what you want in plain English, Claude writes the React components and Remotion renders it into a real MP4. What you can actually do with this: > Generate 9:16 vertical videos for TikTok / Reels / Shorts > Add animated text with viral hooks and safe zones > Pull live web screenshots directly into your scenes using Chrome MCP > Fact-check your content in real time with Perplexity MCP > Drop in your own photos and background music > Edit existing talking-head footage cut bloopers, add captions > Schedule posts to your socials straight from the terminal ▫️How to set it up (takes 5 minutes) : > Make sure you have Node.js installed ( node -v to check ) > Create a new Remotion project: npx create-video@latest Pick the Blank template, enable TailwindCSS, and install the Skills package when prompted. > Install dependencies: cd my-video npm install > Start the preview server: npm run dev > Open Claude Code in the same project folder: cd my-video claude That's it. You can now prompt videos in plain English. If you already have a Remotion project, just add the skill directly: npx skills add remotion-dev/skills This drops a SKILL.md into your project that gives Claude expert knowledge of Remotion.. animations, compositions, captions, assets, 3D content everything. Example prompt you can steal: "Create a 30-second 9:16 vertical video about the top 3 AI tools this week. Use animated text with a hook in the first 2 seconds. Add smooth transitions between scenes. Keep text in the safe zone for TikTok. Use a dark tech aesthetic with blue accent colors." Claude writes all the React code, renders a preview, you tweak with natural language, and export when ready. The crazy part is this whole pipeline is local, free (minus your Claude sub), and you never open a video editor. imo this kills CapCut for anyone making info-style content. You describe the video in English and get back a rendered MP4. try it now.

Axel Bitblaze 🪓

31,250 次观看 • 3 个月前

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

230,115 次观看 • 2 年前