The motion library


Every piece here is real code from the kit, running live. Click, drag, hover and scroll. A good small-business site uses one big moment and two or three small ones; past that it starts to feel like a template. Look around, then tell me which ones feel like your shop.

30 pieces8 kindsAll running live

With reduced motion turned on in your phone's settings, the pieces skip the movement and show where they land.

Headlines and words

One-time moves for the words that matter most.

No. 01 · Scroll

Word-by-word rise


Each word rises out of its own slot. The default headline entrance on every template.

Good for: Any businessOn every site

No. 02 · Scroll

Highlighter

Day-olds are half price after noon. Still good, just not warm.

One phrase gets swiped with a highlighter, the way you'd mark the part that matters.

Good for: A deal, the hours, the one promiseAny package · pick a few

No. 03 · Scroll

Pen marks

A tech at your door the same day, and the price agreed first.

A hand-drawn circle or underline, like it was marked up on the estimate.

Good for: Trades, anything with a guaranteeAny package · pick a few

No. 04 · Scroll

Weight on scroll

Heavy duty.

Scroll the page up and down and watch the strokes.

A word goes from hairline to heavy as you scroll past it. Scroll back and it thins out again.

Good for: Trades, gyms, anything heavy dutyAny package · pick a few

Numbers

Exact numbers, never “1,000+”. The motion just gets you to the real one.

No. 05 · Scroll

Odometer

Google reviews

Average stars

Years on Central Ave

Each digit rolls up its own column to the exact number.

Good for: Review counts, years in business, jobs doneAny package · pick a few

No. 06 · Click

Price flip

/ month

Comfort Club: two tune-ups a year, no weekend fees. Cancel anytime.

Switch between monthly and yearly and the price rolls to the new number instead of jumping.

Good for: Memberships, plans, packagesAny package · pick a few

No. 07 · Drag

Thermostat dial

68°

Furnace on
House is 66° now

Drag the dial (or use the arrow keys). The page tells you what that setting means.

Good for: HVAC, pools, anything with a settingSignature piece

No. 08 · Click

Order counter

Pączki

$2.75 each · rose, custard or prune

Total

The count and the total roll like a till as you add and take away.

Good for: Bakeries, catering, any order formAny package · pick a few

Scroll

Tied to your own scrolling, so nothing moves unless you do.

No. 09 · Scroll

Paper stack

Scroll. Each step pins on top of the last.

Work order 26-0412 · Chesterton1 / 4

7:42 AM

A person answers

Sarah picks up on the second ring and asks what the furnace is doing.

Work order 26-0412 · Chesterton2 / 4

8:12 AM

A live link, not a window

No “between eight and noon.” You watch the van on a map.

Work order 26-0412 · Chesterton3 / 4

8:31 AM

Price before the wrench

Mike finds a cracked igniter and writes the price on the order first.

Work order 26-0412 · Chesterton4 / 4

9:14 AM

Heat's back on

New igniter, full check, photos in your inbox. Warm by lunch.

Fixed

Work orders pin and pile up as you scroll, one per step of the job.

Good for: Trades, repair shops, anything with stepsSignature piece

No. 10 · Scroll

Sideways menu

Today at Kolacz · scroll down to move across

Pączki

Pączki$2.75

Rose, custard, prune

Seeded rye

Seeded rye$6.50

Babcia's starter

Country sourdough

Country sourdough$7.00

Out at 9 AM

Catering basket

Catering basketfrom $45

48 hours' notice

Kołacz

Kołacz$18.00

The wedding bread

Kolaczki

Kolaczki$1.25

Apricot, poppyseed

Day-olds

Day-oldshalf off

After noon

Scrolling down slides the menu sideways while it stays put. Scroll slowly.

Good for: Restaurants, bakeries, portfoliosSignature piece

No. 11 · Scroll

Scroll timeline

  1. Day 1

    Walkthrough

    We measure the bathroom and price it on paper before you sign.

  2. Day 3

    Demo

    Old tile out, floor checked for rot. Photos sent the same evening.

  3. Week 2

    Rough-in

    Plumbing and wiring moved, inspected by the county.

  4. Week 4

    Tile and fixtures

    The part you'll actually see. You pick the grout color on site.

  5. Week 6

    Keys back

    Punch list walked together. Nothing's done until you say so.

A line draws down the steps as you read them, and each step lights when the line gets there.

Good for: Remodelers, builders, landscapersSignature piece

No. 12 · Scroll

Window parallax

Barber chair in a shop full of framed pictures
Scroll the page slowly while this is on screen: the room slides inside its frame, like looking through a window.

The photo slides inside its frame as you scroll, like looking through a window. Less is more on a real site.

Good for: Any business with a good room photoAny package · pick a few

Photos

Real photos only. These decide how they arrive.

No. 13 · Click

Wipe reveal

Baker's hands holding a round of dough

The photo is uncovered by a clean wipe and settles from a slight zoom. Try each direction.

Good for: Any hero or feature photoOn every site

No. 14 · Hover

Point and show

A barber in a hat fading a client's sides

40 min

Point at a service and its photo slides into the frame beside it. On a phone, tap.

Good for: Barbers, salons, menus, servicesAny package · pick a few

No. 15 · Drag

Then and now

Heating & cooling · Valparaiso

Cold house?
Warm by lunch.

ABC HEATING & COOLING

Welcome to Our Website!!!

Quality Service Since 1999 ~ Call Today!!

Click Here For Coupons

PAGE UNDER CONSTRUCTION

Visitors: 004127

Best viewed in Internet Explorer 6

2012 builderLumen
⇆

Illustration: the left side is a made-up business, not a real site.

Drag the handle to compare. For a real before-and-after, it only ever uses your own matched photos.

Good for: Detailers, cleaners, remodelers, salonsSignature piece

No. 16 · Click

Photo stack

Skin fade · 1 of 4 · tap the top print

A stack of prints on the counter. Click the top one to toss it to the back.

Good for: Shops with a few good photosAny package · pick a few

Buttons and taps

Something answers every press, then goes still.

No. 17 · Hover

Sliding fill

The color slides up from the bottom and the arrow nudges over. On every template.

Good for: Any businessOn every site

No. 18 · Hold

Hold to book

Press and keep holding. Keyboard: Enter.

Press and hold to confirm, so nobody books a chair by accident. Let go early and it drains back.

Good for: Booking, ordering, anything you can't undoAny package · pick a few

No. 19 · Click

Copy the number

Click the number to copy it, with a pen-drawn check. On a phone it just dials.

Good for: Any business that wants callsOn every site

No. 20 · Click

Star rating

Rate it and it answers back. Everyone gets the same thank-you, which is what Google's rules require.

Good for: Any business that wants reviewsAny package · pick a few

Forms

Paper, not boxes. You can tell it landed.

No. 21 · Type

Paper field

Type a number. The tick shows up at ten digits.

The label lifts, the line draws in, and a tick shows up once it's a real phone number.

Good for: Every contact or estimate formOn every site

No. 22 · Click

Pen tick

What are you coming in for?

Square boxes ticked with a pen stroke, not a stock check mark.

Good for: Every form with choicesOn every site

No. 23 · Click

Received stamp

Estimate requestNo charge

Send the form and it gets stamped RECEIVED, so the customer knows it landed.

Good for: Estimate and booking formsOn every site

Live answers

Answers the question a customer would otherwise call about.

No. 24 · Drag

Open-now line

Closed · opens 6 AM today

SunMonTueWedThuFriSat

First Shift's real hours. The dot only pulses while the shop is actually open.

Open or closed, worked out from the real hours. On a site it reads the real clock; here you can drag the time.

Good for: Every business with hoursOn every site

No. 25 · Click

Wait board

First Shift · Portage · walk-ins

Current wait for a walk-in chair.

On a real site the barber taps these from their phone.

Today's wait on a split-flap board. The shop updates it from their phone in one tap.

Good for: Barbers, walk-in clinics, food trucksSignature piece

No. 26 · Click

Do you come to me?

ChestertonPortageMichigan CityWheelerHobartCrown PointKoutsLa PorteHammondRensselaerOur shop · Valparaiso

Where's the job?

Pick a town: a pin drops and the drive time draws from the shop. Outside the area, it says so.

Good for: HVAC, plumbing, cleaning, deliverySignature piece

Paper and objects

The most human ones: things a shop actually handles.

No. 27 · Click

Stamp it

Invoice 26-0412Chesterton

Igniter, Honeywell Q3400A$186.00

Labor, 1.2 h$114.00

Total$300.00

Click anywhere on the invoice.

Click the invoice to stamp it. A thud, not a glow.

Good for: Trades, anything with paperworkAny package · pick a few

No. 28 · Click

Receipt printer

Your order prints out of a slot line by line, with a torn edge.

Good for: Bakeries, cafes, order pagesAny package · pick a few

No. 29 · Drag

Tear-off coupon

Cranefield · fall tune-up

$25 off your furnace tune-up

Good through December 31.

Drag the stub to tear it off (or just click it). The code shows up underneath.

Good for: Any business that runs a dealAny package · pick a few

No. 30 · Click

Open sign

Click the sign on its nail: it flips over and swings to a stop.

Good for: Shops, cafes, barbersAny package · pick a few


These show up on a lot of new sites, and they're a big part of why those sites all feel the same.

  • A spotlight that follows your mouse around
  • Cards that bob and float on their own
  • Borders that glow and breathe
  • A typing cursor that never stops blinking
  • Every block fading up on every scroll
  • Confetti

Seen one that feels like your shop? Tell me which, and it goes in your preview.

Get a free preview