Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

In the last 2 weeks I created AnimateCode, a keynote-inspired tool to create beautiful, easy-to-understand code animations. ◆ Create your slides just like in keynote ◆ Beautifully animate between slides Built with Next.js, Upstash and shadcn ui Lots of stuff to add like themes & fonts, but I really... show more

Josh tried coding

22,846 subscribers

154,366 views • 2 years ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

shadcn2 years ago

@nextjs @upstash Looking great. I’ll give this a try today.

Josh tried coding2 years ago

@nextjs @upstash Cheers dude

ThePrimeagen2 years ago

@nextjs @upstash @shadcn vim keybinds wen

Josh tried coding2 years ago

@nextjs @upstash @shadcn how about vscode keybinds instead 🤠

trash2 years ago

@nextjs @upstash @shadcn open source it right now

Matias Baldanza.dev 😁 ⚛️2 years ago

@nextjs @upstash @shadcn Amazing! By the way, I’d love it if the legend to use the arrow keys in the preview was rendered as buttons, to make it usable on a touch device (I was playing with it on a keyboardless iPad.)

Josh tried coding2 years ago

@nextjs @upstash @shadcn That is a good idea!

Junaid | JD 🇵🇰2 years ago

@nextjs @upstash @shadcn Dope. Loved the execution. 😍

Josh tried coding2 years ago

@nextjs @upstash @shadcn This looks awesome!

Alex Kates2 years ago

@nextjs @upstash @shadcn josh this is awesome bookmarked next to and will be using it daily

Related Videos

Introducing Upstash Search UI - a beautiful, shadcn-inspired search component 🎉 ◆ Pre-styled & accessible out of the box ◆ Built-in keyword highlighting ◆ Perfect for React & Next.js Add beautiful, professional search to your app in seconds 👀

Introducing Upstash Search UI - a beautiful, shadcn-inspired search component 🎉 ◆ Pre-styled & accessible out of the box ◆ Built-in keyword highlighting ◆ Perfect for React & Next.js Add beautiful, professional search to your app in seconds 👀

Upstash

26,953 views • 1 year ago

I created a complete walkthrough of my Frontend Slides skill (22k+ stars on GitHub): - Complete demo of how to create beautiful HTML slides with Claude Code (beginner friendly) - How I created the skill - How you can create your own skill - Tips like how to insert images/videos into deck, how to publish - Lessons I learned (11-min video, YouTube link below)

I created a complete walkthrough of my Frontend Slides skill (22k+ stars on GitHub): - Complete demo of how to create beautiful HTML slides with Claude Code (beginner friendly) - How I created the skill - How you can create your own skill - Tips like how to insert images/videos into deck, how to publish - Lessons I learned (11-min video, YouTube link below)

Zara Zhang

149,895 views • 26 days ago

We’ve brought shadcn/create into our Figma toolkit. With our Figma to shadcn/ui plugin, you can tailor the component library just like you do in shadcn/create - directly in Figma. Adjust base and theme colors, radii, fonts, and icon sets in seconds.

We’ve brought shadcn/create into our Figma toolkit. With our Figma to shadcn/ui plugin, you can tailor the component library just like you do in shadcn/create - directly in Figma. Adjust base and theme colors, radii, fonts, and icon sets in seconds.

Matt

10,553 views • 5 months ago

"The difference between AI slop and great designs is in the last 10%." Here's my new episode with Meng To where he reveals his step-by-step process to create stunning AI designs and websites. We cover how to: - Build your AI design prompt from scratch - Find great fonts, assets, and components - Add beautiful custom animations Some tips from Meng: "A lot of people don't realize that having a prompt is just not enough. You need to give AI the right templates and references." "I like to think of AI more like a tool to augment you rather than doing everything. At the end of the day, what matters is your taste." "Use sites like UI verse for buttons, 21st dev for components, and ReactBits for animations. Knowing these resources is half the battle." 📌 Watch now:

"The difference between AI slop and great designs is in the last 10%." Here's my new episode with Meng To where he reveals his step-by-step process to create stunning AI designs and websites. We cover how to: - Build your AI design prompt from scratch - Find great fonts, assets, and components - Add beautiful custom animations Some tips from Meng: "A lot of people don't realize that having a prompt is just not enough. You need to give AI the right templates and references." "I like to think of AI more like a tool to augment you rather than doing everything. At the end of the day, what matters is your taste." "Use sites like UI verse for buttons, 21st dev for components, and ReactBits for animations. Knowing these resources is half the battle." 📌 Watch now:

Peter Yang

63,938 views • 11 months ago

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

Matt

77,738 views • 4 months ago

Still creating slides manually? There's an AI for that! This AI tool is like Cursor of PPT - It can analyze your content and brand to create slides for you in few minutes. - It can save you hours of work! - Offer a free tier! Short tutorial on how to get started 👇 1/5 🧵

AshutoshShrivastava

74,851 views • 1 year ago

ok last post of the day. what i love about the new plugin with effects chaining, is that i can create something like a lens flare, but add dithering to it, and then add a retro color filter. you can just keep chaining for really awesome effects

ok last post of the day. what i love about the new plugin with effects chaining, is that i can create something like a lens flare, but add dithering to it, and then add a retro color filter. you can just keep chaining for really awesome effects

˗ˏˋ rogie ˎˊ˗

12,308 views • 1 year ago

I FINALLY managed to create a point cloud animation 💪 Here is how I did it using #GaussianSplatting, #Blender and 2 add-ons from KIRI Engine - 3D Scanner App . Creating point cloud animations has always been a dream of mine (inspired by masters like ), but the tech to create the point clouds and visual effects was always a huge barrier. Then I discovered these 2 Blender add-ons from Kiri engine after I had a chat with Jack Wang in my podcast, and it changed everything: 1- Create a splat with any tool or app you want 2- Install the free "Point Animate" add-on in Blender 3- Drag the 2 .ply you want to morph from --> to 4- Set source and destination in the add-on side panel At this point you could play around with various settings like noise scatter, noise intensity, wind and more. If you want to combine with the splat as well you can get also the 3DGS render to add cool dissolving effects, fancy lighting and really get the most out of your scans. If you end up using it please tag me. I am curious to see what much more skilled people than me can put together 😉

I FINALLY managed to create a point cloud animation 💪 Here is how I did it using #GaussianSplatting, #Blender and 2 add-ons from KIRI Engine - 3D Scanner App . Creating point cloud animations has always been a dream of mine (inspired by masters like ), but the tech to create the point clouds and visual effects was always a huge barrier. Then I discovered these 2 Blender add-ons from Kiri engine after I had a chat with Jack Wang in my podcast, and it changed everything: 1- Create a splat with any tool or app you want 2- Install the free "Point Animate" add-on in Blender 3- Drag the 2 .ply you want to morph from --> to 4- Set source and destination in the add-on side panel At this point you could play around with various settings like noise scatter, noise intensity, wind and more. If you want to combine with the splat as well you can get also the 3DGS render to add cool dissolving effects, fancy lighting and really get the most out of your scans. If you end up using it please tag me. I am curious to see what much more skilled people than me can put together 😉

Gabriele Romagnoli

10,392 views • 1 year ago

Pi was built when there were already agent harnesses around. Here’s why Mario Zechner(Mario Zechner), found them suboptimal and built Pi, a minimalist self-modifying agent: #1 - Mario initially was a believer in Claude Code: "I was a believer in Claude code because they were the first that packaged agentic search up in a really compelling package. And at the time that fit my workflow really well. Everything around the LLM was kind of nice and tidy and easy to understand. I was super happy. I was proselytising Claude code." #2 - Reverse engineering Claude Code highlighted the degradation that Mario felt as a user: "I personally like simple tools that are stable and that I can rely on. Even if they have non-deterministic parts, all the deterministic parts should be as stable as possible. That was just not the experience with Claude Code around summer 2025. They would take away your control of the context. They would inject stuff behind your back, which is bad. Then, your workflows stopped working because there's now a system reminder that you don't even see in the UI that would modify the behaviour of the model. They would also do this to the system prompt. I built a little service where I can track the progression or evolution of the system, prompt and tool definitions and, with every release, it was messing with stuff. That just messed with my workflows and I don't appreciate that." #3 - PI was built with an appreciation for simple and reliable tools: "If I commit to a development tool, I want it to be a stable, reliable thing like a hammer. I don't want my hammer to break a different spot every day. That's terrible. We need somebody who goes the full velocity kind of way. But I don't want to work with a tool like that."

Pi was built when there were already agent harnesses around. Here’s why Mario Zechner(Mario Zechner), found them suboptimal and built Pi, a minimalist self-modifying agent: #1 - Mario initially was a believer in Claude Code: "I was a believer in Claude code because they were the first that packaged agentic search up in a really compelling package. And at the time that fit my workflow really well. Everything around the LLM was kind of nice and tidy and easy to understand. I was super happy. I was proselytising Claude code." #2 - Reverse engineering Claude Code highlighted the degradation that Mario felt as a user: "I personally like simple tools that are stable and that I can rely on. Even if they have non-deterministic parts, all the deterministic parts should be as stable as possible. That was just not the experience with Claude Code around summer 2025. They would take away your control of the context. They would inject stuff behind your back, which is bad. Then, your workflows stopped working because there's now a system reminder that you don't even see in the UI that would modify the behaviour of the model. They would also do this to the system prompt. I built a little service where I can track the progression or evolution of the system, prompt and tool definitions and, with every release, it was messing with stuff. That just messed with my workflows and I don't appreciate that." #3 - PI was built with an appreciation for simple and reliable tools: "If I commit to a development tool, I want it to be a stable, reliable thing like a hammer. I don't want my hammer to break a different spot every day. That's terrible. We need somebody who goes the full velocity kind of way. But I don't want to work with a tool like that."

The Pragmatic Engineer

62,825 views • 2 months ago

Lewis Hamilton talking about his Italian skills at the Peroni event today! "Not great. I started having lots and lots and lots of lessons and then the season just got so hectic and I was like falling off the cliff. I was on like duolingo, I was doing all the stuff. I was like weeks and weeks and weeks I was good and now literally had none for the last couple months." "I really wanna move to Italy but it's been almost impossible this year to do so. I mean I'm there every week but yeah, my dream is to properly speak Italian."

Lewis Hamilton talking about his Italian skills at the Peroni event today! "Not great. I started having lots and lots and lots of lessons and then the season just got so hectic and I was like falling off the cliff. I was on like duolingo, I was doing all the stuff. I was like weeks and weeks and weeks I was good and now literally had none for the last couple months." "I really wanna move to Italy but it's been almost impossible this year to do so. I mean I'm there every week but yeah, my dream is to properly speak Italian."

sin ⁴⁴

23,232 views • 1 year ago

'My dream is to be able to properly speak Italian' 🥹 Q: How is the Italian going? "Not great. I started out having lots and lots of lessons, and then the season just got so hectic, and I've kind of like fallen off a cliff. I need to get back on." "I was on like Duolingo, and I was doing that stuff. I was like weeks and weeks and weeks, I was doing it, and I've literally had none for the last couple of months." Q: It's something you've got to do like every day. Every day. "Every day. I really want to move to Italy, but it's been almost impossible this year to do so." Q: You've been busy "Yeah. I mean, I'm there every week. But yeah, my dream is to be able to properly speak Italian." [📹luxurylondonofficial]

'My dream is to be able to properly speak Italian' 🥹 Q: How is the Italian going? "Not great. I started out having lots and lots of lessons, and then the season just got so hectic, and I've kind of like fallen off a cliff. I need to get back on." "I was on like Duolingo, and I was doing that stuff. I was like weeks and weeks and weeks, I was doing it, and I've literally had none for the last couple of months." Q: It's something you've got to do like every day. Every day. "Every day. I really want to move to Italy, but it's been almost impossible this year to do so." Q: You've been busy "Yeah. I mean, I'm there every week. But yeah, my dream is to be able to properly speak Italian." [📹luxurylondonofficial]

sim

16,658 views • 1 year ago

REPLIT JUST LAUNCHED AI SLIDES THAT DON'T LOOK LIKE AI MADE THEM every other AI slide generator spits out decks that scream "made by AI." replit slides is going hard on the angle that yours will actually look presentable. how it works: > describe what you want and it builds a full deck > start from scratch or use a built-in template > import an existing pptx and let AI restyle the whole thing > export to pptx, pdf, or google slides the actually interesting part: > slides are generated as code under the hood > same project can also spin up apps, mobile UIs, dashboards, and animations > everything shares the same design tokens (fonts, colors, spacing) > so your launch deck and the live dashboard it links to look like one product this isn't really replit competing with gamma or tome. its replit betting that slides, dashboards, animations, and apps are all just code (and once you have an agent that writes code well, every knowledge artifact comes from the same prompt). link in replies 👇

REPLIT JUST LAUNCHED AI SLIDES THAT DON'T LOOK LIKE AI MADE THEM every other AI slide generator spits out decks that scream "made by AI." replit slides is going hard on the angle that yours will actually look presentable. how it works: > describe what you want and it builds a full deck > start from scratch or use a built-in template > import an existing pptx and let AI restyle the whole thing > export to pptx, pdf, or google slides the actually interesting part: > slides are generated as code under the hood > same project can also spin up apps, mobile UIs, dashboards, and animations > everything shares the same design tokens (fonts, colors, spacing) > so your launch deck and the live dashboard it links to look like one product this isn't really replit competing with gamma or tome. its replit betting that slides, dashboards, animations, and apps are all just code (and once you have an agent that writes code well, every knowledge artifact comes from the same prompt). link in replies 👇

Creators Toolbox

28,718 views • 2 months ago

I don't think anyone would like to code like this but you can build entire iOS ViewController with Liquid Glass in Dart directly, and just show it from Flutter. I managed to create Dart bindings to the most basic UiKit components and then just invoke them from Dart.

I don't think anyone would like to code like this but you can build entire iOS ViewController with Liquid Glass in Dart directly, and just show it from Flutter. I managed to create Dart bindings to the most basic UiKit components and then just invoke them from Dart.

Dominik Roszkowski

51,214 views • 9 months ago

Copilot AI in Microsoft 365 is underrated. I created a PowerPoint in 40 seconds. For the example I just described what I wanted to create, and Copilot generated for me: - Slides - Illustrations - Text - Presenter notes All thanks to the power of GPT-4. But you can also modify what's already been created. You can add text, modify existing text or create a new illustration with Dall-E 3. It's like having ChatGPT Plus directly integrated into PowerPoint. People don't realize the impact Copilot will have and what it can do. Note: I've speeded up some of the loading to make the video more pleasant to watch. But it's still very fast.

Copilot AI in Microsoft 365 is underrated. I created a PowerPoint in 40 seconds. For the example I just described what I wanted to create, and Copilot generated for me: - Slides - Illustrations - Text - Presenter notes All thanks to the power of GPT-4. But you can also modify what's already been created. You can add text, modify existing text or create a new illustration with Dall-E 3. It's like having ChatGPT Plus directly integrated into PowerPoint. People don't realize the impact Copilot will have and what it can do. Note: I've speeded up some of the loading to make the video more pleasant to watch. But it's still very fast.

Paul Couvert

100,139 views • 2 years ago

I have an idea for a product similar to Screen Studio. It would automatically create text-based promo videos. It would detect the beat of the music and adjust all the animations, have tons of built-in, beautiful effects, etc. An example I really like: Apple Essentials ad:

I have an idea for a product similar to Screen Studio. It would automatically create text-based promo videos. It would detect the beat of the music and adjust all the animations, have tons of built-in, beautiful effects, etc. An example I really like: Apple Essentials ad:

Adam Pietrasiak

379,623 views • 3 years ago

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

CodeHagen

16,258 views • 1 year ago

I want to share a sneak preview of the modular UI module I am making together with Guerra and Lotsgon! The aim of this plugin/module is to allow you to literally create your own skin in the way you want to like a puzzle using Unity's editor! Early WIP still! #FM26

I want to share a sneak preview of the modular UI module I am making together with Guerra and Lotsgon! The aim of this plugin/module is to allow you to literally create your own skin in the way you want to like a puzzle using Unity's editor! Early WIP still! #FM26

BassyBoy

26,441 views • 8 months ago

Going through my slides like a true Flutter Jedi 😅Using the sensors on my Android watch to send a notification to Firebase based on the hand gesture speed and direction, which is captured by my slides built in #Flutter and animated in Rive 💙 You gotta go to Fluttercon #ftcon25usa and check out my talk to see this in action! 👍

Going through my slides like a true Flutter Jedi 😅Using the sensors on my Android watch to send a notification to Firebase based on the hand gesture speed and direction, which is captured by my slides built in #Flutter and animated in Rive 💙 You gotta go to Fluttercon #ftcon25usa and check out my talk to see this in action! 👍

Roman Jaquez

11,742 views • 1 year ago

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

CodeHagen

241,425 views • 1 year ago

I obviously understand intellectually that the solution to stuff like this is strictly walk slowly and anti-air, nothing else. But how is anybody supposed to just not tilt when people want to play like actual drunken cavemen. Worst night of ranked in like 6 months.

I obviously understand intellectually that the solution to stuff like this is strictly walk slowly and anti-air, nothing else. But how is anybody supposed to just not tilt when people want to play like actual drunken cavemen. Worst night of ranked in like 6 months.

PAR | BSAS | Fem!Shep

88,513 views • 7 months ago