Your homepage hero gets about three seconds to make an impression. Ours wasn't making the cut.
The old hero was functional — headline, subhead, CTA — but it didn't communicate what makes Strug City different. We're building infrastructure for autonomous organizations. The landing page should feel like that: dynamic, alive, engineered.
What Changed
We built a WebGL aurora shader as the hero background. It's not decoration — it's a signal. Smooth gradients flowing across the canvas, rendered at 60fps, using GPU acceleration. The visual language says "we know how to build performant systems" before you read a word.
The headline system rotates through our core value props every 4 seconds. Not because users won't read a static headline, but because the rotation demonstrates capability: we're not one thing, we're a platform. Autonomous agents, memory architecture, production infrastructure — the rotating headlines make the breadth visible in the first scroll.
Two new React components: AuroraCanvas.tsx handles the WebGL shader lifecycle, and HomeHero.tsx orchestrates the headline rotation with smooth fade transitions. Both are TypeScript-first with proper cleanup hooks to prevent memory leaks on navigation.
Mockup-First Development
This shipped with a design brief and HTML mockup committed before any React code. docs/mockups/homepage-hero-brief.md specified the shader parameters, headline rotation timing, and performance budget. docs/mockups/homepage-hero.html gave us a working prototype in 80 lines of vanilla JS and canvas API calls.
That's the workflow now: design in HTML, approve the mockup, then build the production component. No meetings, no Figma handoff, no ambiguity about what we're building. The mockup is the spec.
Performance Budget
A WebGL shader sounds expensive. It's not if you do it right. The aurora canvas initializes after first paint, runs on the GPU, and adds ~15KB gzipped to the bundle. Total homepage load time stays under 200ms on fast 3G. The shader gracefully degrades to a static gradient if WebGL isn't available.
We're not optimizing for the slowest possible connection. We're building for the reality that most B2B buyers are on modern devices with decent bandwidth. The aurora shader makes a better first impression than saving 15KB would.
What's Next
The hero is live, but it's not done. We need to A/B test headline variations to see which value props resonate. The shader parameters (color stops, animation speed, gradient intensity) are all tunable — we should experiment with bolder variations.
Longer term, this pattern — dynamic WebGL backgrounds, rotating content, mockup-first workflow — becomes reusable. The AuroraCanvas component can power other sections. The headline rotation system can drive testimonial carousels or feature callouts. First impressions matter, but so does building infrastructure that compounds.