Tires, lubricants, batteries and service for fleets and government
Grupo IAP
A landing page with a 3D tire that shows everything the company does and turns visits into quotes.
Visit the live site · grupoiap.com.pe503
Error 503
Service unavailable
- Before:
- A site that was down, template-like and invisible on Google.
- After:
- A 3D hero that shows the business and leads to a quote.
The problem
The previous site had gone down. It also looked like a template, had no photos of its own or description for Google, showed an email address with a typo and broke on mobile.
In practice, it didn't show what the company does or who it serves.
The solution
A new site with a 3D hero: a tire generated in real time drops as you scroll, leaves its print when it touches the ground, and the word «rueda.» gains weight at that moment.
Each business line has its own section (tires, lubricants, batteries and service), along with fleet and government sales, the company's story since 2015 and contact details with map and hours. Quotes are put together on the site and go straight out via WhatsApp or email, and on mobile there's a sticky WhatsApp button.
The result
Grupo IAP now has its own site that explains its four business lines and its fleet and government service, with direct quotes and a mobile-first version.
On desktop, Lighthouse scores 100 for performance, accessibility, best practices and SEO.
On screen
Under the hoodTechnical details
Stack
- React 19
- Three.js
- GSAP + ScrollTrigger
- Vite 8
- Custom SSR prerender
- A procedural tire of about 400,000 vertices generated in a Web Worker, with staggered texture uploads and asynchronously compiled shaders so loading never stalls.
- Device-aware performance: rendering only while the hero is visible, adaptive resolution based on frame time and a still image when WebGL2 isn't available.
- A "soft brake" on scroll so the scene is never left half-way, without breaking sticky elements.
- A static site with prerendering: Google and link previews get the content without running JavaScript.
- A design process in documented phases: audit, three scored concepts, art direction and implementation. AI-generated images are labeled as illustrative.