Long-Scroll Collage Motion Graphics: Design Language, AE Implementation, and Replication Method

This skill comes from a complete frame-by-frame replication (1920×1080, 24 fps, 272 frames, 12 iterations). It answers three things: What this kind of piece looks like and how it moves; how to build it in After Effects; and how to measure and align when you have a reference clip. The three sections can be used independently: refer to Sections 1–3 for original work, Section 4 for building the project, and Sections 5–6 for replication.

If the current project has a rollback-replica/ directory, that is the reference implementation: 拆解分析.md has all measured values, scripts/ is the scene generator, and tools/ has measurement scripts. Read those first; don't rewrite from scratch.

1. Design Language

1.1 World and Camera

All content is laid out on a horizontal long scroll (the reference piece is 11000×1080). The viewer sees the camera panning across this long scroll.
The camera only does horizontal panning and zooming, no rotation, and no vertical movement. Conversion: Xscreen = (Xworld − cx)·s + 960, Yscreen = (Yworld − 540)·s + 540.
A ruler runs across the entire scroll and is always centered in the frame (y=540, small tick marks spaced at approximately 7.27 px, one large tick every 5 marks). It is the axis of composition and the reference for measuring the camera.
No motion blur is used throughout the piece: shots panning 500 px per frame are still sharp. This is the source of the style's 「hard」 feel.

1.2 Layout

One Axis: Content hangs above and below the ruler; years and numbers are placed directly alongside the ruler as coordinates.
Solid Above, Mirror Below: Use the ruler as a mirror. The top shows the original image and forward-facing text; below it is a monochrome silhouette and inverted text.
Bracket Numbering: All annotations are wrapped in brackets, e.g., (1) (2), (crash), [cloud1]; bracket words are often hollow outline.
Thin vs. Thick Contrast: Fine details (1 px circles, concentric circles, arc text, guidelines) contrast with large, solid color blocks.
Nested Frames: Black frame inside black frame, rotated 90°, with the ruler passing through the middle.
Density Rhythm: Sparse → Dense → Very Dense → Whitespace → Full → Sparse. Don't stay uniformly filled.

1.3 Color

Gray background with black and white is the base. Only three accent colors are used; all other colors only appear within photographs.

Name	Value	Usage
Base Gray	`#E6E6E6`	Background (with very slight grain)
Rose Red	`#E8086D`	Rings, ribbons, beams, base color flashes
Bright Blue / Royal Blue	`#1F86F0` / `#0D3ED8`	Blocks, mirrored silhouettes / Large circles, sky
Blue-Violet	`#6982F6`	Base color flashes, silhouette placeholder color
Mint Green	`#19E6B4`	Small areas of color
Near Black	`#110D0C`	Black fields, endings

The base color itself undergoes hard cuts by section: Gray → Black → Rose Red → Blue-Violet, each change happening in a single frame.

1.4 Font Pairing

Mixing fonts is intentional: one font per information type. Transitional serif (Times, for bracket annotations, hollow outlines), Geometric sans-serif light (Montserrat, for year numbers, tight tracking), Rounded technical font (Jura / OCR-A, for command lines and small labels), High-contrast modern serif (Playfair / Bodoni, for large title words, letters tightly set), Ultra-bold slab serif (Lubalin / Rockwell, for main titles, horizontal stretch), Monospace (Consolas / Courier, for code and large numbers), Chinese Song / Ming typefaces (CJK, can be stretched horizontally up to 3x), Pixel dot matrix. Small text should be kept as small as 6–10 px; don't enlarge it. They are for 「texture」 not 「information.」

1.5 Element Vocabulary

Photo cutouts (high-contrast B&W, thresholded), find edges-style line art (white background, black lines with broken points), system UI screenshots (dialog boxes, file icons, tables, keyframe text), film scans (film base, sprocket holes, edge codes), 3D elements (liquid metal, shiny tubes, white models, wireframes), holographic cone gradients, 1-bit dither patterns, QR codes, pixelated figures. The same thing often appears in two versions: the actual object and its solid-color silhouette.

1.6 Texture

Solid color areas remain clean; gradients and gray areas show visible grain; an additional 2–3% monochrome noise is layered on top of the entire piece.
Photographs are given a 「photocopier」 look: thresholded, posterized, leaving only three or four gray levels.
Line art uses black lines on white fill, not gray lines; lines should be thin, allowing for broken points and fragments.
Chrome-textured objects look like a posterized render: a full white outline with a black outline over it, with highlights having a white core surrounded by concentric rings.

2. Motion Language

2.1 Camera

Zoom: Transition between a few fixed zoom levels using 3–5 frames of pure linear interpolation, then stop abruptly with no easing. In a few places, use exponential ease-out (multiply difference by 0.6–0.75 each frame) or exponential ease-in acceleration. A hard cut can also be used.
Panning is a superposition of three components:
1. Constant drift, about 4 world px/frame, continuous throughout the piece.
2. Impulses on beat frames, then decaying by a factor of 0.6–0.8 per frame (e.g., +195, +33, +20, +14, +11, +9, +7).
3. Jump cuts, jumping several hundred px in one frame.
Bake the camera into linear keyframes frame by frame. Don't rely on Bezier easing to guess this curve.

2.2 Beat

Events land on a grid of one beat every 6 frames (0.25 s at 24 fps), with an optional overall phase shift. Elements appear one per beat, not fading in all at once.

2.3 Element Entry and Transformation (Core Techniques)

Silhouette Placeholder: First show a solid-color silhouette for 1–2 frames (White → Blue-Violet → Object, or Rose Red → Object), then replace with the actual texture. Use the 「Tint」 effect to map both black and white to the same color, animating Amount to Tint from 100 to 0 with a hold keyframe.
One-Frame Flash / Size Alternating: Appear → vanish for one frame → reappear; or alternate between large, small, large, small three times before settling.
Radial Wipe by Beat Segments: A ring element first sweeps out a segment, then each beat the entire segment jumps to a new angle, drifting only 1–2°/frame between segments.
Two Linear Wipes (Head and Tail): For bar-like elements, first the 「head」 extends forward, then the 「tail」 catches up. What remains is the next element.
Holding Keyframes as Default: Position, scale, and rotation jump frame by frame; true easing is only used for 2–3 frame ease-outs.
Pop-in: 0.3–0.7x → 1.0 over 2–3 frames, optionally with an overshoot to 1.1–1.2.
Pin-to-Screen: Certain elements are fixed on screen while the camera moves (by creating frame-by-frame keyframes using the inverse camera transform), then after a while they are 「returned」 to the world.
Mixed Frame Rate: Small 3D animations are often made at 30 fps and placed in a 24 fps timeline. They move in a 1, 2, 1, 1 step pattern every 4 frames. When replicating, sample using sourceFrame = floor(1.25·(f − f0) + 0.5), don't interpolate uniformly.
Mirrored and Offset Duplicates: When a mirrored silhouette appears, place a white copy underneath it, and slide it from an offset to the aligned position over 4–5 frames.

2.4 Global Flash Effects

Effect	Method
Hard cut of base color (Black, Rose Red, Blue-Violet)	Hold keyframe on the solid color background layer
Threshold flash (1 frame, entire image becomes black and white)	Adjustment layer on top with 「Threshold」 effect
Difference threshold flash (anything different from the background becomes white)	Solid color matching the background, blended with 「Difference」 mode, with a 「Threshold」 effect on top
Full screen invert (certain elements keep their color)	「Invert」 effect on top; elements that should stay their original color apply their own 「Invert」 first
Local horizontal streak	Narrow adjustment layer with 「Transform」 effect, uncheck Uniform Scale, set Width to several thousand %
Flip-over	Layer X Scale keyframed frame by frame to hold (passes through zero to negative), pivot point also moved frame by frame, with a one-frame overshoot
End-credits	Gradient bars march across the screen, then exit; background color steps down to near-black; title is stretched horizontally into a smear

3. Order for Creating an Original Piece in This Style

Draw the long scroll: Determine the world width (approximately 800–1000 world px per second), divide into 4 sections, each with a theme and density.
Create the shot table: For each shot, write the zoom level, start and end cx, base color, and events; use only linear ramps or hard cuts between zoom levels.
Map events to the 6-frame grid: One new element per beat; schedule one global flash effect or base color change every 2–3 seconds.
Choose an entry technique from Section 2.3 for each element, not repeating the same one more than twice within the same section.
Prepare assets per Section 1.5's vocabulary, simultaneously creating a solid-color silhouette version for each.
Finally, add grain uniformly and check that no more than three accent colors are used.

4. After Effects Implementation

4.1 Project Structure

RB_REPLICA/
  01_Comp/   RB_MAIN (1920×1080 final output)   RB_WORLD (Long scroll world, e.g., 14400×2600)
  02_Assets/   Organized into subfolders by section (A_... B_... C_... D_..., ruler and global effects)
  03_Solids/   Background color, adjustment layers, mask solids

RB_WORLD holds all world-space layers; world point (x, y) corresponds to comp pixel (x + OX, y + OY), with margins around the edges.
RB_MAIN from bottom up: background solid → RB_WORLD (with collapse transformations enabled, the camera is its position/scale keyframes) → screen-space overlays → adjustment layers (grain, threshold, invert...).
Label layers by section color; include section prefix in asset filenames for easy navigation among 500+ layers.

4.2 Generate with Script, Don't Place by Hand

With a large number of layers and all values being measured, it's better to describe the scene with a script and import it:

A Scene holds a list of layers; each layer has world coordinates, a time range span(f_in, f_out), property keyframes, and a list of effects.
Assets are drawn by functions and cached by a hash of 「function source code + parameters」, redrawn only when changed.
Export as an AE project JSON, import using the aftereffects MCP's ae_project_import_json. To rebuild, delete the old root folder by id and re-import (import only appends).
List switches that cannot be carried by JSON (adjustment layers, collapse transformations, blend modes) separately, then apply them after import using layer.set_props / layer.set_blend_mode.
Elements with a unique pose per frame (rotating 3D objects, frame-by-frame gradient changes) are made as 「one frame per layer,」 each layer alive for only one frame. This is more reliable than stacking effect keyframes on a single layer.

4.3 Effect Usage Notes

Linear Wipe: The angle is the direction of travel. +90 wipes from the left, −90 from the right, 180 from the top, 0 from the bottom. The wipe is calculated in the layer's own space. If the layer is rotated, compensate by reversing the angle.
Radial Wipe: Start angle 0 = straight up, clockwise. 「Both」 mode wipes outward from the start angle in both directions.
Threshold level in a 16 bpc project is specified as 0–1.
For adjustment layers that are not at comp size, point parameters in effects will be transformed once by the 「Layer → Comp」 conversion.
Non-proportional static scaling should be baked into the asset rather than left in the layer's Transform properties (preview and export can become inconsistent).

4.4 Rendering and Export

AE's built-in H.264 can make highly saturated rose red appear darker. Use an uncompressed AVI, then ffmpeg:

ffmpeg -i main.avi -vf "scale=in_range=full:out_range=tv:out_color_matrix=bt709,format=yuv420p" -c:v libx264 -crf 17 -preset slow -color_primaries bt709 -color_trc bt709 -colorspace bt709 -color_range tv -movflags +faststart out.mp4

4.5 Collecting and Organizing Projects

When delivering or archiving, gather the project and its actually used assets into a standalone folder (equivalent to File > Dependencies > Collect Files):

Only copy assets referenced by layers, maintaining the project panel's folder structure in a (Footage)/ subfolder.
Generate a project file where asset paths point to the collected directory (new project → import the JSON with modified paths → reapply switches → set to the same bit depth and color settings as the original → Save As).
Write a collection report: comp specs, asset count and size, missing files, effects used (and whether they depend on third-party plugins), fonts used, and what was not collected.
Verify: Render the same one or more frames from both the original and collected projects. Pixel-by-pixel comparison must be identical. Confirm no assets are missing.
After completion, switch AE back to the original project. Don't touch the user's existing comps and assets in the project.

5. Method for Replicating a Reference Clip

The goal is to make it look like the same piece. Assets are redrawn or regenerated, not copied pixel-for-pixel from the original.

5.1 Order

Extract frames (all frames, JPG is fine) and record basic parameters: resolution, frame rate, total frame count, whether motion blur exists, and whether the audio track actually has sound.
Solve for the camera first: Find a rigid reference that runs through the entire piece (in this case, the ruler). Measure zoom and pan frame by frame, baking them into a camera table.
Reconstruct the world: With the camera solved, any frame can be projected back into world coordinates. All subsequent measurements are done in world space.
Create an element list: For each element, record its world position, start frame, end frame, entry technique, and frame-by-frame changes.
Build the first pass, render, compare frame by frame, and iterate based on discrepancies. Focus on one batch of issues per version, then render and compare again after fixing.

5.2 Measurement Discipline

Camera Audit: Locate each ruler tick per frame, convert back to world coordinates, and compare with the ideal grid. The residual should be constant within a single shot. If not, the camera table is wrong. This step once revealed two registration errors of 8 px and 49 px—completely invisible in a side-by-side comparison—that had biased all subsequent measurements.
Use numerical detection, not visual estimation: Reading coordinates from a cropped image with a grid introduces a systematic error of 3–8 px. Use detectors for critical measures: color thresholding + bounding box (heads and tails of bars), connected component centroid (highlights, markers), circle/ellipse fitting (spheres, rings, orbits), per-row statistics (line numbers and thickness). Run the same detector on both the original and the replica before comparing.
World-aligned crops: When comparing, crop the same world rectangle side-by-side from both the original and the replica, rather than comparing screen screenshots. This is especially important for shots where the camera is moving.
Frame-by-frame, not every other frame: Sampling every 2 frames once made a 4-frame period rotation look like it was 「barely moving.」
When an element seems to be moving strangely, first suspect the camera, then the element.

5.3 Using GPT / Codex to Redraw Assets from Reference Frames

Suitable for photos, line art, collage items, and hand-drawn items:

Crop the 1–2 cleanest frames of that element and enlarge them 2–4x as a reference image.
Prompt structure: 「Faithfully redraw X in the reference image」 → describe each object and its appearance item by item → list what to remove (ruler, overlapping lines, adjacent elements, text) → request a transparent background.
Models tend to stretch the subject to fill the canvas: pad the reference image to match the output aspect ratio and explicitly request to 「keep proportions, leave margins.」
Preview images may not show the alpha channel, giving the illusion of a glow. Check the alpha before judging; threshold it before use.
Multi-object images may shift layout: slice the image into blocks, place each block according to its actual world rectangle, allowing non-uniform scaling per block.
Models may copy third-party trademarks; these should be painted out.
Generation tasks can run in parallel in the background while continuing measurement and programmatic work.

Not suitable for generative models: anything requiring precise motion or topology (rotating rings, beads fused together, frame-by-frame changing gradients, wireframes). These should be rendered programmatically using fitted geometric parameters. The generative model is only responsible for textures and images. Clearly state reasons whenever deviating from the user's suggested tool.

5.4 Fitting Routine for 3D Objects

Track the position of a prominent feature (highlight) frame by frame.
Fit the projection path (ellipse), then explain 「near-large far-small, near-dense far-sparse」 using a perspective model.
Derive rotation speed and frame rate conversion rhythm from the phase sequence.
Render frame by frame using fitted parameters, then overlay the render with the original to check phase alignment.

5.5 Comparison and Delivery

Per-version output: the final film, a synchronized comparison video with original on top, replica below with frame numbers, and a set of keyframe comparison images.
Document: shot table, camera curve, per-element measured values, list of changes per version, and areas that still have discrepancies.
When reporting, clearly describe what didn't match and what type of discrepancy it is (shape, brightness, position, or timing). Don't just list what was fixed.

6. Checklist

Go through each item before delivery:

7. Frequently Asked Questions

High saturation colors appear dark after rendering: Didn't use lossless + ffmpeg with bt709 conversion.
Elements are misaligned by tens of pixels between shots: Camera table added or missed a ruler tick period at the jump cut.
Wipe direction is wrong: Linear wipe angle is the direction of travel; compensate if the layer is rotated.
Threshold frame is all black or all white: In 16 bpc, the level was written as 0–255.
Generated asset proportions are wrong: Reference image wasn't padded to the output aspect ratio.
Pinned elements drift during zoom changes: The inverse transform must use the camera value for each frame, baking hold keyframes frame by frame. Don't just set start and end keyframes.

novahanser/rollback-motion-recreation

rollback-motion-recreation 是什么？

在你喜欢的 AI 中提问

文档