Pixel Wave

<script setup lang="ts">
  import PixelWave from '~/components/ui/pixel-wave/PixelWave.vue';
</script>

<template>
  <div class="bg-neutral-950">
    <PixelWave class="h-100" />
    <h2>A Wave From Tahiti</h2>
    <p>Faded memories of wave breaks, rendered in pixel patches.</p>
  </div>
</template>

A fixed 20×19 grid of square cells renders a looping pixel-art scene. The grid never moves — the animation is pure cell-state: colored bands turn on and off as procedural fields morph through a crest, trough, near-black fade window, and a rebuild before the loop restarts. Empty cells keep a faint LED outline, so the display reads as a pixel patch panel even when the scene is gone.

Four scene presets ship built in, each with its own palette and motion:

• tahiti — a rolling ocean swell of foam, turquoise, teal and navy.
• desert — sky bands over a pulsing sun disc and undulating dunes.
• hearth — an inverted-triangle flame from white core to crimson tips.
• mind — two sparse threads that drift, briefly meet, then separate.

The canvas sizes itself to its container (cells scale to fit), honors prefers-reduced-motion by freezing on a static frame, and reports the current phase through the phase event so you can drive captions or accessibility status text.

Inspired by a series of pixel-patch scene experiments shared in the Vue community.