Skip to content
You're viewing Cinematic Motion, an example style for product launches, premium brands and events. Your site gets its own design →
Kloofwind K1 · Electric · 2027 Fictional brand · example design

Ride the kloofwind.

An electric bike for hills, headwinds and the long way home. Belt drive, 120 km of range, made to be ridden every day.

120 kmRange
85 NmMotor
21.4 kgWeight
R48,900From
02 — Inside the K1

Take it apart. Put it back.

Keep scrolling to take it apart

  1. Frame

    Hand-welded 6061 aluminium, with every cable routed inside.

  2. Battery

    720 Wh. Locks into the down tube and comes out with one key, so you can charge it indoors.

  3. Motor

    85 Nm in the rear hub. Quiet help up to 25 km/h, then it's all you.

  4. Drive

    A carbon belt instead of a chain: no oil on your trousers, no rust, no noise.

  5. Contact points

    Riser bar with a small display, a built-in 1,200 lumen light and a saddle for long days.

  6. Wheels

    27.5-inch wheels on 2.4-inch puncture-resistant tyres, for gravel and potholes.

03 — The numbers

Four numbers
that matter.

Range
120km

On one charge, in Eco mode.

Enough for a week of commuting, or one long Saturday along the coast.

Charge, 0 to 80%
2.5hours

From an ordinary wall plug.

No special charger and no garage needed. Take the battery inside with you.

Weight
21.4kg

Light enough for the stairs.

Carry it up to the flat, or lift it onto the bike rack without help.

Ride modes
3modes

Eco, Tour and Kloof.

Kloof gives everything it has for the steep stuff. Eco makes the battery last for days.

In short

Built to be ridden every day, not kept for weekends.

04 — Colour

Five colours. One is yours.

Signal Orange

From R48,900 · in stock in March

Prices and dates on this page are part of the fictional example.

05 — Why we built it

We built the K1 for the hills between the mountains and the sea. For the headwind on the coast road, the climb home after work, and the Saturday that turns into a whole day. Quiet enough to hear the birds. Strong enough that the hills stop mattering.

06 — Where it goes

Three rides. One bike.

The climb

Kloof mode gives full power on the steep switchbacks. You still pedal; it just stops hurting.

The coast road

A headwind off the sea feels like a tailwind, with battery to spare for the way back.

The commute

Lights on, belt quiet, no sweat at the office. Charge it at your desk.

07 — Specifications

The details.

Motor
85 Nm rear hub
Battery
720 Wh, removable
Range
Up to 120 km
Pedal assist
Up to 25 km/h
Weight
21.4 kg
Brakes
Hydraulic discs, 203 mm
Drive
Carbon belt
Lights
Built in, 1,200 lumen front
Sizes
S, M and L
Warranty
5 years frame, 2 years battery

Ride first.
Decide later.

Kloofwind is a fictional brand. This page shows the kind of launch site we can build for a real product, designed around that product's own brand.

About this example

Cinematic Motion: an example, not a template.

This page shows what's possible when a website has to stop people scrolling. For a real client, the design, colours, type and animation are built from scratch around their brand and their product. We keep adding examples like this one as we follow where web design is going.

A story you scroll

The bike comes apart and goes back together as you scroll, with each part explained in turn.

A sideways chapter

The page pins in place and turns sideways for the key numbers, which count up as they arrive.

Live wind

The streaks behind the headline are drawn in code, live. Your mouse and your scroll speed push them around.

Kinetic type

Letters arrive one by one, and the band of big words speeds up and leans when you scroll fast.

Colour that fills the room

Pick a colour and the whole section wipes over to match, starting from the button you pressed.

Small touches

Buttons that lean towards your pointer, a soft cursor ring and smooth scrolling on desktop.

Rules we keep, even here

  • All text is real text, so Google and screen readers can read it.
  • The animation code weighs about 55 KB when zipped, less than one photo.
  • If your phone or computer is set to reduce motion, this page stays still. The Pause button stops everything that moves on its own.
  • No fake photos: the bike and the landscapes are drawn in code.

Made for

  • Product launches and pre-orders
  • Premium and lifestyle brands
  • Events, festivals and venues
  • Architects, developers and anyone who has to be remembered

Motion work is quoted per project, because it takes more design and testing time.