A Practical Guide to Recreating Scroll-Driven Particle Animations with AI Coding Assistants

1. Why “Just Copy That Animation” Is Harder Than It Looks

Many developers have the same impulse when they see a particle gather-and-scatter effect on a page’s first screen: “I want that.” But when they hand the request to an AI coding assistant, they often get a version that looks similar but behaves differently—the shape is off, the timing is wrong, the particles fall apart when the mouse moves, or the laptop fan becomes noticeably louder.

The problem is usually not model capability. The problem is that the request has not been turned into an engineering specification.

A typical initial request is one sentence:

“It should gather and scatter while scrolling. After gathering, it should form a specific shape. After scattering, it should look like stars.”

That sentence hides at least six technical decisions:

• Particle count scale
• Target point sampling method
• Interpolation curve
• Scroll progress mapping
• Interaction force field model
• Rendering backend choice

If any of these details is missing, the result will drift.

This article takes the following position: recreating a visual effect should be treated as a complete workflow of visual specification extraction, engineering implementation, and automated acceptance, not as a moment of inspiration.

2. Turn “Cool” Into Measurable Technical Specifications

Before writing any code, convert subjective descriptions into a parameter table. The more detailed this step is, the less rework will be needed later.

Dimension	Questions to confirm	Typical value range
Particle scale	How many particles should appear on screen?	2,000 to 20,000; Canvas 2D has a lower ceiling, while WebGL can support more
Shape sampling	Is the target shape text, a logo, or an arbitrary bitmap?	Use offscreen rendering sampling for text; use threshold sampling for bitmaps
Gather and scatter progress	How is the scroll range mapped to morph progress?	About 0.8 to 2.5 times the first screen height
Interpolation method	Linear interpolation, easing, or physics-based spring?	Commonly lerp plus easeOutCubic
Interaction model	Is the mouse effect repulsion, attraction, or vortex?	Repulsion radius of 80 to 200 px
Rendering backend	Canvas 2D or WebGL?	Prefer WebGL when particle count exceeds 8,000

This table is valuable because it serves both as implementation input and as acceptance criteria. With it, vague complaints such as “it looks different” become locatable defects such as “the particle density is off by an order of magnitude” or “the progress range is only 0.8 screen heights and lacks margin.”

3. Reverse Engineering: How to Extract Someone Else’s Animation

3.1 Three Practical Evidence-Gathering Paths

1. Browser evidence
   Use built-in browser capabilities or local browser automation to load the target page. Capture network requests, script chunks, texture resources, and font resources.
   The advantage is speed. The disadvantage is that the output is often minified, obfuscated, or split into chunks, making static reading expensive.

2. Runtime observation
   Locate the rendering loop in developer tools.

   • For performance analysis, use the performance panel to inspect the main-thread flame graph and find the paint function that takes a long time each frame.
   • For WebGL scenes, capture shader source code and buffer upload calls.
   • For Canvas scenes, hook the drawing APIs and observe how many drawing operations happen per frame.

3. Pixel measurement
   When the code cannot be read, fall back to inferring the effect from the rendered output.
   Take screenshots frame by frame. Measure particle count, distribution radius, the scroll offset at which gathering occurs, and the speed of change in a single frame. Then use parameter fitting to approximate the behavior.
   This path is the slowest, but also the most reliable.

In practice, developers usually combine all three: read the code when possible, measure pixels when the code cannot be read, and use runtime breakpoints to confirm uncertain details.

3.2 Common Failure Modes

• Copying the shape but not the timing
  The static frame may look identical, but the scrolling process is completely different. This often happens because the implementation uses linear progress while the original uses nonlinear easing.

• Ignoring scaling and device pixel ratio
  The effect may look correct on a high-resolution screen but blurry on a normal screen. This usually happens because the drawing coordinate system was not scaled according to devicePixelRatio.

• Ignoring “random but stable” behavior
  The original may use an initial distribution that changes on every refresh but remains stable during a session. If the copied version reshuffles particles constantly, the result may feel unstable or jittery.

• Only implementing half of the interaction
  Mouse repulsion may exist, but the return force and damping may be missing. As a result, particles do not return to their original positions after the mouse moves away.

4. Prompt Design: Turn “Make It Exactly the Same” Into an Executable Contract

When prompting an AI coding assistant, do not describe “the effect I feel.” Describe the goal, materials, constraints, acceptance criteria, and iteration method.

Below is a reusable prompt template:

[Objective]
Recreate a scroll-driven particle gather-and-scatter animation.
Output a standalone demo page.
[Visual specification]
1. The first screen should show a character shape formed by particles.
   During scrolling, the particles should spread into star-like points.
   After continuing to scroll, they should gather again into a logo shape.
2. When the mouse enters, particles should be pushed away by a repulsion force.
   After the mouse leaves, they should return to their original positions within 400 ms.
3. The gather-and-scatter progress should be driven by scroll position.
   Include about 15% of easing margin to avoid abrupt switching.
[Forensics requirements]
Prioritize extracting target page resources and scripts.
If the code is minified, switch to frame-by-frame screenshots and measure particle count,
distribution radius, and the gather moment.
List the key values you measured and clearly mark uncertain items.
[Engineering constraints]
- Single-file HTML with inline styles and scripts. No external dependencies.
- Adapt to 1280, 1440, and 1920 widths and DPR 1 and 2.
- Target frame rate: 60fps. Main-thread long tasks should not exceed 8 ms per frame.
[Acceptance method]
After output, self-check four items:
shape similarity, timing consistency, interaction return behavior, and performance.
Provide conclusions and evidence for each item.
Clearly mark anything that is uncertain.
[Iteration rules]
I will only point out what is wrong.
Locate the cause before making changes.
Do not blindly rewrite the overall structure.

The last two parts of this template are especially important.

• Asking the model to provide evidence significantly reduces cases where something appears complete but is actually incorrect.
• Constraining rewrite strategy avoids repeatedly overturning previous work during each iteration, which can prevent the result from converging.

5. Sample Implementation: Four Core Logic Fragments

5.1 Sample Target Points From Text or Bitmaps

// Render the target shape offscreen and convert pixels into particle coordinates by threshold.
function samplePoints(draw, w, h, step = 3, threshold = 128) {
  const cv = new OffscreenCanvas(w, h);
  const ctx = cv.getContext('2d');
  draw(ctx, w, h);
  const { data } = ctx.getImageData(0, 0, w, h);
  const pts = [];
  for (let y = 0; y < h; y += step) {
    for (let x = 0; x < w; x += step) {
      const a = data[(y * w + x) * 4 + 3];
      if (a > threshold) pts.push({ x, y });
    }
  }
  return pts;
}

The step parameter directly controls particle density. It is the main knob for balancing shape clarity and performance.

5.2 Map Scroll Progress

// Normalize the scroll position to [0, 1] and reserve easing margin.
const span = innerHeight * 1.6;
function progress() {
  const p = Math.min(Math.max(scrollY / span, 0), 1);
  return p < 0.5
    ? easeInOut(p * 2) * 0.5          // gather phase
    : 0.5 + easeOut((p - 0.5) * 2) * 0.5; // scatter phase
}
const easeOut = t => 1 - Math.pow(1 - t, 3);

5.3 Interpolation, Mouse Repulsion, and Return

const R = 160, R2 = R * R;
for (let i = 0; i < n; i++) {
  const p = parts[i];
  // Target position: interpolate between shape points and star points based on progress.
  const tx = lerp(p.sx, p.ix, t), ty = lerp(p.sy, p.iy, t);
  let vx = (tx - p.x) * k, vy = (ty - p.y) * k; // Return force
  const dx = p.x - mx, dy = p.y - my, d2 = dx * dx + dy * dy;
  if (d2 < R2 && d2 > 0.01) {                    // Repulsion
    const f = (1 - Math.sqrt(d2) / R) * force;
    vx += (dx / Math.sqrt(d2)) * f;
    vy += (dy / Math.sqrt(d2)) * f;
  }
  p.vx = (p.vx + vx) * damping;                  // Damping prevents jitter
  p.vy = (p.vy + vy) * damping;
  p.x += p.vx; p.y += p.vy;
}

The parameters k, force, and damping determine the feel of the interaction. If the feel cannot be tuned well, the cause is usually missing damping, which causes particles to oscillate.

5.4 Choose the Rendering Backend

Canvas 2D can become a bottleneck when thousands of independent drawing calls are made per frame. Practical options are:

• Batch paths and fill them with a single color.
• Switch to WebGL, store position data in buffers, and perform interpolation in the vertex shader.

Once particle count exceeds 10,000, the Canvas 2D approach is more likely to drop frames. WebGL can remain stable. Also avoid creating objects or closures inside the animation loop. Preallocating a Float32Array is one of the lowest-cost optimizations.

6. How to Objectively Evaluate Output From Multiple AI Coding Assistants

One common pitfall is novelty bias: the first model tested may receive an inflated subjective score simply because it was seen first.

To make conclusions more reliable, control the variables:

1. Same materials
   Give every model the same screenshots, asset package, and prompt.

2. Same environment
   Use the same browser, screen, and network conditions so performance data is comparable.

3. Blind testing
   Hide the source of each output before asking people to score it. This reduces brand expectations.

4. Scorecard-based evaluation
   Score each version on the following dimensions from 1 to 5, with evidence:

   • Shape similarity
   • Timing consistency
   • Interaction feel
   • Performance
   • Code readability
   • Iteration response quality

5. Look at the convergence curve
   The first version’s score is less important. What matters more is the ability to fix issues after receiving specific feedback. This best distinguishes “can write code” from “can deliver.”

From an engineering perspective, the key capability dimensions are:

• Visual intent understanding: Can the model translate a screenshot into parameters?
• Code understanding: Can it read minified output or locate the rendering entry point?
• Engineering completeness: Does it consider responsive behavior, DPR, fallback behavior, and accessibility?
• Feedback convergence efficiency: Does the result actually improve after multiple rounds of correction?

7. Engineering Details That Must Not Be Missing

• Accessibility and fallback
  Respect prefers-reduced-motion. When enabled, render a static shape directly. On mobile devices, reduce particle density or fall back to a static image.

• Do not block the first screen
  Initialize the animation after the main content is rendered. Avoid delaying Largest Contentful Paint.

• Monitoring and gradual rollout
  After release, collect frame rate distribution and long-task duration. Roll out gradually by traffic percentage and roll back if anomalies appear.

• Static hosting
  These demo pages are usually purely static outputs. They can be placed on object storage and distributed through a CDN. Version them by directory so multiple iterations can be compared in parallel. Use a unified resource path to load different iteration versions without introducing build-time dependencies.

• Reproducibility
  Archive the prompt, screenshots, and scorecard in the repository. The next time a similar request appears, the work can be reused instead of starting from zero.

8. Acceptance Checklist

Before delivery, check the following items one by one:

• The shape remains complete and uncropped at 1280, 1440, and 1920 viewport widths.
• The gather-and-scatter timing matches the original, including easing margin.
• Mouse interaction includes both pushing and returning, with no continuous jitter.
• At the target frame rate, there is no accumulation of long tasks, and the laptop fan does not spin excessively.
• The page remains usable when reduced motion is enabled.
• There are no external dependencies, and the page can run offline as a standalone file.

9. Summary

Recreating a scroll-driven particle animation looks like an aesthetic challenge on the surface. In practice, it is a test of specification extraction ability and iteration convergence ability.

Turn vague descriptions into a parameter table.
Turn evidence gathering into verifiable runtime observation.
Turn prompts into contracts with acceptance clauses.
Turn subjective scoring into blind-test scorecards.

Once these four things are done well, the lower bound of output quality improves regardless of which AI coding assistant is used. Tools will keep evolving, but the methodology remains transferable.