Guides / Adapt a template / Restaurant
How to adapt an animated website template for a restaurant
To adapt an animated website template for a restaurant, start from Scorza Pizzeria Dough That Stretches, Bakes and Slices, Brandlow Fire That Leans and Burns Down to Coals, Hatchlight Night Truck That Lights Up on Scroll or the closest fit, keep the hero with the food, hide story chapters that push the menu below the fold, add a text menu, not only an image or pdf, and apply the restaurant style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit restaurants, bistros and dining rooms 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
Scorza Pizzeria Dough That Stretches, Bakes and Slices
Dough, toppings and the oven told in scroll make a pizzeria look like it smells.
Pick 2 · Pro
Brandlow Fire That Leans and Burns Down to Coals
Live fire and oak suit a grill, smokehouse or wood-fired kitchen.
Pick 3 · Pro
Hatchlight Night Truck That Lights Up on Scroll
A glowing hatch that turns into today's map suits a truck or pop-up.
What to change for a restaurant
Keep
- The hero with the food
- The menu
- Hours, address and map
- The reservation or order button
Hide
- Story chapters that push the menu below the fold
- Auto-playing sound
Add
- A text menu, not only an image or PDF
- Allergen notes
- Online ordering or booking
- Private events page
Copy angles
- Name the signature dish and the neighborhood.
- Put tonight's hours first.
- Show the people who cook, with first names.
Trust elements
- Real photos of the food and room
- Recent reviews with permission
- Health inspection grade where posted
- Press mentions you can link
Compliance notes to check
- Menus should state allergen information the way your local rules expect.
- Alcohol advertising rules vary by state.
- Keep prices current and disclose service charges.
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 Scorza Pizzeria Dough That Stretches, Bakes and Slices and works for the other two picks if you change the name and slug. The example client is Smokehouse 41, a barbecue restaurant in Kansas City, Missouri.
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 "scorza-pizzeria", 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 "Scorza Pizzeria Dough That Stretches, Bakes and Slices" (slug: scorza-pizzeria) into a website for a restaurant.
Example client: Smokehouse 41, a barbecue restaurant in Kansas City, Missouri. Replace it with my real business details, which I will give you.
Keep:
- The hero with the food
- The menu
- Hours, address and map
- The reservation or order button
Hide:
- Story chapters that push the menu below the fold
- Auto-playing sound
Add:
- A text menu, not only an image or PDF
- Allergen notes
- Online ordering or booking
- Private events page
Copy angles:
- Name the signature dish and the neighborhood.
- Put tonight's hours first.
- Show the people who cook, with first names.
Trust elements to include only if I can supply them:
- Real photos of the food and room
- Recent reviews with permission
- Health inspection grade where posted
- Press mentions you can link
Style: use the CSS variables and fonts from the Restaurant style pack. Motion intensity: Medium. Make the food move, then get out of the way. Menu and hours must load fast on a phone in a parking lot.
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.Restaurant style pack
Warm, fired and appetizing. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Ember
#e8532b
Accent
Deep Ember
#2a1d14
Surface
Void
#17110d
Background
Pale Ember
#f8eee0
Text
Type pairing (Google Fonts)
- Display Playfair DisplaySpecimen ↗
- Body Work SansSpecimen ↗
Motion intensity: Medium
Make the food move, then get out of the way. Menu and hours must load fast on a phone in a parking lot.
The CSS export includes the Google Fonts import and motion variables.
# Restaurant style pack, Style Reference > Warm, fired and appetizing **Theme:** dark · **Template:** Restaurant style pack (https://animatedwebs.com/guides/adapt/restaurant) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember | `#e8532b` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Deep Ember | `#2a1d14` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Void | `#17110d` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Pale Ember | `#f8eee0` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Playfair Display, Playfair Display 700 - **Body:** Work Sans, Work Sans 400 ## Motion - Intensity: Medium. One scroll-driven hero effect, simple reveals below it. - Make the food move, then get out of the way. Menu and hours must load fast on a phone in a parking lot. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Ember (`#e8532b`) 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 + Work Sans
Questions
Which template is best for a restaurant?+
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 restaurant site keep, hide and add?+
Keep the hero with the food and the menu. Hide story chapters that push the menu below the fold. Add a text menu, not only an image or pdf and allergen notes.
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.