FRAMER COMPONENT · SCROLL EFFECT

Waypoint Road

A road that draws itself as the page scrolls. A vehicle drives from stop to stop, and every stop lights up when it gets there.

2 to 8 stops

Row or column

Truck, van, bike, dot, icon

Smooth, scroll-linked

SCROLL TO DRIVE

01 — ROW · TRUCK · FULL WIDTH

Show the whole trip, not a status label.

Five stops for a parcel. Scroll, and the truck drives the road while each stop lights up as it arrives. Scroll back up and it turns around.

Order placedWe confirm the order and book a slot.
PackedPicked, checked and sealed at the warehouse.
On the roadLive tracking from the first mile.
Out for deliveryThe driver calls ahead when close.
DeliveredSigned, photographed and closed.

02 — COLUMN · BIKE · NUMBERS

A process people actually read.

Five steps in a column, the way a phone shows them, at any width. The courier bike rides down as the page moves and each step comes into focus.

Discovery callThirty minutes to understand the goal, the deadline and who decides.
ProposalA fixed scope and a fixed price, in writing, within three days.
Design sprintTwo weeks of screens you can click, reviewed together every Friday.
BuildShort releases on a staging site you can open at any time.
Launch and careGo live, then a month of fixes and fine-tuning included.

03 — YOUR ICON · AUTO LAYOUT

Drop in your own icon.

Upload any image that faces right: a plane, a rocket, your mark. Here a paper plane flies the product roadmap, and on a narrow screen the same instance turns into a column by itself.

Q1 – Private betaTwenty teams, a weekly call with each.
Q2 – Public launchSelf-serve sign-up and billing.
Q3 – IntegrationsChat, docs and automation tools.
Q4 – Mobile appsiOS and Android, offline first.

04 — PROPERTIES

Every setting lives in the panel.

No code to touch. Select the component and change the stops, the vehicle, the road and the motion from the right-hand panel.

Stops

STOPS

2 to 8 stops, each with a label and a caption, spaced evenly along the road.

NUMBERS

Shows 01, 02, 03 above each label.

Layout

LAYOUT

Auto, Row or Column.

SWITCH AT

In Auto, the width of the component below which the road turns vertical.

GAP, TEXT GAP

Space between stops, and between road and text.

Vehicle

VEHICLE

Truck, Van, Bike, Dot, or Custom: your own image, facing right.

SIZE, PAINT, OFFSET

Width, color and distance from the road.

ROTATE, TURN BACK

Turns on a vertical road, faces back when the page scrolls up.

Road

ROAD, ROAD WIDTH

Asphalt color and thickness.

LINE, DASH

Center line color and dash length, 0 for solid. It draws itself behind the vehicle.

FADE ENDS

Softens the road before the first stop and after the last.

Stop markers

STOP, STOP LIT

Marker colors before and after the vehicle arrives.

STOP RING

Usually the background color.

STOP SIZE, UPCOMING

Marker size, and the opacity of stops still ahead.

Type

LABEL FONT, LABEL

Font and color of each stop name.

CAPTION FONT, CAPTION

Font and color of the captions.

Motion

START, END

Where on the screen the trip begins and ends.

PAUSE

Scroll spent waiting at each stop, 0 for a steady drive.

SMOOTHING

Spring smoothing of the scroll.

PREVIEW

Where the vehicle stands on the editor canvas.

Built in

FIRST PAINT

The served page already shows the whole road and every stop.

REDUCED MOTION

The trip stays finished and still.

ACCESSIBLE

Stops are a real ordered list; road and vehicle are decorative.

Waypoint Road

A Framer code component by Litchi Solutions. Scroll-linked with framer-motion; the served page already shows the finished road, and reduced motion keeps it still.