Strada Nera: Grand Touring Rentals
Brand and website for an invented grand-touring rental across North Macedonia. The cars are the show: they drive in at night, brake with real weight transfer, assemble from a blueprint, swap places in the fleet and follow the road from Skopje to Ohrid. Every car is an original SVG design.
- Role
- Brand, design & development
- Scope
- Identity, website, car design, motion
- Stack
- HTML, CSS, SVG, GSAP, MotionPath, Lenis
- Imagery
- 3 original cars, all code-drawn
Live The real website, running here. Watch the car arrive, then scroll inside the frame to drive it away.
The brief
Sell the drive, not the rental.
Most car rental sites are booking engines with a photo of a car on a white background. At the top of the market, people aren't renting transport, they're renting a feeling: the first night drive, the mountain pass, arriving at the lake.
Strada Nera needed a site that behaves like the cars it rents: confident, precise and a little theatrical, with a booking flow that still takes under a minute.
Goals
- Make the cars feel alive
- Show character, not just specs
- Sell routes as experiences
- Book a car in under a minute
The signature moments
Arrive, assemble, ignite.
- I
The arrival
The car drives in at speed; its wheels roll exactly with the distance travelled while the road slows beneath it.
- II
The blueprint
On scroll, the car is drawn line by line on a technical grid, with real dimensions.
- III
The finish
Paint floods in, the grid dissolves into a showroom, the wheels arrive.
- IV
Ignition
The wheels spin up, the body revs, the headlights flicker on and the numbers count.
Each scene is a scroll-scrubbed GSAP timeline: drive forwards, it builds; scroll back, it un-builds.
Engineering the motion
Physics you feel, not notice.
The three cars are original side-profile designs built from shared SVG parts: body, glass, pillars, lights, calipers and wheels. Any scene can drive, repaint, light or swap them.
Wheel rotation is derived from travel: every pixel the car moves becomes degrees of spin through the wheel's circumference, so the tyres never slide. When a car brakes, the body pitches forward around the front axle and settles on an elastic ease, like real suspension; when it accelerates, the rear squats.
Under the hood
- Shared SVG car system, 3 models
- Distance-true wheel rotation
- Brake dive & acceleration squat
- DrawSVG blueprint build
- MotionPath route with odometer
- Live paint recolouring
The full site: the arrival, the blueprint, the fleet, the Lake Road and a one-minute reservation.
The fleet
Three characters, one switcher.
- 01
Vento · Coupé
Low, wide and impatient.
- 02
Sera · Grand Tourer
Long-legged, in Blu Ohrid.
- 03
Alto · SUV
Tall and calm, in Argento.
Switching cars is a drive-out and a drive-in: the current car accelerates away, the next one arrives and brakes. Paint changes blend live across the body.
Color
Asphalt, bone & headlight amber
Typography
Stretched wide, read like instruments
DRIVE BEAUTIFULLY.
Aa Bb Cc Dd Ee Ff Gg 0123456789
610 HP · 0–100 IN 3.4 S
Aa Bb Cc Dd Ee Ff Gg 0123456789
The Lake Road: a car follows the real route on scroll while the odometer counts and each town lights up as you pass it.
Reservation in one card: pick-up, dates, car and extras, with a live total. Under a minute, start to finish.
On phones the car fills the road edge to edge, and every scene re-composes for one thumb.
