matia 🇭🇷

I'm excited to release the Svelte 5 course aimed at new and existing Svelte developers! 🔥 Learn how to make blazing fast web apps with Svelte and understand how it works with hands-on experience. youtu.be/B2MhkPtBWs4

Here's a powerful animation system that works with your favorite JavaScript animation library in Svelte 🧙 Instead of messy element bindings use an attachment to register and animate actors from a scene like this GSAP example 🎭

@PickleNik0864 Yeah I also have nested transforms for the zoom, camera and Y-axis inversion

@joyofcodedev wait what u can change it?

Using a Cartesian coordinate system for SVG makes working with them a lot nicer

@oneeezy @v0 @boltdotnew @Lovable Apparently this is what MDN does for their examples so I'm onto something

@joyofcodedev Nice! I wonder if the chat-to-code bots are using something similar for generating in-chat component results..or possibly a different method? e.g. @v0 , @boltdotnew , @Lovable , etc Project coming up soon that'll require a method like this so exploring ideas

I wanted a simple way to sandbox examples in the Animotion docs so I ended up creating a SvelteKit route to dynamically load components and pop the prerendered route inside an <iframe>

@masatoalexander That's a great idea but I think I would have to set up GPU passthrough I've read about Virtual Super Resolution (VSR) so I might try that out

@joyofcodedev maybe use a VM and just set resolution to whatever you want? Capture in the VM otherwise you'll only get the actual pixels on your monitor, VM shouldn't be aware that you're scaling output down

Is there a simple way to force the GPU to output a higher resolution than is natively supported on Linux & Wayland? I want to record at 4K for higher bitrate on YouTube and I tried virtual monitors but it's a pain in the ass I might just get a new monitor 😂

@flashmozzg I tried but it looks blurry and I want sharp text and animations

@joyofcodedev Just record in whatever you can and then upscale. Unless you want to stream.

If you don't know Steve is a brilliant designer and co-author of the Refactoring UI book @SteveSchoger" target="_blank" rel="nofollow noopener">youtube.com/@SteveSchoger

I watched Steve Schoger use AI to iterate on a site design in real-time instead of using Figma so no wonder they're cooked if even designers only use it for assets

@Exclusive8s The models at this point know Svelte 5 but they're not perfect and treat derived as readonly while abusing effects — using the Svelte MCP fixes a lot of these issues

@joyofcodedev How well do you find those models work with svelte?

I've been using OpenCode Go for a month and it's probably the best value for $10/month with Kimi and GLM models — if you're used to top models and vibe code all day it's probably not for you but it's generous for regular use

@vhsdev Yeah that's insane

@joyofcodedev great tip for those watching a vocal minority on x burning through $200 plans

Modern CSS has made entry and exit animations a lot easier so I made a video on how to use @​starting-style to do that including animating discrete properties like display and using the View Transition API for layout changes

Very cool Svelte component library using GSAP + OGL for interactive animations from ASCII to typography effects from the author of Motion GPU motion-core.dev

@snickerzoo The OpenCode Desktop is on the left and T3 Code is on the right for comparison

@joyofcodedev t3code is not the opencode app though, it's opencode desktop

I'm over the cool factor of using the OpenCode TUI and I just want a nice GUI so I'm trying the app T3 Code also supports OpenCode in the nightly build but I can't figure out how to access my sessions They have an AppImage for Linux in releases you can try 🐧

@chirorojr It's very buggy 😂

@joyofcodedev I've been trying to use these GUIs but they feel slow, this has been very apparent since I started to use Pi. I don't really work on multiple projects at the same time so again there's that. I just seem to move fast in TUI harnesses.

You can also do this using CSS variables for browser compatibility

You can use the CSS attr() function to read attributes and specify the type which is great for giving elements view transition names 🔥 The only downside is that besides Chrome browser support is not great at the moment