Stetic Clinic Verasi

Clínica Verassi is an aesthetics clinic in Brazil. Its promise is not transformation but recognition: "the art of revealing what is already genuinely yours."

Studio Viss built all of it. Brand direction, visual identity, copy and site, from one idea: reveal.

That idea is the interaction vocabulary, not just the wording. Nothing slides in from the side or bounces. Text rises line by line out of a mask. A word lights up as you read past it. A button draws its own outline before you press it. The before-and-after cases are not a fade, they are a divider you pull across the face yourself. The site behaves the way the clinic describes its work: nothing added, something uncovered.

Every section runs on a code component written for it.

The before/after divider moves with clip-path: inset() driven by one CSS variable. No width animation, so no layout pass, and no React state during the drag: the handler writes one value; the clip, the line and the grip read it.

The horizontal gallery and the opening window pin with position: sticky and turn scroll into transform only, measuring the real container width, not the window, so the last photo lands on the edge.

The reveal text never splits into spans by measuring line breaks. One is a gradient clipped by the letterforms, the other uses the breaks you typed. No library, no re-measure on resize.

The film grain is SVG turbulence, generated in the browser. No raster, no request.

Timers run only while their section is on screen, and stop in a hidden tab. Hover is CSS, so those components render once and never again. One image loads eager, twelve lazy. Video ships preload="none" behind a poster.

Accessibility was a constraint, not a pass at the end. Real buttons, not clickable divs. Focus-visible mirrors every hover, so a keyboard gets what a mouse gets. Decorative layers carry aria-hidden. Reduced motion is honoured, and status never depends on colour alone. One H1.