A production-quality marketing website for a game animation studio, with a flagship About Us page, a documented brand system, and an interactive easing playground — built to show how an animation studio's site can win on content, craft, and discoverability at the same time.
Live demo: https://mooceanstudio.github.io/animation-studio-website/
Note: Emberframe Studio is a fictional brand. This is a demo project built by Moocean Studio to showcase our approach to designing and building websites for animation and game studios.
The site doesn't just say the studio understands motion — it proves it. Visitors pick an easing curve (linear, ease-out, overshoot, bounce) and watch the same one-second move change character, with the curve plotted live alongside the moving object. Pure vanilla JS.
The About page is structured around the questions a game studio actually asks before hiring an animation partner:
| Section | Question it answers |
|---|---|
| Hero + mission | Who are you, in one sentence? |
| Our story | Why do you exist, and why should I trust you? |
| Studio in numbers | What's your track record? |
| Values | What is it like to work with you? |
| Team | Who will I actually talk to? |
| Timeline | Are you stable and growing? |
| FAQ | Logistics: engines, time zones, how projects start |
| CTA | What do I do next? |
A one-page brand system — logo construction grid, on-dark/on-light variants, color palette with usage rules and WCAG notes, type scale, and named motion easings. Documented so a whole team can apply the identity consistently.
Being found on Google and cited by AI tools (ChatGPT, Perplexity, Google AI Overviews) requires machine-readable structure, not just keywords:
- Schema.org JSON-LD —
Organization,AboutPage,BreadcrumbList, andFAQPagestructured data so search engines and LLM crawlers can extract facts about the studio directly - llms.txt — a plain-language site summary at a well-known path for AI crawlers
- FAQ content written as direct question/answer pairs — the format AI answer engines quote from
- Progressive enhancement — scroll-reveal styling is gated behind an
html.jsclass, so crawlers (and users) without JavaScript get fully visible content, neveropacity: 0text. Append?nojsto any page URL to see the no-JS rendering - Canonical URLs, Open Graph tags, sitemap.xml, robots.txt
The site's motion is the portfolio: a bouncing-ball loop (the first exercise every animator learns), an onion-skinned runner strip in the hero, eased scroll reveals, animated stat counters — and a 404 page that drops a frame.
- Zero dependencies: no frameworks, no external fonts, no build step
- Fully responsive, mobile nav included
- Accessible: skip link, focus styles, ARIA labels,
prefers-reduced-motionrespected throughout - Fast: ~40 KB of CSS/JS total, static hosting, system font stack (zero layout shift)
No build step — open index.html in a browser, or:
python3 -m http.server 8000
# → http://localhost:8000├── index.html # Home: hero, services, work, process, easing playground, testimonials
├── about.html # About Us: story, stats, values, team, timeline, FAQ
├── brand.html # Brand guidelines: logo, color, type, motion
├── 404.html # "We dropped a frame"
├── css/style.css # Design system, animations, responsive layout
├── js/main.js # Nav, scroll reveal, stat counters, easing playground
├── assets/ # SVG logo, favicon, screenshots
├── llms.txt # Site summary for AI crawlers
├── sitemap.xml
└── robots.txt
MIT — see LICENSE.