# Free modeling agency website template > Free HTML modeling agency website template for scouting agencies: open call, casting board, application form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. Modeling agency website template: one free HTML file for a scouting agency that runs a weekly open call, with a casting board of new faces, a four-step path to a first booking, a no-fees promise and an application form. Yellow spots on light grey, a black open-call screen. An AI agent can adapt it. - Page: https://8b.com/templates/spotted/ - Live demo: https://8b.com/templates/spotted/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/spotted/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/modeling-agency-website-template - Download ZIP: https://8b.com/templates/spotted/modeling-agency-website-template.zip - Template name in the repository: Spotted - At a glance: One 86 KB index.html with its CSS and JavaScript inside, 12 sections, 25 Unsplash photos credited in CREDITS.md, Pliant 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/modeling-agency-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/modeling-agency-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/modeling-agency-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/modeling-agency-website-template/main/CREDITS.md ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this my site: . Replace first the name, the board faces, the found-place stories, the show claims, the crossed-out charges and the partner cities. Keep the section ids, the board's name and photo order, the four method steps, the nine frames and the wordmark's len. Ask for missing facts; never invent fees, bookings, shows 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/modeling-agency-website-template my-site`. ## About Scouting and talent agencies use a page like this to turn a street conversation into a visit: the open-call screen says when, where and what to bring, and the board shows who was found where. People comparing model agency websites, a talent agency website template or a casting agency website template get one scroll that ends in an application form. A portrait studio with a sign-up day can cut the model rows. Vibe coding with Claude Code, Cursor or Codex goes fastest when the owner supplies the facts: open-call day and hours, address, fees or commission, timings, partner cities and real people. The agent should replace the demo faces, stories and crossed-out charges first, and ask before keeping any claim about shows or bookings. Keep the board's names and portraits in the same order and length, and set the footer wordmark's --len to the new name's character count. This suits an agency that scouts in person and wants to look young and direct. An agency that sells projects rather than people fits a [case-study layout](https://8b.com/templates/sillage/) better. The weak spot is the form: it sends nothing until a service is connected, and the page has no model profiles or login. The scroll scenes need the CDN scripts; without them the text and photos stay readable but nothing scrolls into place. Prefer no code? The 8B builder makes a new site from a sentence. ## Design - Palette: #ebebeb (page ground, and the board, found-places, shows, questions and contact sections), #121212 (text, buttons, and the black open-call screen, contact-sheet section, cities section, phone menu and footer), #f6cc48 (the accent: dots, halo, yellow buttons, city tags, checker flag and the whole promise panel), #ffffff (nav panel, method section ground, the contact sheet itself, form panel and button text), #575757 (paragraphs beside headings, meta lines, board names not yet reached, form status line), #fae49c (the paler squares of the checker flag), #a6a6a6 (muted text and hairlines on black: open-call labels, contact-sheet section text, footer headings), #d6d6d6 (fill of the photo cards and frames behind the images) - Fonts: Pliant (the only typeface, a variable font: headings at regular weight in extended width, small uppercase labels at medium weight, the wordmark at semibold, regular body text) A light grey ground broken by bands: black open call, white method, black contact-sheet section, yellow promise, black cities. Section heads mostly repeat one pattern, a large extended-width heading with a short paragraph beside it. Yellow is the repeating mark: dots beside the open-call label, the board names, the found places and the travelling spot, plus the halo and the city tags. Pill buttons fill with a growing circle on hover. A checker flag sits above the form. Between the pinned scenes, this modeling agency website design repeats a few small beats: the open-call photo opens from a small circle over a slowly breathing yellow glow, yellow dots pop in with an overshoot, and story photos start grey and dim, then develop to colour as you scroll. ## Sections and motion - **Navigation** (navigation): fixed white panel with the wordmark and five links, a hairline, three yellow social pills; hides on scroll down; phone menu overlay on black - **Walk in unknown. Walk out with your first test shoot.** (opening): black open-call screen: label, headline, when, where and what to bring, a yellow button, and a round photo on a yellow glow. Motion: On load the copy blocks fade up one after another, the round photo opens from a small scale and its yellow glow grows, then breathes in a loop. - **The new board** (board): casting index: six names with height, home town and where they were spotted, beside a sticky frame of six portraits. Motion: On wide screens six portraits stack in a sticky frame; each name turns dark with a yellow dot and slides right as its portrait opens over the last through a growing circle. - **Where we found them** (spotted): four rows of places where people were found, each with a yellow spot, place, time, a short story and a photo. Motion: Each row's hairline draws from the left, its yellow dot pops in, and its photo goes from grey and dim to colour as it crosses the lower half of the screen. - **From spotted to signed** (method): four steps along a diagonal line with a travelling yellow spot, on a white ground. Motion: A diagonal line draws down the section with scroll while a yellow spot travels along it, and each step fades from pale to full as the spot reaches it. - **Nine test shoots this month** (develop): white contact sheet on a black section, nine test frames dealt from a pile, a yellow square drawn round frame 07 and its note. Motion: The section pins: nine frames start as a pile in the middle of the sheet and are dealt into place, then a yellow square draws round frame 07 and its note fades in. - **First shows, first campaigns** (shows): horizontal track of five photo cards for first shows and campaigns. Motion: The section pins and the five cards travel sideways with scroll, each photo developing from grey to colour as it nears the middle. - **No fees. Ever.** (promise): yellow panel: "No fees. Ever.", a lead and four crossed-out charges against what the agency does instead. Motion: The heading rises, the row hairlines draw from the left and the strike through each crossed-out charge draws itself. - **Five cities, one mother agency** (network): black section with five giant city names and a yellow tag for each. Motion: City names drift in alternating directions with scroll, while each yellow tag slides from the far left of its row to the right end. - **Before you walk in** (faq): heading with a short line beside six questions as native
- **Apply to be spotted** (contact): checker flag, "Apply to be spotted", studio details and an application form. Motion: The squares of the checker flag unfurl in a diagonal wave as the section scrolls in. - **Agency** (footer): black footer: one line about the agency, three link columns, social pills, a hairline, a large wordmark and the base line ## Good for - model scouting or development agency - talent or casting agency - photographer or portrait studio with a sign-up day - any service with a weekly open day, a short path to the first job and an application form ## Questions **Is this model agency website template free for client sites?** Yes. It is one index.html under the MIT license, so a freelancer can ship it for an agency client at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, and there is no build step. The Pliant typeface and the 25 Unsplash photos are credited in CREDITS.md. **Can I get an agency site like this without editing code?** Yes. [8B's AI website builder](https://8b.com/) designs a new site from a sentence you type, and designing and restyling are free. It will not be this template. 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. **Where does the application form send its messages?** Nowhere yet. The form needs a name, an age and an email, then shows a thank-you line and clears itself without sending anything. Connect Formspree or Netlify Forms as AGENTS.md describes, or delete it and keep the phone and email. Then edit the thank-you text if your reply time differs. **How do I give it to Claude Code, Cursor or Codex?** Save index.html and AGENTS.md into an empty folder with the curl lines listed in AGENTS.md, and tell the agent to read AGENTS.md before editing. Give it the files, not the page address, which comes back as a summary. Then paste the prompt from this page with your agency's facts filled in. **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 for each script. Keep the board's names and portraits in the same order and length. 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 a talent or casting agency use it, not only models?** Yes. Nothing in the structure is specific to models: swap the board for your roster, the found-place stories for your own discovery stories and the nine test shoots for audition frames. The age field's limits are 14 to 99 (the form does not enforce them) and the under-18 checkbox suits young talent; edit both if your rules differ. ## Before publishing Replace: social preview image, favicon, social media links, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). - Book a Thursday slot button in the open-call screen lead to #contact now; point them to your booking page for open-call slots, or keep #contact once the application form is connected. - Apply to join the board link in the new board section lead to #contact now; point them to your application page, or keep #contact. - YouTube, TikTok and Instagram pills in the nav, the phone menu and the footer lead to the home pages youtube.com, tiktok.com and instagram.com now; point them to your own profile addresses, or remove the pills you do not use. - Send application button in the contact form lead to does not send anything: the form has action="#"; the script checks that name, age and email are filled in, shows a thank-you line and clears the form now; point them to your form service (Formspree, Netlify Forms or your own endpoint), or remove the form and keep the phone and email. - The application form has no backend and does not send anything until you connect one. - The board and develop scenes pin and stack content, and the shows track pins and runs sideways: on short screens the sticky frames leave little room, check them at 375 px and on a laptop. - The page loads gsap, ScrollTrigger, SplitText and Lenis from a CDN with blocking scripts, so it needs a connection to animate; the text and photos stay readable without them. ## 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).