Agency sites say "we're technical" with a paragraph and a stock photo. We'd rather prove it: we dropped a real console in the middle of the homepage and an estimator that reacts to every click. This post covers how both pieces were built and what we learned from watching people play with them.
A real terminal, not a mockup
The «Under the hood» section is a command interpreter written in vanilla JS: history with ↑↓, Tab autocomplete (with ghost text), quick-access chips and a boot sequence with a wink built in: sales fluff… [not found]. The commands respond with real content: services, case studies with links, stack, contact.
The detail people love most is the easter egg: type matrix and a digital rain in cobalt/cyan (with INTERVOLUTIONS glyphs slipped in) takes over the screen for a few seconds. Canvas 2D, zero libraries, and paused the moment you leave the viewport.
Astro scopes styles per component, but the lines the JS creates at runtime don't carry that scope. Solution: global styles with a .term-* prefix. Twenty minutes of debugging that we're giving you here for free.
The estimator: marketing you can play
The classic CTA («shall we talk?») asked for faith. The new one asks for 30 seconds of play: you pick what you're building, add powers to it and a live panel builds your plan: phases that light up, weeks and a price range with numeric interpolation, and an ambition meter that runs from Lean MVP to Flagship.
The trick is in closing the loop: «I want this plan» arrives at the quote form with the plan already written into the message. The visitor plays, commits without realizing it and lands with the work already done. Negative friction.
- Numbers with tween and pop: changes are felt, not read
- Particle sparks on every click (5 DOM nodes, 600ms lifespan)
- SVG gauge with stroke-dashoffset: cheap and smooth
- Everything respects prefers-reduced-motion
The best proof that we know how to build interactive products is that our own site is one.
Internal project note
