5 Interactive ASCII Footer Panels
Explore 5 distinct interactive ASCII art background options designed to replace the current footer expanding green radial effect. Hover and move your cursor over each panel to test its reactivity, and try changing the color themes below.
ASCII Matrix Rain & Cursor Shockwave
Downward streaming ASCII characters with interactive cursor shockwaves and density bursts.
Vector Field & ASCII Fluid Turbulence (Click Ripple Enabled)
Grid of directional ASCII glyphs acting as a fluid field. Hover to stir the field, click anywhere to trigger expanding shockwave ripples. Displayed below in both Dark Mode and Light Mode.
3D ASCII Topographic Mesh & Lighting
Real-time 3D terrain rendered with ASCII shade characters (`. : - = + * # % @`). Cursor controls 3D light angle and height elevation waves.
Gravitational ASCII Swarm & Constellation
Zero-gravity floating ASCII particles drawn toward the cursor into orbiting swarms, linking with dashed constellation lines.
Typographic Heatmap & Thermal Focus Lens
Full-density background grid. Moving the cursor reveals a circular thermal lens that illuminates high-impact ASCII glyphs (`@ # % W M █`).
3 Takes on the About Page Carousel
about.astro's .about-media carousel currently fixes mixed orientations with a page-scoped CSS hack: a fixed 400px height and a hardcoded width swap (580px landscape / 300px portrait). It works, but the peeking prev/next neighbors end up uneven widths depending on what's next to what, and there's no visible affordance for the click-to-navigate on those peeking slides. These 3 iterations replace that hack with a general frameStrategy built into ImageSlider itself, using the exact same 5 slides (3 photos, 1 video, 1 gif — 3 landscape, 2 portrait). Drag, swipe, click a peeking slide, or use the hover arrows to compare.
Adaptive Frame
The container's aspect ratio animates to match each slide's real dimensions. Nothing is cropped or padded — but the frame's height changes as you navigate.
Blurred Letterbox
Frame height stays fixed at 16:9 always. Portrait slides sit centered and fully visible over a blurred, scaled copy of themselves filling the rest of the frame.
Orientation-Aware Split
Landscape slides stay full-bleed cover, matching how the component is used across the rest of the site today. Portrait slides shrink the frame itself into a narrow centered column sized to their own ratio, so nothing gets cropped or blown up.