---
name: jack-scroll-asset-prompts
description: >
  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.
---

# 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:

1. 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.

2. 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.

3. 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.