{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-studio", "title": "Studio: creative agency", "author": "Ballmac ", "description": "A loud, typographic five-page agency site: giant wide headlines, a work reel whose poster follows the pointer, numbered services that open, a work index with grid or table, project pages and a brief form.", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/marquee.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/templates/studio/studio-fonts.ts", "content": "// Ballmac UI: Studio template fonts. https://ui.ballmac.com/templates/template-studio\nimport { Archivo, Geist_Mono } from \"next/font/google\"\n\n/** Archivo has a width axis, so headlines can run wide and heavy while body copy stays normal. */\nexport const studioSans = Archivo({ variable: \"--studio-sans\", subsets: [\"latin\"], axes: [\"wdth\"], display: \"swap\", preload: false })\nexport const studioMono = Geist_Mono({ variable: \"--studio-mono\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/studio/studio-fonts.ts" }, { "path": "registry/ballmac/components/templates/studio/studio-data.ts", "content": "import type { MediaSource } from \"@/components/ballmac/media\"\n\n// Ballmac UI: Studio sample content. https://ui.ballmac.com/templates/template-studio\n\nexport type StudioProject = { slug: string; name: string; client: string; year: string; discipline: \"Brand\" | \"Digital\" | \"Campaign\"; line: string; art: number; image?: MediaSource; imageAlt?: string }\n\nexport const projects: StudioProject[] = [\n { slug: \"north-coast\", name: \"North Coast Rail\", client: \"North Coast\", year: \"2026\", discipline: \"Brand\", line: \"A railway identity that moves.\", art: 0 },\n { slug: \"oat-and-ember\", name: \"Oat & Ember\", client: \"Oat & Ember\", year: \"2026\", discipline: \"Campaign\", line: \"A launch that sold out in nine days.\", art: 1 },\n { slug: \"meridian\", name: \"Meridian Bank\", client: \"Meridian\", year: \"2025\", discipline: \"Digital\", line: \"Banking without the small print.\", art: 2 },\n { slug: \"tidal\", name: \"Tidal Festival\", client: \"Tidal\", year: \"2025\", discipline: \"Brand\", line: \"Three days, one living identity.\", art: 3 },\n { slug: \"pilot\", name: \"Pilot Coffee\", client: \"Pilot\", year: \"2025\", discipline: \"Campaign\", line: \"Packaging that earned its shelf.\", art: 4 },\n { slug: \"alder\", name: \"Alder & Co\", client: \"Alder\", year: \"2024\", discipline: \"Digital\", line: \"A furniture shop built on stories.\", art: 5 },\n]\n\nexport const services = [\n { n: \"01\", title: \"Brand identity\", text: \"Strategy, naming, logos, typefaces and the system that holds them together. We leave you with a brand people can actually use on a Tuesday.\", items: [\"Positioning\", \"Naming\", \"Visual identity\", \"Brand guidelines\"], from: \"From €45k\" },\n { n: \"02\", title: \"Digital design\", text: \"Websites and products with a point of view. Designed in the browser, built with your team, and measured after launch.\", items: [\"Websites\", \"Product design\", \"Design systems\", \"Motion\"], from: \"From €60k\" },\n { n: \"03\", title: \"Campaigns\", text: \"Ideas that travel. We direct, shoot and launch across print, social, film and the street.\", items: [\"Concept\", \"Art direction\", \"Film and photography\", \"Launch\"], from: \"From €35k\" },\n { n: \"04\", title: \"Retained studio\", text: \"A senior team on call for a monthly fee. For brands that ship constantly and want one look across everything.\", items: [\"Monthly capacity\", \"Quarterly roadmap\", \"Priority access\"], from: \"From €12k / month\" },\n]\n\nexport const process = [\n [\"Listen\", \"Two weeks of interviews, audits and arguments. We write down what is true before we make anything pretty.\"],\n [\"Make\", \"Small, fast, ugly first. You see work every week, not a reveal at the end.\"],\n [\"Launch\", \"We stay until it is live, then measure it. The work isn't finished when it is delivered.\"],\n]\n", "type": "registry:component", "target": "@components/ballmac/templates/studio/studio-data.ts" }, { "path": "registry/ballmac/components/templates/studio/studio-theme.tsx", "content": "// Ballmac UI: Studio template shell. https://ui.ballmac.com/templates/template-studio\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowUpRight, Menu, X } from \"lucide-react\"\n\nimport { studioMono, studioSans } from \"@/components/ballmac/templates/studio/studio-fonts\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype StudioPage = \"home\" | \"work\" | \"project\" | \"services\" | \"contact\"\ntype StudioHrefs = Record\n\nconst defaultHrefs: StudioHrefs = { home: \"/studio\", work: \"/studio/work\", project: \"/studio/work/north-coast\", services: \"/studio/services\", contact: \"/studio/contact\" }\n\n/** Studio's palette: stark white and black with a hot orange, plus electric blue, acid yellow, pink and mint for art. */\nconst studioCss = `\n.studio-theme,body:not(:has([data-gallery])):has(.studio-theme){--background:oklch(0.99 0 0);--foreground:oklch(0.12 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.12 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.12 0 0);--primary:oklch(0.12 0 0);--primary-foreground:oklch(0.99 0 0);--secondary:oklch(0.955 0 0);--secondary-foreground:oklch(0.12 0 0);--muted:oklch(0.955 0 0);--muted-foreground:oklch(0.44 0 0);--accent:oklch(0.93 0.02 40);--accent-foreground:oklch(0.12 0 0);--border:oklch(0.12 0 0 / 16%);--input:oklch(0.12 0 0 / 28%);--ring:oklch(0.12 0 0);--surface:oklch(0.965 0 0);--destructive:oklch(0.52 0.24 27);--chart-1:oklch(0.68 0.22 40);--chart-2:oklch(0.52 0.24 265);--chart-3:oklch(0.92 0.18 100);--chart-4:oklch(0.72 0.22 350);--chart-5:oklch(0.85 0.13 170);--studio-on-accent:oklch(0.12 0 0);--radius:0.25rem}\n.dark .studio-theme,.dark body:not(:has([data-gallery])):has(.studio-theme){--background:oklch(0.12 0 0);--foreground:oklch(0.97 0 0);--card:oklch(0.16 0 0);--card-foreground:oklch(0.97 0 0);--popover:oklch(0.18 0 0);--popover-foreground:oklch(0.97 0 0);--primary:oklch(0.97 0 0);--primary-foreground:oklch(0.12 0 0);--secondary:oklch(0.2 0 0);--secondary-foreground:oklch(0.97 0 0);--muted:oklch(0.2 0 0);--muted-foreground:oklch(0.72 0 0);--accent:oklch(0.24 0.02 40);--accent-foreground:oklch(0.97 0 0);--border:oklch(1 0 0 / 16%);--input:oklch(1 0 0 / 28%);--ring:oklch(0.97 0 0);--surface:oklch(0.15 0 0);--destructive:oklch(0.7 0.2 27);--chart-1:oklch(0.7 0.21 40);--chart-2:oklch(0.52 0.24 265);--chart-3:oklch(0.92 0.18 100);--chart-4:oklch(0.74 0.2 350);--chart-5:oklch(0.85 0.13 170);--studio-on-accent:oklch(0.12 0 0)}\nbody:not(:has([data-gallery])):has(.studio-theme){font-family:var(--studio-sans),ui-sans-serif,system-ui,sans-serif}\n`\n\n/** Wide, heavy headline settings for Archivo. */\nconst display = \"[font-stretch:112%] font-extrabold uppercase tracking-[-0.03em] leading-[0.88]\"\n\n/** A painted poster: bold shapes in the accent colours, standing in for project imagery. */\nfunction StudioArt({ variant, className, image, imageAlt }: { variant: number; className?: string; image?: MediaSource; imageAlt?: string }) {\n const v = ((variant % 6) + 6) % 6\n if (image) return \n return (\n
\n {v === 0 && (<>
)}\n {v === 1 && (<>
)}\n {v === 2 && (<>
{[0, 1, 2, 3, 4].map((i) =>
)}
)}\n {v === 3 && (<>
{Array.from({ length: 12 }, (_, i) =>
)}
)}\n {v === 4 && (<>
)}\n {v === 5 && (<>
)}\n
\n )\n}\n\nconst links: { key: StudioPage; label: string }[] = [\n { key: \"work\", label: \"Work\" },\n { key: \"services\", label: \"Services\" },\n { key: \"contact\", label: \"Contact\" },\n]\n\ntype StudioShellProps = React.ComponentProps<\"div\"> & {\n /** The page being shown, so its nav link is marked current. */\n page: StudioPage\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n}\n\n/** Studio's frame: a heavy wordmark, a plain nav, and a footer that is mostly the studio's name. */\nfunction StudioShell({ page, hrefs: overrides, className, style, children, ...props }: StudioShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [open, setOpen] = React.useState(false)\n React.useEffect(() => {\n const classes = [studioSans.variable, studioMono.variable].filter(Boolean)\n document.body.classList.add(...classes)\n return () => document.body.classList.remove(...classes)\n }, [])\n const active = page === \"project\" ? \"work\" : page\n return (\n \n \n
\n
\n Hollis&Vane\n \n \n \n
\n {open && (\n \n )}\n
\n {children}\n
\n
\n
\n

New project, new idea, or just a question? We reply to every email within two working days.

\n Start a project \n
\n

Hollis&Vane

\n
\n

© 2026 Hollis & Vane Studio Ltd.

\n
    {[\"Instagram\", \"Behance\", \"LinkedIn\", \"Newsletter\"].map((l) =>
  • {l}
    • )}
\n
\n
\n
\n
\n )\n}\n\nexport { StudioArt, StudioShell, defaultHrefs as studioDefaultHrefs, display as studioDisplay, type StudioHrefs, type StudioPage, type StudioShellProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/studio/studio-theme.tsx" }, { "path": "registry/ballmac/components/templates/studio/studio-home.tsx", "content": "// Ballmac UI: Studio home page. https://ui.ballmac.com/templates/template-studio\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowUpRight } from \"lucide-react\"\nimport { useReducedMotion } from \"motion/react\"\n\nimport { Marquee } from \"@/components/ballmac/marquee\"\nimport { process, projects, services } from \"@/components/ballmac/templates/studio/studio-data\"\nimport { StudioArt, StudioShell, studioDisplay, type StudioHrefs } from \"@/components/ballmac/templates/studio/studio-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--studio-mono)\" } as const\n\n/** A list of projects. Hover or focus a row and a poster follows the pointer (or sits beside the row for keyboard users). */\nfunction WorkReel({ href }: { href: string }) {\n const reduce = useReducedMotion()\n const [active, setActive] = React.useState(null)\n const [mode, setMode] = React.useState<\"pointer\" | \"focus\">(\"pointer\")\n const box = React.useRef(null)\n const card = React.useRef(null)\n\n function move(e: React.PointerEvent) {\n const r = box.current?.getBoundingClientRect()\n if (!r || !card.current || reduce) return\n card.current.style.transform = `translate(${e.clientX - r.left + 28}px, ${e.clientY - r.top - 120}px)`\n }\n const shown = active !== null ? projects[active] : null\n\n return (\n
setActive(null)}>\n
    \n {projects.map((p, i) => (\n
  • \n { setMode(\"pointer\"); setActive(i) }}\n onFocus={() => { setMode(\"focus\"); setActive(i) }}\n onBlur={() => setActive(null)}\n className=\"hover:bg-chart-1 hover:text-[var(--studio-on-accent)] focus-visible:bg-chart-1 focus-visible:text-[var(--studio-on-accent)] group grid grid-cols-[1fr_auto] items-baseline gap-4 px-2 py-6 outline-none transition-colors sm:grid-cols-[3rem_1fr_10rem_5rem] sm:px-4 motion-reduce:transition-none\"\n >\n \n {p.name}\n \n {p.year}\n \n
    • \n ))}\n
\n
\n
\n )\n}\n\ntype StudioHomeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Studio home page: a huge statement, a hover-reveal work reel, services, process and a loud call to action. */\nfunction StudioHome({ hrefs, ...props }: StudioHomeProps) {\n const h = { work: hrefs?.work ?? \"/studio/work\", project: hrefs?.project ?? \"/studio/work/north-coast\", services: hrefs?.services ?? \"/studio/services\", contact: hrefs?.contact ?? \"/studio/contact\" }\n return (\n \n
\n
\n

Independent branding & digital studio · est. 2016

\n

\n We make\n brands that\n move people.\n

\n
\n

Hollis & Vane is a 14-person studio in Lisbon and Berlin. We design identities, websites and campaigns for people who would rather be remembered than liked.

\n See the work \n
\n
\n\n
\n \n {[\"North Coast\", \"Oat & Ember\", \"Meridian\", \"Tidal\", \"Pilot\", \"Alder & Co\", \"Fernhill\", \"Kestrel\"].map((c) => {c})}\n \n
\n\n
\n

Selected work

\n \n
\n\n
\n
\n

What we do

All services
\n
    \n {services.map((s) => (\n
  • \n {s.n}\n

    {s.title}

    {s.text}

    \n
    • \n ))}\n
\n
\n
\n\n
\n
\n

How we work

\n
    \n {process.map(([t, d], i) => (\n
  1. \n Step {i + 1}\n

    {t}

    \n

    {d}

    \n
    2. \n ))}\n
\n
\n
\n\n
\n
“They didn’t give us a logo. They gave us a way of behaving, and now the whole company does it.”
\n

Anaïs Dupont · CMO, North Coast Rail

\n
\n\n
\n \n Let’s talk\n \n \n
\n
\n \n )\n}\n\nexport { StudioHome, type StudioHomeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/studio/studio-home.tsx" }, { "path": "registry/ballmac/components/templates/studio/studio-work.tsx", "content": "// Ballmac UI: Studio work page. https://ui.ballmac.com/templates/template-studio\n\"use client\"\n\nimport * as React from \"react\"\nimport { LayoutGrid, List } from \"lucide-react\"\n\nimport { projects } from \"@/components/ballmac/templates/studio/studio-data\"\nimport { StudioArt, StudioShell, studioDisplay, type StudioHrefs } from \"@/components/ballmac/templates/studio/studio-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--studio-mono)\" } as const\ntype Filter = \"All\" | \"Brand\" | \"Digital\" | \"Campaign\"\nconst filters: Filter[] = [\"All\", \"Brand\", \"Digital\", \"Campaign\"]\n\ntype StudioWorkProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Studio work index: every project as a table or a poster grid, filtered by discipline. */\nfunction StudioWork({ hrefs, ...props }: StudioWorkProps) {\n const [filter, setFilter] = React.useState(\"All\")\n const [view, setView] = React.useState<\"list\" | \"grid\">(\"grid\")\n const shown = projects.filter((p) => filter === \"All\" || p.discipline === filter)\n const href = hrefs?.project ?? \"/studio/work/north-coast\"\n return (\n \n
\n

Work ({shown.length})

\n
\n
\n {filters.map((f) => )}\n
\n
\n {([[\"grid\", LayoutGrid, \"Grid\"], [\"list\", List, \"List\"]] as const).map(([v, Icon, l]) => )}\n
\n
\n

{shown.length} projects shown

\n {view === \"grid\" ? (\n \n ) : (\n
\n \n \n \n \n {shown.map((p) => (\n \n \n \n \n \n \n ))}\n \n
All projects
ProjectDisciplineClientYear
{p.name}{p.discipline}{p.client}{p.year}
\n
\n )}\n
\n \n )\n}\n\nexport { StudioWork, type StudioWorkProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/studio/studio-work.tsx" }, { "path": "registry/ballmac/components/templates/studio/studio-project.tsx", "content": "// Ballmac UI: Studio project page. https://ui.ballmac.com/templates/template-studio\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowUpRight } from \"lucide-react\"\n\nimport { projects } from \"@/components/ballmac/templates/studio/studio-data\"\nimport { StudioArt, StudioShell, studioDisplay, type StudioHrefs } from \"@/components/ballmac/templates/studio/studio-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--studio-mono)\" } as const\n\nconst facts = [[\"Client\", \"North Coast Rail\"], [\"Year\", \"2026\"], [\"Services\", \"Identity, signage, motion, website\"], [\"Team\", \"6 people, 11 months\"]]\nconst credits = [[\"Creative direction\", \"Inês Hollis\"], [\"Design lead\", \"Jonas Vane\"], [\"Motion\", \"Mei Tanaka\"], [\"Development\", \"Colm Brennan\"], [\"Strategy\", \"Amara Okafor\"]]\n\ntype StudioProjectProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** A Studio project page: a full-bleed poster, a fact line, big imagery in two rhythms, a pull quote and credits. */\nfunction StudioProject({ hrefs, ...props }: StudioProjectProps) {\n const next = projects[1]\n return (\n \n
\n
\n

Work / Brand

\n

North Coast Rail

\n

A railway identity that moves: from a logo built from a single line to 400 trains that carry it.

\n
\n \n
\n {facts.map(([k, v]) =>
{k}
{v}
)}\n
\n
\n
\n

The idea

\n

A railway is one long line with many stops. We drew the identity the same way: a single continuous stroke that bends into the letters, the map and the livery. It is simple enough to paint on a train and distinctive enough to recognise from the platform.

\n
\n
\n
\n
\n \n
\n
\n
\n
“Passengers started photographing the trains. We have never had that before.”
\n
Anaïs Dupont, CMO, North Coast Rail
\n
\n
\n
\n

Credits

\n
{credits.map(([k, v]) =>
{k}
{v}
)}
\n
\n \n
\n

Next project

{next.name}

\n \n
\n \n
\n \n )\n}\n\nexport { StudioProject, type StudioProjectProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/studio/studio-project.tsx" }, { "path": "registry/ballmac/components/templates/studio/studio-services.tsx", "content": "// Ballmac UI: Studio services page. https://ui.ballmac.com/templates/template-studio\n\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\n\nimport { services } from \"@/components/ballmac/templates/studio/studio-data\"\nimport { StudioShell, studioDisplay, type StudioHrefs } from \"@/components/ballmac/templates/studio/studio-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--studio-mono)\" } as const\n\ntype StudioServicesProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Studio services page: four numbered disciplines that open to show what's inside, with a starting price. */\nfunction StudioServices({ hrefs, ...props }: StudioServicesProps) {\n const [open, setOpen] = React.useState(\"01\")\n return (\n \n
\n

Services

\n

Four ways to work with us. Most projects start with one and grow into two.

\n
    \n {services.map((s) => {\n const on = open === s.n\n return (\n
  • \n

    \n \n

    \n \n
    • \n )\n })}\n
\n
\n

Before you ask

\n
\n {[[\"Do you work with startups?\", \"Yes, if the founders are the ones in the room. We take two a quarter.\"], [\"How long does a project take?\", \"An identity takes 10 to 14 weeks. A website, 12 to 20. A campaign depends on the shoot.\"], [\"Can you work with our team?\", \"Always. Most of our best work was built alongside in-house designers and developers.\"]].map(([q, a]) =>
{q}
{a}
)}\n
\n
\n
\n \n )\n}\n\nexport { StudioServices, type StudioServicesProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/studio/studio-services.tsx" }, { "path": "registry/ballmac/components/templates/studio/studio-contact.tsx", "content": "// Ballmac UI: Studio contact page. https://ui.ballmac.com/templates/template-studio\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"lucide-react\"\n\nimport { CopyButton } from \"@/components/ballmac/copy-button\"\nimport { StudioShell, studioDisplay, type StudioHrefs } from \"@/components/ballmac/templates/studio/studio-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst mono = { fontFamily: \"var(--studio-mono)\" } as const\nconst budgets = [\"Under €30k\", \"€30–60k\", \"€60–120k\", \"€120k+\"]\nconst field = \"bg-background focus-visible:ring-ring/50 mt-2 h-14 w-full border-2 border-current px-4 text-lg outline-none focus-visible:ring-[3px] aria-[invalid=true]:border-destructive\"\n\ntype StudioContactProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Studio contact page: a huge email, a project brief form with chips and inline errors, and the two offices. */\nfunction StudioContact({ hrefs, ...props }: StudioContactProps) {\n const [budget, setBudget] = React.useState(\"\")\n const [errors, setErrors] = React.useState<{ name?: string; email?: string; brief?: string }>({})\n const [sent, setSent] = React.useState(null)\n function submit(e: React.FormEvent) {\n e.preventDefault()\n const f = new FormData(e.currentTarget)\n const name = String(f.get(\"name\") ?? \"\").trim()\n const email = String(f.get(\"email\") ?? \"\").trim()\n const brief = String(f.get(\"brief\") ?? \"\").trim()\n const next: typeof errors = {}\n if (!name) next.name = \"Your name, please.\"\n if (!/^\\S+@\\S+\\.\\S+$/.test(email)) next.email = \"That email doesn’t look right.\"\n if (brief.length < 20) next.brief = \"Tell us a little more: at least a sentence.\"\n setErrors(next)\n const first = ([\"name\", \"email\", \"brief\"] as const).find((k) => next[k])\n if (first) {\n ;(e.currentTarget.elements.namedItem(first) as HTMLElement | null)?.focus()\n return\n }\n setSent(name.split(\" \")[0])\n }\n return (\n \n
\n

Say hello

\n \n
\n {sent ? (\n
\n \n

Thanks, {sent}.

\n

We read every brief. One of us will reply within two working days.

\n
\n ) : (\n
\n
\n
{errors.name &&

{errors.name}

}
\n
{errors.email &&

{errors.email}

}
\n
\n
Budget\n
{budgets.map((b) => )}
\n
\n