Case study · 2026
Cicatrissim
A direct-sales landing page where the tube is a 3D object that falls from one section to the next without leaving the screen, and it still scores 100 on PageSpeed.
- Client
- Cicatrissim
- Industry
- Stretch mark skincare
- Deliverable
- Sales landing page
- Year
- 2026
- Live
- Livelp5.cicatrissim.com.br
01 · The website
Running right here
A copy of the website runs inside this page: scroll, click and switch between desktop and mobile. The site itself is in Portuguese, and its contact form is turned off here.
02 · The challenge
Visitors come from an ad, on their phone, and decide in seconds. The page had to load instantly and, at the same time, make the product the star from start to finish.
03 · The answer
The tube became a 3D object in plain WebGL, generated from the silhouette measured on the product photo. It spins at the top, falls from one side rail to the other between sections and, in the offer, multiplies into the three kits. The 3D only starts on the first interaction: until then an identical photo is shown, and that is what keeps the top score.
- Landing page
- 3D product in WebGL
- Offer with three kits
- Integrated checkout
- Tracking only after consent
- Prices editable without code
04 · How it was made
Seven stages, one team
Each stage has an owner and a sign-off before the next one. AI is a tool in the process, never the author.
- 01Strategy and content
Discovery
Review of the previous page and of the offer. The content was kept, the order was rethought for selling.
- 02UX and architecture
Strategy and content
Problem, proof, ingredients, results, offer, guarantee and questions, in that order, with a buy button always close.
- 03Art direction
Architecture and wireframes
Each section says where the product sits: right rail, left rail or a slot inside the section, on desktop and on mobile.
- 04Motion and interaction
Art direction
The brand orange in gradient, cream and dark ink. Archivo Black for the impact word at the top.
- 05Development
Development
Custom WebGL with no library, a custom scroll engine and inlined CSS. Prices and checkout links live in a configuration file.
- 06SEO, AEO and data
SEO, AEO and performance
Product schema, metadata and consent before any pixel.
- 07Quality and performance
Testing and delivery
PageSpeed on mobile and desktop, tests of the offer and of the consent screen.
05 · From wireframe to layout
Structure before style
Six screens along the scroll. Drag the divider: on one side the structure (blocks, headings, images and buttons), on the other the final layout.
06 · Art direction
Colors and type
- Orange#f26a1f
- Light orange#ff8a4c
- Deep orange#c64a0c
- Ink#211915
- Taupe#6e625a
- Cream#fbf6f1
- Archivo BlackImpact
- MontserratText
07 · Measured, not promised
PageSpeed scores
Mobile and desktop.
- 100Performance
- 100Accessibility
- 100Best practices
- 100SEO
08 · Who thought through each part
Seven disciplines, one website
- 01
Strategy and content
Who arrives, what they need to understand and in what order. The story is defined before any screen.
- 02
UX and architecture
Page map, wireframes and the path to the contact, tested on mobile first.
- 03
Art direction
Palette, typography, photography and the signature element that makes the site recognizable.
- 04
Motion and interaction
What moves, why and how fast. Everything respects visitors who ask for reduced motion.
- 05
Development
Hand-written code, no page builder: light HTML, inlined critical CSS and a custom admin panel when the client needs one.
- 06
SEO, AEO and data
Structure for Google and AI assistants: schema, answer-ready FAQ, metadata and privacy consent.
- 07
Quality and performance
PageSpeed, accessibility, security and testing on desktop and mobile before delivery.
Want a website like this?
Tell us about your project. Bertoni replies the same day, on WhatsApp or by email.