Waida Studio
Pixelfrog - Astro 7 Theme for Creative Agencies, Design Studios & Portfolios
Show the work, tell the story, and let the motion do the talking — from one static build that loads instantly. Pixelfrog is a complete creative digital agency and design studio theme built on Astro 7. Every page pre-renders to static HTML, so it loads instantly and deploys anywhere — and it ships zero framework JavaScript, just one small vanilla script.
Live demo: https://pixelfrog-astro.vercel.app
WHAT'S INSIDE
15 page templates — 25 static pages per build: home, about, services, projects, project case study, blog, blog article, pricing, plan detail, contact, style guide, license, changelog, 401 password protected and 404
Five case studies as Markdown — the services line, the client, the location and the year the page prints in a row, the summary, the shorter card summary the listings use, the banner and card photographs, the concepts body and the slug of the case study it points at next; add a file and it appears on /projects, in the related block under every other case study, and at its own URL
Six articles as Markdown — topic badge, date, reading time and its short form, author and portrait, and three photographs the design uses on three different surfaces; the body is written as three headed sections because the design sets a gallery between them, and a retitled article is retitled on /blog, in the six-card slider that closes eight other pages, and on its own page at once
Two plans as Markdown — the name, the suffix, the price, the icon and the list of what it includes, printed both on the /pricing card and on the plan's own page from the one file
Motion that earns its keep — 428 scroll reveals in three presets, three running marquee bands tiled seven rows deep, nine headlines running along a curved SVG path, a home-page heading that darkens word by word as you scroll, 65 rotating badges, three counting statistics, a full-screen overlay navigation panel, 35 FAQ disclosures, two infinite sliders, 45 lightbox thumbnails, an arrow that draws itself along its own path and a cookie card that remembers your answer — all in one vanilla script, all respecting prefers-reduced-motion
Edit content, not code — every case study, article and plan is one Markdown file with zod-validated frontmatter; what the design owns rather than any one item — the galleries inside an article, the photographs around a case study, the home page's two cards — is JSON, because none of it is a document
Design-token system — 90 custom properties hold the whole colour system, type scale and spacing steps, and /style-guide previews every heading level, text style, button and colour on one page
Self-hosted fonts — Rubik and Inter as woff2, no CDN requests
TypeScript throughout, zod-validated content schema
TECH STACK
Astro 7 · Markdown content collections · TypeScript · the template's own CSS — no utility framework, no build-time CSS pipeline
REQUIREMENTS
Node 22.12 or newer. npm ships with it. Nothing else to install.
LICENSE
One end product per license. You may modify the source freely; you may not resell, sublicense or redistribute it, in whole or in substantial part.
SUPPORT