MoreRSS

site iconAdam ArgyleModify

Web design & development tips & tricks: CSS, JS, HTML, Design, & UX
Please copy the RSS to your reader, or quickly subscribe to:

Inoreader Feedly Follow Feedbin Local Reader

Rss preview of Blog of Adam Argyle

View Transitions can swoop‽

2026-03-07 13:32:21

Two ghosts, one flying in a straight line and one on a curve

Like Zoolander who can't turn right, I thought View Transitions couldn't swoop.

I had been under the impression that they couldn't curve towards the destination, and it was one of those things that you like can't unsee. All view transitions going in straight lines…

CodePen

All my prior attempts had failed, til now.

The way of the swoop #

When you give something a view-transition-name like:

#ball1 { 
  view-transition-name: view-transition-ball;
}

The browser creates keyframes with a predictable naming pattern:

@keyframes -ua-view-transition-group-anim-view-transition-ball {

}

If you pause a view transition, you can see the keyframes and the keyframe name applied to the pseudo elements:

Anticipating that naming consistency, add a comma to the ::view-transition-group() element and include some keyframes of our own:

::view-transition-group(view-transition-ball) {
  animation: 
    -ua-view-transition-group-anim-view-transition-ball 2s ease-in-out, 
/* 👉*/ swoop 2s ease-in-out;
}

The special sauce, the THING THAT TOOK FOREVER TO FIND, is that you can only use individual transforms, NO transform shorthand:

@keyframes swoop {
  50% {
/* ❌ */ transform: translateY(50px);
/* ✅ */ translate: 0 50px;
  }
}

If you try to change the transform, things fail. And if you try to add animation-composition, things fail harder (don't know why).

BUT, using individual transforms, and just like that, you can blend a scale, translate, or whatever in combination with the browser native transition.

The trick also shows you how you can add a blur to a view transition.

CodePen

The key to the unlock was individual transforms.

Below is a demo you can try that makes a simple wiggling view transition.

The green ball uses custom keyframes and animation composition, and the pink ball uses view transitions. They dont perfectly match either, which is interesting (exaggerated with a scale added). There's a perspective difference at play I don't fully understand.

See the Pen by Adam Argyle (@argyleink) on CodePen.

You can stop reading here if you want, but I'm about to rant about how this was lame as crap to discover.

The limits #

While I'm glad there's a little bit of a way for it to work, there's plenty to still want.

  • No access to the dynamic values that the browser calculates for view transitions
  • The solution is clunky and requires static view-transition-names (no match-element support), it breaks if the browsers name their keyframes something else or if I'm assigning names with JS
  • No support for animation-composition: add
  • No way to control the easing of the x vs the y axis separately, or separate durations

I really just wanted to change the X easing to be ease-out and the Y easing to be ease-in. That would give a nice swoop. Or even add a slight delay the X and not the Y, another way to create a swoop.

😬

None of these more normal and better ergonomic ways are available. Just this narrow case with individual transforms and trying to piggy back on a browser keyframe naming convention.

But hey, now we can add swoops to a native view transition and we learned a trick that can make motion blur view transitions. That's coo.

WWW Ep234 Pay No Attention To The Llm Behind The Terminal With Zach Lloyd Of Warp

2026-03-06 02:29:48

Whiskey web and whatnot episode 234

Ep #234
Pay No Attention to the LLM Behind the Terminal with Zach Lloyd of Warp

Robbie and I chat latest agentic workflows with the CEO of Warp, digging into our favorite features, cloud agents with Oz, some delicious smokey whiskey and some whatnot.

whiskey.fm · youtube · spotify · apple

My OpenClaw Token Dashboard

2026-03-02 11:15:27

Text emphasized alt text example

First off, I call my OpenClaw assistant "Punk Ass," short for "Punk Assistant." It's been great so far having a punk ass for various projects. I hadn't been using my gaming machine much; now it's a work horse.

But, when you're running an AI assistant that handles Discord messages, cron jobs, and various projects; costs add up. But where exactly?

I directed a simple dashboard to find out.

How It Works #

OpenClaw stores session logs as JSONL files. Each assistant response includes token counts and costs. I had a Node.js script written that extracts this data, cross-references it with Discord thread metadata embedded in each conversation, and aggregates everything by thread, day, model, and session type.

The output is a single static JSON file that powers an Astro dashboard. No backend needed, just parse, deploy, and refresh when you want updated data.

What I Track #

I track a few things that help me make keep costs low:

  • Cost per Discord thread
    Which conversations are burning tokens?
  • Daily spend trends
    Are costs stable or spiking?
  • Token breakdown
    Input vs output vs cache hits
  • Session types
    Discord vs cron jobs vs direct chat

What I Learned #

The data was immediately actionable. Two threads accounted for 60% of the total spend: a Shopify web store project ($73) and the #general channel ($70).

The store project made sense, I've been async art directing it alot. It's looking sweet. But #general? That's just a catch-all channel accumulating context from random conversations. Expensive by accident.

The Fix #

Now I know: long-running threads in Discord are context traps. Each message carries the full conversation history. The solutions:

  • Start fresh threads for new topics instead of continuing in the same one
  • Have OpenClaw delegate to sub-agents for self-contained tasks as they don't carry the parent context
  • Treat #general as a lobby, not a workspace

The dashboard cost less than a dollar to make. But now, knowing where tokens go changes how I work with OpenClaw, I'll earn all that buck back quick; I can stop guessing and start optimizing.

CSS Scroll Driven Gyro Trig Experiments

2026-02-28 00:13:38

scroll-driven geometric orbit experiments

Featuring billboarding, center of mass pivoting, and CSS trig functions.

WWW Ep233 Humans Are Now Legacy Dependencies

2026-02-27 11:57:00

Whiskey web and whatnot episode 232

Ep #233
Humans Are Now Legacy Dependencies

Robbie and I chat agentic workflows, OpenClaw, Pi, malleable software, some whiskey and some whatnot.

whiskey.fm · youtube · spotify · apple