What is inside

Larch Agency covers the full path from positioning to inquiry: a focused home page, service detail, studio story, case studies and contact. Its copy and structured data live outside the components, making a full rebrand faster and safer.

Feature by feature

Prerendered everywhere but the form

Only the contact route runs on demand, and it does so to re-render field errors server-side when JavaScript is unavailable.

Reveals you add with an attribute

Six presets, plus stagger, delay and duration, all driven by data attributes on the markup. The layout scans the page once.

Motion that never blanks the page

Elements are pre-hidden by CSS gated on a JS flag and on reduced motion, so a script that fails leaves the content visible instead of invisible.

An animated fullscreen menu

Along with the accordions, the horizontal card stack, the parallax images and the hover-image effect, each owning its own script.

Case studies in MDX

Projects with cover, tags, client and date. Marking one as featured puts it among the three on the home page.

Service pages from a data file

The home list and the detailed service pages read from the same typed file, so the two can never disagree.

Social cards that never upscale

The card frame shrinks to fit a smaller source, so the declared width and height always match the bytes a scraper downloads.

Smooth scrolling done properly

One exported Lenis instance, animated same-page anchors that move focus the way a native jump would, and nested scroll for the panels that need it.

Pages included

/Home

/Works

/Work detail

/Studio

/Services

/Contact

/Legal + 404

What you publish without touching code

Typed content collections. You write a file, and the listing, the detail page, the feed and the sitemap pick it up on the next build.

Projects

src/content/projects/*.mdxCase studies with cover, tags, client and date. Featured entries fill the first three slots on the home page.

Legal

src/content/legals/*.mdTitle and description. The filename becomes the route.

Site data

src/config/*.data.tsServices and service pages, process steps, studio values, team, client logos, FAQ, navigation and social links.

A new project is this file:

---
title: 'Apex Logistics'
description: 'Modernizing a 20-year-old logistics company.'
coverImage: '../../assets/projects-img/apex-logistics/apex-logistics-01.webp'
tags: ['Rebranding', 'B2B Lead Gen']
clientLink: 'https://example.com'
date: 2026-06-05
client: 'Apex Global'
featured: true
---

Making it yours

The copy

src/config/labels.ts

Every user-facing string, alt text, aria-label and SEO field, typed. An unknown key fails the build, so add it first.

The typefaces

astro.config.mjs

Three local families declared through Astro's font API rather than hand-written font-face rules, with metric-adjusted fallbacks that cut layout shift.