Moxie

Live preview ->

Moxie is a complete website system for creative agencies and design studios that want motion to feel like part of the identity rather than decoration. Its living color field, oversized typography, editorial work layouts, gradient service cards, continuous marquees, and precise hover states give the studio a distinct point of view from the opening screen.

The demo is written for an independent creative studio, but the same structure works for brand practices, motion teams, digital product agencies, web studios, content partners, freelance designers, and small multidisciplinary teams.

Property	Value
Tier	Pro ($59 regular)
Category	Creative Agency / Design Studio
Display font	Geist Variable
Label font	JetBrains Mono Variable
Palette	Near-black, violet, coral, mint, blue, and soft paper
Content	Work, services, and journal Content Collections
Configuration	Shared content lives in `src/config/site.ts`

Included routes

/ - homepage with living hero, collaborator marquee, selected work, manifesto, principles marquee, services, studio statement, pricing, and closing CTA
/work/ and /work/[slug]/ - work index and five generated case-study pages
/services/ and /services/[slug]/ - service index and five generated detail pages
/studio/ - studio positioning and principles
/journal/ and /journal/[slug]/ - article index and three generated journal pages
/contact/ - configurable project inquiry
/privacy/, /terms/, and /404.html
Generated sitemap and robots output

The production build currently generates 22 static routes.

What makes Moxie different

The hero behaves like a composition - its animated mesh, copy, scale, and opacity change together as the visitor scrolls.
Motion continues through the whole system - case-study crops, service controls, rotating marks, parallax images, manifesto type, and pricing interactions share one visual rhythm.
The site has enough structure for real studio content - work, services, and journal entries are Astro Content Collections with generated detail routes.
Shared decisions stay centralized - identity, navigation, homepage copy, featured ordering, pricing, forms, footer, legal text, interface labels, analytics placeholders, and SEO defaults live in src/config/site.ts.
New routes feel connected without keeping the old scroll position - Astro view transitions and Lenis synchronize destination scrolling correctly.
Reduced motion is treated as a real mode - animations become static layouts and native scrolling rather than simply disappearing.

Moxie-specific setup

Change the identity and production URL

Start in src/config/site.ts. The identity and contact blocks control the name, legal name, production URL, email addresses, location, navigation, footer, social links, theme color, and default metadata.

Replace every example.com placeholder and the production URL before publishing your own site.

Edit the homepage

The main homepage blocks are:

hero
collaborators
work
manifesto
brandMarquee
services
studioStatement
pricing
cta
footer

The featuredSlugs arrays under work and services determine which collection entries appear on the homepage and in what order.

Add or edit work

Work case studies live in src/content/work/. Each Markdown file defines its slug, title, category, year, images, summary, project URL, and long-form body.

Add a file and Astro creates its /work/[slug]/ page during the next build. Add that slug to siteConfig.work.featuredSlugs when the project should also appear on the homepage.

Add or edit services

Service pages live in src/content/services/. Entries support their own title, short description, color treatment, visual mark, deliverables, process, related work, and long-form copy.

Add a file to generate a new /services/[slug]/ route. Update siteConfig.services.featuredSlugs to change the homepage service selection and order.

Add journal articles

Journal posts live in src/content/journal/. Each Markdown entry provides its title, summary, publication date, category, cover image, metadata, and article body.

Configure pricing

siteConfig.pricing.plans controls all three pricing cards. Every plan can set:

name and best-fit label
price prefix, price, and suffix
summary and timeline
inclusion list
badge and accent color
CTA label and destination
featured state

The demo models a focused sprint, a complete launch, and ongoing studio support, but the same component works for packages, retainers, subscriptions, or fixed services.

Connect the contact form

Moxie starts in safe demo mode and sends no data. Change siteConfig.contact.form.provider to one of:

formspree
formsubmit
netlify
custom
demo

The same block controls credentials, endpoint, method, editable fields, labels, options, required states, and response messages.

Replace images

Shared imagery uses the unsplash() helper in src/config/site.ts. Collection images are URLs in Markdown frontmatter. Replace either with another URL or a path inside public/.

Adjust color, type, and motion

Global tokens live in src/styles/global.css. This includes the ink and paper environments, five accent colors, radii, container width, typography, and easing curves.

The motion runtime lives in src/layouts/Layout.astro and coordinates Lenis, GSAP, Astro view transitions, scroll restoration, viewport reveals, image parallax, rotating marks, and reduced-motion behavior.

What’s next

Configure -> site.ts - shared brand, homepage, pricing, forms, footer, metadata, analytics, and SEO.
Customize -> Brand colors & fonts - adapt Moxie’s color field, type, spacing, and motion tokens.
Customize -> Pages - add routes or rearrange homepage sections.
Content -> Blog posts - use the same Markdown workflow for Moxie’s journal.
Deploy -> Cloudflare Pages - publish the static build.