AI Generated Scroll-Scrubbed 3D Website Workflow

Core Message

A cinematic 3D-style website can be built quickly by combining three things:

1. A strong reference design or background asset.

2. AI image and video generation to customize the visual subject.

3. AI-assisted frontend implementation where scroll progress controls text and video playback.

The important pattern is not only generating a nice video. The website works because the video is tied to scroll position, so scrolling forward advances the motion and scrolling back reverses it.

Workflow Overview

1. Start With a Reference Visual

Begin with an image or website section that already has the composition, lighting, and motion style you want. The example workflow uses a dark, high-contrast landing page with:

• A pure black background.

• A simple navigation bar.

• Oversized typography at the bottom of the hero.

• A central animated subject.

• Scroll-driven transitions between sections.

The reference does not have to be the final subject. It is mainly used to preserve the motion, composition, and atmosphere.

2. Replace the Subject in the Image

Use an image generation tool such as Higgsfield or ChatGPT image generation to swap the main subject while keeping the original background and style.

The process:

1. Copy or upload the original reference image.

2. Find the replacement subject image, for example from Pinterest.

3. Upload both images.

4. Ask the model to replace the subject in the first image with the subject from the second image.

Reusable prompt:

Replace the main subject in the first image with the subject from the second image. Keep the background, composition, lighting, and overall style from the first image.

For the cat example:

Replace the bunny with the cat. Keep the background from the first image and preserve the same visual style.

This creates a custom still image that matches the reference scene but uses a new brand-relevant subject.

3. Turn the Image Into a Matching Video

After generating the customized image, use an image-to-video tool such as Seedance 2.

Use:

• Reference video: the original animation.

• Reference image: the newly generated image.

• Aspect ratio: 16:9.

• Resolution: 1080p for web use.

• Duration: match the original reference video duration.

For web projects, 1080p is usually a better default than 4K because it loads faster and is easier to scrub smoothly in the browser.

Reusable prompt:

Animate the attached image like the attached reference video. The motion should be the same while preserving the subject, composition, and style of the generated image.

Download the generated video and place it inside the website project folder.

Building the Hero Section

1. Create the Base Hero

Start with a minimal hero section before adding the video.

Claude prompt:

Create a hero section that is 100vh. The background should be pure black with no gradient. The navbar should be simple, with a logo on the left and four links on the right.

  

At the bottom of the hero section, around 40px from the bottom, place a large headline that fills the full width of the hero section and says "Inner Circle".

  

The headline should be uppercase and should scale with the hero width. When the hero becomes larger, the headline becomes larger. When the hero becomes smaller, the headline becomes smaller.

This creates the basic stage: black background, simple nav, and oversized bottom-aligned typography.

2. Improve the Typography

The visual quality depends heavily on font choice. In the workflow, the font is changed to Michroma from Google Fonts.

Claude prompt:

Use the Google Font "Michroma". Import it from Google Fonts and apply it to the headline in uppercase. Also apply it to the logo.

Use a strong display font for the hero title and keep the rest of the page quieter so the layout does not become visually noisy.

3. Add Scroll-Driven Character Animation

The large hero title can disappear as the user scrolls by splitting it into individual characters.

Claude prompt:

The large title "Inner Circle" should be split into individual characters. Each character should fall downward and fade out one by one from left to right as the user scrolls.

  

Add a slight squish effect. The animation should be tied directly to scroll position rather than time, so scrolling back up reverses it.

The key behavior is scroll reversibility. The animation should not simply play once on page load.

Scroll-Scrubbed Video Playback

1. Add the Hero Video

After generating the custom video, add it to the project folder and reference it in the Claude prompt.

Claude prompt:

Use the video file named <video-file-name>.mp4 in this project.

  

A muted video element should have its currentTime set on each animation frame based on scroll progress multiplied by the video's duration. Scrolling forward should play the video forward, and scrolling back should rewind it.

  

Smooth the seek with a lerp:

  

current += (target - current) * 0.15

  

This should avoid jittery jumps and help the video feel smooth across devices.

Implementation idea:

• Use a muted video element.

• Calculate scroll progress.

• Convert scroll progress into target video time.

• Update video.currentTime inside requestAnimationFrame.

• Smooth the current time toward the target time with interpolation.

This is easier than trying to play the video normally and gives the page a controlled scrollytelling feel.

2. Add Content Below the Hero

After the hero animation is working, add a section below it with a smaller headline, tagline, and description.

Claude prompt:

Below the hero section, add a new content section. It should have a tagline above the headline, similar in size to the logo, aligned to the left side.

  

The headline should use the same new font but be a little smaller than the hero title. Under the headline, add a normal one-sentence description.

  

Also speed up the disappearance of the "Inner Circle" font during scroll.

If the text becomes too wide or wraps awkwardly, tighten the copy and reduce the content width.

Refinement prompt:

Change the headline from "Crafted for the few who notice" to "Crafted for the few".

  

Make the width of this whole section shorter because the text is expanding too much. Decrease the section width.

  

Also animate the text in from the right side from a blurred, slightly scaled-down state to sharp and full size as it enters the viewport on scroll. Use a staggered delay so each line animates in sequence.

Building the Second Scroll Panel

The second major section uses a full-screen panel that rises from the bottom and contains a 3D cylindrical text drum effect.

1. Generate the Second Video

Repeat the same asset process:

1. Take a screenshot or image of the reference subject.

2. Upload the reference image and the replacement subject image.

3. Generate a new still image with the subject replaced.

4. Use Seedance 2 to animate the still image using the original reference video.

5. Match the duration of the original video.

6. Download and add the video to the project folder.

Reusable image prompt:

Replace the bunny with the fluffy cat image. Keep the same position, scale, background, lighting, and composition from the first image.

Reusable video prompt:

Animate the attached image like the attached reference video. The motion should be the same.

2. Create the Rising Panel

Claude prompt:

Create a full-screen panel that rises from the bottom of the viewport, driven by scroll progress over the first section. Give it a rounded top edge.

  

For now, keep this new section pure black.

  

Behind everything, prepare a scroll-scrubbed video background that I will attach later.

  

On the left side, add a scroll-driven text drum with manifesto lines, keyword highlights, depth blur, and opacity falloff.

The rising panel creates a transition from the hero into the next full-screen experience.

3. Add the 3D Cylindrical Text Drum

Use the text drum effect when the section needs kinetic typography rather than static paragraphs.

Claude prompt:

Create a 3D cylindrical text drum effect where lines of text are arranged along a vertical cylinder, rotating into and out of view as the user scrolls.

  

Each line should be positioned using 3D transforms: translateY based on its distance from the focused line, translateZ using cosine to simulate curvature with a radius around 380px, and a subtle rotateX tilt.

  

Lines near the center should appear fully opaque and sharp. Lines further away should progressively blur with a depth-of-field blur filter and fade out.

  

Certain keywords within the text should be highlighted in full white with bold weight, while the rest is rendered at 60% opacity. This should create a kinetic-typography manifesto feel.

  

The current focused line should be driven by scroll progress mapped across the total line count, giving the user a scroll-to-read experience like spinning a vertical drum of text.

Copy-generation prompt for the drum:

Write approximately 30 lines of manifesto-style text, around 1,200 characters total, split into 2 paragraphs separated by a blank line.

  

Each line should be 35-55 characters and should display as a single unwrapped line.

  

The tone should be bold, declarative, and anti-establishment, like a founder addressing an elite community.

  

Scatter 2-4 highlighted keywords or phrases per line, marked with brackets like [keyword]. The highlighted words should be punchy and specific: technical terms, action verbs, or provocative claims.

  

The non-highlighted connecting words should read naturally at 60% opacity as supporting text between the emphasized ideas.

4. Add the Second Video Background

Once the generated video is ready, place it in the project folder and ask Claude to wire it into the second section.

Claude prompt:

I have added this video file to the project:

  

2video2.mp4

  

Add it as the background of this section without overlays. It should also be tied to scroll.

  

Use the same scroll-scrubbed currentTime property as the hero section so the video plays smoothly without lagging.

Avoid unnecessary overlays if the video itself is already designed for a black-background section.

Tools Mentioned

| Tool | Role |

| --- | --- |

| MotionSites.ai | Reference designs, background assets, and prompts. |

| Pinterest | Finding replacement subject images. |

| Higgsfield | Image replacement and image generation. |

| Seedance 2 | Turning still images into videos that match reference motion. |

| Claude | Generating and refining the website implementation. |

| Google Fonts | Improving typography, especially the hero title and logo. |

| Screen Studio or CleanShot | Recording the finished scroll interaction for sharing. |

Practical Prompt Sequence

Use this order when building a similar page:

1. Generate the base hero with black background, simple nav, and oversized title.

2. Apply a stronger Google Font.

3. Split the hero title into scroll-animated characters.

4. Generate the custom hero image and video.

5. Add the video as a scroll-scrubbed muted video element.

6. Add the first content section below the hero.

7. Tighten the content width and add staggered scroll reveals.

8. Generate the second image and video.

9. Add a full-screen rising panel with rounded top edge.

10. Add the 3D cylindrical text drum.

11. Add the second scroll-scrubbed video background.

12. Review the scroll timing, text readability, video smoothness, and responsive layout.

Mistakes to Avoid

• Do not start with a weak reference image. The final site depends heavily on the first composition.

• Do not generate a video before the still image is visually correct.

• Do not use 4K video by default for a web background if 1080p is enough.

• Do not let the hero title animation be time-based if the rest of the experience is scroll-driven.

• Do not leave long text lines that wrap awkwardly in the cylindrical drum effect.

• Do not add overlays automatically when the video is already designed for a pure black section.

• Do not ignore performance. A scroll-scrubbed video should be muted, preloaded, and updated carefully.

• Do not accept the first AI-generated layout without checking spacing, typography, and scroll feel.

Checklist

• Pick a strong reference design or background.

• Find a replacement subject image.

• Generate a new still image that preserves the original background and style.

• Create a matching animation in Seedance 2 using the original video as reference.

• Use 16:9, 1080p, and the same duration as the source animation.

• Add the generated video file to the project.

• Build a pure black 100vh hero section.

• Apply a strong display font such as Michroma.

• Animate the hero title by splitting it into characters.

• Tie the hero video currentTime to scroll progress.

• Smooth video seeking with lerp.

• Add the post-hero content section with staggered reveal.

• Build the second full-screen rising panel.

• Add the cylindrical text drum effect.

• Add the second scroll-scrubbed video background.

• Test scrolling forward and backward.

• Check mobile and desktop layout.

• Record the final result only after the interaction is smooth.

Final Notes

The workflow works because each AI tool is used for the part it handles best. Image generation customizes the subject. Video generation transfers the motion. Claude builds the interface and ties the animation to scroll.

The strongest results come from being specific about what should stay the same: background, lighting, position, composition, and motion. The more clearly those constraints are stated, the less cleanup is needed in the final website.