APERVEIL / DOCS / VUE

Video and images — Vue

Play a video or an image through an Aperveil shader in Vue with src, and give Glass Reel a gallery or Dew Glass a background.

Video and images

Thermal Vision, Riso Print, Stipple Relief, Reeded Waveform, VHS Tape, Frost Glass, Water Ripple and Liquid Glass play a video or an image through the shader. Give it the URL as src: an MP4, WebM, MOV, JPG, PNG or WebP.

VideoHero.vue

<script setup lang="ts">
import ThermalVision from "./components/aperveil/thermal-vision/vue/ThermalVision.vue";
</script>

<template>
  <ThermalVision class="hero-shader" src="/videos/your-clip.mp4" :media-focus="[0.5, 0.4]" />
</template>

Prop	Type	What it does
src	string	The video or image it plays. A URL to an MP4, WebM, MOV, JPG, PNG or WebP, on your own site or on a server that allows it (CORS). Left out, it plays its own clip; an empty string shows its own scene.
mediaFocus	readonly [number, number]	Where the subject sits. Its place in the picture, from the top left, kept in view when the picture is cropped to fill.
mediaKind	"video" \| "image"	Video or image. Only needed when the URL does not end in a file extension.

Without one, Thermal Vision and Riso Print play their own sample clip from the Aperveil CDN (use your own in production), Stipple Relief and Reeded Waveform show their own scene, Frost Glass its plants, and VHS Tape plays its own tapes. The clip plays muted, looped and inline, and holds still while the shader is paused, scrolled out of view or under reduced motion. A clip on your own site always plays; one on another server must allow it (CORS). A short clip of 5 to 15 seconds with one clear subject loops best.

Glass Reel shows a gallery: up to 8 pictures and clips (2 of them clips) on its film. Pass them as gallery, an array of { src, type, alt }. Dew Glass sits on a picture: give its URL as backgroundImage. Without them, Glass Reel shows its own sample pictures and Dew Glass its own scene.

Prop	Type	What it does
gallery	readonly { src: string; type?: "image" \| "video"; alt?: string; focal?: readonly [number, number] }[]	The pictures and clips on the reel. URLs of JPG, PNG or WebP pictures and MP4 or WebM clips, on your own site or on a server that allows it (CORS). Left out, it shows its own sample pictures.
backgroundImage	string	The picture behind the glass. A URL to a JPG, PNG or WebP up to 10 MB, on your own site or on a server that allows it (CORS). It is shown as soon as it loads (backgroundMode switches to image unless you set it); left out, the shader shows its own scene.

Chromatic Vapor, Cymatic Dust, Dew Glass, Glass Medusae, Glass Reel, Prismatic Caustics and Watercolor run a simulation or draw a mesh, in several passes. Their components carry those passes, so they install like any other shader.

Color Looks, browser support, performance and access are the same on every platform: see the overview.