Case study of a premium brand and high-motion marketing site for an AI startup
When an AI startup is selling speed, its website cannot feel slow — and it cannot look like everyone else's. Utsubo partnered with Vectr, an AI-driven precision staffing platform for critical infrastructure (nuclear, gas turbines, data centers, semiconductor facilities), to translate a strategic brand identity into a fast, cinematic marketing site. We handled design and development end to end: a real-time Three.js WebGPU 3D hero, app-like page transitions, and a production pipeline that cut the 3D payload by 80–95%. The site launched on May 21, 2026 and won FWA of the Day on June 2, 2026.
Who this is for: AI startup founders and heads of brand commissioning premium branding, a new marketing site, or a high-motion experience built on Three.js / WebGPU.
Key Takeaways
- Vectr is a B2B AI staffing platform for high-consequence industries; the brand had to read enterprise-serious and visibly frontier at the same time.
- The brand system is built on one visual tension — direction (an arrow) and ignition (a spark) — extended into an interactive product story.
- The homepage is a guided journey: a continuous line follows the client path from urgent call to on-site dispatch, turning an invisible operational workflow into a visual narrative.
- The centerpiece is a real-time Three.js WebGPU 3D hero with WebGL fallback, rendered off the main thread in a Web Worker via OffscreenCanvas so scroll and transitions stay smooth.
- A custom asset pipeline (Blender → GLB, texture resizing, WebP, instancing, Draco compression) reduced the 3D payload by roughly 80–95%.
- Result: Lighthouse 94 Performance / 98 Accessibility / 100 Best Practices / 100 SEO, and FWA of the Day.
1. The Challenge
Critical outages do not wait. When a plant, facility, or infrastructure project is understaffed, the cost is immediate: idle crews, delayed timelines, budget overruns, and operational risk.
Vectr's product reframes staffing as a logistics and intelligence problem. Instead of relying on manual networks, inbox chains, or outdated databases, the company uses AI and machine learning to identify, verify, and mobilize qualified crews faster.
The website needed to communicate that shift clearly. It could not feel like a generic staffing website. It had to feel serious enough for high-consequence industrial buyers, while still carrying the energy of an AI startup challenging legacy workflows.
The core challenge was to make speed, precision, and trust feel tangible. For founders weighing whether to rebrand or relaunch an AI SaaS, this is the central question: the brand and the build have to prove the product before a single feature is read.
2. The Brand System
The brand identity starts from a simple visual tension: direction and ignition.
The arrow gives the system clarity, trajectory, and forward motion. The spark adds activation, energy, and intent. Together, they form a mark that feels operational rather than decorative — a system designed to move.
This logic shaped the digital experience. Vectr's world is not soft, vague, or overly polished. It is structured, direct, and built around action.
The visual system balances restraint with moments of intensity. Deep, quiet backgrounds create a serious industrial tone, while the electric blue accent gives the interface a more technical and startup-driven edge. The result is a brand that can speak to nuclear-grade reliability without losing the sense that Vectr is building something new.
The typography follows the same logic: functional, geometric, and highly readable, with a mechanical confidence that fits the subject matter.
3. Storytelling the Staffing Journey
The homepage was designed as a guided journey through Vectr's mobilization process.
Instead of presenting the platform as a static list of features, the landing page visualizes the client journey from urgent need to on-site arrival. A continuous line moves through a sequence of scenes, connecting each operational step: activation, screening, selection, matching, and dispatch.
That line became the narrative device. It represents the path from a client call to the right person arriving at the right facility. The user follows the process visually, moving through the logic of Vectr's service before the copy explains it in detail.
This was especially important because Vectr operates in sensitive, high-stakes industries. Staffing is not just about availability. Every candidate needs to be filtered, verified, checked against compliance requirements, matched to the timeline, and prepared for arrival.
The site turns that invisible operational workflow into a clear, visual story — the same approach we take with immersive storytelling websites, where structure and motion carry meaning, not just decoration.
4. A Continuous, App-Like Experience
The website needed to feel fast, premium, and continuous.
We built the navigation around smooth app-like transitions rather than hard page changes. When a user moves between sections, the next page enters as a layered visual surface, creating the feeling that the experience is flowing forward rather than restarting.
This transition system supports the brand idea directly. The site is always moving with purpose: no abrupt resets, no broken rhythm, no sense of waiting.
The goal was not animation for decoration. It was perceived speed. Every interaction had to make Vectr feel like a company built around operational velocity.
5. The Real-Time 3D Hero
The centerpiece of the site is a real-time 3D hero scene built with Three.js WebGPU, with WebGL fallback for broader compatibility.
The hero is not just a visual hook. It carries the same message as the brand: Vectr is a technically advanced company solving an old operational problem. The interface needed to prove that before the user read a single feature block.
To protect performance, the scene renders off the main thread in a Web Worker using an OffscreenCanvas. This keeps the heavier rendering work away from the interface, allowing scroll, page transitions, and interaction to stay smooth while the 3D scene runs.
The production pipeline was a major part of the work. Scenes were authored in Blender, exported as GLB, then optimized through a custom asset process using texture resizing, WebP conversion, instancing, and Draco compression.
This reduced the 3D payload by roughly 80–95%, allowing the site to deliver a rich visual experience without sacrificing loading speed. (For the technical background on this rendering path, see our WebGPU and Three.js migration guide.)
6. Technical Direction
The central technical constraint was simple: make it feel ambitious without making it feel heavy. That meant balancing visual quality, load time, browser compatibility, and smooth interaction across devices.
Key decisions included:
- Astro and Vite for a fast, modern frontend foundation.
- Three.js WebGPU with WebGL fallback.
- GPU capability detection before loading advanced rendering paths.
- Off-main-thread 3D rendering with OffscreenCanvas.
- Optimized GLB delivery with compressed textures and Draco geometry compression.
- Multiple 3D asset variants for desktop and mobile contexts.
- Taxi.js page transitions for a smoother, more premium browsing experience.
- Lenis smooth scrolling on desktop, with native scroll behavior preserved on mobile.
- A token-driven SCSS design system for consistent spacing, typography, colors, and motion.
- LocalStorage persistence for form progress.
- SEO and structured data implementation for discoverability.
- Privacy-first implementation with no analytics, cookies, or third-party trackers by default.
7. Product Features
Beyond the marketing experience, the site functions as an acquisition platform for both sides of Vectr's marketplace.
For candidates, the Apply flow uses a five-step modal with validation, resume upload, and LocalStorage persistence. If a candidate closes the tab before finishing, their progress is preserved so they can return without starting over.
For clients, the Request Crew form creates a direct path to initiate a staffing request. The interaction is intentionally simple, because the context is urgent: critical outages do not wait.
The content architecture is also locale-ready. English launched first, but the site copy is centralized so future localization can be handled as a content task rather than a structural rebuild.
8. Performance, SEO, and Privacy
Performance was treated as part of the brand experience. A company selling speed cannot have a slow website.
The homepage reached 94 Performance, 98 Accessibility, 100 Best Practices, and 100 SEO in Lighthouse.
The site also includes structured data, sitemap support, social metadata, and AI-readable company summaries through llm.txt and llm_full.txt.
Privacy was handled as a product requirement from day one. The site avoids analytics, cookies, and advertising trackers by default. Browser storage is used only where it improves the user experience, such as saving form progress locally before submission.
9. Outcome
Vectr launched as a fast, visually distinctive B2B platform for an AI staffing startup operating in high-stakes industrial environments. The project was awarded FWA of the Day on June 2, 2026.
From the brand system to the homepage journey, from the 3D hero to the page transitions, the experience reinforces one central idea: Vectr turns critical staffing into an engineered, accelerated process.
The final site holds two registers at once: enterprise-serious for nuclear, semiconductor, gas, and data center buyers; visibly frontier for a company whose advantage comes from intelligence, automation, and speed.
Credits — Branding: Michele Angeloro. Design & Development: Utsubo. Client: Vectr, Inc. Live site: vectrfl.com.
10. About Utsubo
Utsubo is an interactive creative studio, founded in 2021. We work with startups and brands on experiences that live between the browser and physical space, including:
- Brand systems and visual identity for technical products
- Premium marketing sites with high-end motion
- Web3D and WebGPU-based real-time experiences
- Interactive installations
Our projects have been recognized by international awards including Awwwards, FWA, and The Webby Awards. If you're comparing studios, our checklist for evaluating a web agency covers what to look for.
11. Let's Talk
Building an AI startup brand or a high-motion marketing site? We work with teams on brand systems, interactive marketing sites, and immersive 3D experiences on the web.
If you're exploring a partnership, let's discuss your project:
- What you're building and the constraints you're working with
- Which technical approach makes sense for your goals (and whether 3D is even the right call)
- Whether we're the right fit to help you execute
Prefer email? Contact us at: contact@utsubo.co
12. Frequently Asked Questions (FAQs)
Q. What does a project like Vectr cost, and how long does it take?
It depends on scope — brand system, marketing site, custom 3D, and the number of pages all move the number. For budgeting context on premium, custom-built sites, see our premium website cost guide. The fastest way to a real estimate is a short call about your goals and timeline.
Q. Do you handle branding, the website, or both?
Both. On Vectr, the brand system was led by Michele Angeloro and Utsubo handled design and development of the site end to end. We can start from an existing brand or build the identity and the site together.
Q. Will a heavy 3D hero hurt my Core Web Vitals?
Not if it's engineered correctly. Vectr's 3D scene renders off the main thread via OffscreenCanvas, uses GPU detection and a WebGL fallback, and ships Draco-compressed assets — and the homepage still scored 94 on Lighthouse Performance.
Q. Does the 3D work on mobile and older browsers?
Yes. The site detects GPU capability before loading advanced rendering paths, falls back from WebGPU to WebGL where needed, and serves separate 3D asset variants for desktop and mobile contexts.
Q. Can you work from our existing brand, or start from scratch?
Either. The content and design system are token-driven and modular, so we can extend an existing identity or develop a new one. The goal is a brand and a build that prove the product.
Q. Do you build multilingual sites?
Yes. Vectr launched in English with a locale-ready architecture: copy is centralized so additional languages are a content task, not a structural rebuild. We collaborate in English, Japanese, and French.
Technology-First Creative Studio
