How this site was made.

Three typefaces carry the entire site, chosen to create a tension between editorial craft and performance discipline:

• Fraunces - a variable serif from Undercase Type with opsz (optical size), wght (weight), and SOFT axes. Used for every display headline. The opsz axis lets the large type feel carved rather than scaled - an editorial move that gives weight without bulk.
• Inter Tight - a tighter sibling of the ubiquitous Inter, used for body copy. It reads calmer at size and feels less "software" than the original. Matched to Fraunces through careful x-height alignment.
• JetBrains Mono - a monospace for every number, every eyebrow label, every data point. Performance marketing runs on numbers; monospace is how numbers want to be read.

The display-to-body ratio is pushed past 10:1. Hero type fills the viewport. Tracking on display sits at −0.035em to cohere the letterforms into architecture. Line breaks on the hero are hand-set so the copy falls exactly where it should.

Four tokens, nothing else. Every color on this site derives from them:

Smooth scroll comes from Lenis - weighted, physical, quiet. Reveals are choreographed with GSAP, triggered by IntersectionObserver so the browser only touches what the viewer can actually see.

No default easing curves. Everything uses cubic-bezier(0.16, 1, 0.3, 1) - an expo-out that gives motion a slight physical inertia. Hero type reveals word-by-word with an 80ms stagger. Metrics count up when they enter the viewport. Buttons carry a magnetic pull that responds to cursor proximity.

All of it respects prefers-reduced-motion. If you've told your OS you want less motion, you get a fade and nothing else.

• Laravel 12 on PHP 8.5 - rendered on the server, no SPA hydration tax.
• Laravel Mix (webpack) for the bundle, Tailwind CSS for the utility layer, custom CSS for the craft layer on top.
• Alpine.js for tiny reactive moments - the nav, the mobile menu - small enough to hand-write.
• Lenis for smooth scroll. GSAP (core only, no plugins) for the reveals.
• Laravel Vapor for deployment - AWS Lambda, CloudFront, DynamoDB cache, all hands-off.
• CSP with nonces on every inline script and style. Strict-dynamic, no unsafe-inline escape hatches.

The whole site is a single Laravel route, one controller action, one Blade layout, and nine section partials. No database queries. No API calls. No spinners.

Fonts are preloaded and served with display: swap. All animated properties are GPU-friendly - transform and opacity, nothing else. Images are lazy below the fold, with reserved aspect-ratio so the layout never shifts.

The HTML document is under 50KB. The CSS under 30KB. The JS under 35KB gzipped - and most of that is GSAP. Lighthouse targets were 90/95/95/100 across Performance, Accessibility, Best Practices, and SEO. The site clears them.

Brand & positioning: Tyler Berglund & Derrick Luu, founders of Then & There.

Design, engineering, motion, performance: Eyal Gantz. An NYC-based builder who makes editorial-grade marketing sites for founders who care about craft.