BEFORE YOU START
Hand your coding agent four things
Use a coding agent that can read local files, run FFmpeg, edit a web project, and start a local development server. Codex is one option; another agent is fine if it has the same access.
- The absolute file path or downloadable URL for the final property video
- The display name, monthly price, approximate area, and contact email
- Four to six listing photos—or permission to extract clean stills from the video
- A clear privacy rule: exact address allowed, approximate area only, or no location at all
Important: Use footage and listing information you have permission to publish. If the address is private, tell the agent before it creates metadata, filenames, maps, or alt text.
STEP 1 / COPY THIS PROMPT
Paste this into your coding agent as one message
Replace every bracketed field, attach the video or provide its path, then send the entire prompt. The agent should make the site and test it instead of returning a tutorial.
Build a complete local-first property rental website from this video:
[ABSOLUTE VIDEO PATH OR DOWNLOAD URL]
Property details:
- Display name: [THE RESIDENCE]
- Price: [$1,500 / month]
- Approximate area: [PASADENA]
- Contact email: [EMAIL]
- Location privacy: [APPROXIMATE AREA ONLY — NEVER SHOW THE EXACT ADDRESS]
Do the work inside a new or existing React/Next.js project. Do not give me instructions to edit files myself. Inspect the video, implement the site, run it locally, test it, and give me the local URL. Do not deploy unless I explicitly ask.
Build requirements:
1. Use the video as a full-screen sticky scroll hero. Scrolling forward moves the video forward; scrolling back reverses it. After the video reaches the end, the normal property page begins.
2. Analyze the footage and create 5-9 short text beats that match real shots. Place the changing copy at the bottom-left. Use a sharp luxury editorial display font, restrained rise-and-focus animation, readable text shadows, and no decorative line above the headline.
3. Keep the video bright. Use only subtle top and bottom gradients for readability—never put a dark full-screen overlay or heavy filter over the footage.
4. Keep the red circular scroll arrow. Add a centered red monthly-price pill at the top-right. Do not add comparison buttons, fake badges, or generic template sections.
5. Make the post-hero page feel like a polished Airbnb listing: white background, #ff385c accent, generous rounded corners, overview, gallery, amenities, inquiry card, approximate map, and one clear rental CTA.
6. Protect privacy in visible copy, metadata, source filenames, image alt text, maps, and public media paths. If location privacy is approximate, center the map on the named city only and label it approximate.
7. If listing photos are missing, extract 4-6 sharp still frames from the video for the gallery. Never use blurry transition frames.
8. Inspect the ending and remove any logo animation, production slate, or unwanted outro from the scroll master.
Video requirements:
- Keep the source file untouched and create a separate browser-scrub MP4.
- Use H.264 High profile, Level 4.2, 1920x1080, 30 fps, yuv420p, Rec.709, AAC audio, fast-start MP4, and a fixed 8-frame GOP.
- Aim for roughly 35-45 Mbps so the image stays clean without creating a 100+ Mbps file that is difficult to seek.
- Use the video element muted, playsInline, and preload=auto. Add a high-quality poster frame.
Scroll-seeking requirements:
- Map normalized hero scroll progress to video currentTime.
- Smooth toward the target time with a factor of 0.12 inside requestAnimationFrame.
- Do not issue another seek while video.seeking is true.
- Throttle currentTime assignments to at least 34 ms apart.
- Skip assignments when the difference is 0.025 seconds or less.
- Use 9,000 px desktop / 6,800 px mobile for a 25-35 second video.
- Use 16,000 px desktop / 11,200 px mobile for a 60-80 second video.
- Add a reduced-motion or data-saver fallback that shows the poster and lets the visitor skip directly to the listing.
Finish by checking desktop and mobile behavior, reverse scrolling, the transition into the listing, the inquiry action, route status, and source privacy. Keep the development server running and return the exact local website URL.STEP 2 / MAKE THE SEEK MASTER
Use this exact FFmpeg starting point
The short GOP is the important part. It gives the browser frequent keyframes to seek toward while keeping the picture much cleaner than a tiny web export.
ffmpeg -i "[INPUT.mp4]" -map 0:v:0 -map 0:a? -vf "scale=1920:1080:force_original_aspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2,fps=30" -c:v libx264 -preset slow -profile:v high -level:v 4.2 -pix_fmt yuv420p -b:v 40M -maxrate 45M -bufsize 90M -g 8 -keyint_min 8 -sc_threshold 0 -color_primaries bt709 -color_trc bt709 -colorspace bt709 -c:a aac -b:a 320k -movflags +faststart "[OUTPUT-scroll.mp4]"Important: This intentionally creates a heavy 1080p file. A large hero can still load slowly on cellular or lower-powered devices, and preload is only a browser hint. Keep the poster fallback and test the real hosting connection before sending the page to a client.
STEP 3 / LOCK THE FEEL
Use these timing values before changing anything
The video should feel connected to the wheel or trackpad without jumping an entire room in one gesture. These settings are the baseline that produced the controlled result.
SCROLL DISTANCE
Give the footage room
Use 9,000 desktop pixels for a 30-second cut or 16,000 for a 60-80 second cut. Mobile uses roughly 70-75% of the desktop distance.
SMOOTHING
Ease toward the requested frame
Move the smoothed time 12% toward the target on each animation frame instead of snapping straight to it.
SEEK CONTROL
Never stack seeks
Wait until the current seek finishes, limit assignments to about 30 per second, and ignore microscopic time differences.
TEXT BEATS
Match shots, not percentages
Time every headline from the actual footage and leave small gaps between beats so the house can breathe.
STEP 4 / IF IT LAGS
Paste this repair prompt
Do not let the agent redesign the page while fixing playback. Use one focused instruction.
Fix only the scroll-video performance. Keep the current design and copy unchanged. Inspect the scrub MP4 with ffprobe. If it is above H.264 Level 4.2, above roughly 45 Mbps, or has long keyframe gaps, re-encode a new 1080p Rec.709 yuv420p master at about 40 Mbps with an 8-frame GOP and fast-start metadata. In the seek loop, prevent overlapping seeks, throttle currentTime writes to at least 34 ms apart, skip differences at or below 0.025 seconds, and keep the 0.12 smoothing factor. Test forward and reverse scrolling before returning the local link.STEP 5 / SWAP THE VIDEO
Reuse the site without rebuilding it
When the client sends a new cut, use this follow-up prompt. It preserves the layout while recalculating everything that depends on the footage.
Replace the scroll hero with this new video: [NEW VIDEO PATH OR URL]. Keep the existing website design. Inspect the new duration, frame rate, color tags, bitrate, and ending. Trim any unwanted outro, create a new browser-scrub master with the same quality and short-GOP settings, update the poster, scroll distance, duration, and every text-beat timestamp, then test forward and reverse scrolling. Do not reuse the old timestamps and do not reduce brightness or image quality.STEP 6 / SEND IT
Check these six things before the agent sees it
The website is the deliverable. The technical setup should disappear once the page is working.
- One normal wheel gesture advances the video without skipping the whole tour
- Reverse scrolling feels controlled and does not freeze on an old frame
- Every headline matches the room or exterior currently on screen
- The footage stays bright and sharp at full-screen size
- No exact address, hidden source filename, coordinate, or unwanted outro is exposed
- The inquiry button, mobile layout, reduced-motion fallback, and final listing transition work
Official Resources
KEEP LEARNING
One guide down. The full library is waiting.
Go back to the Dorian Drone resource library for the Part 107 roadmap, creator systems, drone workflows, and new field guides.
Browse All Free GuidesNo paywall. No fake results. No fluff.