{
 "slug": "inertia",
 "name": "Inertia",
 "title": "Free motion design studio website template",
 "description": "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.",
 "kind": "One-page website for a motion design studio that sells films, motion systems and social content to brands",
 "summary": "A one-page site for a motion studio in Rotterdam: an opening statement, four practice cards, five launches as an index, three motion tempos, a four-step method, client quotes, the team, a lab of six experiments, three engagement plans, FAQ and a brief form. Light grey ground, black photo cards and orange light streaks as the only colour, with a wide light display type that stretches as you scroll.",
 "fits": [
  "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"
 ],
 "categories": [
  "Agency and studio"
 ],
 "tags": [
  "motion design",
  "animation studio",
  "video production",
  "creative agency",
  "branding",
  "social media agency",
  "studio portfolio",
  "monochrome",
  "orange accent",
  "light streaks",
  "case index",
  "gsap",
  "scrolltrigger",
  "lenis",
  "single-file"
 ],
 "language": "en",
 "size_kb": 93,
 "photos": 26,
 "fonts": [
  "Geist",
  "TikTok Sans"
 ],
 "libraries": [
  "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js",
  "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js",
  "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js",
  "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.min.js"
 ],
 "browsers": "Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).",
 "sections": [
  {
   "key": "navigation",
   "id": "site-nav",
   "heading": "",
   "about": "logo, five section links and a Get in touch pill; on phones a Menu button opens a full-screen overlay"
  },
  {
   "key": "opening",
   "id": "opening",
   "heading": "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.",
   "about": "one screen: a large two-tone statement with two picture pills, an orange starburst, a note and a Start a project button"
  },
  {
   "key": "practice",
   "id": "practice",
   "heading": "",
   "about": "four tall cards in a staggered row: a dark card, two photo cards and a light card"
  },
  {
   "key": "work",
   "id": "work",
   "heading": "Moving now",
   "about": "five launches as a speed index: a huge title, client and kind, and a photo that opens from a pill"
  },
  {
   "key": "tempo",
   "id": "tempo",
   "heading": "Every brand gets a tempo",
   "about": "dark band with three lanes, each with an orange runner looping at its own pace"
  },
  {
   "key": "method",
   "id": "method",
   "heading": "From first call to final frame",
   "about": "four project steps with photos that run under a fixed orange playhead as you scroll"
  },
  {
   "key": "voices",
   "id": "voices",
   "heading": "What clients say",
   "about": "one large two-tone client quote with a photo pill, and two short quotes with faces"
  },
  {
   "key": "studio",
   "id": "studio",
   "heading": "One room in Rotterdam",
   "about": "a wide crew photo that lines up from four shifted columns, and four portraits with names and roles"
  },
  {
   "key": "lab",
   "id": "lab",
   "heading": "The lab, after hours",
   "about": "dark band with six experiments as staggered tiles of long-exposure photos"
  },
  {
   "key": "engage",
   "id": "engage",
   "heading": "Three ways to start moving",
   "about": "three engagement plans as hairline rows, each with a pace line and an orange runner"
  },
  {
   "key": "faq",
   "id": "faq",
   "heading": "Before you call",
   "about": "heading and five questions as native details"
  },
  {
   "key": "contact",
   "id": "contact",
   "heading": "Set something in motion",
   "about": "large title with an orange streak band, email, address, phone and a brief form"
  },
  {
   "key": "footer",
   "id": "footer",
   "heading": "",
   "about": "name and line, links, social links, the full-width wordmark and the legal line"
  }
 ],
 "placeholders": [
  "og-image",
  "favicon",
  "email",
  "phone",
  "form",
  "social"
 ],
 "lighthouse": null,
 "license": {
  "code": "MIT",
  "photos": "Unsplash License",
  "fonts": "SIL Open Font License 1.1"
 },
 "get": {
  "degit": "npx degit 8bsite/motion-design-studio-website-template my-site",
  "curl": [
   "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"
  ],
  "agent_prompt": "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."
 },
 "links": {
  "page": "https://8b.com/templates/inertia/",
  "md": "https://8b.com/templates/inertia.md",
  "json": "https://8b.com/templates/inertia.json",
  "demo": "https://8b.com/templates/inertia/demo.html",
  "ghDemo": "https://8bsite.github.io/motion-design-studio-website-template/",
  "repo": "https://github.com/8bsite/motion-design-studio-website-template",
  "zip": "https://8b.com/templates/inertia/motion-design-studio-website-template.zip",
  "use": "https://github.com/new?template_name=motion-design-studio-website-template&template_owner=8bsite",
  "agents": "https://github.com/8bsite/motion-design-studio-website-template/blob/main/AGENTS.md",
  "credits": "https://github.com/8bsite/motion-design-studio-website-template/blob/main/CREDITS.md",
  "raw": {
   "index": "https://raw.githubusercontent.com/8bsite/motion-design-studio-website-template/main/index.html",
   "agents": "https://raw.githubusercontent.com/8bsite/motion-design-studio-website-template/main/AGENTS.md",
   "license": "https://raw.githubusercontent.com/8bsite/motion-design-studio-website-template/main/LICENSE",
   "credits": "https://raw.githubusercontent.com/8bsite/motion-design-studio-website-template/main/CREDITS.md"
  },
  "preview": "https://8b.com/templates/inertia/desktop.webp",
  "phone": "https://8b.com/templates/inertia/phone.webp",
  "clip": "https://8b.com/templates/inertia/scroll.mp4",
  "og": "https://8b.com/templates/inertia/og.jpg",
  "design_md": "https://8b.com/templates/inertia/DESIGN.md"
 },
 "github": {
  "repo": "8bsite/motion-design-studio-website-template",
  "template_repository": true,
  "topics": [
   "html-template",
   "landing-page",
   "website-template",
   "website-templates",
   "motion-design-studio",
   "animation-studio",
   "agency-website",
   "html5",
   "agents-md",
   "gsap",
   "scrolltrigger",
   "scroll-animation",
   "lenis",
   "single-file",
   "cursor-ai",
   "static-site",
   "mit-license",
   "vibe-coding",
   "claude-code",
   "ai-agents"
  ]
 },
 "made_by": {
  "name": "8B",
  "url": "https://8b.com/"
 }
}