How to sell animated websites with ChatGPT and Higgsfield

Analyze this reference visual like a creative director. Break it down into a generation recipe: the subject and framing, the lighting and mood, the colour palette with hex codes, the camera behaviour, and the one transformation that makes it feel premium. Then rewrite that recipe as a ready-to-run Higgsfield video prompt for MY business's product: keep the same energy but make it original to this brand, one continuous shot with no cuts, locked-off camera, clean background, highest resolution available.

You are a senior brand and web designer AND a no-code implementation expert. I want to build a premium one-page website for a local business that looks like it cost thousands AND actually works (forms, bookings, payments, and more, all wired up with real tools). Interview me first, then produce a complete build plan.

THE BUSINESS: [describe it in a sentence or two: name, what they sell, city, and the vibe]. Before you plan anything, ask me for whatever you are missing, one batch at a time: the offering, location, opening hours, rough price range, the feeling they want customers to have, any existing brand colours or logo, and how they currently take enquiries or bookings (phone, DMs, walk-ins, a booking app). Wait for my answers, then continue.

Then produce, in this order:

1. BRAND DIRECTION: a wordmark treatment, a 4 to 5 colour palette with hex codes (appetising and premium, never generic), two font pairings (one display, one body, using fonts that are free on Google Fonts), and a one-line brand voice.

2. SITE MAP: the sections of a single premium landing page, in order, and the one job of each: hero, signature items or services, the story or craft, social proof, location and hours, and a clear call to action. Only what a real small business needs, nothing padded.

3. THE HERO MOMENT: describe one premium, scroll-driven animated hero that makes the site feel expensive and is completely true to this business. It should be a single continuous shot the page scrubs through as the visitor scrolls (for a food business, the product assembling itself so you can see what is inside; adapt the idea for a salon, gym, or trades business). Specify exactly what it shows, how it moves, and why it fits.

4. COPY: write the real, on-brand copy for every section: headlines, subheads, item or service descriptions, the story, social proof framing, and the call to action. No lorem ipsum, no filler, match the brand voice exactly.

5. THE HIGGSFIELD VISUAL ASSET BRIEF: list every image and animation the site needs, each written as a ready-to-run generation prompt for the Higgsfield plugin: the scroll hero animation, 3 to 6 product or service shots, one atmosphere or interior shot, and any brand texture. For each, specify subject, framing, lighting, mood, and aspect ratio, so the whole set looks like one cohesive shoot.

6. FUNCTIONALITY PLAN (do this properly): First tell me in one or two plain sentences that a single static HTML page cannot, on its own, store data, send email, take a booking, or process a payment. Every dynamic feature is added by connecting a named third-party tool that handles that part, while the page stays one simple file the owner can host anywhere. Then ask me which of these the business actually needs: contact form, bookings, online ordering, payments, a map, analytics, newsletter signup. For ONLY the ones I pick, give me a short block each covering: what it does for this business, the exact named tool to use, in one line how it attaches to a plain static HTML page, the real 2026 cost tier, and the honest limit. Recommend the best fit for this specific business; use the options below unless a better one clearly fits, and note that prices change so I should confirm on the tool's own pricing page.
   - Contact form: Formspree (free for 50 submissions per month, paid from about US$15/mo). Point the form's action at a Formspree endpoint, no server needed. If the site is hosted on Netlify, Netlify Forms works too (free for 100 submissions per month, just add data-netlify to the form). Limit: submissions run through the form service and free tiers cap the monthly count.
   - Bookings and appointments: Calendly (free for 1 event type, Standard about US$10 per seat per month), embedded as an inline widget or popup link. For a salon or clinic taking deposits and juggling staff, use Square Appointments (free for a single user). Limit: the free Calendly plan is one event type with Calendly branding, and the calendar lives on their platform.
   - Online ordering: Square Online (free plan, no monthly fee, about 3.3% plus 30c per online order as of January 2026), or link out to an existing UberEats or DoorDash page. Add an "Order now" button that opens the hosted store. Limit: the page hands the order off to Square, which takes a fee per order.
   - Payments (deposits, gift cards, pay in advance): Stripe Payment Links or the Stripe Buy Button (no monthly fee, about 1.75% plus A$0.30 per domestic card in Australia, about 2.9% plus 30c in the US). Paste the payment link into a button or embed the Buy Button. Limit: checkout is hosted securely by Stripe so the customer briefly leaves the page, and Stripe takes a fee per transaction.
   - Map: Google Maps embed (free). In Google Maps choose Share, then "Embed a map", copy the iframe, and paste it in. Limit: the free embed is a standard pinned map; a custom-styled map needs the paid Google Maps Platform.
   - Analytics: Google Analytics 4 (free), pasted as a tag in the head. Privacy-friendly alternative: Cloudflare Web Analytics (free, no cookie banner). Limit: GA4 uses cookies so add a short privacy note, and data only appears once visitors arrive.
   - Newsletter signup: Kit, formerly ConvertKit (free for up to 10,000 subscribers), embedded as a signup form. Alternative: Mailchimp (free for 250 contacts and 500 sends a month). Limit: emails send from the provider, not the page, and free tiers add branding.
   Close this section with one honest line: none of these need coding, but each is a real account the owner (or I) must set up, and the free tiers are enough to launch and prove the site before anyone pays for an upgrade.

7. BUILD NOTES: mobile-first layout notes, where each visual and each functionality embed goes, a page title and meta description for SEO, the accessibility basics (colour contrast, alt text, tap-target size), performance notes to keep it fast, and a note to keep the scroll hero optimised for web (compressed, with a muted autoplay loop as a fallback if scroll-scrubbing is not possible, and a lighter version for mobile).

8. HANDOVER PACKAGE: write the final site as a single, clean, heavily commented HTML file that a non-technical owner can maintain later with ChatGPT or any AI assistant. Group every piece of editable text (business name, hours, prices, phone, menu or service items) near the top under one clearly labelled block, and clearly label where each functionality embed lives (the form, the booking widget, the payment button, the map, the analytics tag, the newsletter form) so the owner knows exactly what to swap if they change tools. At the very top of the file, add a short plain-English comment titled "HOW TO EDIT YOUR SITE" that explains, in normal words, how to change the text, the hours, and the photos, and how to update each connected tool.

Output the whole thing as one clean brief I can build from, keeping every dynamic feature honest about cost and limits, then offer to generate the site's full HTML and CSS from it next.

Using Higgsfield, generate the hero animation as one continuous shot with no cuts: the [product, e.g. signature stacked burger] starts as separated floating layers, then assembles itself piece by piece and lands inside the brand's packaging [or: onto the plate], on a clean dark background. Locked-off camera, cinematic appetising lighting, smooth continuous motion, highest resolution available, wide and vertical versions. The single unbroken take matters: the website will scrub through this shot as visitors scroll, so every in-between frame needs to exist.

Using Higgsfield, generate 4 product shots that match the hero: [list the items from your plan]. Same lighting and mood as the hero, dark premium background, consistent style so they look like one shoot. Square and landscape crops. Then one wide atmosphere shot of the space (warm, inviting, editorial).

Now build this as a single responsive HTML file with clean CSS, using the copy and the sections from the plan. Leave clearly labelled placeholders where each Higgsfield asset goes. Make the hero scroll-driven: pin the hero video full-screen and map scroll progress to the video's playback time, with smoothing, so the transformation plays as the visitor scrolls, and fall back to a muted autoplay loop if that isn't possible. Keep the headline to one line placed above the product so it never covers it, pull the colour palette from the brand's packaging, and keep everything optimised so the page loads fast. Comment the code in plain English, group all the editable text (name, hours, prices, contact) at the top, and add a short HOW TO EDIT note as the very first comment, so the owner can update it later with any AI assistant.