Guides / Adapt a template / Photographer
How to adapt an animated website template for a photographer
To adapt an animated website template for a photographer, start from Petrichor Street Photography, Infinite Drag Photo Canvas, Lumenroom Property Photography and Staging Studio or the closest fit, keep the hero image, hide effects that crop or cover images, add packages with prices, and apply the photographer style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit photographers and photo studios 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
Petrichor Street Photography
A rainy neon street that shifts with the cursor suits a street or editorial photographer.
Pick 2 · Pro
Infinite Drag Photo Canvas
An endless canvas of images suits a large archive or portfolio.
Pick 3 · Pro
Lumenroom Property Photography and Staging Studio
A bare-to-lit room drag is a ready-made proof for real estate and interior work.
What to change for a photographer
Keep
- The hero image
- Galleries by type of work
- Pricing or packages
- Booking form
Hide
- Effects that crop or cover images
- Slow galleries
Add
- Packages with prices
- Client gallery login
- A short about page
- Licensing terms
Copy angles
- Lead with the kind of shoot you want more of.
- Show full images, not crops.
- Make booking a date one form.
Trust elements
- Named clients with permission
- Published credits
- Real reviews
- Clear contracts and deposits
Compliance notes to check
- Keep model and property releases on file for commercial work.
- State your usage license terms.
- Put a copyright notice on the site.
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 Petrichor Street Photography and works for the other two picks if you change the name and slug. The example client is Lena Hartwell Photography, weddings and portraits in Asheville, 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 "petrichor-street-photography", 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 "Petrichor Street Photography" (slug: petrichor-street-photography) into a website for a photographer.
Example client: Lena Hartwell Photography, weddings and portraits in Asheville, North Carolina. Replace it with my real business details, which I will give you.
Keep:
- The hero image
- Galleries by type of work
- Pricing or packages
- Booking form
Hide:
- Effects that crop or cover images
- Slow galleries
Add:
- Packages with prices
- Client gallery login
- A short about page
- Licensing terms
Copy angles:
- Lead with the kind of shoot you want more of.
- Show full images, not crops.
- Make booking a date one form.
Trust elements to include only if I can supply them:
- Named clients with permission
- Published credits
- Real reviews
- Clear contracts and deposits
Style: use the CSS variables and fonts from the Photographer style pack. Motion intensity: Low. The photographs are the motion. Keep transitions short and never cover an image.
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.Photographer style pack
Dark gallery with warm highlights. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Signal Red
#ff6a5a
Accent
Graphite
#1b1b20
Surface
Void
#0d0d10
Background
Pale Citrine
#f2efe9
Text
Type pairing (Google Fonts)
- Display Playfair DisplaySpecimen ↗
- Body InterSpecimen ↗
Motion intensity: Low
The photographs are the motion. Keep transitions short and never cover an image.
The CSS export includes the Google Fonts import and motion variables.
# Photographer style pack, Style Reference > Dark gallery with warm highlights **Theme:** dark · **Template:** Photographer style pack (https://animatedwebs.com/guides/adapt/photographer) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Red | `#ff6a5a` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Graphite | `#1b1b20` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Void | `#0d0d10` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Pale Citrine | `#f2efe9` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Playfair Display, Playfair Display 600 - **Body:** Inter, Inter 400 ## Motion - Intensity: Low. Reveal on load, no scroll scrubbing, no parallax. - The photographs are the motion. Keep transitions short and never cover an image. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Signal Red (`#ff6a5a`) 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 + Inter
Questions
Which template is best for a photographer?+
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 photographer site keep, hide and add?+
Keep the hero image and galleries by type of work. Hide effects that crop or cover images. Add packages with prices and client gallery login.
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.