← Back to blog
Guide
VAELT: a scroll-powered website with Replit
Generate a consistent campaign, turn it into connected clips, and let the scroll drive the film on a Replit-built site.
Daniil Filatov
· 9 min read
Watch the reel ↗
Hey! Here’s the workflow behind the VAELT® website from the video.
The main idea is simple: instead of using a video as a background, make the scroll control the film. Scroll forward and the shot advances. Scroll back and it rewinds.
You can build the whole thing in stages. Start with the visual world, then turn the footage into a scroll interaction, then use Replit to shape the website around it.
1. Create the visual direction
Start with the look, not the website.
Use an image-to-image model and attach:
A model reference
A clear product reference
A short description of the mood, lighting, framing, and environment
For VAELT®, I kept the model and glasses consistent while changing the setting and composition. The product needs to stay recognisable across every shot, otherwise the final video will feel like unrelated clips.
Image-generation prompt
Main portrait:
Prompt 01
Realistic lifestyle editorial portrait of an androgynous fashion-sport model wearing the exact Oakley sunglasses from the reference, photographed after dark on a dry desert road. Close-up or tight chest-up framing, straight-on or slightly off-center composition, raw outdoor fashion portrait with a pure lifestyle feel. Harsh direct on-camera flash hits the face and sunglasses, creating bright specular highlights, crisp skin shine, and sharp contrast against the deep dark ambient environment. No blurred background—the desert road, heat shimmer, and pale mountains remain visible and readable in the darkness. The subject has sun-bleached hair with messy windblown texture, slightly open mouth with a relaxed sun-drunk stare, lightly bronzed skin with sharp flash highlights, and minimal black tank straps visible at the edge of frame. Wind moves strands of hair across the face or around the sunglasses, adding motion and imperfection. The Oakley sunglasses are the hero product and must stay sharply visible, highly detailed, reflective, and dominant in the portrait. The setting blends nature with a raw editorial mood: desert road at night, residual heat in the air, pale mountains fading into deep blue-black darkness. The image should feel candid, flash-lit, tactile, and premium, like a fashion-sport portrait captured spontaneously on location after dark. Realistic skin texture, no heavy retouching, no soft focus, no creamy bokeh, no studio backdrop, no artificial perfection. Sharp background, harsh direct flash, modern lifestyle editorial aesthetic, hot-weather energy, natural environment meeting sport-fashion styling.
Copy includes the complete prompt.
Starting frame (attach your main portrait):
Prompt 02
Use the supplied direct-flash desert-road portrait as the primary reference for the model’s identity, facial structure, hair, skin texture, Oakley sunglasses, hard flash, dark road, mountain silhouettes, and color grade. Create a new start frame with the model sitting casually on the shoulder of the empty desert road, one knee raised and the other leg extending slightly out of frame. The torso is angled three-quarters toward the camera while the face remains turned directly into the flash. The model holds the exact Oakley sunglasses by one temple in the foreground, close to the camera but not covering the face. The glasses are sharply detailed, reflective, and dominant. The model has a calm, distant expression. Wind moves a few strands of hair across the forehead. Keep the road lines, dark mountains, deep blue-black sky, harsh direct flash, realistic skin texture, and raw fashion-sport editorial mood. No blurred background, no vehicle, no extra people, no changed identity, no duplicate glasses, no new lighting setup.
Copy includes the complete prompt.
Want more prompts like this?
370+ tested prompts across 38 collections, plus the Prompt Builder to remix them.
Standing straight
Prompt 03
Use the supplied direct-flash desert-road portrait as the reference for the exact model, face, Oakley sunglasses, hair, skin texture, lighting, road, mountains, and color grade. Create the final frame with the model standing in the exact center of the empty desert road, facing directly toward the camera. The model wears the exact Oakley sunglasses, shoulders relaxed, arms hanging naturally at the sides, posture calm and controlled. The expression is serious and self-possessed, with an almost imperceptible asymmetric smirk at one corner of the mouth—confident but not smiling. Harsh direct flash illuminates the face and glasses while the road, mountain silhouettes, and deep blue-black sky remain visible behind. Keep the camera angle, road perspective, direct flash, lens reflections, hair movement, and overall composition consistent with the reference. No changed identity, no exaggerated smile, no extra people, no new objects, no altered glasses, no background transformation. Generate four distinct images that feel like part of the same campaign. Think of them as four moments from one film, not four random images.
Copy includes the complete prompt.
Sunglasses solo:
Prompt 04
Preserve the exact Oakley sunglasses, in the air with a pure black background
Copy includes the complete prompt.
2. Turn the images into motion
Use the generated images as start and end frames.
Each pair becomes one transition. I ended up having 4 images and 3 clips.
Image 1 → Image 2 = video clip 1
Image 2 → Image 3 = video clip 2
Image 3 → Image 4 = video clip 3
This gives you three connected clips with matching visual anchors. The repeated product and model references help the transitions feel intentional instead of random.
Image-to-video prompts I used:
Prompt 05
Animate a seamless single-take transition from the left start frame to the right end frame. The woman begins seated on the dark desert road, holding the Oakley sunglasses close to the camera. She slowly pulls the glasses back, begins rising from the seated pose, and smoothly comes to a full standing position in the same road location. As she stands, she brings the sunglasses to her face and puts them on in one natural continuous movement. The camera tracks upward with her movement while slowly pushing forward, changing from the wider seated composition into the tight final close-up. The final close-up must show her already standing, not seated. Keep the same model, face, hair, clothing, Oakley sunglasses, harsh direct flash, road, mountain silhouettes, deep night sky, and color grade throughout. Wind moves a few strands of hair, and the lens reflections shift naturally as the glasses are raised. End exactly on the right reference frame: the woman is standing, wearing the sunglasses, with a serious expression and a subtle smirk. Export the clips and place them next to each other in any video editor. Keep the pacing clean and avoid transitions that hide the continuity between the shots.
Copy includes the complete prompt.
Prompt 06
Add a very slow, subtle camera zoom in —an optical dolly-in. Maintain the same camera height, straight-on perspective, road alignment, and direct-flash lighting.
Copy includes the complete prompt.
Prompt 07
smooth transition
Copy includes the complete prompt.
3. Start the Replit project
Create a new website project in Replit and attach the video to the Agent message. Replit will usually place it inside an attached_assets folder.
Before asking for the full website, make the first interaction work:
A tall scroll track
A sticky full-screen video stage
Scroll position mapped to video time
Scroll forward advances the video
Scroll backward rewinds it
My starting Replit prompt
Build a landing page for the VAELT® brand. Use the attached MP4 as the hero visual. Visual layout: Black background with a 12-column editorial grid. Fixed top navigation with VAELT®, Series 01 / 2026, compact center links, and Access Series 01 ↗ on the right. Full-screen cinematic video behind the interface. Bottom-left hero content: Series 01 / Adaptive optics, large VAELT® headline, and:A performance lens system built to hold contrast through glare, shadow, speed, and changing weather. Bottom-right technical block with Test / 01, supporting description, and (Adaptive lens) / (2026 release). Add a thin scroll-progress line at the bottom. Use Inter Tight, white typography, minimal rules, no cards, shadows, or decorative effects. Critical scroll structure:
html, body, #root, and all ancestors must use overflow: visible.
No ancestor may use height: 100vh, max-height, or transform.
.hero-track: position: relative; height: 500vh.
.hero-sticky: position: sticky; top: 0; height: 100vh; overflow: hidden.
The browser window must be the only scroll container.
The video must be absolute, inset 0, and object-fit: cover.
Map scroll progress to video.currentTime with a requestAnimationFrame interpolation loop. Seek only when the difference exceeds 0.02 seconds. On loadedmetadata, synchronously call play() and then pause() to prime mobile playback. Keep the video muted, inline, paused, and without controls, autoplay, or loop. Before declaring completion, verify that the video remains visible and scrubs forward and backward throughout the full 500vh track. The important part is the scroll architecture. The tall parent track gives the page room to move, while the sticky stage keeps the video visible as the user scrolls.
4. Add the second video (optional)
Once the first video works, attach the second clip and ask Agent to extend the timeline.
The first shot should fade into the second one without a black flash. Keep the second video underneath and let the scroll continue through the transition.
Second-video prompt
Add the second scroll-controlled video to the existing VAELT® website without changing the current visual design or breaking the first video. Use the newly attached MP4 from attached_assets. Find its exact filename, copy it into the public static asset directory, and use it unchanged. Extend the cinematic timeline to 1200vh with these phases:
0–300vh: the first video scrubs from start to finish.300–600vh: crossfade from video 1 into video 2.600–1100vh: video 2 scrubs according to scroll.1100–1200vh: hold the final frame, then release into the next section.
Keep the structure:
Prompt 08
hero-track: position relative; height 1200vh └── hero-sticky: position sticky; top 0; height 100vh; overflow hidden ├── video 2 underneath ├── video 1 above it └── fixed hero UI
Copy includes the complete prompt.
Keep html, body, #root, and all ancestors overflow: visible. The browser window must remain the only scroll container. During the transition:
Video 1 fades from opacity 1 to 0.
Video 2 remains at opacity 1 underneath.
Do not blur either video.
Do not create a black flash.
Do not autoplay or loop either video.
Continue using the existing requestAnimationFrame video scrubber with smooth interpolation and a 0.02s seek threshold. Update the text behavior to match the main VAELT version:
The opening hero text holds during video 1, then gently fades and moves upward near the end of its timeline.
As video 2 begins, reveal a technical text panel with a small numbered label, large paragraph, and compact measurement rows.
Reveal the text word by word using opacity, blur, and upward movement.
Add a second text panel later in the video-2 timeline with the same reveal style.
Keep all text in the existing Inter Tight, black-and-white editorial style.
Do not report completion until both videos remain visible through the full 1200vh track, the crossfade works, scrolling reverses correctly, and both text panels appear at the intended scroll positions. Keep the two videos visually connected. The transition should feel like one continuous film, not two separate embeds.
5. Build the interface around the film
Now use Replit Agent to art-direct the experience:
Fixed brand navigation
Editorial hero copy
Technical labels and data
Scroll progress indicator
Text that appears as the film moves
Field Records or image archive section
Final call to action and footer
The useful part is that you can keep talking to the Agent. Try a layout, keep what works, and roll back anything that takes the site in the wrong direction.
6. The key interaction
The website should not feel like a normal landing page with a video sitting behind it.
The scroll is the interface. The video is the timeline. The typography and sections respond to the same movement, so the whole page feels like one piece of film.
7. Publish
When the experience feels right, publish it directly from Replit.
Before publishing, check:
The video stays visible beyond the first viewport.
Scrolling forward and backward works.
The second video loads correctly.
There is no black gap between the scroll phases.
The page works on mobile.
The attached assets are served from public paths.
Then publish the site and share the link.
FILATOV.DESIGN MEMBERSHIP
Get every prompt behind my work
370+ tested prompts across 38 collections, the Prompt Builder to remix them in seconds, and new drops every week.
$15/month. Cancel anytime.
MORE FROM THE BLOG
Build an interactive 3D bookshelf with Replit
A practical workflow from the first interaction to realistic books and a shelf full of design classics.
Grok Imagine + Grok Build: a cinematic racing website
Turn a crushed can into a Formula 1 car, chain the clips into one continuous film, and build a scroll-driven editorial website around it.
5 niche archives for design inspiration
Five online archives I use for visual research, moodboards and typography studies, far beyond the usual Pinterest search.
Motion graphics with Claude Opus 5.5
The prompts I used to create two branded motion-graphics films in Claude, without plugins or manual keyframes.