The Effects Shelf

Grab the photo strip and flick it: it keeps gliding with momentum, slows down and snaps to the nearest photo.

Best for: Remodelers, landscapers, detailers and salons with 6-12 real work photos.

✓ OK to use Not on the never list: nothing moves unless you drag it, and arrow keys work. Caution: phones already swipe a plain scroll strip for free, so it earns its 45 KB on desktop-heavy sites only. Put the best photo first.

Service cards turn over in 3D when you tap “See price”: the front says what it is, the back shows the price and the guarantee.

Best for: Trades and cleaners with 3-4 flat-price services; salon packages.

✓ OK to use Not on the never list: only a tap turns a card. Caution: the back is hidden until tapped, so keep the main price visible somewhere else too, and keep both sides short.

Photos stand on a turning 3D ring; drag it or tap the arrows to spin the next one to the front.

Best for: Salons, barbers, nail and tattoo studios showing styles; restaurants showing dishes.

✓ OK to use Not on the never list as long as it never autoplays (this one doesn't). Caution: the photos at the back are hard to see on a phone, so use it for mood, not for anything people must read.

Tap “Add” on an extra and a small price chip flies in an arc into the estimate total, which bumps and updates.

Best for: Cleaners and detailers with add-ons (oven, fridge, pet hair), HVAC tune-up extras, restaurant order buttons.

✓ OK to use Not on the never list: it only runs after a tap and confirms what happened. The total is live text (aria-live) either way.

Trust badges (licensed, insured, same-day, 4.9 stars) fall in with real gravity, bounce once and settle into a row.

Best for: The trust row under the hero: plumbers, electricians, pest control, cleaners.

✓ OK to use Not on the never list: plays once when seen, about a second, and the badges are real text. Caution: it is playful, so one row of short, true facts only.

A Grid / List toggle on a services or menu block: every card glides to its new place instead of jumping.

Best for: Restaurants (menu as photos or as a price list), salons with long menus, multi-service trades.

✓ OK to use Not on the never list: runs only on a tap and never hides anything; with reduced motion it just switches.

An illustrated scene (sky, hills, house, fence) where each layer moves at its own speed as you scroll past, so it looks deep.

Best for: Landscapers, pool builders, roofers and other outdoor businesses with an illustrated band.

✓ OK to use Not on the never list (batch 1 has single-photo parallax; this is several layers). Caution: one band per page, layers move a few pixels and never sit behind text.

A soft coloured shape behind a section slowly melts between organic shapes, like a lava lamp.

Best for: Salons, med spa, cafes, kids' services: friendly brands with flat colour.

✓ OK to use Not on the never list: decoration behind real text; it pauses off screen and stays still with reduced motion. Caution: keep it slow and pale or it pulls the eye from the button.

An “OPEN, walk-ins welcome” sign drops onto the counter, squashes as it lands, bounces and settles.

Best for: Barbers, cafes, bakeries and nail bars that take walk-ins: show today's hours.

✓ OK to use Not on the never list: plays once when seen (about 1.5 s) and the sign is real text.

A grid of service buttons that lean toward the mouse, the closest one most, like iron filings near a magnet.

Best for: “What do you need?” pickers with 6-9 choices on desktop: trades, salons.

✓ OK to use Not on the never list (batch 1 has one magnetic button; this is a whole grid). Desktop only: buttons lean 8 px at most and never dodge a click. Phones see plain buttons (Replay shows a scripted sweep).

The whole page glides on with momentum after you stop scrolling, and photos drift at slightly different speeds.

Best for: Agency portfolios and luxury brands on desktop. Not call-first local businesses.

✕ Breaks rule: scroll-jacking It replaces the browser's own scrolling, so the page no longer moves with your finger or wheel. It stutters on mid-range Android phones, fixed headers and call bars need rewiring, and it adds 52 KB of script before scrolling feels right.

A “how it works” section freezes on screen while you scroll; the three steps and their photos swap in place, then the page moves on.

Best for: App and product launches with a real 3-4 step story. Batch 1's scroll-drawn steps tell a trade's story without holding the page.

✕ Breaks rule: scroll-jacking (pinned section) The screen stops moving while you keep swiping, so on a phone it feels stuck; people flick past steps 2 and 3, and the next section (often the call button) is several swipes further away.

Scroll down and the section locks; the row of project photos slides sideways instead, then the page carries on.

Best for: Architects and design studios with 4-6 curated projects, seen on desktop.

✕ Breaks rule: pinned horizontal scroll Scrolling down moves things sideways, which nobody expects on a phone; the page feels frozen, the last photos are effectively hidden, and keyboard and screen-reader users can't reach them in order.

The page turns into a deck of full-screen panels: one swipe or wheel flick slides the next panel in.

Best for: One-off event or launch microsites. Not a business's main site.

✕ Breaks rule: scroll-jacking Every swipe jumps a whole screen, so you can't skim or stop halfway, content gets cut to one screen per idea, and find-in-page, back-to-top and the browser's own scrolling stop working normally.

A dark curtain with the logo and a 0-100% counter, then it wipes up and the headline rises in.

Best for: Fashion and portfolio sites where the intro is part of the brand. Never in front of a Call button.

✕ Breaks rule: preloaders It covers a page that has already loaded, so every visitor waits 1-2 s before seeing the phone number; slow phones wait longer, and Google counts the delay against the page (LCP).

Service cards stick near the top one after another; each new card slides up over the last, which shrinks back into a stack.

Best for: SaaS feature lists and agency case studies on desktop.

✕ Breaks rule: scroll-jacking (pinned cards) Each card is pinned while the next slides over it, so the page holds still under the finger and the covered cards' text disappears; it also makes the page several screens taller on phones.

The mouse pointer becomes a dot with a trailing ring that grows over buttons. On phones, Replay plays a short scripted tour.

Best for: Creative agencies, photographers and galleries on desktop.

✕ Breaks rule: custom cursors It hides the real pointer, trails behind the hand, doesn't exist on phones (most local-business traffic), and confuses people with older eyes or trackpads. It also runs code on every mouse move.

The headline shows random letters that lock into the real words from left to right, like a code-breaking screen.

Best for: Tech, security and gaming brands; a 404 page. Not a service business's headline.

✕ Breaks rule: typewriter headlines Like a typewriter headline, the most important line on the page is gibberish for over a second; screen readers get the real text (aria-label) but people see noise first, and changing letter widths can re-wrap lines.

The letters of a headline start scattered and spinning, then fly together into the words.

Best for: Event posters, a launch splash, a venue's “This Friday” banner.

✕ Breaks rule: typewriter headlines (same harm) The rule bans headlines that build themselves letter by letter; this is the same thing with flying letters. The words can't be read until they land, and dozens of letter spans make the heading heavier for slow phones.

Job photos slide past one by one in an endless loop, with previous / next / pause; it pauses on hover, touch, focus or off screen.

Best for: Hotel, venue or wedding photo strips where mood matters more than any one photo.

✕ Breaks rule: autoplay carousels Slides leave while people are still reading the caption; it keeps using battery, pulls the eye from the call button, and only the first slide really gets seen (the rest is hidden content).