matia 🇭🇷 @joyofcode.xyz · 24/09/2026Experimenting with audio support in Animotion so you can render videos with sound 🧑🔬 🔊 010
matia 🇭🇷 @joyofcode.xyz · 22/09/2026If you love the exploration of user interfaces I highly recommend watching this talk by Scott Jenson: “Are we really going to use the same Desktop UX forever?” youtu.be/V7AfAcQwLW0 1161
matia 🇭🇷 @joyofcode.xyz · 11/09/2026I made a Svelte package for hand-drawn annotations using the same foundation you can use in your project 😎 1382
matia 🇭🇷 @joyofcode.xyz · 10/09/2026Do you prefer option A, option B, or having both A+B options for creating annotations in Svelte? 430
matia 🇭🇷 @joyofcode.xyz · 09/09/2026I made a Svelte code sandbox package a while ago and made improvements since then so if you need one for your next project look no further 😄 • Includes Web and Svelte sandbox • Light, themable, responsive • Handles imports 1112
matia 🇭🇷 @joyofcode.xyz · 08/09/2026Trying out ideas like annotations in Animotion for your next investigative journalism piece 😄 080
matia 🇭🇷 @joyofcode.xyz · 07/09/2026I made a Svelte component wrapper around Rough.js for creating graphics with a hand-drawn, sketchy appearance 😄 26910
matia 🇭🇷 @joyofcode.xyz · 06/09/2026I don't remember which Castlevania game I played on the PS2 so I'm playing both 010
matia 🇭🇷 @joyofcode.xyz · 04/09/2026I only think of this scene when someone says they don't read the code 041
matia 🇭🇷 @joyofcode.xyz · 27/08/2026I asked GLM 5.3 Flash to make a timeline view in Animotion and it's nicer than I expected maybe I should keep it 🤔 050
matia 🇭🇷 @joyofcode.xyz · 27/08/2026GLM 5.3 Flash and DeepSeek V4 Flash stable price comparison It's cheaper even without 50% discount and cache hits are more expensive but it's more token efficient I used it as Ox Alpha and now on the OpenCode Go sub at 2x usage 0110
matia 🇭🇷 @joyofcode.xyz · 26/08/2026I realized I'm making Prettier after fixing some code indentation edge cases in Animotion maybe I should use it instead 😂 040
matia 🇭🇷 @joyofcode.xyz · 24/08/2026Text morphs are cursed due to how browsers render text and it looks worse when you render each frame to video 💀 I almost used a crossfade instead in Animotion until I learned that you can change how text is rendered 😌 1312
matia 🇭🇷 @joyofcode.xyz · 21/08/2026Asked the clanker to explain how the Animotion scene timeline works using Animotion 🤔 140
matia 🇭🇷 @joyofcode.xyz · 21/08/2026I also added `reveal` and `crossfade` helpers for lists and crossfading between items 🔥 010
matia 🇭🇷 @joyofcode.xyz · 20/08/2026I remember this presentation tool Prezi where you can pan, zoom, and rotate content so I tried recreating the same thing in Animotion 😄 161
matia 🇭🇷 @joyofcode.xyz · 19/08/2026I made some usability improvements for revealing elements inside of an Animotion scene 🪄 You can use the `step` and `progress` value from the scene to swap and reveal things based on the current step and progress 🔥 090
matia 🇭🇷 @joyofcode.xyz · 16/08/2026Layout transitions in Animotion 2 handle existing transforms, border radius, and color transitions 🪄 This includes calculating the roundness for cursed edge cases like `rounded-full` since it uses `calc(infinity * 1px)` 💀 060
matia 🇭🇷 @joyofcode.xyz · 15/08/2026Layout transitions in Animotion 2 use a more advanced FLIP animation technique 🪄 It handles enter/exit transitions even if the element was removed from the DOM by Svelte using ghost elements 👻 You can also define custom enter/exit transitions besides default options 🔥 0130
matia 🇭🇷 @joyofcode.xyz · 14/08/2026Layout animations is my favorite feature I'm working on for Animotion 2 Give the element you want to participate in the layout transition a name and it figures out the rest You can morph unrelated elements or change the layout in other ways like in this example 040
matia 🇭🇷 @joyofcode.xyz · 11/08/2026I never had a use for `void` in JavaScript but it's useful for ignoring unused expression warning when tracking a dependency in Svelte 1210
matia 🇭🇷 @joyofcode.xyz · 08/08/2026You can use `tick` in Animotion to get the time and progress so video, canvas, or third-party libraries can be rendered as part of the scene 😎 080
matia 🇭🇷 @joyofcode.xyz · 06/08/2026*yoink* I stole the Motion Canvas API for animating code in Animotion so you can: • Drop in a string and let it auto-diff • Use methods for surgical precision • Edit the code inline Thanks to Shiki there's syntax highlight for most languages and VS Code theme support 0210
matia 🇭🇷 @joyofcode.xyz · 05/08/2026Added rendering options to Animotion with defaults for YouTube and other formats for socials 😎 You can render the entire sequence or individual scenes as images or video using the CLI 🎞️ 080
matia 🇭🇷 @joyofcode.xyz · 04/08/2026Here's an example using the new Animotion version I'm working on ready to be rendered as video 😄 1100
matia 🇭🇷 @joyofcode.xyz · 03/08/2026I haven't used GLM/Kimi since the new DeepSeek V4 Flash release since it does everything I throw at it which is crazy to me 010
matia 🇭🇷 @joyofcode.xyz · 02/08/2026I'm excited for the new Animotion API for making visual explainers with support for layout and code animations, rendering to video, and plugins 🔥 0194
matia 🇭🇷 @joyofcode.xyz · 22/07/2026I want the next version of Animotion to be more opinionated so you can render the presentation frame by frame as a video I'm trying a new approach using generators to describe steps instead like Motion Canvas 130
matia 🇭🇷 @joyofcode.xyz · 21/07/2026Modern CSS is pretty neat I'm doing Animotion from scratch in Svelte without libraries so I have control over everything I'm taking advantage of container queries and their length units to size text based on the container size defined by the aspect ratio 1190
matia 🇭🇷 @joyofcode.xyz · 19/07/2026Fluid text measurement and layout without touching the DOM using Pretext 51198
matia 🇭🇷 @joyofcode.xyz · 18/07/2026I fixed a bug in Animotion where the default layout wasn't working properly when animating code blocks Now it's enabled by default to enforce a fixed aspect ratio and scale slides uniformly to fit any screen size 180
matia 🇭🇷 @joyofcode.xyz · 09/07/2026I use a simple animation system in Svelte for these FLIP animations in my videos where I define views for Tailwind classes based on the state and it works like magic 🪄 0112
matia 🇭🇷 @joyofcode.xyz · 08/07/2026Sneak peek for the upcoming Pretext video I'm working on for measuring and laying out text without touching the DOM 090
