Interactive Along the River During the Qingming Festival

What it is

Interactive Along the River During the Qingming Festival is a client-side horizontal web experience developed by Xian | 弦. Rather than slicing or panning the static historical painting, the project reconstructs an entire walking streetscape of the Song Dynasty using AI-generated assets, dynamic layered rendering, and browser-native Canvas 2D. Users navigate a central avatar through three bustling urban districts, encountering autonomous townsfolk, triggered narrative events, changing weather, and boat operations along the river.

Core value proposition

The project converts a passive, bird's-eye panoramic scroll into an interactive ground-level living world:

• Traversable 2D multi-layer world: Renders 141 dynamic on-shore characters, layered shopfront interiors, bridges, and waterways across 6,516 world units without relying on heavy 3D runtimes.
• Contextual environmental physics: Footwear placement calculates against bridge heights and transparent sprite contours, preventing visual floating and floor clipping during movement.
• Narrative event sequencing: Hand-offs between NPCs—such as tea delivery, cloth hand-overs, and market bargaining—share single-instance item rendering to prevent duplicate prop visual bugs.
• Interactive boat maneuvering ("Passing the Rainbow Bridge"): Users drag towlines with variable tension feedback to help barges clear the bridge arch, unlocking collectible illustration drafts.

What it can replace

Current realities and limitations

• Purely client-side state: Built without a backend service, meaning user progress, earned illustrations, and custom interaction states do not sync across devices or sessions.
• Early performance drops before optimization: Heavy density of unculled on-screen characters originally caused frame rates to plunge to 25 FPS before viewport culling and update frequency throttling were introduced.
• Occasional sprite sorting edge cases: Strict 2D layer ordering required targeted manual fixes to prevent characters from clipping into furniture or detaching from bridge railings.
• No full 3D depth: Because the camera relies on orthographic 2D projection, users cannot turn down branching side alleys or explore depth behind street-facing facades.

Verdict

Primary recommendation An inspiring benchmark for digital heritage preservation and vibe coding. It proves that combining AI visual synthesis with Canvas 2D layering can turn classical art into responsive, interactive playgrounds without the overhead of heavy 3D engines.

Development lifecycle and iteration loop

The author started with functional experience goals rather than finalized art bibles, prompting Codex with core rules: horizontal scroll format, navigable streetscapes, independent NPC behaviors, and Song-era themes. After Codex generated a cohesive baseline art template featuring muted ink washes and low-saturation earth tones, the remaining environment expanded across three continuous zones.

Metrics and monetization

• User Reach: Gained over 3,400 views and dozens of reposts/bookmarks within hours of posting on X.
• Monetization: Free web experiment with no monetization, paywalls, or backend dependencies.
• Scale: Spans 3 major urban districts (6,516 coordinate units), featuring 141 individual NPCs and 7 scripted trade and life encounters.
• Rendering Performance: Optimized from an initial 25 FPS bottleneck up to a smooth ~55 FPS on standard browser runtimes.

Community reception and key debates

Initial reactions on social platforms praised the shift from static digital museum archives to lively, explorable gamification. Discussion among web developers centered on the choice of Canvas 2D over Three.js, with developers commending the lightweight architecture and fast mobile loading times. Others noted the clever balance of AI-assisted asset consistency, remarking that the generated art maintained the atmospheric restraint of Northern Song paintings without feeling like a generic AI collage.