Vite + React + Tailwind site with a scroll-scrubbed drone fly-through, services, projects, company, team and contact sections, plus a Dockerfile + nginx config for Coolify deployment. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
9.4 KiB
Mega Infrastructure: fly-through footage brief
The homepage opens with a scroll-driven fly-through. Scrolling scrubs through one continuous shot, and five text chapters appear over it. Right now it runs on a placeholder built from Mega's own drone stills (slow push-ins with crossfades). This doc covers the two ways to replace it with real motion:
- Option A: real drone footage. Best. Authentic, and engineers and municipal clients will trust it.
- Option B: AI-generated video. Good for a launch or a mood piece, and it fills gaps in real footage.
You can also mix them: real drone for chapters 2 to 4, AI for the dawn opener and the dusk finale.
The story (keep this order: the site copy is timed to it)
| # | Scroll range | Chapter on screen | What the camera sees |
|---|---|---|---|
| 1 | 0–15% | We Move Your World | High above the Gauteng / Bushveld landscape at golden hour. Site visible far below. |
| 2 | 15–35% | 01 Bulk Earthworks | Descending onto a site: excavators and graders cutting red earth, platforms taking shape. |
| 3 | 35–60% | 02 Roads | Following the line of a road under construction: layerworks, then fresh black asphalt and kerbs. |
| 4 | 60–80% | 03 Municipal & Stormwater | Low over open pipe trenches, manholes, culverts and headwalls. |
| 5 | 80–100% | Three companies. One force. | Pull back and rise over a finished development at dusk, street lights on, traffic flowing. |
Total length: 10–20 seconds is plenty. Scroll stretches it, so a short clip with slow, steady camera movement works better than a long, busy one.
Option A: drone shoot shot list (for the team / drone operator)
Kit: DJI Mavic 3 / Air 3 / Mini 4 Pro or similar. 4K, 25 or 30 fps, D-Log or normal colour (both fine).
Golden rules
- One continuous move per shot. No yaw spins, no speed changes, no zoom. Smooth forward or downward motion only.
- Slow. Roughly 2–4 m/s forward. Cinematic mode / tripod mode on.
- Shoot at golden hour. 30–60 min after sunrise or before sunset. Long shadows read as premium. Dusk for shot 5.
- Site must look its best: PPE on everyone visible, machines working (not parked), signage clean, no litter.
- Overlap shots. Start each shot roughly where the previous one ended so they cut together as one flight.
| Shot | Location idea | Move | Duration |
|---|---|---|---|
| 1 | Any current site with landscape around it (Thabazimbi has mountains) | Start at max legal altitude (120 m), camera tilted ~30° down, fly slowly forward towards the site | 6–8 s |
| 2 | Active bulk earthworks: excavator loading, grader cutting platforms | Descend from ~60 m to ~25 m while moving forward, camera tilting from 45° to straight down | 6–8 s |
| 3 | Road under construction, ideally with the paver laying asphalt | Fly along the road centre-line at ~20 m, camera ~45° down, moving the same direction as the paver | 6–10 s |
| 4 | Stormwater / sewer trench with pipes and a manhole or culvert | Straight top-down (90°) at ~15 m, slowly tracking along the trench | 6–8 s |
| 5 | A completed project (Sparks School, Willow Park Manor) at dusk with lights on | Start low (~15 m) and rise + pull back to ~80 m, revealing the whole development | 8–10 s |
Also capture (for the rest of the site): 10–20 still photos per project from the same flights, plus 3–4 close-ups of machines and crew on the ground.
Option B: AI video prompts
Works with Google Veo 3, Kling 2.x, Runway Gen-4, MiniMax Hailuo, or Luma Ray.
How to get one continuous flight out of AI tools:
- Generate shot 1 with text-to-video.
- Export the last frame of shot 1 and use it as the start frame (image-to-video) for shot 2. Repeat for each shot.
- Generate at 16:9, 1080p or higher. Generate 3–4 takes per shot and keep the smoothest.
- Stitch in CapCut / Premiere / DaVinci with short 0.3–0.5 s cross-dissolves.
Style block. Paste this at the end of every prompt so all shots match:
Cinematic aerial drone footage, shot on DJI Inspire 3, 24mm lens, smooth stabilised gimbal motion, constant slow speed, no camera shake, no cuts. South African Highveld, warm golden-hour sunlight, long soft shadows, red-ochre earth, dry winter grass, acacia trees, hazy blue mountains on the horizon. Photorealistic, natural colour grade, subtle film grain, high dynamic range. No text, no logos, no people looking at camera.
Shot 1: Opener ("We Move Your World")
Very high aerial shot, camera tilted 30 degrees down, gliding slowly forward over a vast golden South African bushveld landscape at sunrise. Far below, a large civil construction site comes into view: freshly graded red-earth platforms, a new road cutting through the veld, tiny yellow earthmoving machines. Morning mist in the valleys, mountain range on the horizon. Slow, majestic, steady forward motion. [style block]
Shot 2: Bulk Earthworks
Aerial drone descending smoothly towards an active bulk earthworks site, camera tilting from 45 degrees to looking straight down. Two yellow hydraulic excavators loading red soil into articulated dump trucks, a motor grader cutting a level platform, workers in orange hi-vis vests and white hard hats. Deep red-ochre earth with sharp terraced cuts, long morning shadows from the machines. Continuous slow descent. [style block]
Shot 3: Roads
Low aerial tracking shot flying forward along the centre-line of a new road under construction, camera 45 degrees down. An asphalt paver lays a steaming strip of fresh black asphalt, a steel drum roller compacts behind it, new concrete kerbs and a sidewalk line both sides, crew in orange hi-vis. The road leads towards a new housing development. Golden late-afternoon light glinting on the fresh asphalt. Smooth constant forward motion. [style block]
Shot 4: Municipal & Stormwater
Top-down 90 degree aerial shot, drone tracking slowly along an open trench in red earth. Large concrete stormwater pipes and blue water pipes laid in the trench, precast concrete manhole rings, a brick headwall with a culvert outlet, workers in white hard hats and grey overalls guiding a pipe into place with an excavator. Clean geometric composition, strong shadows. Steady tracking motion. [style block]
Shot 5: Finale ("Three companies. One force.")
Aerial drone rising and pulling back at dusk over a completed modern development in South Africa: a school campus and housing estate with new tarred roads, neat paving, green sports fields, and warm street lights switching on along the roads. Cars with headlights moving along the new roads. Sky glowing deep amber to indigo, mountains silhouetted on the horizon. Slow, steady upward and backward reveal of the whole development. [style block]
Negative prompt (tools that support it)
shaky camera, fast motion, zoom, cuts, text, watermark, logo, distorted machinery, melting vehicles, extra wheels, warped people, cartoon, CGI look, oversaturated, fog covering everything, snow, tropical plants
Watch for: AI often mangles machinery (wrong number of wheels, bending excavator arms). Engineers will notice, so reject any take where the machines look wrong. Keep people small in frame.
Turning the final video into the website frames
Once you have the final MP4 (16:9, ideally 1920×1080 or larger):
cd app
scripts/make-frames.sh /path/to/final-flythrough.mp4 # default 120 frames
That writes public/frames/desktop (1280×720), public/frames/mobile (portrait centre-crop) and manifest.json. Reload the site and you're done.
- Want it smoother? Use 160–180 frames (
scripts/make-frames.sh clip.mp4 160). The download grows with the frame count. - Keep the important action in the centre third of the frame: phones show only the centre crop.
- If the shot lengths differ from the table above, adjust the
atranges insrc/data/content.ts → chaptersso each text block lines up with its footage.
Team photography brief ("bring the team in")
The current team photos use two different setups (directors on grey, everyone else on wood), so the site shows them in black and white to match. For a properly premium team section, do one consistent shoot:
- Background: one setup for everyone. Either plain charcoal grey (studio) or on site with a blurred machine behind (more on-brand).
- Framing: chest-up, square crop, eyes about a third from the top, same height and distance for every person.
- Wardrobe: Mega branded shirts (or navy / black), no busy patterns.
- Light: soft key from one side, same for everyone. Natural, relaxed expression.
- Bonus: 2–3 group shots on site in PPE: directors together, then the whole team in front of a machine. These make great section backgrounds.
- Delivery: at least 1200×1200 px JPGs named
firstname.jpg. They replace the files inapp/public/img/team/(convert to.webp, or rename the paths insrc/data/content.ts).
Still to collect from the business
These would strengthen the site for tenders and procurement:
- CIDB grading and class of works
- B-BBEE level and certificate (PDF)
- Safety stats / certifications (e.g. ISO 45001, COID letter of good standing)
- Company profile PDF for download
- Client names / logos you're allowed to show, plus 2–3 short client testimonials
- Project values, dates, and clients for each project in the projects list
- A shared enquiries address (e.g.
info@megainfra.co.za) for the contact form