---
id: "2115780321526591790"
source: https://x.com/kail_designs/status/2115780321526591790
author: "Kailash (@kail_designs)"
media: "video, 3840x2160, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# ASCII Glyph Butterfly in Flight

## Summary
A butterfly rendered entirely from tiny monospace characters in pale teal on a near-black field, filling the frame as its wings slowly beat in 3D. Brightness is carried by glyph density and shade, so wing veins and edges appear as darker channels in the character grid. Worth studying as a moody ASCII shader effect that could anchor a hero or loading screen.

## Style
- Theme: dark (teal glyphs on blue-black)
- Mood: hypnotic, technical, delicate, nocturnal
- Tags: ascii-art, glyph-shader, generative, monospace, butterfly, terminal-aesthetic, webgl
- Category: Art, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #090D10 |
| Background deep | #080C0E |
| Dark teal glyph | #0C1B1B |
| Shadow glyph | #162827 |
| Mid glyph | #2C3E3D |
| Soft glyph | #495D5C |
| Light glyph | #748A89 |
| Brightest glyph | #A9C6C2 |

## Typography
No readable text. The whole image is made of monospace glyphs (characters such as 0, 8, #, x, o and dots) at roughly 10 to 12px in a 4K frame, set on a strict character grid with no extra tracking. The closest free font for this look is JetBrains Mono or IBM Plex Mono at regular weight.

## Layout
- 16:9 frame (3840x2160); the butterfly is centred and so large that the upper wings are cropped by the top edge and the hind wings touch the bottom.
- The glyph grid is uniform, about 180 columns by 100 rows across the frame, every cell the same size.
- Symmetry around the vertical centre line; the body is a thin dark gap between the wings.
- No UI, borders or shadows; depth comes only from glyph brightness falloff and the perspective of the flapping wings.

## Elements
- Forewings: large rounded triangles filled with dense light glyphs, crossed by darker vein lines that radiate from the body.
- Hind wings: smaller lobes with curved dark bands near the inner edge.
- Wing edges: sparser, dimmer glyphs that fade into scattered single characters, giving a soft dissolving outline.
- Background: almost empty, with a few stray dim glyphs near the wings like dust.
- Glyph shading: brighter characters (dense shapes such as 8 or #) for lit areas, thin characters (dots, colons) for shadowed ones.

## Motion
- The wings flap in a slow cycle of about 2.5 to 3 seconds: at 0.3s and 1.8s they are raised and narrower in silhouette, at 3.2s and 4.6s fully spread, then rising again by 6.1s and 7.5s.
- The motion reads as a 3D rotation of each wing around the body axis with smooth sine easing, plus a slight up and down drift of the whole body.
- Glyphs re-sample each frame, so characters flicker and change as the shading moves, giving a lively shimmer.
- The 8 second clip loops seamlessly.

## Rebuild it
1. Render a 3D butterfly (two textured wing planes hinged at the body) in Three.js or React Three Fiber into an offscreen render target at low resolution, about 180 x 100.
2. Run a post-processing pass that divides the screen into character cells, samples the luminance of each cell, and indexes into a glyph atlas texture ordered from sparse to dense (for example " .:-=+*#%8@").
3. Tint the output with a colour ramp from #090D10 through #2C3E3D to #A9C6C2 so brighter cells get both denser glyphs and lighter colour.
4. Animate wing rotation with `Math.sin(t * 2.2) * 0.9` radians and add a body bob of `Math.sin(t * 2.2 + 0.6) * 0.05`.
5. Wrap the canvas in a full-bleed hero (`bg-[#090D10] h-dvh`) and fade it in with Motion (`opacity` 0 to 1 over 1.2s, ease-out).
6. For a non-WebGL fallback, draw a pre-rendered sprite sheet of ASCII frames into a `pre` element with `font-family: monospace; line-height: 1`.

## Generation prompt
Dark cinematic animation of a large symmetrical butterfly made entirely of tiny monospace ASCII characters in pale teal on a near-black background, wings slowly flapping in 3D, brightness expressed through character density with darker vein lines and dissolving glyph edges, subtle shimmering flicker as characters change, terminal aesthetic, 16:9, seamless loop, no text or logos.