ImageGeneration

Usage

Wraps one element, paints a shader inside it, and dissolves into the image once it is ready. Requires the three peer dependency (>=0.149.0).

Presets

preset picks the effect; images is the pool to reveal from.

Loading Flag with a Known Image

When the card stays mounted after the job ends, reveal or hide the image through the ref. Trigger the reveal after the new images reach the component, and leave paused unset.

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{ generating: boolean, src: string }>()
const cell = ref()

// flush: 'post' fires after the component has the new images.
watch(() => props.generating, (generating) => {
  // Generating: fade any shown image back to the shader.
  // Done: reveal the image and hold it until the next run.
  if (generating)
    cell.value?.triggerHide()
  else
    cell.value?.triggerReveal({ hold: 'manual' })
}, { flush: 'post' })
</script>

<template>
  <TxImageGeneration ref="cell" :images="[props.src]" role="img" :aria-label="props.generating ? 'Generating image' : 'Result'" :aria-busy="props.generating">
    <div style="width: 320px; height: 200px; border-radius: 12px" />
  </TxImageGeneration>
</template>

Regenerate

triggerRegenerate() works only while an image is showing: the image breaks into cells, churns, and the next image from the pool dissolves in.

<script setup lang="ts">
import { ref } from 'vue'

const cell = ref()
const variants = ['/a.jpg', '/b.jpg', '/c.jpg']
</script>

<template>
  <TxImageGeneration ref="cell" preset="pixels-mechanic" :images="variants">
    <div style="width: 320px; height: 320px; border-radius: 20px" />
  </TxImageGeneration>
  <TxButton @click="cell?.triggerReveal({ hold: 'manual' })">Show</TxButton>
  <TxButton @click="cell?.triggerRegenerate({ durationMs: 3000 })">Regenerate</TxButton>
</template>

Best Practices

• Give the wrapped child an explicit width and height; the wrapper is inline-block and sizes itself to the child.
• Pass images before triggering a reveal; with an empty pool every trigger is a silent no-op.
• As a placeholder that never reveals an image, animate only while working (:paused="!isGenerating"). When it does reveal one, leave paused unset: a paused card silently ignores reveals.
• Serve reveal images same-origin or with CORS headers; cross-origin images still reveal, but triggerRegenerate() can't sample their colors and falls back to the preset palette.
• Use sweep-gradient with a lower strength for quiet grid tiles; keep the pixel mosaics for the main result.

API Reference

Props

Events

Slots

Exposed Methods

Overview

• One shared THREE.WebGLRenderer and WebGL context serve the whole page; each card copies its frame into its own 2D canvas.
• Frame rate is capped at 10 fps, the GL canvas at a device pixel ratio of 1.25, and the visible canvas at 2.
• Cards pause offscreen (IntersectionObserver, 64 px margin), the loop stops when no card is active, and WebGL context loss is handled.
• Decoded images are cached by URL across cards and drawn like object-fit: cover, center-cropped.
• The corner radius comes from the child's computed border-top-left-radius and applies to all four corners.
• prefers-reduced-motion is not handled; wire it yourself when needed, such as :paused="reduced && generating".

Technologies

• engine/** and presets/** are ported from Jakubantalik/Libraries · img-fx (MIT © Jakub Antalik).
• Source: packages/tuffex/packages/components/src/image-generation/.