zlbigger/immersive-poetry-page

Turn a Chinese classical poem, ci, qu, or ancient-style prose into a truly runnable cinematic scrolling webpage.

immersive-poetry-page is a creative skill for Codex. It doesn’t just generate a web sketch; it completes the entire production process from literary analysis, visual storyboarding, AI image generation, front-end implementation, to browser acceptance.

Project homepage: https://zlbigger.com

What can it do?

Give it a poem, for example:

Skills are completed in order:

1. Check existing front-end projects, build scripts, routes, and unsubmitted documents.
2. Verify work information, original text, and important text variants.
3. Break it down into 5–8 visual segments based on narrative and emotional transitions.
4. Establish unified era, geography, characters, costumes, colors, and cinematic language.
5. Generate images for the main visual and each important paragraph separately using built-in ImageGen.
6. Create contact sheets to check for character consistency, anachronism, unexpected text, and style drift.
7. Build responsive web pages with background cross-fade, slight parallax, and chapter navigation.
8. Access poetry recitation, try autoplay, and provide an always-available play/pause switch.
9. Added paragraph by paragraph for literal translation, close reading, technical explanations, and the emotional structure of the entire poem.
10. Run production builds and check desktop, mobile, audio, and console in a real browser.

Core Features

1. Literary storyboarding, not average sentence cuts

Paragraphs are divided according to changes in space, time, perspective, characters, actions, rhetorical patterns, and emotional direction. Interdependent verses share the same scene, avoiding the fragmented effect of “each line paired with an unrelated ancient style painting.”

Each visual paragraph needs to be clear:

• Original text
• Modern literal meaning
• Visible imagery and movement
• Key writing techniques
• The emotional function throughout the poem
• Scenes that can be filmed and match the historical context
• The direction of blank space required for page copy

2. A visual bible that runs through the entire page

All generated graphs share the same set of constraints:

• Dynasties and geographical environment
• Repeat the characters’ ages, face shapes, hairstyles, clothing, and props
• Buildings, objects, and materials
• 4–6 core colors
• Light and weather that move poetically
• Focal length, composition, and color science
• Explicit prohibited items

Prioritize realistic historical films, authentic miniatures, landscape photography, or restrained pictorial cinematic styles. Avoid cartoons, plastic toys, low polygons, general game art, and vague “ancient” styles by default.

3. The picture is the narrative subject

The page uses a fixed image stage and a cross-fade of two layers of images. Each paragraph enters the viewport, the background switches to the corresponding scene, and only restrained zoom or pointer parallax is added.

On desktop, keep the copycard within half the screen; On mobile, use the [T2]] main image with a blurry full-screen background, preserving complete characters and key compositions as much as possible.

4. Original text, interpretation, and visual synchronization

The page not only displays the original poem but also includes:

• Clear, literal translation paragraph-by-paragraph
• Explanation of keywords and verb rhythm
• Miniature visual components such as contrasts, timelines, and mood scales
• Form, imagery system, structure, rhetoric, and core tension summary
• Important text variant explanations

The original poem text is formatted using HTML; the generated images must not contain calligraphy, seals, signatures, watermarks, or incorrect text.

5. Complete project acceptance