AI-Assisted Reproduction of High-Fidelity Particle Motion Effects: Practice and Evaluation

1. Starting From a Real Requirement: Not Innovation, but High-Fidelity Reproduction

A developer was browsing a product launch page and was captured by a scroll-driven particle effect. Hundreds of thousands of particles first gathered into a character shape in the first viewport, then transitioned into the outline of a cursor, and finally converged into a brand logo. As the page scrolled, the particles continued to move through cycles of dispersion and aggregation, freely deforming between shapes.

The developer described the effect as a “spiral galaxy” rather than a simple nebula. The key point was that the particles were not randomly diffusing; they were moving in a directed way around an implicit gravitational center.

This kind of requirement is common in real projects. The design is already finalized, a competitor’s animation is already live, and the team needs to move the visual result precisely into its own technology stack rather than create something from scratch. Therefore, the request to “copy” the effect was made, with one explicit constraint: it must look exactly the same.

This constraint may seem simple, but it is an excellent test of generative coding tools. Pixel-level reproduction does not allow vague descriptions. It requires the tool to understand abstract visual language—form, density, rhythm, and depth of field—and translate it into executable rendering logic and mathematical expressions. Any output that merely “looks similar” is a failure here.

2. Translate the Animation Into a Technical Specification: A Six-Layer Breakdown

Before giving instructions to any generative tool, you must first complete the breakdown yourself. An animation that cannot be specified cannot be accepted, nor can it be compared fairly.

Layer 1: Shape Field

The target positions of particles should not be hard-coded scattered points. They should come from a shape source that can be sampled. A common approach is to rasterize the target graphic onto an offscreen canvas, read the alpha channel pixel by pixel, filter out valid sample points, and map those points to particle coordinates. The character, cursor, and logo shapes should each generate their own set of sample points, and the number of points should be consistent across shapes. Consistent point count is the prerequisite for interpolating between shapes.

// Sample target shapes from an offscreen canvas and return a coordinate array of unified length
function sampleShape(draw, canvas, count) {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  draw(ctx, canvas.width, canvas.height);
  const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const picked = [];
  const step = 4; // Sampling step used to control the number of candidate points
  for (let i = 0; i < data.length; i += 4 * step) {
    if (data[i + 3] > 128) {
      picked.push({
        x: (i / 4) % canvas.width,
        y: Math.floor(i / 4 / canvas.width)
      });
    }
  }
  // If there are more candidate points than particles, sample them at equal intervals; if there are too few, fill by repeating
  return resample(picked, count);
}

Layer 2: Particle System and Motion Model

Each particle needs to maintain its current position, current velocity, and target position. A shape transition is not a simple reassignment. After the target points change, the particle should approach them through spring interpolation or critically damped interpolation. At the same time, a tangential velocity component around a center point should be added. This is what creates the sense of a vortex. Pure radial interpolation only produces “scaling,” not a galaxy-like motion.

Layer 3: Scroll as Timeline

Scroll distance must be normalized into a progress value between 0 and 1, then mapped to the shape timeline and a dispersion coefficient. The most common mistake here is treating scroll directly as position, which causes the animation to stop immediately when the user releases the scroll. The better approach is to treat scroll as the “target progress” and use an interpolated value with inertia to follow it, producing a natural sense of lag.

Layer 4: Easing and Rhythm

Dispersion and aggregation are not linear processes. Each shape interval needs its own easing curve: particles should converge quickly when entering a shape, breathe slightly while holding the shape, and diffuse slowly when leaving it.

Layer 5: Visual Enhancement

Depth of field, additive blending, a central glow, and motion trails determine the boundary between a “cheap particle animation” and a “premium visual effect.” Depth of field can adjust particle size and opacity according to the Z-axis.

Layer 6: Performance Budget and Fallbacks

First, define the budget: particle count, CPU work per frame, number of draw calls, and GPU memory usage. At the same time, prepare three fallback tiers: use the GPU rendering pipeline when graphics acceleration is available; reduce the particle count when falling back to the 2D canvas API; and output static shapes when the system prefers reduced motion or the device is low-end.

3. How to Give Instructions to a Generative Tool

The quality of the instruction determines the quality of the output. An effective requirement description should include five elements:

1. Visual goal: Describe what can be observed, not emotional adjectives. Write “particles rotate around the center along spiral arms, with sparse outer regions and dense inner regions,” not “make it feel cosmic.”
2. Interaction mapping: Clarify the correspondence between scroll intervals and the shape sequence, as well as the easing intention for each segment.
3. Technical constraints: Specify the rendering approach, such as a graphics API or a 2D drawing API, whether dependencies are allowed, and the baseline browser support target.
4. Engineering constraints: Define the maximum device pixel ratio, the reconstruction strategy when the window size changes, and resource release when the component unmounts.
5. Acceptance criteria: This is the most easily overlooked but most critical element, as discussed in the next section.

It is better to use “incremental delivery” than to request a complete implementation in one pass. First, ask the tool to produce shape sampling and static positioning, which can be verified with screenshots. Then add the scroll-driven timeline. Finally, add visual enhancements and fallback branches. Each step produces a verifiable intermediate result, making it much cheaper to locate problems when something goes wrong.

4. Establishing Quantifiable Evaluation Dimensions

When multiple tools or models perform the same task, it is not enough to judge by “it looks good.” The following six dimensions can form a scoring table. Score each item from 0 to 5, and define explicit weights for each dimension.

Dimension	What to examine	Judgment method
Shape fidelity	How closely the sampled point distribution matches the target outline	Compare static screenshots for each shape
Morphing naturalness	Whether the transition contains crossing, jitter, or particles clumping together	Observe the middle stage frame by frame
Scroll response	Whether the progress mapping is monotonic, whether inertia is reasonable, and whether there are jumps	Test with both constant-speed and fast scrolling
Performance	Whether it meets the team’s defined frame budget	Use the browser performance panel and sample frame timing
Code quality	Maintainability, resource leaks, clarity of naming and structure	Code review
Specification compliance	Whether it follows responsive sizing, preference settings, and WebGL fallback behavior	Check each item one by one

A key reminder: do not trust performance numbers reported by the generative tool itself. All performance conclusions must come from local testing. They should be measured repeatedly on the target device tier, and the median should be taken to avoid one-off overhead such as first compilation or cold cache startup.

5. Common Failure Modes and Fix Strategies

In practice, failure modes for this kind of task are highly concentrated. They can be pre-written into an acceptance checklist:

• Particles scatter on click but do not gather back: The shape sample counts are inconsistent, or target positions are regenerated every frame. The fix is to generate all shape coordinates once during initialization and cache them.
• It looks like scaling rather than a vortex: The tangential velocity component is missing. Each particle needs an independent phase and angular velocity, and the angular velocity should decay with radius.
• Scroll feels stiff: The scroll value is used directly as progress. Separate the target value from the interpolated tracking value.
• The screen becomes garbled after fast scrolling: The progress interpolation is not constrained to the [0, 1] interval and overflows. Clamp it explicitly.
• Frame rate drops sharply after returning from another tab: The animation loop is not paused when the page is hidden, the animation frame handle is not cleared, or event listeners are not unbound. Release resources on visibility changes and unmount.
• The result is blurry on high-DPI screens: The drawing buffer size is not set according to the device pixel ratio, or it is scaled without an upper limit, wasting GPU memory.
• A large number of temporary objects are allocated every frame: Particle coordinates and color arrays are created inside the loop, triggering frequent garbage collection and periodic stutter. Preallocated buffers should be reused.

// Robust main-loop skeleton: clamped time step, visibility pause, and resource disposal
const state = { target: 0, eased: 0, raf: 0, last: 0 };
function tick(now) {
  const dt = Math.min((now - state.last) / 1000, 1 / 30); // Clamp to prevent a large jump after returning from a hidden tab
  state.last = now;
  state.eased += (state.target - state.eased) * Math.min(1, dt * 6);
  updateParticles(state.eased, dt);
  render();
  state.raf = requestAnimationFrame(tick);
}
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    cancelAnimationFrame(state.raf);
  } else {
    state.last = performance.now();
    state.raf = requestAnimationFrame(tick);
  }
});
// Release graphics resources and listeners on disposal to avoid memory leaks
function dispose() {
  cancelAnimationFrame(state.raf);
  geometry.dispose?.();
  program.dispose?.();
  window.removeEventListener('resize', onResize);
}

6. Engineering Deployment Considerations

Replication requirements are often underestimated as one-off frontend work, but they need long-term maintenance after release. Three suggestions are worth noting:

• Extract a configuration layer: Move particle count, shape sequence, easing parameters, and color palette into an independent configuration layer so that animation adjustments do not require touching the rendering logic. Visual tuning is the most frequent follow-up change for this type of requirement.
• Separate “reproduction” from “assets”: Shape sample points, textures, and other resources should be distributed through an independent static asset pipeline, combined with a content fingerprint caching strategy. Avoid bundling them into the main package and blocking first-screen loading.
• Monitor frontend experience metrics: Integrate logging and monitoring alerts, and collect long-task duration, frame-time distribution, and script error rates. Rendering issues can vary greatly across the real-device distribution. Without online data, judgment can only rely on the feel of the development machine.

7. Conclusion

“Copying an animation exactly” is a plain sentence, but it is also a severe test for generative coding tools. It requires shape understanding, mathematical modeling, performance engineering awareness, and engineering discipline at the same time. For developers, the real leverage is not how powerful the tool itself is, but whether the visual requirement has been decomposed into verifiable specifications and whether an independent measurement and acceptance mechanism has been established.

In related engineering practice at Baidu AI Cloud, the same method—requirement specification, incremental delivery, and measured acceptance—is also applicable when integrating AI coding capabilities into the development process. Letting tools handle highly repetitive skeleton code, while concentrating human judgment on defining visual goals and quality gates, is the most reliable division of labor.