Ukiyo-e Weather & Road
Lantern Path
7 paper lanterns line a receding road in ukiyo-e woodblock style; sky and lanterns cycle through dusk and dawn as darkness falls and lifts.
cssmedium complexitysubtle motion
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Ambient hero backgrounds with a Japanese aesthetic, night-cycle themes, or decorative sections evoking traditional art.
When not to
Contexts needing legible text overlay — the slowly shifting dark sky reduces contrast. Not suitable for light-mode UIs.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Change lantern count to 9 by setting N=9, increase the cycle speed by changing PERIOD from 16 to 10, and shift the lit glow to a cool blue-white (replace #ffd98a with #c8e0ff and #e8943a with #7ab2d4).
Safe to edit
- lantern count (N=7)
- cycle period (PERIOD=16 seconds)
- sky palette (PAL object hex values)
- lit glow gradient colors (#ffd98a, #e8943a)
- lantern size range (34-22 px via w calculation)
Keep intact
- prefers-reduced-motion guard (REDUCED check)
- visibilitychange pause/resume
- IIFE wrapper
- role=img + aria-label on stage
Known limitations
- Background color hardcoded dark navy — cannot easily adapt to light themes
- No user interactivity; purely ambient
- Lanterns built with CSS border-radius ovals — not pixel-exact to brush-stroke originals
More Ukiyo-e Weather & Road components
- Sudden RainUp to 140 slanted rain streaks fall in two depth layers over a painted ukiyo-e scene: gradient sky, green hill, indigo river, and arched bridge silhouette.
- Bokashi SkyCanvas sky cycles dawn→day→dusk→night with bokashi gradients; sun/moon arcs overhead, stars appear at night, a bird drifts across, hills anchor the base.
- Falling SnowSnow flakes drift and sway over a ukiyo-e night scene: indigo sky, snow-capped rooftops, and a lone layered pine. Static fallback for reduced-motion.
- Distant MountainFour ukiyo-e hill silhouettes drift at different parallax rates past a snow-capped peak and glowing sun on a gradient indigo sky.
- Plum BranchA ukiyo-e-style ume plum branch with 11 blossoms that bloom open petal-by-petal, sway gently, and re-bloom every 12 seconds against layered ink hills.
- Boat on the SwellA small ferry rocks on sine-wave swells at dusk beneath a sienna sun and three circling gulls, rendered in ukiyo-e woodblock palette.