Free motion design studio website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: inertia.md, data: inertia.json

Motion design studio website template: first screen on a phone

About this motion design studio website template

Motion design studio website template: one free HTML file for a studio that sells motion systems, launch films and social content to brands. It has a two-tone opening statement, a five-project index, a method timeline and three priced engagements, in cool grey with orange light streaks. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 93 KB index.html with its CSS and JavaScript inside, 13 sections, 26 Unsplash photos credited in CREDITS.md, Geist and TikTok Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Studios that sell film and motion need a page that behaves like their work. A video production company website template or an animation studio website built on this one gives buyers the five launches as a speed index, three named tempos for how a brand moves, and fixed engagements with a price to react to. A production company can drop the lab, or the tempo section with its small script, and keep the rest.

Vibe coding with Claude Code, Cursor or Codex starts with facts: studio name, city, people, the five projects with client, kind and year, the three engagements with duration and price, and the quotes. The demo invents all of them, and its photos are stock images, not anyone's work. The agent should also set the wordmark's --len to the name's character count, and leave the data-pace values and the classes AGENTS.md lists alone.

It suits a studio that sells fixed engagements, wants a monochrome look with one hot accent and can supply five real projects. If you run a general design studio rather than a motion one, another studio layout is closer. The weak spots: the method section is a pinned full-screen stage, and the scroll animations need scripts from a CDN. Owners who do not code can use a builder instead.

Good for:

Motion design or animation studioVideo production house or social content agencyBranding, design or creative agency that sells fixed engagementsAny studio that wants a monochrome look with one hot accent colour

Turn the motion design studio website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/motion-design-studio-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/motion-design-studio-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/motion-design-studio-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/motion-design-studio-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my studio: name, city, team and roles, services, past projects with client, kind and year, engagement types with duration and price, client quotes, how clients book a call, company number>. Replace first the studio name, projects, quotes, prices and team. Keep the section ids, the classes AGENTS.md lists and the data-pace values, and set the footer wordmark's --len to the new name's character count. Ask me for missing facts and never invent clients, prices or contacts.

In a terminal

npx degit 8bsite/motion-design-studio-website-template my-site

Motion design studio website design and motion

Palette

#f4f4f5 page ground, and the nav bar once you scroll (at 90%)#e3e3e5 the two light cards (practice and quotes), contact section ground, photo placeholders and the footer wordmark#0c0c0d text, dark cards, the tempo, lab and footer bands, the menu overlay and hairlines#5f5f64 small secondary text, such as card notes, step texts and contact details#ff4d1a the accent: dots, starburst, runners, method playhead, live step number, link hover and the outlined buttons' dot#ffffff the white pill button and text on dark surfaces#7b7b80 the quiet half of the opening statement and of the main quote#a3a3a8 small text on black cards, the dark bands and the footer

Fonts

Geist: everything except display titles: medium-weight headings, regular body text, buttons, labels and form fields
TikTok Sans: light-weight (300) display type with a width axis: the five project titles and the footer wordmark

The opening statement is indented on a 12-column grid, with a starburst at its start. Most sections then open with a split head: heading left, short intro right. Cards and tiles are rounded, buttons are pills. The four practice cards form a staggered row with every second one lower, and lab tiles stagger the middle column. Work and engagement are hairline-ruled rows. Dark bands (tempo, lab, footer) alternate with light sections, and a wordmark spans the footer.

Orange appears only in the dots, the starburst, the tempo and engagement runners, the method playhead, the live step number and link hovers. Project titles use a light, wide display face that stretches on its width axis as each row crosses the screen. Button photo streaks stretch on hover.

Every value of this motion design studio website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the motion design studio website page

Navigation
Logo, five section links and a Get in touch pill; on phones a Menu button opens a full-screen overlay
The bar hides when you scroll down and returns when you scroll up; on phones the Menu button opens a full-screen overlay.
Inertia is a motion studio of restless makers that gives every brand a pace of its own, from the first frame to the hundredth post.
One screen: a large two-tone statement with two picture pills, an orange starburst, a note and a Start a project button
On load the statement, note and actions rise, each photo pill shrinks from a stretched shape and the starburst spins in.
Practice
Four tall cards in a staggered row: a dark card, two photo cards and a light card
On wide screens the four cards start as a tilted pile and are dealt into the row as you scroll, each orange dot streaking in after its card; at 1024 px and below each card slides in from alternating sides.
Moving now
Five launches as a speed index: a huge title, client and kind, and a photo that opens from a pill
As a row crosses the screen its title stretches from condensed to extended while its photo opens from a small pill to the full frame, then both fall back as the row leaves.
Every brand gets a tempo
Dark band with three lanes, each with an orange runner looping at its own pace
Three orange runners loop on their own timing, Glide slow, Snap fast with a hard stop and Pulse with a heartbeat, and pause while the section is off screen.
From first call to final frame
Four project steps with photos that run under a fixed orange playhead as you scroll
The section pins and the four steps slide left under a fixed orange playhead, with the step under it turning from grey to colour and its number badge filling orange.
What clients say
One large two-tone client quote with a photo pill, and two short quotes with faces
The main quote and the two small cards slide in with a braking skew as they arrive, and the portraits drift sideways inside their frames as you scroll.
One room in Rotterdam
A wide crew photo that lines up from four shifted columns, and four portraits with names and roles
The crew photo arrives cut into four columns out of register and lines up by the middle of the screen, while the four portraits rise at different rates.
The lab, after hours
Dark band with six experiments as staggered tiles of long-exposure photos
The six photos drift sideways inside their frames as you scroll.
Three ways to start moving
Three engagement plans as hairline rows, each with a pace line and an orange runner
One scroll moves each runner at its plan's pace: Sprint crosses early and waits, Season takes the whole scroll through the plans and Always on laps three times.
Before you call
Heading and five questions as native details
A question's plus sign turns into a minus with a CSS transition when it opens.
Set something in motion
Large title with an orange streak band, email, address, phone and a brief form
The orange streak band grows from the heading's dot while the title words skid in from the right one after another.
Footer
Name and line, links, social links, the full-width wordmark and the legal line

Before you publish the motion design studio website site

Replace social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Start a project button in the opening lead to #contact now; point them to your booking page (Calendly, Cal.com) or keep it on the brief form.
See the work link in the opening lead to #work now; point them to keep it, or point it to your showreel or portfolio page.
Get in touch button in the header lead to #contact now; point them to keep it, or your booking page.
Book a sprint, Plan a season and Start a retainer links in the engagement plans lead to #contact for all three now; point them to a booking page per plan, or keep them on the brief form.
Send the brief button in the contact form lead to the form has action="#"; the script validates it, shows the thank-you line and sends nothing now; point them to your form service (Formspree, Netlify Forms) or your own endpoint, with the thank-you line kept.
Instagram, Vimeo and LinkedIn links in the footer lead to the home pages instagram.com, vimeo.com and linkedin.com now; point them to your own profile addresses.
The method section is a sticky full-screen stage; on very short screens the photos and text of a step can be cropped by the stage.
The quiet half of the opening statement and of the main quote use #7b7b80 (about 3.8:1 on the page ground), fine for large display text only; do not reuse it for small text.

Questions about this motion design studio website template

Can I use this motion graphics website template for client work?

Yes. It is a single index.html under the MIT license, so a freelancer can ship it to clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, and there is no build step and no CMS. Photos are Unsplash images and both fonts are under the Open Font License; CREDITS.md lists them.

Can it work as a video production website template for a creative studio?

Yes. Rename the practice cards to your services and the five projects become sizzle reels, brand films or shorts. A creative studio website template needs real work, so swap the stock photos for stills of your films. Without fixed engagements, delete the engage section, its script and the Engage entries in the header and menu.

Where does the project form send its messages?

Nowhere yet. The form needs a name, an email and a message, then shows a thank-you line and clears itself without sending anything. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or delete the form and keep the email link. Also edit the thank-you line, which promises a reply within two working days.

How do I hand it to Claude Code, Cursor or Codex?

Put index.html and AGENTS.md in an empty project folder with the curl lines at the start of AGENTS.md, and tell the agent to read AGENTS.md before it touches index.html. Give it the files, not the page address, because a link comes back as a summary. Then paste the prompt from this page, filled in with your studio's facts.

Which parts of the file break if I change them?

Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists per script. Engagement rows read data-pace. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. Describe the site in a sentence and its engine designs a new site, its own design and not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

Not a motion design studio website? More free templates