Skilloop
1 小时内复刻高质量动效设计(附完整提示词)

提示词

作者在原帖中分享的提示词。
<inputs>
Ask me for: a theme (or keep lorem ipsum), 4 short big-type words for the opening line, a 10-word question, 3 one-word cards (7 / 10 / 10 characters including the full stop), a 4-letter word to spell at the end, 12 everyday objects to draw as pixel icons, a profile-portrait clip and a raised-open-hand clip (both on plain dark or plain grey backdrops), and a music track. If I skip any, use these defaults:
- theme: lorem ipsum
- big line: "sed" "ut" "non" "quam"
- question: "sed ut non quam nisi elit magna dolor in tempor?"
- cards: "tempus." "excepteur." "laboriosa."
- end word: ENIM
- icons: speech bubble, magnifier, envelope, bell, bolt, mug, pin, paper plane, key, bulb, megaphone, hourglass
- footage: free Pexels clips 10141041 (man in profile, grey backdrop) and 11666242 (open hand on black)
- music: any track whose busiest stretch sits at 7.2–11.5 s, with a near-silence at 2.5–3.5 s and a peak at 15.5–17.5 s
</inputs>

<direction>
A 20.4 second 4:3 mixed-media type film, 2880x2160, 23.976 fps, frames f0–f488. Riso-print collage: paper sheets cut hard against near-black sheets, chunky dithered pixel icons, halftone-printed footage, hand-drawn ink and one warm accent. Everything snaps: cuts land on exact frames, moves start fast and settle soft, single-frame flashes punctuate the beats.
Palette:
- sheets: PAPER #F3F3F1 (with a scanned CC0 paper texture multiplied at 55%), INK #272725, NIGHT #161615
- accent: EMBER #D3602C
- secondary: GREY #74746F, BONE #E9E4DA
- icon materials only: BRASS #B8893A, SAGE #7D8B6A, SLATE #4A555D, CLAY #9C4A2F
- footage shadow: #3A444B
Type: Schibsted Grotesk 700, lowercase, tracking −2%.
Icons: 24x24 pixel grids (40x40 for the three heroes), 1-px INK outline, 3-tone ordered Bayer dithering in the material colours. Heroes are extruded: stacked side layers at 58% brightness, 7% of size deep, and the paper texture printed into the face at 25%.
Footage: two-ink riso grade. SLATE solid with a BONE halftone dot screen (45°, 16 px pitch, ±12% ink gain) offset 3 px. EMBER rim light only on the lit edge, at 60%. A soft slate falloff behind the subject. Matte holes filled.
Grain on every frame: soft-light noise at 22% plus a 6% normal pass.
Banned: crossfades, purple, rainbow gradients, clean vector "wifi" arcs, corner-bracket "AI scan" frames, flat clip-art rays, frozen holds, Math.random, anything that looks like a template.
</direction>

<structure>
Positions are fractions of the frame (x from the left, y from the top). Velocities are px/frame on the 2880 stage; negative = moving left.

Icon slot table: R1 hourglass · R2 bulb · R3 pin · R4 bell · R5 plane · R6 megaphone · R7 bubble · R8 bolt · R9 mug · R10 envelope · R11 magnifier · R12 key. Every later hit, card and callback derives from this table.

S01 f0
- PAPER. The first big word as a 3-pass hand scribble, centred, cap .30 H.

S02 f1–2 (flash pair)
- f1: NIGHT, giant BONE word squashed ×2.5 tall.
- f2: EMBER sheet with INK registration crosshairs in all four corners (60 px, 4 px stroke). The word sits off-centre at x .58: x-height .176 H, baseline .576.

S03 f3–47 (big line, then small sentence)
- f3–4: PAPER. Big word centred, cap .17 H, between two 35%-EMBER dashed rules at y .41 and .57.
- f5: word 2 lands at 45% grey.
- f6: line moves −78.
- f7: line moves −1014; word 2 inks and gets a hand-drawn box.
- f8–9: 2-frame INK bar (x .36→edge, then x .62–.92) revealing word 3 in grey.
- f10–12: whip −624, −420, −36. A caret appears after word 3 at f10.
- f13: pixelated bitmap letters with dots between the words; word 4 appears half-typed.
- f14: motion-blurred collapse into a dash line at y .5.
- f15–17: the dash pattern changes every frame.
- f18: the small sentence: the first 4 words at x .07 y .5, sized so the whole question spans .75 W. A dashed selection box (x .01–.53) is on f18–20, off f21, on f22, gone from f23.
- f22–34: the sentence drifts left, decaying: −12, −10, −10, −8, −6 … −2.
- Words land at f21, 31, 38, 42, 46 and 50, each grey for 2 frames, then INK.
- Hand-drawn INK pen strokes, our own shapes:
  - f18–24: cursive under the line, .42 W wide
  - f25–26: it retracts
  - f27–28: a big U-loop, .22 W × .62 H
  - f29–30: a tick
  - f32: a zigzag through a word
  - f33–35: an ellipse that opens to the right
  - f36: an over-line with a left hook
  - f37: a vertical drop
  - f38: a tick

S04 f48–88 (burst + arcs)
- f48: EMBER full-bleed, the only one in the film. The last word huge, rotated 90°, squashed into a dashed bracket at x .92. A BONE spindle burst. A tiny plane icon at the sentence end.
- f49: BONE flash, sentence blurred in CLAY.
- f50: PAPER, everything blurred, with speed streaks; 4 icons fly in.
- f51–88: 5 concentric EMBER→CLAY stippled spray arcs centred off-frame left at y .5.
  - Outer reach px: 498 · 750 (f53–54) · 654 556 502 446 418 398 378 · 330 (f62) · 286 (f69) · 281 hold · 304→314 (f85–88).
  - Uneven weights; blurred inner-arc bloom.
- Vignette from f51.
- Rack focus: blur ramps to 20 px f63–68, sharp again by f75.
- Floats R1, R10, R4 and R2 (230 px) at (.50,.32) (.72,.33) (.66,.58) (.77,.79), drifting 0.4 px/frame. They pixel-dissolve in 2x2 blocks over f77–79.
- f84: word 3 turns BONE.

S05 f89–148 (head)
- f89–92: NIGHT. An EMBER halftone orb at x .30 collapses from .45 W to .15 W while a BONE ring draws around it. f92: the sentence is masked at x .5.
- f93: the graded head (facing right, centred x .64) slides in from +.08 W at 1.12×, blur 22→0, settling by f100. Then a slow push-in to 1.05× by f148, drifting −0.6 px/frame.
- Line at x .144, 91 px BONE: "non nulla." → f128 "non" → f130 "non sed" → f137 "non sed do" → f145 "non sed do est."
- Caret on f95–105 only.
- BONE 12 px orbit strokes:
  - f106 small front arc · f107 full tilted ellipse · f108 top arc
  - f115 top-left arc · f116 big diagonal sweep · f117 lower-right arc
  - A sparkle dot drifts on the neck f108–114.
- Background eases from NIGHT toward light grey, f135→151 (power 1.6), with a step at f149.
- Text inverts BONE→INK over f142–146.
- f144–148: a dark contour band contracts through the head, wiping the riso grade to a natural grey photo.

S06 f149–157 (flash cuts)
- f149–151: natural grey silhouette, INK line.
- f152: BONE→GREY gradient.
- f153: NIGHT with a printed BONE halftone band (y .70–.90) and an EMBER plate misregistered (+4, −3).
- f154: an EMBER pill.
- f155–156: blurred duotone icon blobs.
- f157: grey with one EMBER triangle.

S07 f158–199 (carousel)
- PAPER. The 12 icons on an ellipse centred (.495, .50), radii .33 W / .23 H. Size 560 × (0.55 + 0.95 × front-ness).
- Spin in °/frame: 9 → 1.2 over f158–170, 0.9 to f186, then accelerating to 8. R4 sits at −70° at f172.
- Ink: blob f164 · comma swoosh f168–169 · arc f170–171 · a bouncing spray ball between hits.
- Hits, as stippled EMBER/CLAY heat blooms that char 30–40% of the icon's pixels into INK, with stipple rays:
  - f172 the megaphone burns (no rays yet)
  - f173 burn with rays
  - f177–178 bubble
  - f182–183 bolt
  - f188–189 mug (glow only)
- f189–199: push-in to 1.94× (f198) and 2.16× (f199), pulling R4 to centre.

S08 f200–219 (card 1: bulb)
- f200: NIGHT, blurred bulb + a giant spray burst (stippled crescent + 3 rays, falloff to the tips, CLAY plate offset 3 px).
- f201: BONE scribble streaks, a wide caret block, the burst tail.
- The bulb slides x .46 → .394 → .356 → .334 (f200–203), soft-focus f203–205, then breathes.
- Typing: f202 "tempu▮" · f203 "tempus▮" · f204 "tempus." + a bar caret (.045 W gap, .08 H tall). Word at x .67, 150 px BONE, over a 10 px blurred copy at 25%.
- f209: re-pose to 1400 px, tilted −0.32 rad, burst on its top-right corner.
- f215: lies flat (skew −0.9, y-scale .42) with a spray streak.
- Exit −32 (f218), −179 (f219).

S09 f220–236 (conveyor 1)
- Icons 880 px, 900 apart, in the ring order unrolled anticlockwise from R12.
- Velocity: −130 −124 −104 −78 −72 −51 −63 −69 −63 −69 −99 −139 −212 −270 −296 −500 (f221–236).
- Scale +10% over the shot. EMBER speed streaks top and bottom.

S10 f237–252 (card 2: hourglass)
- f237: blurred hourglass + burst.
- Typing: f238 "e▮" · f239 "excepteur▮" · f240 "excepteur. ▮" · bar caret from f243.
- From f238, two CLAY stippled arcs from the hourglass neck.
- f243: an EMBER arc set is born, grows f244–247, and its outer radius snaps 420→1500 px at f248.

S11 f253–264 (conveyor 2, resumes the row)
- Velocity: −713 −568 −254 −98 −36 −16 −32 −74 −96 −348 (f254–263), blurred exit at f264.

S12 f265–285 (card 3: key)
- f265: dashed EMBER ring + blurred key.
- Key settles from x .50: .361 .325 .312 .304 .299 .296 .294 .293 .292 (f266–274), then drifts 0.5 px/frame.
- Typing: f266 "laborio▮" · f267 "laboriosa." · block caret → bar at f274.
- EMBER pixel sparkles (plus shapes, 2.6× scale) pop on the key at f268, 275 and 279, each with a 1-frame expanding stipple ring.
- Exit −38 (f283), −279 (f284).
- f285: 1-frame flash, three big greyscale icons on dark grey.

S13 f286–330 (ring → constellation)
- Ring centred (.514, .497), radii .259 W / .295 H.
- Spin 14 → 2.8 °/frame (f286–292, 6-step subframe trails at 22%), near-still to f296, then easing to 12 °/frame.
- f300–302: the ring breaks into 12 constellation slots along a blurred ink swipe. Icons grow 430 → 350 and drift 1–2 px/frame.
- Silhouettes, each after a fat tapered ink splash sweeping in over 3 frames: f303 bubble · f308 magnifier · f313 the bell becomes an ink blob growing to 190 px · f318 bolt.
- The pin walks out of the blob f324–329.
- f321–330: everything slides left-up, accelerating −18 → −96, while the vignette closes.
- Word: f326 INK bar → f327 "…que" → f329 "quisque".

S14 f331–381 (hand)
- f331: NIGHT, a lit cluster of 7 icons (380 px) + "quisque".
- f332–338: the graded hand whips up from the bottom, blurred, with BONE streaks.
- Lines: f334 "quisque nunc" at x .145 · f343 "est" / f349 "est aliquam" / f378 "est aliquam ut" at x .655.
- Defocus pulse f347–348.
- f340–375: the bubble falls into the palm. f374–379: the clip plays backwards so the fingers close over it. A CLAY wash ramps in.
- f379–381: whip −18, −60, −276, with horizontal blur.

S15–16 f382–412 (spelling)
- f382: PAPER, a small spinning bubble.
- f383: bubble at centre (620 px) + letter 1 at x .09.
- f387–389: dark vignette, bubble bigger.
- f390: NIGHT, the bulb edge-on. f391: bulb face-on + letter 2 at x .38. f395–396: EMBER glow.
- f397: bulb large.
- f398: the hourglass edge-on over a NIGHT sheet filled with an EMBER/CLAY 45° halftone dot field (dots grow toward the edges).
- f399: letter 3 at x .62. f402: dark halo. f403: hourglass darkened.
- f404–406: key edge-on → face-on. f405: letter 4 at x .91. The key keeps turning.
- f411–412: BONE glow expanding.

S17 f413–488 (letters)
- f413: PAPER, key + letters.
- f414–417: new blurred INK strokes every frame, fading out. The letters burst outward (ease-out) into a loose 2x2: (.23,.24) (.56,.24) (.31,.83) (.82,.81), plus 5 dots.
- f420–443: tumble, then drift −54 → −18 with a slight up-drift.
- From f460: EMBER hand-pen underline loops under each letter, redrawn every frame (1-frame boil). Cap grows .05 H → .071 H.
- f488: the letters converge into one INK 2x2 monogram held by three EMBER pen loops.
</structure>

<build>
1. One HTML canvas at 2880x2160. drawFrame(F) is a pure function of the frame number. No timers, no CSS transitions, no Math.random (a seeded mulberry32 only). Shots register as SHOT(f0, f1, fn).
2. Draw icons as small pixel grids from primitives (circles, rects, triangles, lines), auto-outline them, dither them, export 24 px and 40 px PNGs, and draw them with imageSmoothing off.
3. Grade footage offline in Python/numpy. Per frame: matte (threshold just above the backdrop, close the holes), the halftone plates, the lit-edge rim and the falloff. Save PNGs and draw them as the shot background.
4. Stipple, spray, ink splashes and pen strokes are seeded point clouds and jittered polylines. Boil = a new seed every frame.
5. Render with Playwright, one canvas screenshot per frame. Encode H.264 yuv420p at 24000/1001.
6. Also make a side-by-side comparison against your reference if you have one, and run a frozen-frame scan: no 2+ frame run with <40 changed pixels unless the design holds on purpose.
</build>

<gotchas>
Measure text only after the font loads. Don't let the 3D icon function reset ctx.filter, or soft-focus frames render sharp. A paper texture drawn with the wrong source rect leaves a visible seam; crop it 4:3. Use near-black backdrops for the footage, or the matte fails, and threshold just above pure black so shadowed palms stay attached. A box-shaped hole fill leaves square edges; blur then threshold instead. Under a strong vignette, draw the arcs after the vignette or they vanish. Keep every hold breathing (0.3–0.5 px/frame drift plus 0.1–0.2%/frame scale) or it reads as frozen.
</gotchas>

<start>
Ask me for the inputs. Then show me 8 stills (f2, f60, f116, f172, f210, f350, f400, f486) before you render the full film.
</start>

更多同类案例