01 / 08
Scroll reveal
Sections fade up as the visitor scrolls. Subtle. Makes a static page feel alive without being distracting.
Hero
Services
Trust
Contact
Home · Demo
Eight kinds of motion. On a real page.
Scroll down. Each card slides across as you go, demonstrating one animation pattern you can have on your site. Use them sparingly, mix them in your hero, or pile them on for an "agency-grade" feel, they're all yours.
Animation demos
02 / 08
Parallax hero
The background drifts at a different rate than the foreground. Adds depth on scroll. Costs nothing in performance.
Your business
03 / 08
Hover tilt
Service cards lean toward the cursor. Tactile. Premium. Hover the card to feel it.
A service you offer
From your price
04 / 08
Stat counters
Numbers spin up when they enter view. Use these for your real review count, years in business, projects completed.
0Example only
0Example only
05 / 08
Marquee
Continuous scrolling text or logo strip. Great for a "trusted by" row or a long list of services that doesn't fit in a static layout.
Your services · scroll continuously · in any direction · works on mobile · works on desktop ·
06 / 08
Image mask reveal
Photos slide in from behind a colored mask. Editorial feel. Works great in galleries and before/after sections.
07 / 08
Cursor follow
A subtle accent dot trails the cursor. Used sparingly on a hero or call-to-action button. Move your mouse around inside this card.
Move me around
08 / 08
Text scramble
Headlines decrypt into place on entry. Pure attention-grab. Use once per page, never twice.
▒▒▒▒ ▒▒▒▒▒▒▒▒ ▒▒▒▒.
A few honest notes about motion
Animation is a multiplier, not a replacement. A clean static site sells better than a busy animated one. When I build for you I default to two to three subtle patterns, never all eight at once.
Which patterns suit your business depends on the niche. The defaults below come from study of what actually converts on local-business sites, not from random pairing.
Motion that fits your niche
What you get by default for each kind of local business. Override anytime, these are defaults, not rules.
Med spa · aesthetic clinic
Warm + soft
Premium feel without being clinical. The motion stays gentle so attention lands on the treatment cards and the before/after gallery.
Scroll reveal
Image mask
Hover tilt
Roofer · exterior contractor
Bold + confident
Trades clients buy confidence, not subtlety. Heavy hero, real-number counters, and a parallax that suggests scale without being a slideshow.
Parallax hero
Stat counters
Scroll reveal
Boutique fitness · studio
Tech + performance
Modern fitness brands lean dark-mode and athletic. One attention-grab in the hero, then the page stays quiet and clean below.
Text scramble
Hover tilt
Marquee
Same content, four visual styles
Same med spa, same words, same data, four totally different feels. Click any card to open the full preview in a new tab.
Built for speed, not for show
Every animation here uses the same library Apple, Google, and Stripe use on their marketing pages: GSAP. No jQuery. No React for marketing. Modern CSS does most of the work.
Page weight
Most builds land under 500KB total, fonts included. A page on your site loads in roughly the time it takes you to blink twice on home Wi-Fi.
Accessibility
Animations respect
prefers-reduced-motion. If a visitor has motion sensitivity, everything snaps into place instead of moving, no broken layout, just calm.
Mobile-first
The horizontal scroll, the hover tilts, the cursor follow, all degrade gracefully on touch screens. Most local-business web traffic is mobile, so the site is built for that first.
Lighthouse-friendly
I optimize for Lighthouse Performance, Accessibility, and Best Practices, the scores Google's own ranking algorithm cares about. Targets are 90+ across the board.
From no website to found
Act 1 · today
You don't have a website. People can't find you.
You're a local business with a Google profile, real reviews, and great work. But when someone searches for what you do, your competitors show up first because they have a site and you don't.
Act 2 · 30 seconds from now
You tell me about your business.
Form. Three fields. Your name, your business, your email. No card, no commitment, no sales call.
Aurora Aesthetics
Med spa · Denver, CO
ren@aurora-aesthetics.com
Send my preview request
Act 3 · within 24 hours
A working preview lands in your inbox.
Not a mockup. Not a Figma file. A real site you can browse, share, and decide on. Built from your reviews, your photos, your hours.
Act 4 · the week after
Customers start finding you.
Your site lives on a real domain, indexed by Google, linked from your business profile, and easy to text to a friend. The whole point.
Sarah visited your site
+3 calls from your number this week
Maria booked a consultation