Business Website
RHBC Services
A six-page premium marketing website for a Queensland construction and demolition services company—featuring GSAP-powered animations with magnetic buttons, three-dimensional card interactions, and a custom cursor, a filterable project portfolio with before-and-after transformation sliders and full-screen lightbox, four dedicated service pages, and a conversion-optimised contact system with real-time validation and budget qualification.
A construction and demolition company on the Gold Coast needed a site that could compete with firms ten times their size. The brief was clear—premium feel, fast performance, and a portfolio that could showcase transformation work as convincingly as the work itself. Generic WordPress templates were off the table.
The result is a six-page Astro site where every interaction is deliberate. A custom cursor tracks across the viewport, buttons follow the mouse with magnetic pull, project cards respond to cursor position with three-dimensional perspective shifts, and nine scroll-triggered animation functions orchestrate content reveals across every section. A filterable portfolio showcases completed work with before-and-after comparison sliders, and a validated contact form qualifies leads by project type and budget range before submission.
6
unique pages
17
React components
6
service categories
9
animation utilities
Interaction Design
Every interactive element runs through GSAP with ScrollTrigger orchestrating viewport-based reveals. Nine reusable animation functions handle fade-ins, stagger sequences, split-text reveals at character, word, and line level, number counters, and parallax depth effects. Lenis provides locomotive-quality smooth scrolling across the entire site, and SplitType powers granular text animations on headings and feature copy.
Magnetic Buttons
Cursor Follow · Elastic
3D Tilt Cards
Perspective · Glow
Custom Cursor
Dual Layer · Scaling
Text Reveals
Split · Stagger
Buttons track the cursor at a thirty-five percent offset, creating a magnetic pull effect with an elastic bounce on release. Project cards calculate real-time cursor position to apply three-dimensional rotation up to ten degrees on each axis, paired with a dynamic glow that follows the pointer. A dual-layer custom cursor—an outer ring and inner dot—follows with a smooth lag, scales on interactive elements, and hides automatically on touch devices. All animations respect the reduced-motion preference.
Portfolio & Transformation Showcase
The portfolio page features a multi-field filtering system with real-time search, category selection, budget range, and location filtering with three-hundred-millisecond debounce. Each project carries before-and-after transformation images presented through draggable comparison sliders with touch and keyboard support.
A full-screen lightbox opens project galleries with keyboard navigation, swipe gestures, and escape-to-close. Project metadata includes location, duration, budget range, and specific achievement highlights—giving prospective clients concrete evidence of capability before they make contact.
Conversion System
The contact form validates fields in real time with project type selection, budget range qualification, and a character counter on the message field. Submission triggers GSAP-animated success and error states. A floating emergency call-to-action button provides instant mobile access to the business phone number.
Trust signals are layered throughout—four verified testimonials with star ratings and company affiliations, animated stat counters showing five-hundred-plus projects and ninety-eight percent satisfaction, and a certifications bar displaying licensing, insurance, and safety credentials. The sticky navigation keeps a quote button and phone number visible at all times.
Project Mgmt
Concrete Cutting
Procurement
Skilled Labor
Office Strip Out
Waste Removal
Complete Platform
Marketing Platform — 6 Pages
Interaction Engine
Design and Performance
Infrastructure
Role
Sole Developer
Timeline
2025
Stack
Astro, React, GSAP, Tailwind CSS, TypeScript
Back