DuskMoon CSS Art Elements

15 pure CSS art custom elements built on @duskmoon-dev/el-base. Each element renders a self-contained CSS animation — no JavaScript logic, no external images.

Installation

# Individual art element
bun add @duskmoon-dev/el-art-atom

# All art elements at once
bun add @duskmoon-dev/art-elements

Registration

// Option 1: Explicit (tree-shakable)
import { register } from '@duskmoon-dev/el-art-atom';
register();

// Option 2: Side-effect auto-register
import '@duskmoon-dev/el-art-atom/register';

// Option 3: Register all CSS art elements
import { registerAllArts } from '@duskmoon-dev/art-elements';
registerAllArts();

Usage in HTML

<el-dm-art-atom></el-dm-art-atom>
<el-dm-art-atom size="lg"></el-dm-art-atom>

<el-dm-art-moon variant="crescent" glow></el-dm-art-moon>
<el-dm-art-sun variant="sunset" rays></el-dm-art-sun>

<el-dm-art-plasma-ball size="xl"></el-dm-art-plasma-ball>
<el-dm-art-synthwave-starfield size="lg" paused></el-dm-art-synthwave-starfield>

<el-dm-art-gemini-input placeholder="Ask me anything..."></el-dm-art-gemini-input>
<el-dm-art-gemini-input size="lg"></el-dm-art-gemini-input>

Properties

All CSS art elements are display: inline-block by default. Most support size:

Property	Type	Default	Description
size	String	'md'	Size variant — maps to art-{name}-{size} CSS class (sm, md, lg)

Element-specific properties:

Element	Extra Properties
el-dm-art-moon	variant (String), glow (Boolean)
el-dm-art-mountain	variant (String)
el-dm-art-sun	variant (String), rays (Boolean)
el-dm-art-snow	count (Number), unicode (Boolean), fall (Boolean)
el-dm-art-circular-gallery	title (String), count (Number)
el-dm-art-synthwave-starfield	paused (Boolean)
el-dm-art-gemini-input	placeholder (String)

CSS Layer Stripping

CSS art elements import raw CSS from @duskmoon-dev/css-art and strip the @layer css-art { ... } wrapper before injecting into Shadow DOM:

import rawCss from '@duskmoon-dev/css-art/dist/art/{name}.css' with { type: 'text' };
const layerMatch = rawCss.match(/@layer\s+css-art\s*\{([\s\S]*)\}\s*$/);
const coreCss = layerMatch ? layerMatch[1] : rawCss;

This is required because @layer inside Shadow DOM does not interact with the document's layer order.

Some art pieces (e.g. gemini-input) also have @property declarations outside the layer — these are preserved by the stripping regex since they appear before the @layer block and are not matched.

References

• CSS Art catalog — all 15 CSS art packages with tags and properties