Karime

@austin_malerba's biggest fan

[Karime @Karime_sm]

@austin_malerba So good !

[Austin Malerba @austin_malerba]

Stream a live image of any element into a canvas

<ElementMirror
source={cardRef}
fps={30}
/>

https://t.co/176yk7EraL

Good for things like blurred img/video backdrops, dnd, pip, minimaps, magnifiers, custom glass effects, creative coding shenanigans

[Austin Malerba @austin_malerba]

Just dropped a plugin to make mask-based fade effects dead simple in tailwind v3 & v4

<marquee class="fade-mask fade-x-24" />

https://t.co/xEqTgr8JRp

[Austin Malerba @austin_malerba]

Fun lil nugget - i added a global copy button so you can easily copy the entire docs as mdx and then paste into your fav llm

[Austin Malerba @austin_malerba]

Introducing xorma 🚀

https://t.co/fLELrFl2gb

A reactive in-memory database for building complex frontend apps like video editors, design tools, and games.

I first conceived of it in 2022 while setting out to build diode and I’ve used it in basically every project since.

So here it is as a proper npm package.

[Karime @Karime_sm]

@austin_malerba Fuck yeah love it so much wow this just 👏🏼👏🏼👏🏼🫶🏼🫶🏼🫶🏼👋🏻👋🏻👋🏻👋🏻 slaps

[Karime @Karime_sm]

@austin_malerba Best website I’ve ever seen

[Karime @Karime_sm]

@austin_malerba Hell yeahhhh

[Austin Malerba @austin_malerba]

Still the coolest and most challenging thing I’ve ever built.

Threejs (r3f) + arduino simulation + analog simulation all happening in the browser simultaneously.

It was a wild ride to say the least.

[Austin Malerba @austin_malerba]

trimming vs stretching

[Austin Malerba @austin_malerba]

Well, it's now irrelevant cause i got a job lol

But this was gonna be the new frostin site

Figured i'd share just cause it's kinda cool

[ElevenLabs @ElevenLabs]

A new set of crisp and diverse default voices is now available on the platform!

We’ve expanded our voice offering with multiple accents and a plethora of use cases, ranging from cartoons, video games, audiobooks to even ASMR!

[Austin Malerba @austin_malerba]

For years i've had this vision for a synchronous reactive ORM with offline support and realtime syncing to other clients.

This is the holy grail of state management IMO and i'm finally building it using mobx and yjs.

https://t.co/6iCOgtWjlB

I know that's a mouthful so let me explain:

synchronous - there's no promises to deal with and therefore no loading states which leads to much cleaner frontend code.

reactive - imagine signals/observables that you can mutate and they will trigger your components to rerender and also will immediately propagate to other users' devices.

ORM - what i've made is not an ORM, but it looks and feels like one where you define Models and then you interact with instances of those models.

offline/syncing - this is done through yjs, a CRDT implementation, and websockets. CRDTs power many modern collaborative multiplayer tools like figma.

[Karime @Karime_sm]

@austin_malerba @artur_bien So cool!🤩

[Austin Malerba @austin_malerba]

I give you <Glass /> and <GlassBorder />:

https://t.co/FScgZ9EpE5

Recently @artur_bien made some awesomely smooth frosted glass.

After messing around and loving it i decided i had to make a component for it and then took it a little further, adding full border support (including border-radius) so i can use it for cards/tooltips/etc.

Was very tricky getting the border rendered😅 Had to use houdini paint worklets to draw only the border and then use that as a mask. Overall quite good browser support, though desktop safari is still giving me trouble🤔

[Austin Malerba @austin_malerba]

Life update:

I'm now a frontend guy at @elevenlabs!

They've developed some sick text-to-speech tools over the last year and now i've joined the effort.

Catch y'all around 🤙

[Karime @Karime_sm]

@austin_malerba @framer 🤯🤯👏🏼

[Austin Malerba @austin_malerba]

Play a sequence of images on scroll:

&lt;ImageSequence
images={images}
width={1464}
height={824}
progress={scrollYProgress}
/&gt;

https://t.co/9NYf1UqhZJ

@framer-motion

[binsta @binstadotdev]

Binsta is live!

https://t.co/eVo9pDRqAV

Upload, optimize, and share files however you like.

We give you parameterized links like this:

https://t.co/xGMUhr7LJw

then you put it in a &lt;video /&gt; element or use at as a makeshift loom link and post it on discord

Get creative!

[Austin Malerba @austin_malerba]

Introducing @binstadotdev 🚀🚀🚀

binsta offers drag n drop file hosting through a delightful ui

convert pesky heics to webp on the fly

convert your 20mb mov to a 500kb mp4 before shoving it into a &lt;video /&gt; tag

try it out for free =&gt;

https://t.co/UxA6VWwuia