duskmoon-art-elements

DuskMoon CSS アート要素

@duskmoon-dev/el-base を基盤とする、純粋な CSS アートのカスタム要素 15 個です。各要素は自己完結型の CSS アニメーションを描画します。JavaScript のロジックや外部画像は不要です。

インストール

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

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

登録

// 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();

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>

プロパティ

すべての CSS アート要素は、デフォルトで display: inline-block です。ほとんどの要素で size が使えます。

プロパティ	型	デフォルト	説明
size	String	'md'	サイズのバリエーション。art-{name}-{size} CSS クラスに対応します（sm、md、lg）

要素固有のプロパティ：

要素	追加プロパティ
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 レイヤーの除去

CSS アート要素は @duskmoon-dev/css-art から生の CSS をインポートし、Shadow DOM に挿入する前に @layer css-art { ... } のラッパーを除去します。

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;

Shadow DOM 内の @layer は、ドキュメントのレイヤー順序と連動しないため、この処理が必要です。

一部のアート（例：gemini-input）には、レイヤー外に @property 宣言もあります。これらは @layer ブロックより前に記述され、正規表現のマッチ対象にならないため、除去処理後も保持されます。

参考資料

• CSS アートのカタログ — タグとプロパティを含む、15 個すべての CSS アートパッケージ