Jack Scroll Asset Prompts
Use this skill to create a coordinated visual prompt set for a scroll-driven website: a clean starting image, a transformed ending image, and a video transition between them.
Source attribution: public-safe synthesis inspired by Jack Roberts' public teaching on AI-generated scroll-stopping website assets. Credit Jack Roberts and link https://www.youtube.com/watch?v=TZUTe7s11-I when referencing the method publicly.
Core Decision
First decide the asset type:
- Product deconstruction: assembled object -> exploded or deconstructed view.
- Service transformation: before state -> after state.
- Brand metaphor: simple hero symbol -> richer final arrangement.
Use product deconstruction for devices, vehicles, shoes, bags, watches, furniture, packaged goods, and objects with layers/components. Use service transformation for cleaning, renovation, moving, logistics, health, repair, or outcome-driven services.
Prompt Set
Produce three prompts:
Start frame.
- Single subject, centered, clean background, stable camera angle, premium lighting, generous margins, no text.
- Preserve real logo/product details only if the user has rights and provided the asset.
- Use the same aspect ratio intended for the website, usually 16:9 for desktop hero work.
End frame.
- Same subject and camera logic.
- For products: separated components should remain orderly, readable, and spatially related to the original silhouette.
- For services: transformed result should be unmistakable but still the same subject.
- Avoid chaos at the edges; keep enough empty space for cropping and responsive layouts.
Transition/video prompt.
- Describe start frame and end frame precisely.
- Ask for smooth deliberate motion, consistent lighting, stable background, and readable object silhouette.
- Include hold moments at start/end so the result can be scrubbed by scroll.
- Request no text, UI, arrows, labels, watermarks, or unexpected camera movement unless the design brief needs it.
Quality Rules
- Generate or request multiple candidates when possible. The final scroll section is only as good as the start and end frames.
- Prefer high resolution over speed for final assets. Low-resolution assets become obvious in full-viewport scroll sections.
- Keep backgrounds compatible with the site background so edges disappear in the implementation.
- The start and end images should share angle, lens feel, lighting, and material treatment.
- Do not promise perfect brand accuracy from image models. Verify logos and product details manually.
- Avoid unrealistic internal components unless the user wants a fantastical metaphor. Real products should feel mechanically plausible.
Output Format
Return:
- a short concept summary
- Prompt A: start frame
- Prompt B: end frame
- Prompt C: transition/video
- optional variants: reverse, loop, slow cinematic, dark-background, white-background
- recommended generation settings: aspect ratio, resolution, number of variations, and asset naming
Routing
- Use
banana or native image tools when actually generating images.
- Use
jack-scroll-3d-sites after the user has a video file or frame sequence.
- Use
fluid-animations and emil-animation-polish when the transition or scrub behavior needs to feel more natural.
- Use
brandkit or imagegen-frontend-web if the brand/visual world is not defined yet.
1---2name: jack-scroll-asset-prompts3description: Generate coordinated start-frame, end-frame, and video-transition prompts for scroll-stopping website assets. Use for assembled-to-exploded product visuals, before/after transformations, 3D hero assets, image/video generation prompts, Nano Banana, Runway, Kling, Pika, Higgsfield, Veo, or any AI visual workflow intended for scroll-driven websites. Public-safe Jack Roberts inspired workflow.4---56# Jack Scroll Asset Prompts78Use this skill to create a coordinated visual prompt set for a scroll-driven website: a clean starting image, a transformed ending image, and a video transition between them.910Source attribution: public-safe synthesis inspired by Jack Roberts' public teaching on AI-generated scroll-stopping website assets. Credit Jack Roberts and link https://www.youtube.com/watch?v=TZUTe7s11-I when referencing the method publicly.1112## Core Decision1314First decide the asset type:1516- Product deconstruction: assembled object -> exploded or deconstructed view.17- Service transformation: before state -> after state.18- Brand metaphor: simple hero symbol -> richer final arrangement.1920Use product deconstruction for devices, vehicles, shoes, bags, watches, furniture, packaged goods, and objects with layers/components. Use service transformation for cleaning, renovation, moving, logistics, health, repair, or outcome-driven services.2122## Prompt Set2324Produce three prompts:25261. Start frame.27 - Single subject, centered, clean background, stable camera angle, premium lighting, generous margins, no text.28 - Preserve real logo/product details only if the user has rights and provided the asset.29 - Use the same aspect ratio intended for the website, usually 16:9 for desktop hero work.30312. End frame.32 - Same subject and camera logic.33 - For products: separated components should remain orderly, readable, and spatially related to the original silhouette.34 - For services: transformed result should be unmistakable but still the same subject.35 - Avoid chaos at the edges; keep enough empty space for cropping and responsive layouts.36373. Transition/video prompt.38 - Describe start frame and end frame precisely.39 - Ask for smooth deliberate motion, consistent lighting, stable background, and readable object silhouette.40 - Include hold moments at start/end so the result can be scrubbed by scroll.41 - Request no text, UI, arrows, labels, watermarks, or unexpected camera movement unless the design brief needs it.4243## Quality Rules4445- Generate or request multiple candidates when possible. The final scroll section is only as good as the start and end frames.46- Prefer high resolution over speed for final assets. Low-resolution assets become obvious in full-viewport scroll sections.47- Keep backgrounds compatible with the site background so edges disappear in the implementation.48- The start and end images should share angle, lens feel, lighting, and material treatment.49- Do not promise perfect brand accuracy from image models. Verify logos and product details manually.50- Avoid unrealistic internal components unless the user wants a fantastical metaphor. Real products should feel mechanically plausible.5152## Output Format5354Return:5556- a short concept summary57- Prompt A: start frame58- Prompt B: end frame59- Prompt C: transition/video60- optional variants: reverse, loop, slow cinematic, dark-background, white-background61- recommended generation settings: aspect ratio, resolution, number of variations, and asset naming6263## Routing6465- Use `banana` or native image tools when actually generating images.66- Use `jack-scroll-3d-sites` after the user has a video file or frame sequence.67- Use `fluid-animations` and `emil-animation-polish` when the transition or scrub behavior needs to feel more natural.68- Use `brandkit` or `imagegen-frontend-web` if the brand/visual world is not defined yet.
radustefandumitru