duskmoon-art-elements

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

DuskMoon CSS Art Elements

DuskMoon CSS艺术元素

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.

基于

@duskmoon-dev/el-base

构建的15个纯CSS艺术自定义元素。每个元素都能渲染独立的CSS动画——无需JavaScript逻辑，也无需外部图片。

Installation

安装

bash

undefined

bash

undefined

Individual art element

单独安装单个艺术元素

bun add @duskmoon-dev/el-art-atom

All art elements at once

一次性安装所有艺术元素

bun add @duskmoon-dev/art-elements

undefined

bun add @duskmoon-dev/art-elements

undefined

Registration

注册

typescript

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

typescript

// 方式1：显式注册（支持tree-shaking）
import { register } from '@duskmoon-dev/el-art-atom';
register();

// 方式2：通过副作用自动注册
import '@duskmoon-dev/el-art-atom/register';

// 方式3：注册所有CSS艺术元素
import { registerAllArts } from '@duskmoon-dev/art-elements';
registerAllArts();

Usage in HTML

HTML中的使用

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>

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艺术元素默认均为

display: inline-block

。大多数元素支持

size

属性：

属性	类型	默认值	说明
`size`	字符串	`'md'`	尺寸变体——对应 `art-{name}-{size}` CSS类（可选值： `sm` , `md` , `lg` ）

元素专属属性：

元素	额外属性
`el-dm-art-moon`	`variant` （字符串）, `glow` （布尔值）
`el-dm-art-mountain`	`variant` （字符串）
`el-dm-art-sun`	`variant` （字符串）, `rays` （布尔值）
`el-dm-art-snow`	`count` （数字）, `unicode` （布尔值）, `fall` （布尔值）
`el-dm-art-circular-gallery`	`title` （字符串）, `count` （数字）
`el-dm-art-synthwave-starfield`	`paused` （布尔值）
`el-dm-art-gemini-input`	`placeholder` （字符串）

CSS Layer Stripping

CSS Layer剥离

CSS art elements import raw CSS from

@duskmoon-dev/css-art

and strip the

@layer css-art { ... }

wrapper before injecting into Shadow DOM:

typescript

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.

CSS艺术元素会从

@duskmoon-dev/css-art

导入原始CSS，并在注入Shadow DOM之前剥离

@layer css-art { ... }

包裹层：

typescript

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

块之前，不会被匹配到。

References

参考资料

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

CSS艺术目录——包含全部15个CSS艺术包的标签和属性信息