One of my favourite things about running my own site is that I get to be my own client. As a freelance Astro developer, I spend most of my week shipping ideas for other people — so when an afternoon opens up to build something purely for hansmartens.dev, I grab it with both hands (and a fresh pot of coffee).
This time the experiment was a tech-stack marquee: a brand-coloured row of logo cards for the tools I build with, gliding gently across the screen just above my closing call-to-action. I love bringing new little touches like this to my own site — it’s where I get to play, test ideas, and keep my hands dirty with the framework I recommend to clients every day.
Designed to match the rest of the site
The first hour went into design, not code. I didn’t want a marquee that looked bolted on — it had to feel like it had always belonged. So it borrows the same building blocks as everything else here: the same card component, the same brand colour tokens, the same light/dark behaviour. Every logo is tinted with the site’s brand colour rather than its own, which keeps the row looking like one intentional band instead of a noisy mix of greens, blues and blacks. When a visitor switches colour theme, the whole marquee re-tints right along with the buttons and badges.
It’s also deliberately light. The scroll is a single CSS animation on a duplicated track — no JavaScript at all — so it stays kind to my Core Web Vitals and never blocks the main thread.
Desktop-only, on purpose
On my own homepage I made one firm decision: the marquee shows only on real desktops. That’s where the two-row, opposite-direction motion has room to breathe, and where a mouse makes the interaction meaningful. Two things make it feel alive there:
- It pauses on hover. Glide your cursor over the row and it stops, so you can actually read a card or click it instead of chasing it across the screen.
- The cards are clickable. Each one links straight to that tool’s own website — a quick way to explore the stack behind the site.
On phones and tablets the whole section simply isn’t rendered. No half-working animation, no empty placeholder — the page’s alternating “zebra” background rhythm just continues without it. It sits right above my LetterGlitch call-to-action band, and the two switch into their desktop form together.
The same marquee, two homes
Here’s the part I enjoyed most: I worked it out at the same time for my own website and for my Astro Rocket theme. Same component, same look — but tuned differently for each context.
- On hansmartens.dev: desktop-only, with clickable cards (as above).
- In the Astro Rocket theme: the marquee is shown on every device except mobile phones — so tablets and desktops both get it. And on touchscreen devices the cards are intentionally not clickable and don’t link out, because on touch it’s far too easy to brush a moving card mid-scroll and get yanked off to an external site by accident.
Building both at once was the fun bit — the same idea, solved twice for two slightly different jobs. By the time it all clicked into place I’d lost count of the coffees, but I had a marquee I genuinely like on my own site and a polished, reusable version for everyone using the theme.
If you want the nuts-and-bolts version of how the Astro Rocket marquee actually works, I broke it down line by line in The Stack Marquee — A Pure-CSS Infinite Tech Strip.
Built with a colleague named Claude
I didn’t do it alone. I paired on this with Claude Opus 4.8 — and honestly, it felt less like “using an AI tool” and more like working with a second developer at the next desk. We went back and forth like two colleagues: I’d describe what I wanted, we’d weigh the trade-offs, I’d push back, we’d refine, and between us we made it actually work — edge cases, responsive behaviour and all. (If you’re curious how I fold that into my workflow, I wrote more in how I use Claude Code.)
The result
A few hours, a lot of coffee, and one feature I’m really happy with. I think it looks great — it adds a bit of motion and personality to the homepage without shouting, and it does its job quietly on the devices where it belongs. Exactly the kind of small, considered detail I enjoy as an Astro developer, and exactly why I keep building with Astro.
Want the component for your own project? It’s open source:
- Astro Rocket on GitHub — github.com/hansmartensdev/astro-rocket
- Astro Rocket in the Astro themes directory — astro.build/themes/details/astro-rocket
Related reading
- Why I Build With Astro — the case for the framework behind all of this.
- Add a LetterGlitch Effect — the animated call-to-action band that sits right below the marquee.
- How Astro Rocket’s Design System Works — the colour tokens the marquee tints itself with.
- Core Web Vitals, Explained — why a zero-JavaScript marquee was the right call.
- How I Use Claude Code — pairing with Claude as a second developer.