Sand Dollar Boat Tours — Case Study | Kelly Webmasters and Marketers

A custom 12-page flagship for one of SW Florida's top-rated boat-tour companies.

Sand Dollar Boat Tours runs ten different experiences across the Ten Thousand Islands — shelling, dolphin watching, sunset cruises, tiki, private charters, fishing, island excursions, water shuttle, bachelorette & custom events. They came to us with three priorities: look like the premium operator they are, make every tour easy to book, and delight people enough that they pick us over the boat-tour next door. The build that came out of that brief has its own signature for each tour — ten of them, no two alike.

The signature work

Every tour has its own moment.

Boat-tour sites usually template their service pages — same hero, same layout, swap the photo. Sand Dollar wanted the opposite. Each of the ten tour pages got a signature interactive that does something the other nine don't. Visitors don't have to scroll the same page twice.

Shelling Tours

A Vegas-style slot machine for the rarest shell on the Gulf.

The shelling page builds toward the junonia — a cone shell so rare on the Gulf you'd be the legend of the boat for finding one. Instead of just saying that, we built a working slot machine in pure JS + CSS — three reels of real shell photos, 7-symbol "Beachcomber Bonus" hold-and-spin, Web Audio synthesized casino sounds, and a separate Captain's Wheel that spins to pick your adventure. Both interactives play silently in your browser; both have working mute toggles and respect prefers-reduced-motion.

Play the slot machine on the live site

Naples Bay Water Shuttle page — Blue Pelican boat on the water with $20 fare

Naples Water Shuttle

An animated hop-on/hop-off route that drives the boat for you.

The shuttle stops at seven real Naples waterfront destinations — each with its own nearby restaurants, bars, and shops. Instead of a static list, the route is a live animated map: a boat icon sails the dashed turquoise line, station markers pop in with gold rings as they "arrive," nearby-spot chips stagger in around each one, and a play/pause button auto-cycles the whole loop. Click any stop to sail there manually; the animation pauses when the section scrolls off-screen so it's never wasting your battery.

Ride the route on the live site

Bachelorette Tours

"Build Her Bash" — a custom party planner that confetti-bombs when you commit.

Pick one of four vibes (Sunset Sip, Sandbar Soirée, Tiki Glam, Dolphins & Mimosas) and watch the live preview stage recolor itself via gradient transitions. Toggle up to eight add-on touches (bubbly, sash & veil, florals, photographer, playlist, charcuterie, tumblers, floats) — each pops a floating emoji token onto the stage and adds a chip to the "Her perfect bash" summary. Hit three touches and the card celebrates with a one-shot confetti burst (gracefully suppressed under reduced-motion).

Build a bash on the live site

Dolphin & Wildlife Tours

A wildlife-spotting bingo card visitors actually want to play with.

A 3×3 grid of nine real Gulf critters — bottlenose dolphin, manatee, osprey, roseate spoonbill, white pelican, sea turtle, sea star, crab, stingray. Tap one to mark it spotted (it flips to dark teal with a gold check). Live "Spotted N of 9" status, full-card pulse animation when you fill it. The kind of thing a kid will refuse to leave the page until they finish.

Fill the bingo card on the live site

Tiki Boat Tours

An immersive tropical scene that's full of theming — and family-first.

The owner had one hard rule: the Tiki Time boat is not a party boat — it's designed for multigenerational families, with 39½″ rails all the way around for kids. So the page leads with safety and ages-of-all-ages, not bachelorette-style party copy. The page itself is a full tropical scene: hand-illustrated tiki mascots at the bottom corners, a "Light Up the Tiki" LED-color mixer (five solid colors plus a rainbow party mode), foliage frames the hero, and an animated tiki-guy crew lineup divides the gallery.

Light up the tiki on the live site

How it was built

Front end

Static HTML, hand-written CSS with custom properties, and vanilla JS modules. No framework, no bundler, no build step.

Booking

FareHarbor item-grid embed, opened in a modal from every "Book" button across the site. Single embed, deduped via JS.

Maps

Leaflet 1.9.4 with CARTO Voyager tiles, custom coral markers at real lat/lng for each marina and destination.

Audio

Web Audio API — every casino/spin/win sound on the slot machine and wheel is synthesized live, no audio files.

Art

Original SVG illustrations for wildlife portholes and tour fan-outs, plus licensed cartoon tiki art for the tiki page.

Hosting

Cloudflare Pages, deployed directly from a clean staging directory. Free TLS, edge CDN, <100ms TTFB globally.

A custom 12-page flagship for one of SW Florida's top-rated boat-tour companies.