Creative studio

FrameMotion

A film-studio site that feels like the opening shot.

Best for: Production studios that want a striking, reel-led portfolio.

Stories that hold the room for the full ninety seconds.

Overview

FrameMotion is built for studios whose work belongs on a big screen. The monochrome 'Cinema' theme — cool near-black, crisp off-white — gets out of the way and lets the frames carry it. It doesn't open with a feature list: it opens on the thing every film lives or dies by, the first ten seconds, then proves the studio can deliver with one client's word and honest numbers. A producer-shaped FAQ answers what stalls a booking, and the client sign-in leads to a real review room where cuts get timestamped notes and sign-off. Config-driven, so a studio can publish a new reel in an afternoon.

Who it's for

Film & video studiosMotion & animation housesCommercial & brand-film teamsDirectors & DPs

Highlights

Opening-shot hero, then a craft-led beat (the first ten seconds)
Work showcase across brand, commercial & documentary
Honest delivery metrics — median cut approval, on-time rate
Producer FAQ (rights, revisions, budget, timeline)
Client review room — timestamped notes & delivery sign-off

Pages included

Home
Sign in
Sign up
Terms of Service
Privacy Policy
Project detail
Work / the reel
Client review room
Start a project
Themed 404 / 500 / loading

Built with

Next.js 16React 19Tailwind v4TypeScript

What you'll get

A launch kit is more than code. Here's exactly what's in the box and what it takes to get it live.

FrameMotion Launch Kit

v1.0.0 · Single-project license

Coming soon

In the box

Next.js source codeThe complete, typed project — yours to keep and edit.
Content configEvery word, link, and price in one editable file.
Theme configColors, fonts, and shape as simple design tokens.
Auth screensThemed sign in & sign up — split layout, ready to wire up.
Legal starter pagesPractical Terms & Privacy you can customize, not legal advice.
4 niche product screensDesigned for this kit — e.g. a dashboard, detail, or checkout.
Themed error & loading screensMatching 404, 500, and loading states — not generic fallbacks.
Guides + launch checklistCustomization, deployment, launch checklist, and troubleshooting.
DESIGN.md + AGENTS.mdSystem-design map + agent operating rules and starter prompts.
License + changelogPlain-language usage terms (placeholder) and version history.

To launch it

Difficulty: beginner
Setup time: About 35 minutes
Deploys to: Vercel · Netlify
Guides: 4 included
Support: Standard email support and optional setup help.

Request early access

Downloads open when checkout launches.

Customization & requirements

Everything renders from one config file, so editing copy, pricing, sections, or the theme is a data change — no component rewiring.

You'll need

Node 20+A code editorGitHub accountVercel account (free)

You can customize

Studio name & voiceShowreel & projectsServicesTrack-record numbersContact

Built for AI agents

Customizing with Claude, Cursor, or another agent is the intended path — the kit tells the agent what it may touch. Use the “Build it with AI” button in the sidebar for a ready-made starter prompt.

AGENTS.mdOperating rules, project map, starter prompts.
DESIGN.mdDesign system and theming contract — tokens only.
configThe safe editing zone: copy, links, pricing, and theme as data — AGENTS.md names the files.

Launch checklist

Every kit ships with a practical, step-by-step checklist so you know exactly what to change before you go live.

Launch checklist

19 steps

Make it yours

Replace the logo and favicon
Update your business / brand name
Rewrite the hero copy
Update services, features, and pricing
Set your real contact email
Swap placeholder images for your own

Metadata & SEO

Update the page title and description
Set your Open Graph share image
Point metadataBase at your real domain

Quality check

Test the responsive layout on mobile
Test every button and contact CTA
Run a quick Lighthouse pass

Make it your studio

Swap the six showcase films for your own reelTitles, categories, and the mock visuals live in the portfolio section of this kit's config.
Set your host link behind 'Watch the reel'Point the hero CTA at your Vimeo or self-hosted player — it's a placeholder anchor today.
Rewrite the numbers to match your track recordFilms delivered, on-time rate, and median cut approval are honest claims — only keep what's true.
Make the review room your own projectThe client sign-in leads here; swap the deliverables and notes for a live cut.

Launch