3D Scroll Animation Technique

Core Message

A polished 3D type scroll animation does not have to start with hand-built 3D assets. A practical shortcut is to:

1. Start with a strong AI-generated image.
2. Turn it into a short animated video.
3. Convert that video into a JPEG frame sequence.
4. Use the frame sequence as a scroll-driven website animation.
5. Let AI tooling scaffold the hero, layout, and refinements.

The key idea is that the scroll effect works best when the browser is stepping through image frames, not trying to scrub a normal video file directly.

Workflow Overview

1. Choose or Generate the Base Image

Start with a visually strong image that already has depth, contrast, and a clear focal point. Search for an AI-generated s'tyle that fits the site concept, such as a cosmic, architectural, futuristic, or portal-like scene.

Freepik or magnific.com is useful for this stage because it has a large library of AI-s'tyle imagery. The goal is not to find the final animation yet. The goal is to find a still image that has enough visual depth to support movement.

Good candidates usually have:

• A clear foreground, midground, and background.
• A strong central object or opening.
• Enough contrast to keep text readable after overlays are added.
• A composition that can tolerate zooming or camera movement.

2. Create Start and End Frames

For a more controlled animation, create two related images:

• A start frame.
• An end frame.

The end frame should be a deliberate variation of the first image. For example, if the image has a door, portal, or opening, the second frame can show that element changed slightly.

This gives the animation model clearer direction than a single still image alone.

If the image dimensions are too large for the animation tool, resize the frames before upload. Figma is a quick option for reducing image dimensions and exporting cleanly, but any image editor works.

Simple frame names make it easier to keep the sequence organized later.

3. Animate the Frames

Use Kling 3.0 to turn the start and end images into a short video. Upload the first image as the starting frame and the second image as the ending frame.

The prompt does not need to be complicated. The image frames do most of the work. What matters is describing the camera movement and the specific object motion you want.

Example animation prompt:

Animate this scene with a slow zoom-in, a strong sense of depth, and a smooth transition between the first and second frame. Keep the original design intact and avoid adding new visual elements.

If the scene includes a door or portal, make that motion explicit:

Animate this scene with a slow zoom-in and depth. As the camera moves forward, the front door should open naturally and reveal the next space. Keep the design consistent with the uploaded frames.

Generate a short clip, around six seconds. Expect to retry. Image-to-video tools may add unexpected design details unless the prompt clearly asks them to preserve the original design.

4. Convert the Video Into a JPEG Sequence

After generating the video, convert it into a sequence of JPEG frames. This is the important technical step for making the scroll animation feel smooth.

Use a video-to-JPEG converter and set:

• Start frame: 0
• End frame: the final frame of the video
• Size: original
• Frame rate: up to 30 FPS
• Output: JPEG sequence

Download the frames as a ZIP file, then extract them into a project folder named:

frames

The exact filenames usually do not matter as long as they are consistently ordered. The AI coding tool can infer the sequence when the files are organized in one folder.

Build the Website

1. Scaffold the Hero Section

Use Google AI Studio as the fast starting point for the first version of the hero section.

The initial goal is only to get:

• A black background.
• Strong typography.
• Liquid-glass s'tyle UI elements.
• A clean hero layout.
• No video background yet.

Example scaffold prompt:

Build a hero section using this visual s'tyle. Keep the background pure black. Do not include a video background because I will add my own scroll-controlled animation later.

Once the basic layout is good enough, download the generated code as a ZIP file.

2. Move the Project Into Antigravity

Unzip the generated site and open the folder in Antigravity. Start the project on localhost so the design can be previewed while the AI edits the code.

Then add the extracted JPEG sequence to the project:

frames

This folder should contain all frames from the animated video.

3. Ask the AI to Create the Scroll Animation

Once the frame folder is in the project, prompt the coding agent to build the scroll-driven section.

Reusable implementation prompt:

I created a folder called frames and uploaded all animation frames there. Use these frames to build a scroll-controlled hero animation. As the user scrolls, the page should progress through the image sequence smoothly. Keep the hero section visually clean, with white text, a black background, and readable overlay content.

The main implementation idea is:

• Load the frame sequence.
• Pin or visually anchor the hero section during scroll.
• Map scroll progress to the current frame index.
• Render the active frame as the user scrolls.
• Layer text and interface elements above the animation.

Refining the Layout

The first generated result will usually need visual cleanup. The most important refinements are readability, section boundaries, and ending behavior.

Make Text Readable

If the text sits directly on a busy animation, readability suffers. Instead of darkening the entire video, use localized overlays.

Better approach:

• Keep the animation visible.
• Add a bottom gradient overlay in the hero section.
• Place the headline and description near the bottom.
• Use pure white text.
• Avoid low-opacity body text.

Useful refinement prompt:

In the hero section, align the headline and description to the bottom of the page. Do not darken the entire animation. Remove the full video overlay and add a bottom overlay only, so the text stays readable while the animation remains visible.

Use Liquid Glass for the Second Section

When the next section begins, a liquid-glass panel can separate the text from the moving background without losing the visual s'tyle.

Prompt:

The second section should use a liquid-glass background, and the text should be positioned on that surface for better readability.

Keep Text Fully White

Low-opacity text can look elegant in a static mockup but becomes hard to read over motion.

Prompt:

Make all text white. Do not use low-opacity text on the page because it reduces readability over the animated background.

Fix the Final CTA

The final form or call-to-action should be visible and should mark the end of the scroll animation.

Prompt:

In the final CTA section, make the form inputs darker so they are clearly visible. After the form, the page should not continue scrolling. The form should be the last section, and the frame animation should end there.

Tools Mentioned

Mistakes to Avoid

• Do not rely on the raw video file if the goal is precise scroll control.
• Do not use a busy animated background without readability overlays.
• Do not darken the whole animation when a localized bottom overlay is enough.
• Do not leave important text in low-opacity colors.
• Do not let the page keep scrolling after the final CTA if the animation is supposed to finish there.
• Do not accept the first AI-generated implementation without checking layout, contrast, and scroll behavior.
• Do not assume the image-to-video result will preserve the original design unless the prompt says so.

Practical Checklist

• Choose a base image with strong depth and a clear focal point.
• Create or generate a matching end frame.
• Resize frames if the animation tool rejects the image dimensions.
• Generate a short image-to-video animation in Kling.
• Convert the video into a JPEG sequence at up to 30 FPS.
• Put all frames into a frames folder.
• Scaffold the hero layout in Google AI Studio.
• Open the project in Antigravity.
• Ask the AI to map scroll progress to the frame sequence.
• Align hero text near the bottom with a readable overlay.
• Use white text over the animation.
• Add a liquid-glass section when text needs separation.
• Make the CTA form readable.
• End the scroll animation at the final section.

Final Notes

This technique works because it turns a short AI-generated video into something the browser can control frame by frame. The creative quality comes from the initial image and animation direction. The interactive polish comes from careful scroll mapping, readable overlays, and iterative AI-assisted layout refinement.

Reference

Access all prompts at motionsites.ai

Velorah Prompt from motionsite.ai

Google ai studio prompt

Using this prompt build me a hero section but do not include video background because we are going to have our own video later. Keep the bg black pure black

Create a single-page hero section with a fullscreen looping background video, glassmorphic navigation, and cinematic typography. Use React + Vite + Tailwind CSS + TypeScript with shadcn or ui.


Fonts:

Import from Google Fonts: Instrumental Serif (display) and Inter weights 400 or 500 (body)
CSS variables: --font-display: 'Instrument Serif', serif and --font-body: 'Inter', sans-serif
Body uses var(--font-body), headings use inline fontFamily: "'Instrument Serif', serif"

Color Theme (dark, HSL values for CSS variables):

--background: 201 100% 13% (deep navy blue)
--foreground: 0 0% 100% (white)
--muted-foreground: 240 4% 66% (muted gray)
--primary: 0 0% 100%, --primary-foreground: 0 0% 4%
--secondary: 0 0% 10%, --muted: 0 0% 10%, --accent: 0 0% 10%
--border: 0 0% 18%, --input: 0 0% 18%

Navigation Bar:

relative z-10, flex row, justify-between, px-8 py-6, max-w-7xl mx-auto
Logo: "Velorah®" (® as sup className="text-xs"), text-3xl tracking-tight, Instrument Serif font, text-foreground
Nav links (hidden on mobile, md:flex): Home (active, text-foreground), Studio, About, Journal, Reach Us — all text-sm text-muted-foreground with hover:text-foreground transition-colors
CTA button: "Begin Journey", liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground, hover:scale-[1.03]

Hero Section:

relative z-10, flex column, centered, text-center, px-6 pt-32 pb-40 py-[90px]
H1: "Where dreams rise through the silence." — text-5xl sm:text-7xl md:text-8xl, leading-[0.95], tracking-[-2.46px], max-w-7xl, font-normal, Instrument Serif. The words "dreams" and "through the silence." wrapped in em className="not-italic text-muted-foreground" for color contrast
Subtext: text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed — "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work."
CTA button: "Begin Journey", liquid-glass rounded-full px-14 py-5 text-base text-foreground mt-12, hover:scale-[1.03] cursor-pointer

Liquid Glass Effect (CSS class .liquid-glass):

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

Animations (CSS keyframes + classes):

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-rise { animation: fade-rise 0.8s ease-out both; }
.animate-fade-rise-delay { animation: fade-rise 0.8s ease-out 0.2s both; }
.animate-fade-rise-delay-2 { animation: fade-rise 0.8s ease-out 0.4s both; }

H1 gets animate-fade-rise
Subtext gets animate-fade-rise-delay
Hero CTA button gets animate-fade-rise-delay-2

Layout: No decorative blobs, radial gradients, or overlays. Minimalist, cinematic, vertically centered hero. The video provides all visual depth.

Prompt

Cinematic Scrolly telling with Canvas & GSAP

Start here:

Goal

Create a cinematic "Scrollytelling" effect in a React (TypeScript) application. The core idea is to play an image sequence (video frames) based on the user's scroll position, creating a high-performance video-like illusion controlled entirely by the mouse wheel.

Requirements

Technical Stack

• Framework: React (TypeScript)
• Styling: Tailwind CSS
• Rendering: HTML5 canvas
• Animation: GSAP (with ScrollToPlugin)

Detailed Requirements - Antigravity prompt

1. Frame Preloading & Loading State

• Preload a sequence of 180 images (e.g., frame-001.jpg to frame-180.jpg) into a memory array before rendering starts.
• Implement a "Loading Screen" overlay that displays the real-time percentage of loaded frames.

2. Canvas Rendering Logic

• Use a fullscreen canvas element (fixed inset-0 w-full h-full).
• Create a drawFrame(index) function to render the specific frame to the canvas.
• Crucial: Implement a manual object-fit: cover logic using aspect ratio math so the images always fill the screen perfectly without distortion, regardless of window size.
• Include a ZOOM_FACTOR variable (e.g., 1.35) in the draw calculation to slightly zoom into the frames, effectively hiding any baked-in black bars or letterboxing.

3. Scroll-to-Frame Mapping

• Set the container height to 500vh to create a long scrollable area.
• Listen for the scroll event and calculate a scrollFraction (0 to 1) based on window.scrollY and the maximum scrollable height.
• Map this fraction to the frame index (0–179) and use requestAnimationFrame to trigger drawFrame for buttery-smooth performance.

4. Interactive Mouse Parallax

• Add a mousemove event listener.
• Use gsap.to() to smoothly shift the canvas position in the opposite direction of the mouse movement to create a sense of 3D depth.
• Apply a CSS scale: 1.05 to the canvas to ensure that its edges never become visible during the parallax offset.

5. Performance & UX

• Ensure the canvas handles window resizing dynamically.
• The background should remain solid black to maintain a cinematic atmosphere.
• Use GSAP's ScrollToPlugin for smooth programmatic navigation (e.g., "Scroll to Top" buttons)

So i created a folder called frames and i uploaded all the frames there.

:end here

Third prompt in antigravity:

Its moving the text from center of the page to lower left in the hero:

So in the hero section the headline I wanted with the description, I wanted to be aligned to the bottom of the page. And instead of making the whole design darker, remove the overlay from our video, just add an overlay from the bottom of the page in the hero section. The second section should have a liquid glass background and the text should be positioned on it. so that's will give it more readability.