Acme Auto Detailing
Auto detailing
$5,500
The Lab · Live components
What a modern website can actually do.
Every block on this page is real, working code — the same patterns we ship to clients. Drag, scroll, tap, draw. No frameworks, no bloat.
Heads up — most demos respond to tap and drag on mobile (no hover, so press and move).
Four interactive proofs
Touch anything. It works.
Every card on this page is a working component, not a screenshot. Same code that powers our agreements, audits, and dashboards.
Demo 01
Pointer events · Canvas · DPR-aware
Drawable signature pad
Powers our service-agreement signing. Captures pressure-aware strokes on mouse, touch, and stylus.
Sign here
Drag to draw — works with mouse, finger, or stylus.
Demo 02
Live data binding · No reload
ROI calculator
Drag the slider — every number updates live. The same pattern we use for client dashboards.
Try it
How many missed calls per month?
12 / mo
Assumes $149/mo missed-call textback service recovers 25% of missed calls into booked jobs at avg $450 ticket.
Demo 03
Kinetic typography
Rotating headlines
Vertical-flip word swap with width-stable layout — no jitter, no reflow.
Built for plumbersdetailersdentistsrealtorsHVAC techsbarbers .
Drop a list of words, get a kinetic headline. ~2 KB.
Demo 04
Hover this card · Move cursor near button
Magnetic + 3D tilt
The card tilts under your cursor. The button leans toward your cursor. Both gated by hover capability + reduced-motion.
Try on desktop — both effects are touch-disabled by design.
Custom admin · CRM lite
The back office, built around how you actually work.
Every business has 8–15 SaaS tools doing what one custom admin should. Below: four working pieces of the kind of CRM lite + back-office we ship to clients. Drag, edit, search, sort.
Drag-and-drop pipeline
Pipeline · drag to move
7 leads · $42,800
New 0
Northwind Bar & Grill
Restaurant
$3,200
Sample Furniture Co.
Furniture
$2,800
Contacted 0
Riverside HVAC
HVAC
$8,400
Bluebird Salon
Salon
$4,100
Qualified 0
Oak & Pine Dental
Dental
$12,500
Won 0
Maple Plumbing
Plumbing
$6,300
Try dragging a card. Stage counts + total update live. Same engine on a real client CRM.
Admin home page
Admin · Overview
Welcome back.
Pipeline
$0
+12% vs last 30d
New leads
0
+5 this week
Bookings
0
3 today
Reviews
0%
Avg ★ 4.8
Pipeline by stage
Recent activity
- New booking — Acme Auto Detailing 2m
- New lead — Riverside HVAC 14m
- Invoice #1042 marked paid — $3,250 1h
- 5★ review left by Bluebird Salon 3h
KPIs animate on enter. Pipeline bars, activity feed — the home screen owners actually log into.
Live invoicing
Invoice #1042
To: Acme Auto Detailing
Issued today
| Description | Qty | Rate | Amount | |
|---|---|---|---|---|
| $3,500.00 | ||||
| $500.00 | ||||
| $105.00 |
Subtotal$4,105.00
Tax (8.6%)$353.03
Total$4,458.03
Edit any field — totals + tax recalc live. Add or remove lines. Replaces the QuickBooks invoice screen.
Filterable customer list
Customers
| Customer | Plan | MRR | Status |
|---|---|---|---|
| Acme Auto Detailing hello@example.com | Growth | $499/mo | active |
| Northwind Bar & Grill hi@example.com | Starter | $149/mo | active |
| Riverside HVAC office@example.com | Operating | $1,499/mo | active |
| Bluebird Salon info@example.com | Growth | $499/mo | paused |
| Oak & Pine Dental admin@example.com | Operating | $1,499/mo | active |
| Maple Plumbing dispatch@example.com | Growth | $499/mo | active |
| Sample Cafe Co. hello@example.com | Starter | $149/mo | trial |
No matches.
Type to filter. Click any column header to sort. The kind of admin table on every client portal we ship.
These four are building blocks. A real client admin combines them — pipeline + dashboard + invoicing + a customer list — plus the pieces unique to your business: inventory, dispatch, payroll, scheduling. All wired together. All yours to own.
Eleven more patterns
Building blocks for any site we ship.
Each card is a self-contained component you'd see on a real client site — pricing tables, audits, dashboards, branding tools. Tap, drag, hover, click.
Demo 05
Drag to reveal
Before / after slider
Drag the handle. Common audit / redesign UI — show clients the lift visually.
After
Before
Demo 06
Cursor-tracked gradient
Spotlight card
Hover anywhere on the card. The radial light tracks your pointer in real time.
Live preview
Move your cursor across this card.
A radial gradient tracks the pointer in real time. Modern dashboards lean on this to make static panels feel alive without distracting motion.
Demo 07
Animated indicator
Tabs with morphing pill
Click between tabs — the rust pill smoothly resizes and slides instead of teleporting.
Real-time metrics for the things that move revenue — bookings, calls, reviews, conversion. Built on top of your real data, not a generic SaaS.
Pipeline, contacts, follow-ups, and notes — shaped exactly to your sales motion. No checkbox features you'll never use.
The boring stuff that happens at 2am — review requests, missed-call texts, payment reminders, lead routing. Quiet. Reliable.
Custom agents trained on your docs and workflows. Drafting emails, qualifying inbound, summarizing transcripts — wired into the tools you already use.
Demo 08
Canvas particles
Confetti micro-interaction
Click the button. We use this on form submit success — small delight, big retention bump.
Tap repeatedly. Each click spawns a fresh burst.
Demo 09
3D flip on hover
Pricing flip card
Hover the card to see what's inside. CSS 3D transforms — no library.
Starter
$2,500
Website + booking
Hover to see what's inside →
What you get
- 5–7 page custom site
- Booking + intake form
- Google Business setup
- Mobile-first, fast
- Owned by you
Demo 10
Slot-machine digits
Odometer counter
Each digit cascades into place. Drives home revenue dashboards and KPIs.
Recovered this quarter
$ 01234567890123456789012345678901234567890123456789
Demo 11
Generative color tool
Brand palette remixer
Click "Remix" — fresh harmonious 5-color palette every time. Used on real client branding tools.
Brand palette
#B85C38
#CC7A58
#6B7A5A
#1C1B18
#F3EFE6
Demo 12
Toggle + price morph
Monthly / annual toggle
Conversion-tuned pricing pattern. Click the switch — every price + label updates in sync.
Monthly Annual −2 mo
Starter
$49$490/mo
Website + booking
Growth
$299$2,990/mo
Site + reviews + missed-call + SEO
Operating system
$999$9,990/mo
Full custom CRM + automations
Demo 13
SVG path-draw
Animated checklist
Tap each item — the checkmark draws on with a stroke-dashoffset animation. Onboarding gold.
Launch checklist — tap to tick
Demo 14
Typed text loop
Typewriter cycler
Types, holds, deletes, retypes. Use it to rotate value props in a hero — same effect as a rotating word but more cinematic.
We help you |
Demo 15
RGB-split on hover
Glitch text
Hover the headline below. Pure CSS pseudo-elements + clip-path keyframes — no JS.
HELLO.
Scroll-driven SVG
Three ridges drawing themselves.
Each line uses stroke-dashoffset mapped to scroll position. Different speeds = layered depth. Same technique on our case-study pages.
Scroll up and down — the ridges draw + un-draw with you.
01 · Built
Software you can touch.
Real working dashboards, agreements, audits, intakes — not slides, not mockups. Every interaction on this page is the actual code we ship.
01
02 · Owned
Code, hosting, data — all yours.
Domain in your name, hosting under your account, code in your GitHub. We hand over the keys at launch. No platform lock-in, no "we keep it on our servers."
02
03 · Profitable
Pays for itself in months.
Replace 8 SaaS tools with one. Recover missed calls. Convert reviews into bookings. Every project ships with a measurable revenue mechanic — not just a prettier site.
03
Scroll-tied text reveal
Each word fades in as you scroll past it. Scroll back up and they un-reveal — this isn't a one-shot trigger, it's tied to your scroll position frame by frame. Editorial sites use this to make long copy feel like a guided performance instead of a wall of text.
Scroll back up to see it reverse →
Sticky text · cycling visual
Walk the user through five steps in one screen.
Left column pins. Right column scrolls. The active step on the left swaps as each visual on the right enters the viewport.
1/5
- Audit
- Plan
- Build
- Launch
- Compound
Audit
Tell us about your business. We personally walk through your site, stack, and operations.
Plan
48 hours later, a written plan lands in your inbox — fixes ranked by revenue impact.
Build
Custom website, internal tools, dashboards, automations — built from scratch, owned by you.
Launch
Hosting, domains, accounts — all in your name from day one. We hand over the keys with documentation.
Compound
Growth systems run quietly in the background. Reviews, missed-call texts, SEO content. Compounding monthly.
01 / Audit
02 / Plan
03 / Build
04 / Launch
05 / Compound
Horizontal-on-vertical scroll
Scroll down — the strip slides sideways.
The Apple / Stripe / Linear pattern. The outer section pins to the viewport while a wider inner track translates X with your scroll. Perfect for portfolio strips and feature reels.
Build 01
Service-business CRM
Custom pipeline, contacts, follow-ups. Replaces HubSpot at $0/seat.
Build 02
Field-tech dispatch
Mobile-first job board, GPS routing, photo capture, customer SMS.
Build 03
Inventory + reorder
Stock thresholds, supplier orders, barcode scan — runs your back office.
Build 04
AI intake agent
Answers FAQs, books calls, qualifies leads. Trained on your docs.
Build 05
Invoicing + payments
Stripe-backed invoicing, auto-reminders, recurring billing.
Scroll-bound color shift
Background morphs through the brand palette as you scroll.
Cream → charcoal → rust → sage. Background and foreground both interpolate in real time. Useful for stitching dark and light bands without a hard cut.
Keep scrolling ↓
Cursor experiences
Nine ways to make the cursor part of the brand.
Each card has its own scoped cursor effect. Hover into any of them — your real cursor stays free outside the card. These are the same techniques we drop into hero sections, "feature sells," and product pages where the cursor needs to do real storytelling.
DOT + RING
Move your cursor
ELASTIC CURSOR
Move fast, then stop
STICKY CURSOR
INK TRAIL
Drag your cursor across
TRAIL OF DOTS
Move in lazy circles
MAGNETIC FIELD
Move slowly across the grid
Hello, light.
You found the secret. This is the kind of "scratch off" reveal we use on launch pages and easter eggs.
SPOTLIGHT REVEAL
Move your cursor to uncover ↓
CLICK RIPPLE
Tap or click anywhere
INVERT THE WORLD.
A 110px disc with mix-blend-mode: difference. Inverts whatever passes underneath.
BLEND-MODE CURSOR
All effects are gated by hover capability — touch devices show a static fallback so nothing feels broken on mobile. Reduced-motion respected throughout.
Cursor-reactive backgrounds
Backgrounds that respond to where you are.
Full-width canvas particles + grids living behind real content. Hover into any band — your cursor pushes, pulls, ripples, attracts. The same engines that power our hero sections.
Under the hood
Built on the boring stack.
No 800 KB libraries. Every effect on this page is hand-rolled or uses one tiny dependency. Lighthouse-friendly by default.
01 · Foundation
Astro
Static-first. Every page is HTML by default. JS only where it earns its weight.
100 Lighthouse goal
02 · Motion
Motion (4 KB)
Web Animations API wrapper. Stagger, fade-up, scroll-reveal.
vs GSAP (45 KB) 91% smaller
03 · No React
Vanilla TS
Marketing site stays lean. SaaS app keeps React.
04 · Tokens
CSS variables
Recolor the site in 30 seconds.
05 · Input
Pointer Events
One API. Mouse, touch, stylus.
Mouse Touch Stylus
06 · Accessibility
Reduced motion respected
Every animation has a static fallback in seconds. prefers-reduced-motion
OFF ON