Dai Dunbang-Style Kouji Ten-Scene Interactive Scroll
Lin Sihuan's Kouji in ten scroll scenes, each with a heavy-color ink illustration and a 15-second sound loop, from the clapper's snap to cries of fire.
Loading preview...
67175 views
Start from this prompt
Turn Lin Sihuan's Kouji into a webpage you can hear, watch and click: ten heavy-color illustrations in Dai Dunbang's Water Margin style with ten looping ambient tracks, a vertical full-screen scroll with auto or manual playback, original text and modern translation surfacing in sync with the audio.
Swap in The Carved Boat
Swap the text from Kouji to Wei Xueyi's The Carved Boat, rebuild the ten scenes around the boat's carved details, and switch the audio to carving knives, water and whispered voices.
Try Kimi Build# [Please create the following] Theme: Dai Dunbang ink-painting style + interactive ten-scene Kouji HTML webpage Delivery: hand directly to a multimodal LLM → auto-generate images + audio → auto-package → one-click deploy, playable online ---## 1. Overall goal Turn Lin Sihuan's Kouji into a webpage you can hear, watch and click: 1. 10 heavy-color Chinese-painting illustrations in Dai Dunbang's Water Margin style (1920×1080) 2. 10 looping Kouji ambient tracks (15 s, 44.1 kHz, MP3, with spatial reverb) 3. Webpage: vertical full-screen scroll, auto/manual playback, original text + modern translation revealed, audio-visual sync, PC & mobile adaptive 4. One-click deployment package (index.html / assets / README.md) ---## 2. Scene breakdown (strict order required)| Scene | Original line (stop when it appears) | Modern translation (subtitle) | Key visual elements | Main Kouji sound ||---|---|---|---|---|| 1 | In the capital lived a master of Kouji… nothing but a table, a chair, a fan and a wooden clapper. | A Kouji performer in the capital… with only a table, a chair, a fan and a clapper. | Ming-dynasty hall, screen, seated guests, the performer's silhouette | Hall murmur → a sudden clapper snap "Pak!" → instant silence || 2 | From behind the screen comes a single clapper strike, and the whole room falls silent. | One clapper strike behind the screen, and silence everywhere. | Same scene, everyone leaning in, focus on the screen | Clapper echo + faint breathing || 3 | A woman nurses her child; the child cries with the breast in its mouth. | The woman breastfeeds; the baby whimpers while nursing. | Foreground of the screen blurs, silhouettes of mother and baby cast forward | The baby's broken "wa-wa" crying + gentle patting || 4 | The husband scolds the elder child, who has just woken; the husband mumbles in his sleep. | The husband scolds the eldest, who has just woken and murmurs dream-talk. | Another silhouette inside the screen, rubbing eyes and yawning | Low male scolding + the child's drowsy reply + creaking as someone turns over || 5 | The husband gets up to relieve himself; the wife pats the child, patting slower until it stops. | The husband gets up at night; the wife pats the baby until the crying fades. | Inside the screen the husband throws on a robe and steps out; the wife rocks the baby | Footsteps recede → chamber-pot sound → patting slows → silence || 6 | Faintly, mice rustle and scurry; bowls and vessels tip. | A mouse is faintly heard rustling; dishes tilt slightly. | A mouse shadow at the screen's lower corner; a cup wobbles on the table | Claws scratching wood + a small porcelain "ding" + echo || 7 | The woman coughs in her dreams. | The woman coughs softly in her sleep. | Inside the screen the woman half-reclines, covering her mouth as she coughs | Two muffled coughs + bedding rustle || 8 | Suddenly a man shouts, "Fire!" | Suddenly someone yells, "Fire!" | Crowd silhouettes burst outside the screen, red light on the walls | A thunderous "Fire!" → uproar across the hall || 9 | The husband rises shouting, the wife rises shouting too, and the two children cry together. | Husband and wife both get up shouting; the two children wail in unison. | Four silhouettes inside the screen shouting; guests outside rise to their feet | Four voices shouting + children shrieking + tables and chairs toppling ||10 | Every guest pales and rises from their seat… then all sounds cease at once. | The guests all recoil in fright… every sound stops abruptly. | The crowd terrified; inside the screen it returns to one person holding a fan | A hundred voices at full boil → "Pak" of the clapper → dead silence |---## 3. Unified image-generation directive Dai Dunbang style, Chinese Ming-dynasty ink-and-wash heavy-color, gongbi heavy-color, rice-paper texture, warm palette, negative space, character vivid expression, 1920×1080, --ar 16:9 --v 5 --q 2 Append scene-specific elements to each (example): "Scene-3: interior Ming hall, shadow-play-like silhouettes of woman breastfeeding, baby crying, soft candle light, Dai Dunbang style" --- ## 4. Unified audio-generation directive Chinese traditional Kouji performance, human voice imitating: [main sound], Ming-dynasty hall acoustic, 15 s seamless loop, 44.1 kHz, 128 kbps MP3, subtle mouth-simulation texture, -3 dB peak Replace the main sound per the scene column; keep 0.5 s of ambient noise at the head of each clip and fade in/out over the last 0.5 s for smooth looping. --- ## 5. Web tech stack & directory structure kouji-web/ ├─ index.html ← single page, full features ├─ css/style.css ← ink painting canvas + scroll animation ├─ js/kouji.js ← scene switching + audio sync + subtitle reveal ├─ assets/ │ ├─ img/ ← scene-01.jpg ~ scene-10.jpg │ └─ audio/ ← 01.mp3 ~ 10.mp3 └─ README.md ← deployment notes - Zero dependencies: vanilla HTML/CSS/JS - Responsive: vh/vw + flex; auto full-screen on mobile - Performance: lazy-loaded images, audio preload="metadata", full load on scene tap - Compatibility: Chrome 80+, Safari 13+, Firefox 75+
Switch to Horizontal Pages
Change the vertical scroll into horizontal page-turning, one scene per screen swiped left or right, like flipping through a picture-story book.
Try Kimi Build# [Please create the following] Theme: Dai Dunbang ink-painting style + interactive ten-scene Kouji HTML webpage Delivery: hand directly to a multimodal LLM → auto-generate images + audio → auto-package → one-click deploy, playable online ---## 1. Overall goal Turn Lin Sihuan's Kouji into a webpage you can hear, watch and click: 1. 10 heavy-color Chinese-painting illustrations in Dai Dunbang's Water Margin style (1920×1080) 2. 10 looping Kouji ambient tracks (15 s, 44.1 kHz, MP3, with spatial reverb) 3. Webpage: vertical full-screen scroll, auto/manual playback, original text + modern translation revealed, audio-visual sync, PC & mobile adaptive 4. One-click deployment package (index.html / assets / README.md) ---## 2. Scene breakdown (strict order required)| Scene | Original line (stop when it appears) | Modern translation (subtitle) | Key visual elements | Main Kouji sound ||---|---|---|---|---|| 1 | In the capital lived a master of Kouji… nothing but a table, a chair, a fan and a wooden clapper. | A Kouji performer in the capital… with only a table, a chair, a fan and a clapper. | Ming-dynasty hall, screen, seated guests, the performer's silhouette | Hall murmur → a sudden clapper snap "Pak!" → instant silence || 2 | From behind the screen comes a single clapper strike, and the whole room falls silent. | One clapper strike behind the screen, and silence everywhere. | Same scene, everyone leaning in, focus on the screen | Clapper echo + faint breathing || 3 | A woman nurses her child; the child cries with the breast in its mouth. | The woman breastfeeds; the baby whimpers while nursing. | Foreground of the screen blurs, silhouettes of mother and baby cast forward | The baby's broken "wa-wa" crying + gentle patting || 4 | The husband scolds the elder child, who has just woken; the husband mumbles in his sleep. | The husband scolds the eldest, who has just woken and murmurs dream-talk. | Another silhouette inside the screen, rubbing eyes and yawning | Low male scolding + the child's drowsy reply + creaking as someone turns over || 5 | The husband gets up to relieve himself; the wife pats the child, patting slower until it stops. | The husband gets up at night; the wife pats the baby until the crying fades. | Inside the screen the husband throws on a robe and steps out; the wife rocks the baby | Footsteps recede → chamber-pot sound → patting slows → silence || 6 | Faintly, mice rustle and scurry; bowls and vessels tip. | A mouse is faintly heard rustling; dishes tilt slightly. | A mouse shadow at the screen's lower corner; a cup wobbles on the table | Claws scratching wood + a small porcelain "ding" + echo || 7 | The woman coughs in her dreams. | The woman coughs softly in her sleep. | Inside the screen the woman half-reclines, covering her mouth as she coughs | Two muffled coughs + bedding rustle || 8 | Suddenly a man shouts, "Fire!" | Suddenly someone yells, "Fire!" | Crowd silhouettes burst outside the screen, red light on the walls | A thunderous "Fire!" → uproar across the hall || 9 | The husband rises shouting, the wife rises shouting too, and the two children cry together. | Husband and wife both get up shouting; the two children wail in unison. | Four silhouettes inside the screen shouting; guests outside rise to their feet | Four voices shouting + children shrieking + tables and chairs toppling ||10 | Every guest pales and rises from their seat… then all sounds cease at once. | The guests all recoil in fright… every sound stops abruptly. | The crowd terrified; inside the screen it returns to one person holding a fan | A hundred voices at full boil → "Pak" of the clapper → dead silence |---## 3. Unified image-generation directive Dai Dunbang style, Chinese Ming-dynasty ink-and-wash heavy-color, gongbi heavy-color, rice-paper texture, warm palette, negative space, character vivid expression, 1920×1080, --ar 16:9 --v 5 --q 2 Append scene-specific elements to each (example): "Scene-3: interior Ming hall, shadow-play-like silhouettes of woman breastfeeding, baby crying, soft candle light, Dai Dunbang style" --- ## 4. Unified audio-generation directive Chinese traditional Kouji performance, human voice imitating: [main sound], Ming-dynasty hall acoustic, 15 s seamless loop, 44.1 kHz, 128 kbps MP3, subtle mouth-simulation texture, -3 dB peak Replace the main sound per the scene column; keep 0.5 s of ambient noise at the head of each clip and fade in/out over the last 0.5 s for smooth looping. --- ## 5. Web tech stack & directory structure kouji-web/ ├─ index.html ← single page, full features ├─ css/style.css ← ink painting canvas + scroll animation ├─ js/kouji.js ← scene switching + audio sync + subtitle reveal ├─ assets/ │ ├─ img/ ← scene-01.jpg ~ scene-10.jpg │ └─ audio/ ← 01.mp3 ~ 10.mp3 └─ README.md ← deployment notes - Zero dependencies: vanilla HTML/CSS/JS - Responsive: vh/vw + flex; auto full-screen on mobile - Performance: lazy-loaded images, audio preload="metadata", full load on scene tap - Compatibility: Chrome 80+, Safari 13+, Firefox 75+
Add Live Narration
Add a human classical-Chinese narration track over the ambience, highlighting the original text line by line as the visuals follow the reading.
Try Kimi Build# [Please create the following] Theme: Dai Dunbang ink-painting style + interactive ten-scene Kouji HTML webpage Delivery: hand directly to a multimodal LLM → auto-generate images + audio → auto-package → one-click deploy, playable online ---## 1. Overall goal Turn Lin Sihuan's Kouji into a webpage you can hear, watch and click: 1. 10 heavy-color Chinese-painting illustrations in Dai Dunbang's Water Margin style (1920×1080) 2. 10 looping Kouji ambient tracks (15 s, 44.1 kHz, MP3, with spatial reverb) 3. Webpage: vertical full-screen scroll, auto/manual playback, original text + modern translation revealed, audio-visual sync, PC & mobile adaptive 4. One-click deployment package (index.html / assets / README.md) ---## 2. Scene breakdown (strict order required)| Scene | Original line (stop when it appears) | Modern translation (subtitle) | Key visual elements | Main Kouji sound ||---|---|---|---|---|| 1 | In the capital lived a master of Kouji… nothing but a table, a chair, a fan and a wooden clapper. | A Kouji performer in the capital… with only a table, a chair, a fan and a clapper. | Ming-dynasty hall, screen, seated guests, the performer's silhouette | Hall murmur → a sudden clapper snap "Pak!" → instant silence || 2 | From behind the screen comes a single clapper strike, and the whole room falls silent. | One clapper strike behind the screen, and silence everywhere. | Same scene, everyone leaning in, focus on the screen | Clapper echo + faint breathing || 3 | A woman nurses her child; the child cries with the breast in its mouth. | The woman breastfeeds; the baby whimpers while nursing. | Foreground of the screen blurs, silhouettes of mother and baby cast forward | The baby's broken "wa-wa" crying + gentle patting || 4 | The husband scolds the elder child, who has just woken; the husband mumbles in his sleep. | The husband scolds the eldest, who has just woken and murmurs dream-talk. | Another silhouette inside the screen, rubbing eyes and yawning | Low male scolding + the child's drowsy reply + creaking as someone turns over || 5 | The husband gets up to relieve himself; the wife pats the child, patting slower until it stops. | The husband gets up at night; the wife pats the baby until the crying fades. | Inside the screen the husband throws on a robe and steps out; the wife rocks the baby | Footsteps recede → chamber-pot sound → patting slows → silence || 6 | Faintly, mice rustle and scurry; bowls and vessels tip. | A mouse is faintly heard rustling; dishes tilt slightly. | A mouse shadow at the screen's lower corner; a cup wobbles on the table | Claws scratching wood + a small porcelain "ding" + echo || 7 | The woman coughs in her dreams. | The woman coughs softly in her sleep. | Inside the screen the woman half-reclines, covering her mouth as she coughs | Two muffled coughs + bedding rustle || 8 | Suddenly a man shouts, "Fire!" | Suddenly someone yells, "Fire!" | Crowd silhouettes burst outside the screen, red light on the walls | A thunderous "Fire!" → uproar across the hall || 9 | The husband rises shouting, the wife rises shouting too, and the two children cry together. | Husband and wife both get up shouting; the two children wail in unison. | Four silhouettes inside the screen shouting; guests outside rise to their feet | Four voices shouting + children shrieking + tables and chairs toppling ||10 | Every guest pales and rises from their seat… then all sounds cease at once. | The guests all recoil in fright… every sound stops abruptly. | The crowd terrified; inside the screen it returns to one person holding a fan | A hundred voices at full boil → "Pak" of the clapper → dead silence |---## 3. Unified image-generation directive Dai Dunbang style, Chinese Ming-dynasty ink-and-wash heavy-color, gongbi heavy-color, rice-paper texture, warm palette, negative space, character vivid expression, 1920×1080, --ar 16:9 --v 5 --q 2 Append scene-specific elements to each (example): "Scene-3: interior Ming hall, shadow-play-like silhouettes of woman breastfeeding, baby crying, soft candle light, Dai Dunbang style" --- ## 4. Unified audio-generation directive Chinese traditional Kouji performance, human voice imitating: [main sound], Ming-dynasty hall acoustic, 15 s seamless loop, 44.1 kHz, 128 kbps MP3, subtle mouth-simulation texture, -3 dB peak Replace the main sound per the scene column; keep 0.5 s of ambient noise at the head of each clip and fade in/out over the last 0.5 s for smooth looping. --- ## 5. Web tech stack & directory structure kouji-web/ ├─ index.html ← single page, full features ├─ css/style.css ← ink painting canvas + scroll animation ├─ js/kouji.js ← scene switching + audio sync + subtitle reveal ├─ assets/ │ ├─ img/ ← scene-01.jpg ~ scene-10.jpg │ └─ audio/ ← 01.mp3 ~ 10.mp3 └─ README.md ← deployment notes - Zero dependencies: vanilla HTML/CSS/JS - Responsive: vh/vw + flex; auto full-screen on mobile - Performance: lazy-loaded images, audio preload="metadata", full load on scene tap - Compatibility: Chrome 80+, Safari 13+, Firefox 75+
You Might Also Like
The Velvet Note — a Bilingual Vintage Jazz Bar Website
One-tap Chinese-English switching, a typewriter-style booking form with key sounds, and six photos spinning on a 3D vinyl disc — matte black with gold and burgundy.
Web Linux Desktop: 50+ Apps in the Browser
A Linux desktop in the browser: 50+ apps with a working file manager, terminal and text editor; one variant adds an app store that remembers installs locally.