Pattern 1 — Glassmorphism Hero + Radial Spotlight

Design patterns that scale

A living reference of production-ready UI patterns. Each section below demonstrates a distinct design style — glassmorphism, bento grids, animated stats, and more.

showcase-website.vercel.app
Hero
Bento
Stats
Features
Pricing
FAQ
Next.js 15
Tailwind CSS 4
Framer Motion
shadcn/ui
21st.dev
Magic UI
GSAP
React Three Fiber
TypeScript
Radix UI
Vercel
Cloudflare Pages
React 19
PixiJS
Next.js 15
Tailwind CSS 4
Framer Motion
shadcn/ui
21st.dev
Magic UI
GSAP
React Three Fiber
TypeScript
Radix UI
Vercel
Cloudflare Pages
React 19
PixiJS
PixiJS
React 19
Cloudflare Pages
Vercel
Radix UI
TypeScript
React Three Fiber
GSAP
Magic UI
21st.dev
shadcn/ui
Framer Motion
Tailwind CSS 4
Next.js 15
PixiJS
React 19
Cloudflare Pages
Vercel
Radix UI
TypeScript
React Three Fiber
GSAP
Magic UI
21st.dev
shadcn/ui
Framer Motion
Tailwind CSS 4
Next.js 15

Everything you need

Mixed-size cards with gradient fills and hover border glow.

Lightning Fast

Static export with Next.js — sub-second load times, no server required.

Secure by Default

No API routes, no database — pure static delivery.

Global CDN

Deployed via Cloudflare Pages to 200+ edge locations worldwide.

Developer Experience

TypeScript throughout. shadcn/ui components. Hot reload. Zero config.

Component System

Every UI element is a reusable component. Design tokens via CSS variables.

Analytics Ready

Drop in any analytics provider. No framework lock-in.

Numbers that matter

Counters animate from zero when scrolled into view using IntersectionObserver.

0+
Client projects
Sites shipped across 12 industries
0%
Build success rate
Zero failed deploys in production
0d
Avg turnaround
From brief to live site
0x
Faster than bespoke
Vs. traditional agency workflow

Built for results

Cards with gradient icon backgrounds and subtle hover lift. 3-column desktop, 1-column mobile.

Custom Design

Every site is unique — designed around your brand, not a cookie-cutter template.

Crafted Copy

Messaging that speaks to your customers. No lorem ipsum, ever.

Mobile-First

Built at 390px and scaled up. Perfect on every device from day one.

SEO Foundation

Correct heading hierarchy, meta tags, and structured data out of the box.

Fast Delivery

10–14 business days from brief to live. No long agency timelines.

Ongoing Support

Monthly maintenance plans. Changes handled within 2 business days.

Clients who got results

Glass cards with gradient tints. Star ratings, avatar initials, and quote styling.

We went from zero enquiries online to 3-4 per week within a month of the site going live. Absolutely worth every cent.
SM
Sarah Mitchell
Owner, Mitchell Landscapes
The turnaround was unbelievable — site was live in under two weeks and it looks more professional than sites I've seen agencies charge $10k for.
JK
James Kowalski
Director, OutdoorLiving Co.
What I appreciated most was that they actually understood my business. The copy on the site sounds like me, not a generic web agency.
PN
Priya Nair
Founder, Nair Garden Design

Simple, honest pricing

Popular card elevated with glow border. Feature list with check icons. Clear CTA hierarchy.

Starter

Perfect for solo traders and small businesses who need a clean, professional online presence.

$1,200one-off
  • Single landing page
  • Mobile-first design
  • Contact form
  • SEO basics
  • Cloudflare hosting setup
  • 2 rounds of revisions
Most Popular

Standard

Multi-page sites with a custom design system, animations, and an SEO foundation.

$2,200one-off
  • Up to 5 pages
  • Custom design system
  • Framer Motion animations
  • Full SEO setup
  • Google Analytics wired
  • 4 rounds of revisions
  • Maintenance plan included (1 month)

Premium

Advanced interactions, 3D graphics, and custom logic for businesses that need to stand out.

$4,500+one-off
  • Unlimited pages
  • GSAP / Three.js / R3F
  • Custom animations
  • Advanced SEO + schema
  • Performance audit
  • Unlimited revisions
  • 3 months maintenance

From brief to live in 14 days

Vertical connector line with numbered steps. Step cards alternate slightly on desktop.

01

Fill in a short brief

Day 1

We use an AI-assisted intake process. 15 minutes and we have everything we need — business goals, brand, and copy.

02

Design & build

Days 2–10

We scaffold your site from the brand context and build section by section. You see progress daily if you want.

03

Review & refine

Days 11–13

Two rounds of revisions included. We address feedback within 24 hours on the Standard and above plans.

04

Launch & maintain

Day 14

We wire up Cloudflare Pages, push live, and hand you a maintenance plan. Ongoing changes handled within 2 days.

Ready to get
found online?

Fill in a short form and we’ll send you a free website review and a no-obligation quote within 24 hours.

No spam. No lock-in. Cancel any maintenance plan anytime.

Common questions

Smooth accordion with max-height animation. Only one item open at a time. Active state changes icon and text color.

Implementation note: Uses CSS max-height transition from 0 to a fixed value for smooth collapse. No JS animation libraries required.

No. Builds are a simple one-off agreement. Maintenance plans are month-to-month — cancel anytime with 7 days notice.

10–14 business days from the moment we have your content. Most clients are live within 3 weeks of enquiring.

Your logo (or we'll suggest one), photos of your work (phone photos are fine), your services and pricing if shown, contact details, and your suburb. We handle everything else.

Yes — every site is built mobile-first. We test at 390px (iPhone 14) before anything goes live.

Request changes through your maintenance plan and we'll handle them within 2 business days. We don't build complicated CMS editors that break.

You get 30 days of free support included. After that, our maintenance plans cover all updates, security patches, and hosting.