Booking & Scheduling
Booking system
Four-step flow: service → calendar → time slot → details → confirmation. Drop-in for any service business — bakeries, clinics, studios, consultants.
The Workshop · Capability library
Features I've built.
Live and clickable.
Every card below is a real, running feature — not a screenshot, not a video.
Booking flows, AI tools, scrapers, dashboards, pricing wizards. Click anything to use it. If you see something close to what you need, that's the conversation starter.
Filter
Booking & Scheduling
Multi-step inquiry form
Four-step lead intake — project type, budget, timing, contact — with progress bar, smart routing, and a typed summary on submit. The serious upgrade over a single textarea.
Data & Automation
Sortable data table
Click any column to sort, type to filter. Status pills, source attribution, tabular numerics. The pattern for any dashboard or admin list.
Data & Automation
Tag-filterable news feed
Article cards with category chips, date stamps, color-coded tags. Drop-in pattern for blogs, knowledge bases, announcement boards.
Data & Automation
AI web scraper
Paste a URL, get structured data back — title, summary, entities, prices, contacts. The model does the parsing so your app doesn't have to.
Data & Automation
Live dashboard cards
Real-time metric cards with sparklines, percentage deltas, pulse indicators, and flash-on-update. The pattern for any dashboard or admin panel.
Data & Automation
Eligibility calculator
Pick subclass + lodgement date, get a live p50 / p90 decision estimate. Same shape works for visa wait-times, insurance pre-qual, loan affordability, refund eligibility.
Data & Automation
Drip-email sequence
5-step nurture timeline with conditional branches, expandable previews, and live open/CTR stats. Drop-in scaffold for any onboarding, lead-nurture, or re-engagement flow.
Pricing & Sales
Renovation quote builder
Interactive trade-pricing wizard — scope, add-ons, timeline, warranty tier. Built around a Brisbane builder client; same shape works for any trades quote (HVAC, electrical, paint, landscaping).
Pricing & Sales
Product catalog + cart
Filterable e-commerce grid — categories, sale/new badges, hover-reveal add-to-cart, toast on success. The drop-in pattern for any boutique storefront.
Pricing & Sales
Testimonial carousel
Auto-rotating quote slider with star ratings, generated avatars, dot pagination, keyboard arrows, and timer-reset on click. Drop-in for any social-proof section.
AI Tools
AI tagline generator
Type what your business does, get three taglines from a live model. The pattern for AI-in-the-loop content tools, copy assistants, and brief builders.
AI Tools
Multi-language switcher
6 languages (EN/ES/FR/DE/JA/AR) with brand-name localisation, currency swap, full RTL support for Arabic, and animated transitions. Internationalisation without a CMS overhaul.
UI & Motion
Before / after slider
Drag the handle to reveal the retouched frame. Photo-grading, dev-vs-design, and any other comparison story.
UI & Motion
Photo gallery + lightbox
Masonry-style grid with hover captions opens into a full-bleed lightbox — keyboard arrows, click-to-dismiss, image counter. The pattern for any visual portfolio.
UI & Motion
Animated hero background
Code-rain background with mouse-tracking spotlight and a red-hot cursor that warms characters near it — the same engine that drives this site's backdrop.
UI & Motion
Magnetic CTA button
Button bends toward the cursor on approach, then bursts into sparks on click. The microinteraction upgrade for any conversion CTA.
UI & Motion
Scroll-driven storytelling
Word-by-word reveals on scroll plus a heat-gradient progress bar. The motion pattern for editorial pages, manifestos, and product stories.
Pricing & Sales
Pricing table
3-tier comparison grid with annual/monthly toggle that swaps prices, "most popular" highlight, feature-row ticks. Universal SaaS / agency pricing.
Data & Automation
Animated KPI rings
SVG progress rings with target deltas, hue-coded by metric, click any card to simulate a new reading. The dashboard tile pattern.
Data & Automation
Gantt project timeline
8-month plan with horizontal task bars, today-line indicator, hover-tooltips with duration. For project plans, build schedules, season planners.
Booking & Scheduling
Password strength meter
Live entropy meter with criteria checkmarks, crack-time estimate, show/hide toggle. The sign-up pattern that actually nudges to strong passwords.
UI & Motion
Long-form article
Article body with sticky TOC sidebar driven by scroll-spy, reading-progress bar, share buttons. The pattern for any blog, case study, or essay.
UI & Motion
Team grid + bio modal
Filterable people cards with avatars and roles, click-to-expand bio overlay with skills tags. The about-us pattern for any agency or clinic.
Booking & Scheduling
Client portal login + 2FA
Email + password → 6-digit code → mock dashboard with open tickets and statuses. The closed-loop auth flow for any client portal.
Booking & Scheduling
Terms acceptance gate
Scrollable T&Cs with a checkbox that only unlocks after scroll-to-bottom. Pre-checkout legal gate with version + timestamp audit trail.
Booking & Scheduling
Address autocomplete
Typeahead input filters a mock postcode DB and returns structured fields. Highlighted matches, keyboard navigation, click-to-pick.
Booking & Scheduling
Map pin picker
Click anywhere on an SVG map to drop a pin, get coordinates + reverse-geocoded nearest place. For service-area selection, event venues, "where to meet".
Data & Automation
Heatmap calendar
GitHub-style activity grid across a full year with hover tooltips and a year selector. For habits, sales, logins, anything time-series.
Pricing & Sales
Exit-intent modal
Trips when the cursor leaves the top edge of the viewport or after 8s idle. Dismissible, session-storage gated against repeat fires.
Pricing & Sales
Cart drawer
Slide-in cart from the right with qty steppers, line totals, GST/shipping math, checkout-step preview. Cleaner than a full cart page.
Pricing & Sales
Coupon code validator
Mock-async coupon validation with success / error / used / expired states. Live discount math, applied-state UI, remove-coupon flow.
AI Tools
Live chat widget
Floating bubble opens a chat panel with canned-question chips, agent typing indicator, online-status dot. Sales / support / pre-demo conversations.
UI & Motion
Notification center
Bell icon with unread badge, dropdown of grouped notifications (today / yesterday / earlier), mark-as-read, mark-all-read. The pattern for any logged-in app.
Booking & Scheduling
File upload + preview
Drag-and-drop zone with image thumbnails, per-file progress bars, remove buttons, size validation, drag-over highlight. For doc upload, photos, attachments.
Pricing & Sales
Feature comparison table
Sortable 4-column feature-parity grid with sticky first column and "highlight differences" toggle. The pattern for competitive landing pages.
Pricing & Sales
Newsletter double opt-in
Signup → simulated confirmation email → click to confirm → "you're in" final state. 3-step DOI flow visualised in one page.
UI & Motion
Nested comment thread
Comments with reactions, nested replies, inline reply form, sort by newest / oldest / top. For community, knowledge base, editorial pages.
Data & Automation
Audit log viewer
Filterable event log (user / action / search) with click-row-for-diff. Shows before/after for UPDATE events. For compliance dashboards, admin tools.
UI & Motion
Instagram feed grid
3-up grid of mock IG posts with reel/video badges, hover overlay with likes + comments, gradient profile header. Closes the gabyriella auto-import pattern.
Booking & Scheduling
Onboarding checklist
5-step setup wizard with progress bar %, expandable rows, "skip for now" actions. The first thing every new user should see.
UI & Motion
Avatar cropper
Drop an image (or use the demo) → drag-to-pan + zoom + rotate sliders inside a circular mask → save 240px + 48px output. The profile-pic flow.
AI Tools
A/B variant picker
Designer-facing internal tool — render two hero mockups side-by-side, vote, see live percentage split, commit the winner. For internal design reviews.
See something you need?
These are demos, but they all started as real client work. If a capability here maps to your problem, that's the easiest way to start a conversation — point at the card, tell me what you'd change.