mcpField
D
duskmoon-art-elements

duskmoon-art-elements

github.com/gsmlg-devDesign & UI035 installsUpdated 3w ago
Repository

About duskmoon-art-elements

A set of 15 animated CSS art custom elements for web developers, rendered without JavaScript logic or external images. Elements can be installed individually or together and offer shared sizing plus selected element-specific properties.

Key features

  1. 0115 animated CSS art elements
  2. 02No JavaScript logic or external images
  3. 03Install elements individually or as a set
  4. 04Small, medium, and large sizes
  5. 05Element-specific animation properties

Use cases

  1. 01Add animated CSS artwork to a web page
  2. 02Choose a reusable moon, sun, or mountain element
  3. 03Adjust snowfall count or animation state
  4. 04Register only selected elements for tree-shaking

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/gsmlg-dev/code-agent --skill duskmoon-art-elements

After installing, type/duskmoon-art-elementsin Claude Code to confirm it loaded.

Bundled filesreferences/css-art-catalog.md

Details

From the project README

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:

PropertyTypeDefaultDescription
sizeString'md'Size variant — maps to art-{name}-{size} CSS class (sm, md, lg)

Element-specific properties:

ElementExtra Properties
el-dm-art-moonvariant (String), glow (Boolean)
el-dm-art-mountainvariant (String)
el-dm-art-sunvariant (String), rays (Boolean)
el-dm-art-snowcount (Number), unicode (Boolean), fall (Boolean)
el-dm-art-circular-gallerytitle (String), count (Number)
el-dm-art-synthwave-starfieldpaused (Boolean)
el-dm-art-gemini-inputplaceholder (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

Comments

Markdown supported