You know those websites where you scroll and an entire scene unfolds? The video moves with you. Headlines appear, shift, and disappear. Everything feels connected.
I wanted to build one using Ulcinj as the subject.
The idea was simple: start with an empty coastal hillside, then have the Old Town gradually build itself as the visitor scrolls. Along the way, text would introduce the place and move with the footage.
My starting point was a single photograph. Here’s how I took it through Canva, ChatGPT, Higgsfield, and Claude to create the finished landing page.
What the finished page does
The opening section fills the screen and stays in place while you scroll through the animation. Your scroll position controls which part of the video you see.
- Scroll down and the town gradually takes shape.
- Scroll back up and the sequence reverses.
- Stop scrolling and the video settles on that moment.
- As the scene changes, five text compositions appear and transition.
- At the end of the sequence, the hero releases and the rest of the page continues.
This is often called “video scrubbing”: moving through a video’s timeline by controlling its position. Here, scrolling is the control.
The text adds another layer. Headlines reveal line by line, supporting copy drifts at a different speed, and sections fade into each other. The visitor sets the pace of the whole sequence.
The workflow at a glance
- 01Find the reference photo in Canva.
- 02Ask ChatGPT to turn the video idea into a detailed prompt.
- 03Use that prompt and photo in Higgsfield to generate the video.
- 04Ask ChatGPT to improve the brief for the landing page.
- 05Give Claude the improved brief and video to build the page.
I used ChatGPT twice, for two separate briefs. The first described what should happen inside the video. The second described how the website should behave around that video.
1. Start with the image you want to end on
I went to Canva and found a photograph of Ulcinj: stone walls, terracotta roofs, the harbour, and the sea.
That photograph became the destination for the animation. I wanted the video to begin with the same landscape before any buildings appeared, then gradually arrive at the scene in the photo.
Defining the ending gave the video a clear direction. The terrain, viewpoint, and finished architecture were already there in the reference.
2. Turn the video idea into a clear prompt
Next, I uploaded the photo to ChatGPT and described the idea in everyday language: begin with a bare hillside, then show the town being built until the video reaches the supplied image.
I asked ChatGPT to prepare a prompt I could take to Higgsfield.
That turned the idea into specific instructions about the camera, starting landscape, construction sequence, and final composition.
The key instructions were to keep the camera fixed, preserve the landscape, and use the photo as the final scene. With the framing held steady, the changing town becomes the focus.
The prompts below are reusable versions of the briefs from this workflow, edited for clarity rather than presented as exact conversation transcripts.
I am uploading a photograph that should represent the final scene of an AI-generated video.
Help me write a detailed prompt that I can paste into Higgsfield together with this image.
My idea: begin with the same location as an untouched natural landscape, then show an accelerated construction sequence until the completed scene closely matches the reference photograph.
For this image of Ulcinj, the starting scene should be a rocky coastal hillside with no buildings. The town should gradually take shape: foundations, fortification walls, stone buildings, terracotta roofs, and finally waterfront details.
Keep the camera fixed throughout. Preserve the reference viewpoint, horizon, terrain, and composition. Make it clear that the uploaded photograph is the END state.
Write a practical prompt for a roughly 15-second video. Include the opening, the transformation, and a short hold on the finished scene. Avoid text, logos, cuts, and sudden camera movements.3. Generate the video in Higgsfield
I took the prompt into Higgsfield and supplied the Canva photograph as the end-image reference.
Higgsfield generated the construction sequence: a bare coastal landscape gradually becoming Ulcinj’s Old Town. That gave me the footage for the hero.
If you’re adapting this to your own image, replace the architectural and landscape details in the example below.
Create a photorealistic 15-second construction time-lapse using the supplied image as the FINAL scene.
CAMERA
Use one continuous fixed-camera shot. Match the reference image’s viewpoint, framing, horizon, and perspective. No pan, zoom, orbit, shake, or scene cuts.
OPENING: 0–2 SECONDS
Show the same coastal headland before construction: exposed rock, low vegetation, and the sea. Preserve the underlying terrain. There should be no buildings, defensive walls, paved roads, cars, or boats.
TRANSFORMATION: 2–13 SECONDS
Show the town gradually taking shape in a visually coherent accelerated construction sequence. Begin with ground terraces and foundations. Build the stone fortification walls, then the stone buildings, followed by terracotta roofs. Add waterfront structures and the remaining details toward the end.
Structures should emerge progressively in their final positions. Avoid buildings melting, stretching, floating, or abruptly appearing fully formed. Keep the horizon and terrain stable throughout.
ENDING: 13–15 SECONDS
Arrive as closely as possible at the supplied reference photograph, including the arrangement of buildings, fortifications, roofs, waterfront, vegetation, and boats. Hold the completed scene briefly.
Maintain consistent lighting and colour throughout. Do not add text, subtitles, logos, or watermarks.4. Describe how the website should behave
With the video ready, I went back to ChatGPT.
This time, I described the website: an informative landing page about Ulcinj, with the video in the hero, scrolling controlling the footage, and text changing as the visitor moves through it.
I left room for the page’s copy and visual design to be improvised. The interaction was the part I wanted defined clearly.
Improve the following prompt so I can give it to Claude together with my video file. Return a complete, actionable website brief.
I have an AI-generated construction time-lapse of Ulcinj, Montenegro, named ulcinj-timelaps.mp4.
I want a cinematic, informative landing page with this video as a full-screen hero. As the visitor scrolls, the video should advance and the text should change and animate with it.
The hero should stay pinned during the sequence. Scrolling down should advance the video, scrolling up should reverse it, and stopping should hold the current moment. The video and text should follow the same scroll progress.
Include several readable text moments with different compositions, smooth reveals, and subtle parallax. After the sequence, continue into normal sections about Ulcinj.
Give Claude creative freedom over the design and copy, while making the scrolling behaviour precise. Include mobile layouts, video preparation for smooth seeking, loading fallbacks, and a reduced-motion alternative.
Keep the implementation as simple as practical and ask Claude to build the complete page.5. Give Claude the brief and the video
I then gave Claude the improved prompt together with the Higgsfield-generated video.
Claude created the complete landing page, including the hero animation, changing text, supporting sections, and responsive layouts. The page’s markup, styling, and interaction code were contained in one HTML file, with separate media assets.
Here’s an adapted build prompt that brings the main requirements together.
Build a complete cinematic landing page about Ulcinj, Montenegro, using the attached ulcinj-timelaps.mp4 as the central visual.
GOAL
Create an informative page where the visitor controls the construction time-lapse by scrolling. Make the video and changing typography feel like one coordinated experience.
HERO BEHAVIOUR
Start with a full-screen hero and a prominent “Ulcinj” headline. Keep the hero pinned while the visitor scrolls through a dedicated section.
Map progress through that section to the video timeline. Scrolling down advances the footage. Scrolling up reverses it. Stopping holds the corresponding frame after a brief smoothing period. Do not use continuous autoplay as the main interaction.
TEXT SEQUENCE
Create five short text moments covering an introduction, the headland, the Old Town, the coastline, and a closing invitation to explore.
Use a mix of centred and offset layouts. Add masked headline reveals, overlapping fades, and subtle movement at different speeds for headings and supporting copy. Keep each moment readable long enough before transitioning.
Drive the video and text from the same scroll progress. All scroll-driven transitions should work in both directions. Make the opening headline visible without requiring the visitor to scroll first.
AFTER THE HERO
Release the pinned section and continue into editorial sections about the Old Town, coast, and everyday life. Write concise copy. Verify specific factual claims or leave them out. Treat the generated construction footage as a creative visualisation, not a historical reconstruction.
DESIGN
Use bold typography, generous spacing, restrained colour, and subtle overlays for text readability. Let the footage remain the focus. Include a scroll cue and a small progress indicator.
VIDEO AND PERFORMANCE
Inspect the supplied video. If necessary, create browser-friendly versions suited to frequent seeking, plus a smaller mobile version with a deliberate crop. Keep the source file intact.
Avoid overwhelming the video decoder with repeated seek requests. Show a matching poster image while footage loads and provide a usable fallback if it cannot load.
MOBILE AND ACCESSIBILITY
Adapt typography, spacing, and compositions for small screens. Ensure captions fit and remain readable. Respect prefers-reduced-motion by showing a static hero and readable text without requiring the video animation.
DELIVERY
Build the actual page and provide all required assets. Prefer plain HTML, CSS, and JavaScript if sufficient. Use relative asset paths and include a README explaining how to run the page.
Check forward and reverse scrolling, stopping mid-sequence, rapid scrolling, mobile layouts, media loading, and reduced-motion behaviour. State which checks you actually performed and identify any remaining limitations.What connects the video and the text
The underlying idea is straightforward: one scroll position controls several things at once.
In this page’s code, progress through the hero is converted into a position in the video. That same progress determines which text is visible, where it sits, and how it enters or leaves.
At roughly halfway through the scroll sequence, you’re roughly halfway through the footage. The typography is also at its corresponding point in the sequence.
The implementation adds smoothing and manages video-seek requests so the browser can keep up. It also includes separate mobile framing, poster images during loading, and a static layout for visitors who prefer reduced motion.
Those details are part of the experience. A strong animation still needs readable text, sensible loading behaviour, and a layout that works on a phone.
What to check when you try it
Generating the files gives you something concrete to inspect. Before publishing your own version, work through the interaction yourself.
- Watch the generated video from beginning to end for distracting visual changes.
- Scroll slowly and check that every headline has enough reading time.
- Scroll backwards and confirm that the footage and text reverse together.
- Stop halfway through and check that the video holds its position.
- Scroll quickly and see whether the sequence catches up cleanly.
- Open the page on a phone and inspect the crop and text placement.
- Check the loading state and reduced-motion version.
- Confirm that the delivered folder contains every media file referenced by the page.
Start with what should change
For this project, the transformation was an empty hillside becoming a town. That gave the scrolling a purpose: every movement revealed more of the scene.
If you adapt the workflow, start by deciding what the visitor should see at the beginning and what they should reach at the end. Then define the video and website behaviour around that change.
I brought the image, the concept, and the direction. ChatGPT helped me express the briefs, Higgsfield produced the footage, and Claude built the page.
That’s the process behind this hero: one photograph, a defined transformation, and a website that lets the visitor move through it.
Have an idea for your website?
I build websites with clear thinking, considered design, and personal responsibility. Tell me what you want people to experience.
Let’s talk