Osys
3 min readengineeringstack

The stack we actually ship.

title: "The stack we actually ship." date: "2026-05-10" excerpt: "Eight years of trying every framework distilled into the five tools we still reach for when the deadline matters." tags: ["engineering", "stack"] author: "Osys" cover: "linear-gradient(135deg, #59D9FF 0%, #A777FF 100%)"

The most expensive decision in a six-week engagement isn't the colour palette or the typography system or the animation easing curve. It's the stack.

Choose right and the team is shipping by week three. Choose wrong and you spend that same week explaining to the founder why the auth flow needs another sprint.

Here is what we reach for. Without exception. Without ceremony.

Next.js, App Router, edge-aware

The App Router won. It took a while — we ran 12 production projects on the Pages Router before we trusted streaming + RSC for client work — but the ergonomics of co-locating data, mutation, and UI in one route are unmatched.

We default to server components for everything that isn't motion-heavy, and lean on dynamic() for the parts that are.

Tailwind, with tokens

We don't use Tailwind as a CSS replacement. We use it as a token system. Every project starts with a globals.css that defines five things:

  1. The colour ramp, named semantically
  2. The typography scale, mapped to --font-* CSS variables
  3. The spacing rhythm (we use a 4 / 8 / 16 / 24 / 32 / 48 / 80 ladder)
  4. The radius scale (4 / 8 / 16 / 24 / 32 / 999)
  5. The motion easing tokens

Everything else is composition.

Framer Motion + GSAP, deliberately split

This is the controversial one. We use both, on the same project, and they have different jobs:

  • Framer Motion for component-local choreography. Reveals, hovers, AnimatePresence transitions, layout animations.
  • GSAP + ScrollTrigger for pinned scroll experiences, complex timeline sequencing, and anything that needs to coordinate with Lenis.

The bundle cost is real (~50kb additional) but the developer ergonomics save us a week per project. We accept the tradeoff.

React Three Fiber when it earns its keep

R3F is a power tool. We don't reach for it because we can — we reach for it when a flat composition can't carry the brand moment.

A glass asterisk in the hero. A liquid metal blob in the about page. A scroll-driven particle scatter for a product launch. These are jobs WebGL does and nothing else does well.

If we can do it in SVG we do it in SVG.

Resend + Zod for everything inbound

The contact form. The newsletter signup. The "I want a quote" CTA. They all flow through a single Resend handler with a single shared Zod schema for validation.

This sounds trivial — and it is — but it's the single biggest reduction in "oh shit, can you check why our form isn't sending" Slack messages we've made in the last two years.

That's the stack. The TL;DR: boring on the edges, opinionated in the middle. Pick tools that compress decisions, not ones that hand you decisions back.