DEV Community

Zenovay
Zenovay

Posted on

How I rebuilt my SaaS landing page in 6 weeks: Essential lessons for developer founders

#javascript #privacy #showdev #webdev

I'm a developer founder.

I love writing code. I hate writing copy. For 8 months I shipped features and ignored my landing page.

My conversion rate was 0.5%. I was confused why "such a powerful product" was not selling.

Then I spent 6 weeks rebuilding the landing page from scratch. Conversion is now roughly 3x. Same product. Different page.

This is what I learned, focused on the technical and decision making side, since most "landing page tips" articles are written by marketers and miss the developer perspective.

The shift in mental model

The first thing I had to accept: a landing page is a piece of software with one job. Get the right visitors to take one action. It should be debugged, profiled, and iterated like any other code.

Once I treated it like code, the whole rewrite became tractable.

Stack choices that matter

For Zenovay's new landing page I went with:
Next.js 15 (App Router)
Tailwind 4
Three.js (raw, not R3F)
Cloudflare Pages for hosting
Cloudflare Workers for the live data stream

Three things drove these choices:

  1. Edge first. The page needs to load fast in every geography. Cloudflare Pages plus Workers means sub 100ms TTFB worldwide.
  2. No framework lock in on the hero animation. Raw Three.js gave me 60fps with ~5000 dots. React Three Fiber added overhead I did not need.
  3. Tailwind 4's new engine cut my CSS bundle by ~40% over what I had with Tailwind 3.

The hero is the entire pitch

For an analytics product, the natural hero is a screenshot of the dashboard. That is what I had for months.

I replaced it with a live 3D globe showing actual incoming visits from real customer sites. Same data the dashboard shows, but in motion, in 3D, instantly.

Here's the simplified Three.js setup for the globe:

import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1000)
const renderer = new THREE.WebGLRenderer({ 
  antialias: true, 
  alpha: true 
})

// Globe sphere
const globe = new THREE.Mesh(
  new THREE.SphereGeometry(5, 64, 64),
  new THREE.MeshBasicMaterial({ 
    map: earthTexture,
    transparent: true,
    opacity: 0.9
  })
)
scene.add(globe)

// Points for visits, custom shader for glow
const pointsGeometry = new THREE.BufferGeometry()
const pointsMaterial = new THREE.ShaderMaterial({
  vertexShader: glowVertexShader,
  fragmentShader: glowFragmentShader,
  transparent: true
})
Enter fullscreen mode Exit fullscreen mode

The events come in via Server Sent Events from Cloudflare Workers, batched every 2 seconds.

Performance budget

I gave myself a hard performance budget for the new page:

  • LCP under 1.5s on a midrange phone
  • CLS under 0.05
  • JS bundle under 180kb gzipped
  • Three.js scene under 60fps target

Final numbers: LCP 1.2s, CLS 0.02, JS 167kb, Three.js scene 58 to 60fps on iPhone 12.

What I would do differently

  1. Start with the hero animation. I built the hero last, which meant the rest of the design had to bend around it. Building the visual first would have saved me 2 rewrites.
  2. Write copy before opening Figma. I designed 3 versions with placeholder text. All 3 broke when I wrote real copy.
  3. Test on slow networks earlier. My LP felt fast on fiber. On 4G with throttled CPU, the Three.js initial paint was a problem. Lazy loading the globe below initial paint fixed it.

If you want to see the result: zenovay.com (there is an interactive demo)

Questions about any of the technical pieces, drop them below. Happy to share more detail on the SSE batching, the binary event format, or the shader work.

Top comments (0)