Create a 30-second 16:9 cinematic product promo video about Zasshi King.

Source:
https://www.zasshiking.com

Context:
Zasshi King is a manga magazine market-intelligence site originally designed with Claude Design. The video should show an AI creative stack in action:

1. Claude Design created the bold product visual system.
2. Zasshi King turned that design into a real manga-market analytics product.
3. HyperFrames turns the static web interface into cinematic motion.
4. The video ends by teasing a future mobile app.

Core thesis:
"Claude Design made the product. HyperFrames makes it move."

Audience:
AI builders, designers, founders, collectors, and viewers of Onchain AI Garage / AI Garage Weekly who care about AI-native product creation.

Goal:
Make viewers understand that AI design tools are not just making mockups anymore. They can create distinctive product systems that become real websites, animated promos, and app concepts.

Format:
30 seconds, 16:9, high-energy product trailer.
No talking head.
Use short captions and cinematic motion.
Optional voiceover, but the video should work silently.

Visual identity:
Match the actual Zasshi King website closely.

Use:
- bright red halftone hero background
- manga yellow / gold display text
- thick black outlines
- cream paper-like background
- manga magazine covers
- diagonal Japanese ticker tape
- market cards
- rank numbers like 01, 02, 03
- sold median prices
- red and green market movement badges
- sparklines
- search bar interaction
- bold manga / shonen magazine energy

The style should feel like:
"Weekly Shonen Jump meets Bloomberg Terminal."

Avoid:
- generic SaaS gradients
- bland startup animation
- fake corporate stock footage
- random anime footage
- overusing VFX
- changing the brand into something unrelated

Important technical direction:
Do not rely on a live iframe for render-critical UI.
Capture or recreate the Zasshi King page as deterministic HTML sections.
Use the real site as source for layout, colors, typography, visible text, market-card structure, and brand details.
If the live page is hard to capture, recreate the hero, search bar, market cards, and mobile app screen in HTML/CSS using the inspected site as visual reference.

Use these HyperFrames-style elements:
- HTML-in-Canvas website capture or recreation
- vfx-shatter for UI glass fracture
- vfx-iphone-device for the mobile app reveal
- optional subtle vfx-liquid-glass for a price-inspection lens
- GSAP card cascade
- SVG sparkline drawing
- animated price counters
- manga-style impact cuts
- red/yellow flash frames
- ticker tape movement
- halftone overlays
- grain texture

Scene structure:

Scene 1: 0-4 seconds
Manga splash intro.
Open on a cream background.
A small caption appears:
"Designed with Claude Design."

The screen slams into the Zasshi King visual world: red halftone background, manga covers flying in from the edges, diagonal ticker tape sweeping across, and the ZASSHI KING hero lockup punching into frame.

Caption:
"AI-designed. Collector-native."

Motion:
- manga covers fly in with slight rotation
- red halftone pulses
- yellow title slams down with black impact shadow
- ticker tape scrolls diagonally
- quick manga speed-line accent

Scene 2: 4-8 seconds
AI design becomes product.
Show the Zasshi King landing page as a real website interface.

Caption:
"From prompt to product system."

Highlight:
- logo
- search bar
- hero section
- market movers section

Motion:
- camera glides down the page
- page sections lock into place like printed manga panels
- subtle parallax on covers and background text

Scene 3: 8-13 seconds
Search interaction.
Show the search bar.
A cursor types:
"dragon ball vegeta"

Click the black/yellow GO button.
The results snap into a ranked market list.

Caption:
"Search key issues. Track sold comps."

Motion:
- typed text appears quickly
- GO button clicks with a yellow flash
- market cards slide into frame
- card shadows pop in with thick black/yellow offset

Scene 4: 13-19 seconds
Market movers proof.
Animate ranked cards cascading into view.

Show cards inspired by the real Zasshi King market movers:
- Naruto: Debut
- One Piece: Debut
- Dragon Ball: Debut
- Dragon Ball: First Appearance of Vegeta
- Bleach: Debut

Show sold median prices and movement badges. Use visible examples from the site if available:
- $18,811
- $13,801
- $13,181
- $1,914
- $1,891

Caption:
"Daily manga magazine market intelligence."

Motion:
- rank numbers stamp on screen
- magazine covers slide in
- prices count up from zero
- percentage badges flip in
- sparklines draw left to right
- positive lines glow green
- negative lines glow red

Scene 5: 19-23 seconds
HTML-in-Canvas shatter transition.
A cursor clicks a market card, preferably Dragon Ball or One Piece.
The selected card zooms forward.
The entire Zasshi King interface fractures into glass-like panels.

Caption:
"HyperFrames turns the interface into motion."

Motion:
- UI shatters into glass fragments
- fragments contain pieces of the site: cover art, rank number, price, sparkline, Japanese text, search bar
- shards rotate in 3D
- red/yellow/black reflections on glass
- keep it clean and premium, not chaotic

Use:
vfx-shatter

Scene 6: 23-27 seconds
3D phone reveal.
The glass fragments swirl together and reassemble onto a rotating 3D phone screen.
The phone shows a mobile version of Zasshi King:
- logo at top
- search bar
- stacked market cards
- price movement badges
- sparkline details

Caption:
"Mobile app coming soon."

Motion:
- 3D phone rotates into hero angle
- page scrolls slightly inside the phone
- one card expands or lifts
- subtle shine across phone glass

Use:
vfx-iphone-device

If a real mobile layout is not available, create a purpose-built mobile HTML recreation based on the desktop design.

Scene 7: 27-30 seconds
Final lockup.
Return to bold red/yellow/black brand frame.

Text:
ZASSHI KING
Sold comps · Daily
Mobile App Coming Soon
zasshiking.com

Optional final caption:
"Claude Design made the product. HyperFrames made it move."

Motion:
- ticker tape scrolls behind logo
- manga covers settle around edges
- final yellow flash
- end on clean logo and URL

Tone:
Energetic, manga-native, high-contrast, sharp, collectible, data-driven.
The video should feel designed, not generated.
It should make the site look like a real product with a distinctive brand system.

Music / sound direction if supported:
Fast editorial trailer feel.
Punchy hits for title slams.
Subtle digital ticks for price counters.
Glass crack/shatter sound for the UI fracture.
Clean whoosh for phone reveal.

Deliverables:
Create DESIGN.md, SCRIPT.md, STORYBOARD.md, and the HyperFrames composition. Provide 5 still-frame checkpoints before final render:
1. hero title frame
2. search interaction frame
3. market movers frame
4. shatter transition frame
5. phone reveal final frame

Quality bar:
The Zasshi King website should remain recognizable throughout.
The VFX should enhance the existing manga-market identity, not replace it.
Use one major hero effect, the UI shatter, and one product payoff effect, the phone reveal.