All projectsProject / 02

Website / Automotive / Car wrap

Autofolije Teslić

A full-GSAP car wrap website where visitors recolour a real car across eight films before asking for a quote.

WebsiteUX/UI DesignGSAP motionColour configuratorGallery & lightboxQuote flow

Visit live project Explore the details

Client / Project: Autofolije Teslić
Focus: Website / UX/UI Design
Location: Teslić, Bosnia and Herzegovina

Project overview

A focused digital project built for clarity, trust and action.

Autofolije Teslić wraps cars in colour, chameleon and matte films, tints windows and applies paint protection film. The new version of the website starts with a colour configurator: one real photo of a car is recoloured across eight wrap films, including matte, satin and chameleon, with a clip-path wipe and a light blade, and the accent colour of the whole site follows the chosen film. A pinned 'panel by panel' process, a before and after slider, finish cards, a services index, a masonry gallery and a quote prefilled with the chosen colour follow.

The goal was to make the offer easier to understand, present the work with stronger context and create a smoother path from first impression to contact, inquiry, booking or product evaluation.

A closer look

The details behind the experience.

Open any image for a full-screen preview.

Autofolije Teslić — design detail 1 — 01 / Autofolije Teslić

Autofolije Teslić — design detail 2 — 02 / Autofolije Teslić

Case study

New colour. Same car.

Client: Autofolije Teslić
Location: Teslić, Bosnia and Herzegovina
Website: Visit live site

Wrapping is a decision about colour, so the website lets visitors make that decision first. Pick a film, watch the car change, and carry the choice straight into the quote request.

Trust and performance signals

Wrap films

Gloss, matte, satin and chameleon finishes on one real car photo.

Finishes

Gloss, matte, satin and chameleon cards with a cursor-following light.

100

Desktop Lighthouse

93 to 97 on mobile. Accessibility 99, best practices and SEO 100.

The thinking behind the work

The brief

Let people try the colour before they call.

The most common question a wrap studio gets is 'how would my car look in…?'. The hero answers it on the spot: eight films on one real photo, with the name and finish of each, and the site's accent colour switching to match.

Interaction

Full GSAP, tuned for phones.

Saira Condensed headlines, Geist and Geist Mono for text and data. Each colour change runs a clip-path wipe with a light blade across the car.

Pinned 'panel by panel' process: samples, washing and prep, application and heat, edges and checks, with squeegee wipes.
Before and after slider, finish cards with cursor light and a services index with a cursor image preview.
Masonry gallery with filters and a swipeable lightbox, plus a wrap-versus-paint comparison.

Quote

The chosen colour goes into the message.

A three-step quote form (car, service, colour and contact) is prefilled with the film picked in the hero and prepares a Viber or WhatsApp message for the studio.

How it works

A clear process from the first step to the result.

01
Photo
Prepare and mask one real car photo so it can be recoloured convincingly.
02
Configurator
Eight films with wipe, light blade and a site-wide accent colour.
03
Motion
Pinned process, before / after, finish cards and gallery.
04
Quote
Three-step form prefilled with the chosen colour, to Viber or WhatsApp.

Design assets

The visual system behind the project.

Brand system

Deliverables

What was included in the build.

Website

UX/UI Design

GSAP motion

Colour configurator

Gallery & lightbox

Quote flow

Build something similar

Need a website, web app or redesign with this level of clarity?

Send a short message about your business, market, current site and goal. Panic Digital can help define the structure, design, development and SEO foundation for the next step.

Contact Panic Digital