CSS Pixel Art Animation

This is a Pure CSS Pixel Art Animation. It renders a multi-frame character sequence (Guybrush Threepwood) using a single HTML <div>. Its function is to demonstrate extreme CSS capability and provide lightweight, scalable retro graphics without requiring external raster images or canvas rendering.

Specs

• Weight: ~50 KB (Compiled CSS). Heavy for a single element, but zero external HTTP requests.
• Performance: Low. [!] Animating massive box-shadow strings triggers continuous browser repaints. Not recommended for mobile interfaces or multiple instances.
• Theming / Customization: Fully modular. Colors are defined via an SCSS $colors map. Resolution is controlled by a $grid variable.
• Responsiveness: Fluid. Relies exclusively on vh viewport units to scale the entire pixel matrix proportionally.

Anatomy

The structure is completely transparent, stripping away DOM bloat.

• HTML: A single .guybrush node. The ultimate skeleton.
• CSS (SCSS): The engine. Contains fourteen 1D arrays (representing a 36-column grid) mapping numerical values to color palettes.
• JS: Absent.

Logic

The core mechanism is a custom SCSS function that compiles numerical arrays into a single, massive box-shadow string.

@function guybrush($guybrush, $shadow-count: $grid) {
  $shadows: ();
  $row: 0;
  $col: 1;
  
  @for $i from 1 through length($guybrush) {
    @if( nth($guybrush,$i) > 0 ) {
      $shadows: append($shadows, ($col * 1vh) ($row * 1vh) 0 0.1vh map-get($colors,nth($guybrush,$i)), 'comma');
    }
    /* Grid wrap logic... */
  }
  @return $shadows;
}

The animation relies on step-start in the @keyframes directive. Instead of interpolating between values (which would cause the pixels to glide and morph), step-start forces instantaneous state changes. This reconstructs the authentic, hard-cut feeling of classic sprite sheet animation.

Feel

Nostalgic and mechanical. The step-start timing function dictates harsh, precise frame transitions. It feels like a 1990s adventure game — strictly logical, rigidly structured, and entirely independent of modern graphic engines.