Animated ASCII landscapes and scenery

Mountains, oceans, suns and waves: where to find each

Most people arrive looking for one subject, so here is where each lives in this collection. Each piece page also lists the scene's grid size and frame rate, which helps you judge its shape before you embed it.

• Mountains: Mountain Sunrise, Himalaya Peaks with fluttering prayer flags, Summit Above Clouds with a roped line of climbers, and Fuji Dawn Lake mirrored in still water.
• Ocean and waves: Moonlit Sea, Lighthouse Storm, Tropical Island, Arctic Icebergs on a polar swell, and Sea Torii Sunset with waves rolling in toward a shrine gate.
• Sun and sky: Savanna Sunset with its huge orange sun, Desert Dunes under a blazing sky, Balloon Valley Sunrise and the striped sun of Retro Synth Sunset.
• Night: Northern Lights, Campfire Under Stars, Cliff Lighthouse Night, and Lunar Base with Earth hanging in a black sky.

Adding an animated landscape to a website hero

Paste the script tag once, then place the element where the hero should sit, for example <ascii-art piece="mountain-sunrise" size="9"><ASCII library-art>. The size attribute sets the character size in pixels, so a smaller number draws a smaller scene. Add bg to set a background color behind the art, or still to show a single frame with no motion.

A scene is a few KB, much lighter than a large hero photo, and it only animates while it is on screen. Visitors who ask for reduced motion see a still frame. Keep your headline and button in normal HTML beside or over the art, so they stay readable and searchable. The GitHub Pages guide walks through a complete page.

Wallpapers, video backdrops and thumbnails

The halftone scenes, such as Fuji Dawn Lake, Summit Above Clouds and Rainforest Falls Mist, are drawn on a 192 by 108 grid of square cells, the same 16:9 shape as a widescreen display. They fill a Desktop 4K or 1080p wallpaper and a 1920 by 1080 video without awkward crops.

Pause on the moment you like, then pick a preset under Export: Desktop 4K, Desktop 1080p, Phone wallpaper, YouTube thumbnail, X header or LinkedIn banner. For a talk or a stream break, download the scene as an MP4 or WebM video instead and let it loop behind you. Slow, steady scenes such as Rice Terraces and Cherry Blossom River make the least distracting backdrops.

Setting the mood with looks, color and speed

The same landscape can feel completely different without editing any code. Switch the look to Halftone dots for a soft, printed finish, to Blocks or Squares for a chunky pixel feel, or to Binary for a cold, technical edge. Pass your own characters with chars, ordered light to dark, to match a brand or a theme.

Add mono to draw the whole scene in one color, which suits a minimal site, and raise contrast to make a dim night scene such as Northern Lights stand out. On the piece page you can also play a scene at 0.5x, and the speed attribute does the same on your site. Check your choice on both the dark and light backgrounds before you export.