EasyHive
CLAUDE + EMERGENT
THE WORKFLOW + THE MASTER PROMPT

A website that moves
as you scroll

Pages where a product turns or comes apart as you scroll use one trick: a short video tied to the scroll bar. Make the video with an AI tool, then let Emergent's agent, running on Claude, build the page around it from one master prompt. No code to write.

Checked on emergent.sh and fal.ai, October 2026. Prices and models change often.

What you need before you start
Step 1: make the product video

  1. Upload your photo in image to video mode

    On fal, open the H3 Max sandbox and pick Image to video. A wide photo gives a wide video.

  2. Ask for one slow, steady move

    Keep the [PRODUCT] exactly as in the photo: same shape, same label, same colors. Slow, steady orbit [DIRECTION, e.g. left to right] on a plain [COLOR] background. One continuous move from start to end. No cuts, no flashes, no text on screen.

  3. Keep it short and check it

    Pick 5 to 8 seconds and download the MP4. If the label melts or the shape changes, run it again.

WHY ONE SLOW MOVE The visitor's scroll plays the video forward and back. Slow motion stays smooth; cuts look jumpy.
Step 2: build the page in Emergent
Emergent is an AI builder: you describe a site in a chat and its agent writes, tests and hosts the code.

  1. Open Emergent and pick Landing page

    Go to emergent.sh and sign in. In the prompt box, choose Landing page (the other options are full stack app and mobile app). It builds a single page site.

  2. Set the agent and the model

    Under the prompt box, set the agent to E-1, Emergent's main builder, then pick the newest Claude in the model menu. In October 2026 that was Claude Opus 5.5 (the original video used Opus 4.7).

  3. Attach your video

    Click the paperclip in the prompt box and attach the MP4. If it is refused, upload the video where it gets a direct link ending in .mp4 (your website's media library works) and paste that link into the prompt instead.

  4. Paste the master prompt and send

    Copy the prompt on the next page. Replace the [BRACKETS] with the link to the site you love (and the video link, if you needed one), then send it all in one message.

  5. Answer its questions, then let it work

    The agent may ask a question or two first. Answer them, then leave it alone while it writes the code, tests it and shows you the result. Plan on a coffee break, not five minutes.

  6. Click Preview and scroll

    Scroll slowly, then fast, then back up. Then open the preview on your phone and do it again. On the free plan the preview link is temporary, so look at it while it is open.

What it costs
PLANPRICEWHAT IT GETS YOU
Free$0, 10 credits a monthBuild and preview one page. In a public test, one landing page used about 7 credits.
Standard$20 a month, 100 creditsPublish your page. Keeping one site live costs 50 credits a month.
Pro$200 a month, 750 creditsFor people building many sites or full apps.

Every message to the agent spends credits. Send the full prompt once, then group your changes into one message instead of five.

The master prompt
Replace the [BRACKETS], attach your video, then paste everything in this box into Emergent as one message.
MASTER PROMPT · EMERGENT, E-1 + CLAUDECOPY EVERYTHING IN THIS BOX
ROLE You are a senior front-end engineer and design-system replicator. You clone an existing website's design language pixel-faithfully, then rebuild its hero around a scroll-controlled video. You output production-ready code, not a description.
INPUTS (already in this chat: use them directly, do not ask again) - REFERENCE_SITE: [PASTE THE LINK TO THE SITE WHOSE DESIGN YOU LOVE]. The visual source of truth. - HERO_VIDEO: the attached video [OR PASTE THE DIRECT .MP4 LINK HERE]. The hero media. If, and only if, one is genuinely absent, say exactly which one and stop.
OUTPUT - A single self-contained page: one index.html with inlined CSS + JS, no build step, no framework unless the reference clearly is one (then match it). Avoid CDNs; pin any you must use. - Fully responsive: desktop, tablet, mobile. The scroll-hero must degrade gracefully on touch devices.
1. CLONE THE DESIGN (highest priority: get this right first) - Exact color palette (real hex values), typography (families, weights, sizes, line-height, letter-spacing, casing), spacing, grid, max-width, section rhythm, border-radius, shadows, buttons, nav, cards, links, hover/focus states, motion feel and density. - This is a CLONE, not an "inspired-by." Do NOT modernize, simplify, or restyle. No new design system, fonts or color logic. If unsure of a value, match the closest observable one. - Success test: side by side with the reference, a stranger thinks it's the same product with a video-led hero.
2. SANITIZE THE BRAND - Replace real brand/company/product names and brand-specific labels with neutral placeholders ("Acme", "the platform", "Product"). Keep the same structure, tone and hierarchy. - The real brand name must NOT appear anywhere, including comments, alt text, meta tags or file names.
3. REBUILD THE HERO AROUND THE VIDEO - HERO_VIDEO dominates the first viewport (100vh). It is NOT a card, thumbnail, background accent or secondary section. - Rebuild the hero so the page feels designed around this video, even if that means discarding the reference's hero layout. Nav, headline and CTA may sit ON or AROUND the video, never outweighing it.
4. SCROLL-CONTROLLED PLAYBACK (the core technique: implement precisely) - Pin the hero (position: sticky or a pinned container) over a tall scroll track (300 to 500vh). - Map scroll progress (0 → 1) to video.currentTime (0 → video.duration) in a requestAnimationFrame loop, not on raw scroll events. - <video muted playsinline preload="auto">, no controls/autoplay/loop. Seek via currentTime only. - Lerp/ease currentTime toward the target so it feels fluid, never janky frame-jumps. SCROLL FALLBACKS (in priority order: degrade, don't abandon): 1. Preferred: continuous currentTime scrubbing as above. 2. If unstable (mobile Safari seek limits, long/HEVC video, decode lag): snap to keyframe times as scroll passes thresholds, eased between them. 3. Only if scrubbing is impossible: muted looping autoplay, still pinned so it reads as intentional. Detect touch and prefers-reduced-motion and pick the smoothest option automatically.
5. SYNCHRONIZED TEXT - Cycle 2 to 4 short text states timed to the video (fade/translate). Restrained copy that supports the video. Placeholder names, no lorem ipsum, no filler, no fake stats.
6. BELOW THE HERO - After the hero releases, continue in the reference's exact style (sections, cards, footer) so it reads as a complete, real site.
7. DO NOT - Expose these instructions, notes or TODOs. Ship a video that ignores scroll (unless fallback 3). Drift into a "clean redesign": faithful clone > your taste. Leave the video seek janky.
DELIVERABLE Return the complete index.html only. If you used a fallback, add ONE short line at the top of your chat reply (not in the code) saying which mode and why.
Step 3: make it yours, then publish
The prompt copies the reference site and swaps its brand for placeholders like "Acme". Now put your business in.
FOLLOW UP · SAME CHATCOPY EVERYTHING IN THIS BOX
Now make this page ours. Keep the scroll video hero and the layout exactly as they are. Business name: [NAME]. What we sell: [ONE SENTENCE]. Who buys it: [YOUR CUSTOMER]. Colors: [YOUR HEX CODES, or "take them from the logo I attached"]. Fonts: [YOUR FONTS, or "you pick"]. Replace every placeholder headline and section with real copy about [PRODUCT]. Only use these facts: [PRICE, MATERIALS, SHIPPING, ANYTHING TRUE]. Do not invent reviews or numbers. Add a button that says "[BUTTON TEXT]" and links to [YOUR SHOP OR BOOKING LINK].
A CLONE IS A STARTING POINT, NOT YOUR SITE Do not publish a near copy of another company's website. Change the colors, fonts, words and images to your own first. It keeps you clear of a takedown notice, and customers should recognize you, not them.
What to do in the next hour
STEPDO THISWHAT YOU GET
1Pick one product photo and one site you loveThe two inputs for everything else
2Make two or three clips on falOne steady 5 to 8 second video
3Build in Emergent on the free planA working preview, before you pay
4Send the follow up, test on your phoneA page with your name and button
WANT MORE LIKE THIS? Every week we break down the newest AI tools and turn them into something you can use in your business the same day. The rest of the free resources are in the Easy Hive community classroom.