Animation — lunaDOM Docs

The <luna-animation> component displays animations using lightweight video formats (WebM, MP4) or GIF images with automatic looping and playback.

Paths

/lunadom/components/animation/animation.js

REQUIRED

WebM Video (Recommended)

Best compression and quality. Supported by modern browsers.

Custom Sizing

Small (200px)

Medium (400px)

Large (600px)

Custom Border Radius

Customization

Slots
default - Animation content

Attributes
src-webm - WebM video source (recommended for best compression)
src-mp4 - MP4 video source (fallback)
src-gif - GIF image source (fallback)
width - Width of animation (default: "100%")
height - Height of animation (default: "auto")

CSS Variables
--luna-radius - Border radius

Example Code

<luna-animation src-webm="animation.webm" width="400" ></luna-animation>  <luna-animation src-webm="animation.webm" src-mp4="animation.mp4" width="400" ></luna-animation>  <luna-animation src-gif="animation.gif" width="400" ></luna-animation>  <luna-animation src-webm="animation.webm" width="600" style="--luna-radius: 1.5rem;" ></luna-animation>  <luna-animation src-webm="animation.webm" width="100%" ></luna-animation>