Hash Kitchen — Back to School Brunch Tour
A highly visual campaign landing page built around a school-bus road-trip concept, with a custom scroll-driven SVG interaction connecting four restaurant stops.
Overview
Hash Kitchen created a Back to School Brunch Tour across four Arizona locations. The landing page needed to communicate the campaign schedule while carrying the playful school-themed visual direction through the entire experience.
The goal
The page needed to turn a simple four-stop event schedule into something that felt like a journey rather than a list of dates and RSVP links.
Visual direction
The campaign uses a school-themed visual system built around a chalkboard introduction, illustrated route, school bus and textured paper treatment. My responsibility was translating those visual assets and layouts into a responsive WordPress page.
Following the route
The main frontend challenge was the school bus. Instead of leaving it as a static illustration, I built custom JavaScript that ties the SVG bus position to page scroll so it travels along the dotted route as the visitor progresses through the tour stops.
- Scroll position
- Drives the animation
- SVG positioning
- Bus placed along the route path
- Route alignment
- Bus stays on the dotted line
- Responsive behavior
- Recalculated for narrow screens
Page structure
- Campaign introduction
- Tour route
- Chandler
- Gilbert
- Arrowhead
- Gainey Ranch
- Social / newsletter call to action
Responsive experience
Desktop allowed the illustrated route to spread across a large canvas. On mobile, the experience becomes a long vertical journey, keeping each stop readable while preserving the illustrated route and campaign personality.
From design to browser
- Platform
- WordPress
- Builder
- Salient
- Custom code
- CSS / JavaScript / SVG
Final experience
My role
I implemented the campaign page in WordPress using Salient, created the responsive layouts and custom styling, and developed the scroll-based SVG bus interaction used through the tour route.
Result
The finished page turns the four-stop event schedule into a more memorable interactive experience while keeping each location, date and RSVP action easy to find.