Guides / Adapt a template / Real estate agency
How to adapt an animated website template for a real estate agency
To adapt an animated website template for a real estate agency, start from Casa Altea Cliff Villa Film Scrubbed by Scroll, Doorlight Property Co. A Home Opens Like a Movie, Lumenroom Property Photography and Staging Studio or the closest fit, keep the hero film or photo, hide chapters that show lifestyle without a listing, add searchable listings or an idx link, and apply the real estate agency style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit real estate agents and agencies best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Casa Altea Cliff Villa Film Scrubbed by Scroll
A film gliding to a cliff villa suits a luxury listing or a development launch.
Pick 2 · Pro
Doorlight Property Co. A Home Opens Like a Movie
A dawn-to-keys walkthrough with an Austin setting suits a local agent selling a neighborhood.
Pick 3 · Pro
Lumenroom Property Photography and Staging Studio
A bare-to-furnished room drag shows what staging and photography can do.
What to change for a real estate agency
Keep
- The hero film or photo
- The featured listings
- The agent bio
- The contact form
Hide
- Chapters that show lifestyle without a listing
- Effects that cover listing photos
Add
- Searchable listings or an IDX link
- Neighborhood guides
- Your license number and brokerage
- A mortgage calculator
Copy angles
- Sell the neighborhood and the agent, not only the house.
- Lead with sold stories you can document.
- Make the next step one tap: call, text or book a tour.
Trust elements
- License number and brokerage name
- Real client reviews with permission
- Recent sold listings
- Local market numbers with a source
Compliance notes to check
- Advertising is covered by the Fair Housing Act, so avoid language that states a preference or limits who a home is for.
- States generally require your license number and brokerage name on ads. Check your state.
- Disclose virtual staging or edited photos where your MLS or state requires it.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Casa Altea Cliff Villa Film Scrubbed by Scroll and works for the other two picks if you change the name and slug. The example client is Oakline Realty, a family-run brokerage in Raleigh, North Carolina.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "casa-altea-residences", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Casa Altea Cliff Villa Film Scrubbed by Scroll" (slug: casa-altea-residences) into a website for a real estate agency.
Example client: Oakline Realty, a family-run brokerage in Raleigh, North Carolina. Replace it with my real business details, which I will give you.
Keep:
- The hero film or photo
- The featured listings
- The agent bio
- The contact form
Hide:
- Chapters that show lifestyle without a listing
- Effects that cover listing photos
Add:
- Searchable listings or an IDX link
- Neighborhood guides
- Your license number and brokerage
- A mortgage calculator
Copy angles:
- Sell the neighborhood and the agent, not only the house.
- Lead with sold stories you can document.
- Make the next step one tap: call, text or book a tour.
Trust elements to include only if I can supply them:
- License number and brokerage name
- Real client reviews with permission
- Recent sold listings
- Local market numbers with a source
Style: use the CSS variables and fonts from the Real estate agency style pack. Motion intensity: Medium. Film suits the hero. Keep listing search, filters and photo galleries fast and still.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.Real estate agency style pack
Warm, aspirational and sunlit. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Ember
#e8a25a
Accent
Deep Ember
#241d15
Surface
Void
#14110d
Background
Pale Citrine
#f6efe4
Text
Type pairing (Google Fonts)
- Display Playfair DisplaySpecimen ↗
- Body DM SansSpecimen ↗
Motion intensity: Medium
Film suits the hero. Keep listing search, filters and photo galleries fast and still.
The CSS export includes the Google Fonts import and motion variables.
# Real estate agency style pack, Style Reference > Warm, aspirational and sunlit **Theme:** dark · **Template:** Real estate agency style pack (https://animatedwebs.com/guides/adapt/real-estate-agency) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember | `#e8a25a` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Deep Ember | `#241d15` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Void | `#14110d` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Pale Citrine | `#f6efe4` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Playfair Display, Playfair Display 600 - **Body:** DM Sans, DM Sans 400 ## Motion - Intensity: Medium. One scroll-driven hero effect, simple reveals below it. - Film suits the hero. Keep listing search, filters and photo galleries fast and still. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Ember (`#e8a25a`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond Playfair Display + DM Sans
Questions
Which template is best for a real estate agency?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should a real estate agency site keep, hide and add?+
Keep the hero film or photo and the featured listings. Hide chapters that show lifestyle without a listing. Add searchable listings or an idx link and neighborhood guides.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.