HTML in Canvas is Futuristic AF - Tutorial

DesignCourse · Intermediate ·🌐 Frontend Engineering ·2mo ago

Key Takeaways

Builds a UI with HTML inside Canvas for futuristic interactions using 3D and shader effects

Original Description

Build a SaaS with Claude: https://designcourse.com/app/course/c... (Take now) -- Today, I'm going to cover a *future* ability in the frontend world where you can place HTML inside of the Canvas. This unlocks massive opportunities for re-imagining UI interactions that utilize 3D & shader effects. It's currently only available if you enable a chrome flag, so it's very much experimental. How to enable + gallery: https://html-in-canvas.dev/ Demos shown: https://x.com/tkm_hmng8/status/2042186512545272290 https://x.com/kaolti/status/2050715622879760502 https://x.com/mattrothenberg/status/2043439232119677047 https://x.com/gaborpribek/status/2047010011210273124 https://x.com/kaolti/status/2047835384441123002 https://x.com/kaolti/status/2044877354829279318 https://x.com/mattrothenberg/status/2039875548906733965 https://x.com/kaolti/status/2043349566540374467 Let's get it! #html #canvas #ui - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related Reads

📰
Inside the Wayfair Frontend SDE-2 Interview: A Complete Breakdown
Learn how to prepare for a Frontend SDE-2 interview at Wayfair, including online assessments, machine coding, and system design.
Medium · Programming
📰
I Spent Two Years Maintaining a React SPA. HTMX Rebuilt It in a Week
Learn how HTMX rebuilt a React SPA in a week, replacing 2 years of maintenance work, and discover the benefits of this alternative approach
Medium · Programming
📰
The 5 Levels of Front End Engineering (And Where Most Developers Get Stuck)
Learn the 5 levels of front end engineering to improve your skills and avoid getting stuck in a career rut
Medium · Programming
📰
Browser-Based PDF Editing with Vue 3 and pdf-lib
Learn to build a browser-based PDF editor using Vue 3 and pdf-lib, enabling users to edit PDFs directly in the browser
Dev.to · sunshey
Up next
How to Use Semrush Keyword Magic Tool with ChatGPT to Make Money
Grow with Will - SEO, Sales & Entrepreneurship
Watch →