# Free motion design studio website template > Free HTML motion design studio website template for animation and video production studios, with AGENTS.md for Claude Code and Cursor, or no code in 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. 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. - Page: https://8b.com/templates/inertia/ - Live demo: https://8b.com/templates/inertia/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/inertia/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/motion-design-studio-website-template - Download ZIP: https://8b.com/templates/inertia/motion-design-studio-website-template.zip - Template name in the repository: Inertia - At a glance: 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. ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash 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 ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . 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. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/motion-design-studio-website-template my-site`. ## About 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](https://8b.com/templates/onda/) 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. ## Design - 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. ## Sections and motion - **Navigation** (navigation): logo, five section links and a Get in touch pill; on phones a Menu button opens a full-screen overlay. Motion: 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.** (opening): one screen: a large two-tone statement with two picture pills, an orange starburst, a note and a Start a project button. Motion: On load the statement, note and actions rise, each photo pill shrinks from a stretched shape and the starburst spins in. - **Practice** (practice): four tall cards in a staggered row: a dark card, two photo cards and a light card. Motion: 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** (work): five launches as a speed index: a huge title, client and kind, and a photo that opens from a pill. Motion: 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** (tempo): dark band with three lanes, each with an orange runner looping at its own pace. Motion: 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** (method): four project steps with photos that run under a fixed orange playhead as you scroll. Motion: 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** (voices): one large two-tone client quote with a photo pill, and two short quotes with faces. Motion: 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** (studio): a wide crew photo that lines up from four shifted columns, and four portraits with names and roles. Motion: 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** (lab): dark band with six experiments as staggered tiles of long-exposure photos. Motion: The six photos drift sideways inside their frames as you scroll. - **Three ways to start moving** (engage): three engagement plans as hairline rows, each with a pace line and an orange runner. Motion: 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** (faq): heading and five questions as native details. Motion: A question's plus sign turns into a minus with a CSS transition when it opens. - **Set something in motion** (contact): large title with an orange streak band, email, address, phone and a brief form. Motion: The orange streak band grows from the heading's dot while the title words skid in from the right one after another. - **Footer** (footer): name and line, links, social links, the full-width wordmark and the legal line ## Good for - motion design or animation studio - video production house or social content agency - branding, design or creative agency that sells fixed engagements - any studio that wants a monochrome look with one hot accent colour ## Questions **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](https://8b.com/). 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. ## Before publishing Replace: social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). - 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. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).