I've built a new personal website! → https://t.co/CgeFZCjVQe

CSS anchor positioning API is so amazing. You can build interactive charts with collision-aware tooltips using only HTML and CSS. Thank you @Una @jh3yy and everyone involved! Can't wait for full support on Safari 🙌 Demo: https://t.co/bruqqxJDsY

Not sure if we'll put this into production, as we want to ensure our docs are 100% accurate, but it's interesting to play with!

What I'm noticing works especially well is when it can combine its existing knowledge with uploaded knowledge. For example: "How can I use [Liveblocks feature] with [common framework]?". Quite impressed with these results.

It wrote this basic guide perfectly, and its pretty good at intermediate level too. Liveblocks lets you upload a website for AI to ingest, which is why the <AiChat /> component understands our code so well. I'm using GPT-4.1 as it seems to be the most proficient model at this.

Experimenting with a @liveblocks <AiChat /> that can generate full guides on the fly!

These clips are from an AI web browser I built with @liveblocks!

Of course this rule won't apply to every situation, and sometimes no animations are best, but always take a moment to consider if it _should_ apply. Rarely do I find the same animation on entry/exit being the optimal choice.

Not sure where to start with your animation? It's easy to overdo animations, particularly if they re-run often—like on every keystroke. Try skipping the entrance animation, and having a simple fade on exit. It feels responsive, snappy, and the intent feels right for most cases.

Something felt off in the last demo? It’s because the tabs didn’t animate when closing. Below, notice how they slide back to position, instead of popping into place. And the [+] button always sticks to the final tab, moving with it.

Next, the entry. When you hit the new tab button, it should feel like the tab was _created_. We can do this by starting the tab from the same colour/size/position as the [+] button, and animating it out. Notice the text too—it never stretches, and is revealed instead.

When closing a tab, what's the intent? What are we trying to portray? In this case, we're depicting a tab ceasing to exist, disappearing. Let's start from scratch—with a touch of blur, and slight shrinking effect, we can evoke this feeling with the exit animation.

entry ≠ exit. A design principle that's often overlooked is that entry and exit animations should not be the same. These tabs slide in, yet fade out. Why? Because we're showing intent ↓

I felt inspired to build this browser after trying @browsercompany's Dia. It's very cool.

The code's here—book a demo to try @liveblocks, as access is currently limited. GitHub repo → https://t.co/ChZlwnks9V Book a demo → https://t.co/2qzmTTyYj1

The AI chat uses the @liveblocks pre-built <AiChat /> component. It's easy to add tools which the AI can call at any time. For example, one tool fetches a website, converts its contents to markdown, then feeds this back into the AI. This way, it can accurately redirect/answer!

I added a map of Electron `WebContentsView`s inside it, each allowing you to display a web page. Next, I set up a Vite + React app that displays this view, and a list of tabs above it. I'm using `motion/react` for the animations.

This is genuinely super helpful when it comes documentation sites. --- Okay, so how it works! First I set up Electron, which is a way to use Chrome as a desktop app. Tools like VS Code, Slack, Discord also use it, meaning they're essentially web apps in wrapper.

I've built an AI web browser! AI chats are way better with context—now you can see exactly where info comes from, trust it, and dig deeper. It'll auto-redirect, open tabs, and fetch pages for you. How it works + code ↓

I wouldn't do this for anything important, but for fun demos where you can't really go wrong, I definitely would. Anyway—have a play with it, it's ⅔ of the way down this page. https://t.co/YdNEr9rHRY

First time I've properly vibe coded in @cursor_ai, not even trying to parse what was written. It took about 15 instructions before it got there, but I didn't have to think about it all. Instruction → wait → test → repeat.