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.

I completely redesigned my portfolio using a custom canvas. UI work is displayed using HTML embeds so you can zoom in for lossless quality and designs automatically reflect current dark or light mode. You can embed most mediums. A ton of detail went into this to make it work.

Gavin McFarland

2,715 subscribers

49,567 views • 1 month ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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 views • 1 year ago

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

𝘼𝙈𝘼𝙂𝙄

52,470 views • 4 months ago

I discovered a very useful plugin for designers…..A plugin that allows you to switch between light and dark mode if you are too lazy using variables…Name of plugin is Dark Mode Magic😊

I discovered a very useful plugin for designers…..A plugin that allows you to switch between light and dark mode if you are too lazy using variables…Name of plugin is Dark Mode Magic😊

JenixDesignz

11,217 views • 1 year ago

you can now share canvases in cursor! also, you can use design mode to make sniper edits in your canvases. very in flow with the speed of composer 2.5 here's a paperclipmaxxing canvas i just built and shared using slack mcp

you can now share canvases in cursor! also, you can use design mode to make sniper edits in your canvases. very in flow with the speed of composer 2.5 here's a paperclipmaxxing canvas i just built and shared using slack mcp

eric zakariasson

37,362 views • 3 months ago

Using Google Labs with Veo 3 to make these. I created a GPT to help you get the right prompt to do this kind of stuff (for free). I'll send you the custom GPT I created if you comment SEND. Must be following so I can send it to you. (takes 15 seconds of work per video)

Using Google Labs with Veo 3 to make these. I created a GPT to help you get the right prompt to do this kind of stuff (for free). I'll send you the custom GPT I created if you comment SEND. Must be following so I can send it to you. (takes 15 seconds of work per video)

Murray Frost

101,098 views • 1 year ago

F5-TTS Finetune Web UI The E2-F5-TTS project has a huge update. Now anyone can easily finetune the model with their own audio using a Gradio app! It automatically transcribes the audio clips using whipser, and seems to work for most languages. Here's a Korean example.

F5-TTS Finetune Web UI The E2-F5-TTS project has a huge update. Now anyone can easily finetune the model with their own audio using a Gradio app! It automatically transcribes the audio clips using whipser, and seems to work for most languages. Here's a Korean example.

cocktail peanut

45,298 views • 1 year ago

Here's a short video (4m) that goes into more detail on how "vim mode" works in Ghostty and the multitude of features that are composed together to make it all work. This showcases how powerful Ghostty's keybinding system is getting! And don't worry, I plan on shipping a built-in "vim mode" table (unbound by default) so you can bind an opinionated "vim mode" with a single line in your config. But, if you want to modify it in any way, that's completely possible because this all works via standard config.

Here's a short video (4m) that goes into more detail on how "vim mode" works in Ghostty and the multitude of features that are composed together to make it all work. This showcases how powerful Ghostty's keybinding system is getting! And don't worry, I plan on shipping a built-in "vim mode" table (unbound by default) so you can bind an opinionated "vim mode" with a single line in your config. But, if you want to modify it in any way, that's completely possible because this all works via standard config.

Mitchell Hashimoto

87,952 views • 8 months ago

i shit you not, it's an IDE AND has browser embeds, so I can localhost multiple pages at once in the same canvas obsidian's canvas being able to embed ANYTHING, and the Obsidian editor being literally just code-mirror, makes it the perfect worspace (tldraw is also cool)

i shit you not, it's an IDE AND has browser embeds, so I can localhost multiple pages at once in the same canvas obsidian's canvas being able to embed ANYTHING, and the Obsidian editor being literally just code-mirror, makes it the perfect worspace (tldraw is also cool)

Igor bedesqui

78,297 views • 5 months ago

Stitch’s canvas just got a major workflow upgrade. V2 is here with screen resizing and responsive support ✨. You can now resize any screen and watch it render in HTML mode to test responsiveness in real-time (responsive screens work best for web designs versus mobile designs). We’ve also added the keyboard essentials you’ve been missing: Undo/Redo and Cut/Copy/Paste for entire screens. You can also rename and delete screens to keep your workspace tidy. A customizable background will help you navigate. Build faster 🚀.

Stitch’s canvas just got a major workflow upgrade. V2 is here with screen resizing and responsive support ✨. You can now resize any screen and watch it render in HTML mode to test responsiveness in real-time (responsive screens work best for web designs versus mobile designs). We’ve also added the keyboard essentials you’ve been missing: Undo/Redo and Cut/Copy/Paste for entire screens. You can also rename and delete screens to keep your workspace tidy. A customizable background will help you navigate. Build faster 🚀.

Stitch by Google

49,877 views • 11 months ago

You can now clone any website design in seconds with AI. Just grab any live UI with the new MagicPath Extension and the AI will instantly create a working clone you can build on top of. I literally just recreated Claude’s UI with it. This is Figma completely redesigned.

You can now clone any website design in seconds with AI. Just grab any live UI with the new MagicPath Extension and the AI will instantly create a working clone you can build on top of. I literally just recreated Claude’s UI with it. This is Figma completely redesigned.

Alvaro Cintas

201,011 views • 9 months ago

Flow, our new AI filmmaking tool, is custom designed for our most advanced models, but how does it actually work? Our Extend feature is a great example of this. Using intuitive prompting with Gemini, you can describe your perfect ending and Flow brings it to life with Veo 3.

Flow, our new AI filmmaking tool, is custom designed for our most advanced models, but how does it actually work? Our Extend feature is a great example of this. Using intuitive prompting with Gemini, you can describe your perfect ending and Flow brings it to life with Veo 3.

Google AI

69,592 views • 1 year ago

#GenshinImpact Here’s a portfolio video of my work this year. I love creating fan art using in-game photography, 3DCG, and VFX, with a focus on storytelling and worldbuilding. It’s a bit long, but I hope you enjoy it!

#GenshinImpact Here’s a portfolio video of my work this year. I love creating fan art using in-game photography, 3DCG, and VFX, with a focus on storytelling and worldbuilding. It’s a bit long, but I hope you enjoy it!

レ王🐣

15,956 views • 8 months ago

We spent a fair bit of time deliberating how to price Notion Custom Agents. We eventually landed on usage-based pricing, so you can pay for the work you get done. In this video, I explain our rationale in a bit more detail:

We spent a fair bit of time deliberating how to price Notion Custom Agents. We eventually landed on usage-based pricing, so you can pay for the work you get done. In this video, I explain our rationale in a bit more detail:

Akshay Kothari

40,752 views • 6 months ago

This is the prompt builder I wish I had when I started vibe coding I did over 10,000 prompts and I put all my knowledge of UI into this builder. It has all the layout, color, typography and animation styles you can think of. It can even input html, figma url and adapt from hundreds of templates to create the perfect UI for you. Perfect for beginners and design explorations.

This is the prompt builder I wish I had when I started vibe coding I did over 10,000 prompts and I put all my knowledge of UI into this builder. It has all the layout, color, typography and animation styles you can think of. It can even input html, figma url and adapt from hundreds of templates to create the perfect UI for you. Perfect for beginners and design explorations.

Meng To

126,497 views • 1 year ago

I just relased a .Moc3 File for the correction of the "floating steppie" issue using physics. There might be a better or more optimized way to approach this issue, that's just how I managed to make it work. Please support if you can 🩶 #Live2D

I just relased a .Moc3 File for the correction of the "floating steppie" issue using physics. There might be a better or more optimized way to approach this issue, that's just how I managed to make it work. Please support if you can 🩶 #Live2D

Gio ジオ Live2D 🇧🇷

43,560 views • 4 months ago

You can now work with your Hermes Agent in Buzz! I did a short demo video to show how you can set it up using the gateway option, so you have full Hermes functionality. Very interesting to see how this app develops!

You can now work with your Hermes Agent in Buzz! I did a short demo video to show how you can set it up using the gateway option, so you have full Hermes functionality. Very interesting to see how this app develops!

tonbi

44,268 views • 27 days ago

Daily #Blender Tip: If you have a model that fakes detail using a Normal map, it can be interesting to convert it to ‘real’ geometry that you can continue sculpting on, or for use in 3D printing. This shows you how to do it! #B3D

Daily #Blender Tip: If you have a model that fakes detail using a Normal map, it can be interesting to convert it to ‘real’ geometry that you can continue sculpting on, or for use in 3D printing. This shows you how to do it! #B3D

Jan van den Hemel

75,105 views • 3 years ago

AIDesigner is officially live! I think we can all agree that vibe coded apps look horrible, so I built an AI UI designer that creates actually beautiful UI in seconds. • Stunning designs from the simplest of prompts. • Design, edit, iterate all on a single canvas. • Copy styles from any URL. • Publish in a single click (subdomain or custom). • Designs for both web and mobile. • Export to code and image. Great UI design doesn't have to be difficult. Components, mobile apps, websites, AIDesigner does it all. Try it for free:

AIDesigner is officially live! I think we can all agree that vibe coded apps look horrible, so I built an AI UI designer that creates actually beautiful UI in seconds. • Stunning designs from the simplest of prompts. • Design, edit, iterate all on a single canvas. • Copy styles from any URL. • Publish in a single click (subdomain or custom). • Designs for both web and mobile. • Export to code and image. Great UI design doesn't have to be difficult. Components, mobile apps, websites, AIDesigner does it all. Try it for free:

Wiz

17,068 views • 7 months ago