| name | duskmoon-dev-css-art |
| description | When using npm package `@duskmoon-dev/css-art`, this skill shows how to install, configure, and use the pure CSS art component library |
@duskmoon-dev/css-art Skill
Overview
@duskmoon-dev/css-art is a pure CSS art component library — decorative illustrations built entirely with CSS. No images, no SVGs, no JavaScript. Each art piece is a self-contained CSS class with customizable properties.
Installation
bun add @duskmoon-dev/css-art
npm install @duskmoon-dev/css-art
pnpm add @duskmoon-dev/css-art
Setup
CSS Import
@import "@duskmoon-dev/css-art";
All art styles are wrapped in @layer css-art { }, so they won't conflict with @duskmoon-dev/core's @layer components { }.
Using with @duskmoon-dev/core
@import "tailwindcss";
@import "@duskmoon-dev/core";
@import "@duskmoon-dev/css-art";
Available Art Components
Celestial
-
art-moon — Moon with craters, crescent variant, and animated glow
- Variants:
art-moon-crescent, art-moon-glow
- Sizes:
art-moon-sm (4rem), default (8rem), art-moon-lg (12rem), art-moon-xl (16rem)
- Custom properties:
--art-moon-size, --art-moon-color, --art-moon-shadow, --art-moon-glow
-
art-sun — Sun with radial gradient, spinning rays, and pulse animation
- Variants:
art-sun-rays, art-sun-sunset, art-sun-pulse
- Sizes:
art-sun-sm (4rem), default (8rem), art-sun-lg (12rem), art-sun-xl (16rem)
- Custom properties:
--art-sun-size, --art-sun-color, --art-sun-corona, --art-sun-glow
-
art-atom — Animated atom with three orbiting electrons and pulsing nucleus
- Sizes:
art-atom-sm (180px), default (360px), art-atom-lg (480px)
- Children:
.electron, .electron-alpha, .electron-omega — three electron orbits
- Custom properties:
--art-atom-size, --art-atom-color, --art-atom-electron-color, --art-atom-speed
-
art-eclipse — Solar eclipse with six animated corona layers
- Sizes:
art-eclipse-sm (300px), default (600px), art-eclipse-lg (800px)
- Children:
.layer.layer-1 through .layer.layer-6 — six corona layers
- Custom properties:
--art-eclipse-size, --art-eclipse-bg
Landscape
art-mountain — Mountain peak with snow cap, range variant with multiple peaks
- Variants:
art-mountain-range, art-mountain-sunset, art-mountain-forest
- Sizes:
art-mountain-sm (10rem×6rem), default (16rem×10rem), art-mountain-lg (24rem×15rem)
- Children (range):
.art-peak — individual peaks within a range
- Custom properties:
--art-mountain-width, --art-mountain-height, --art-mountain-color, --art-mountain-shadow, --art-mountain-snow
Weather
art-snowflake — Snowflake dot with optional Unicode character variant
- Variants:
art-snowflake-unicode (❆ character), art-snowflake-fall (falling animation)
- Custom properties:
--art-snowflake-size, --art-snowflake-color, --art-snowflake-duration
Interactive
-
art-plasma-ball — Interactive plasma ball with glass sphere, electrode, electric rays, and toggle switch
- Sizes:
art-plasma-ball-sm (200px), default (350px), art-plasma-ball-lg (500px)
- Uses
input:checked CSS selectors for toggle behavior (no JS required)
- Children:
input.switcher, .glassball, .electrode, .rays, .ray, .base, .switch
- Custom properties:
--art-plasma-ball-size, --art-plasma-ball-base-color
-
art-circular-gallery — CSS anchor-positioned circular gallery with 20 rotating card thumbnails
- Sizes:
art-circular-gallery-sm (400px), default (600px), art-circular-gallery-lg (800px)
- Children:
h1 (center title), div elements (one per card) with data-title attribute, a > img (card thumbnail)
- Uses CSS
offset-path, position-anchor, and :target for hover/selection behavior — no JS
- Custom properties:
--art-circular-gallery-size, --art-circular-gallery-radius, --art-circular-gallery-card-width
Scenes
-
art-cat-stargazer — A cat in a spacesuit gazing at the night sky with stars and a glowing moon
- Sizes:
art-cat-stargazer-sm (300px), default (500px), art-cat-stargazer-lg (700px)
- Children:
.moon, .cat, .cat .bubble, .cat .backpack, .cat .tail, .cat .body, .cat .ear, .cat .head
- Custom properties:
--art-cat-stargazer-size
-
art-flower-animation — Blooming flowers with grass, light particles, and floating heart bubbles against a night sky
- Sizes:
art-flower-animation-sm (300px), default (600px), art-flower-animation-lg (900px)
- Children:
.night, .flowers, .flower.flower--1 through .flower--4, .bubbles, .bubble
- Custom properties:
--art-flower-animation-size, --art-flower-animation-bg
Abstract / Generative
Gaming
art-csswitch — CSS-only game controller switch (Nintendo Switch inspired)
- Sizes:
art-csswitch-sm, default, art-csswitch-lg
- Children: complex controller structure with
.controller, .joycon-left, .joycon-right, .frame, .main-frame, .mushroom, .direction, .bar, .logo, .light
- Custom properties:
--art-csswitch-size, --color, --color-shadow, --joycon-left, --joycon-left-shadow, --joycon-right, --joycon-right-shadow
Loading
art-snowball-preloader — Animated snowball loading spinner with orbital rings
- Sizes:
art-snowball-preloader-sm, default, art-snowball-preloader-lg
- Children:
.art-snowball-preloader-ball, .art-snowball-preloader-ball-texture, .art-snowball-preloader-ball-inner-shadow, .art-snowball-preloader-ball-outer-shadow, .art-snowball-preloader-ball-side-shadows, .art-snowball-preloader-inner-ring, .art-snowball-preloader-outer-ring, .art-snowball-preloader-track-cover
- Custom properties:
--art-snowball-preloader-size, --art-snowball-preloader-bg
UI Components
art-gemini-input — Gemini-style animated conic-gradient border with glow halo on a textarea input
- Sizes:
art-gemini-input-sm (280px), default (450px), art-gemini-input-lg (640px)
- Children:
.art-gemini-input-border, .art-gemini-input-inner, .art-gemini-input-btn, .art-gemini-input-field (textarea)
- Custom properties:
--art-gemini-input-width, --art-gemini-input-border-size, --art-gemini-input-gradient
Usage Examples
Basic Moon
<div class="art-moon"></div>
Crescent Moon with Glow
<div class="art-moon art-moon-crescent art-moon-glow"></div>
Sun with Animated Rays
<div class="art-sun art-sun-rays"></div>
Sunset Sun
<div class="art-sun art-sun-sunset art-sun-rays"></div>
Single Mountain
<div class="art-mountain"></div>
Mountain Range
<div class="art-mountain-range">
<div class="art-peak"></div>
<div class="art-peak"></div>
<div class="art-peak"></div>
</div>
Atom
<div class="art-atom">
<div class="electron"></div>
<div class="electron-alpha"></div>
<div class="electron-omega"></div>
</div>
Eclipse
<div class="art-eclipse">
<div class="layer layer-1"></div>
<div class="layer layer-2"></div>
<div class="layer layer-3"></div>
<div class="layer layer-4"></div>
<div class="layer layer-5"></div>
<div class="layer layer-6"></div>
</div>
Snowflakes
<div class="art-snowflake art-snowflake-fall"></div>
<div class="art-snowflake art-snowflake-unicode art-snowflake-fall"></div>
Plasma Ball (Interactive)
<div class="art-plasma-ball">
<input class="switcher" type="checkbox" />
<div class="glassball">
<div class="electrode"></div>
<div class="rays">
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
</div>
</div>
<div class="base"><div></div><div></div><span></span></div>
<div class="switch"></div>
</div>
Cat Stargazer
<div class="art-cat-stargazer">
<div class="moon"></div>
<div class="cat">
<div class="bubble"></div>
<div class="backpack"></div>
<div class="tail"></div>
<div class="body">
<div class="leg"></div>
<div class="paw"></div><div class="paw"></div>
</div>
<div class="ear"></div><div class="ear"></div>
<div class="head">
<div class="whisker"></div><div class="whisker"></div>
<div class="whisker"></div><div class="whisker"></div>
<div class="nose"></div>
<div class="eye"></div><div class="eye"></div>
</div>
</div>
</div>
Color Spin
<div class="art-color-spin">
<ul>
<li style="--i:1"></li>
<li style="--i:2"></li>
<li style="--i:3"></li>
<li style="--i:4"></li>
</ul>
</div>
Synthwave Starfield
<div class="art-synthwave-starfield">
<div class="art-synthwave-starfield-sides art-synthwave-starfield-lefrig"></div>
<div class="art-synthwave-starfield-sides art-synthwave-starfield-topbot"></div>
<div class="art-synthwave-starfield-stars"></div>
<div class="art-synthwave-starfield-stars"></div>
</div>
Circular Gallery
<div class="art-circular-gallery">
<h1>Gallery</h1>
<div style="--i:1" data-title="Photo 1"><a href="#item1"><img src="photo1.jpg" alt="Photo 1" /></a></div>
<div style="--i:2" data-title="Photo 2"><a href="#item2"><img src="photo2.jpg" alt="Photo 2" /></a></div>
</div>
Flower Animation
<div class="art-flower-animation">
<div class="night"></div>
<div class="flowers">
<div class="flower flower--1">
<div class="flower__leafs flower__leafs--1">
<div class="flower__leaf flower__leaf--1"></div>
<div class="flower__leaf flower__leaf--2"></div>
<div class="flower__leaf flower__leaf--3"></div>
<div class="flower__leaf flower__leaf--4"></div>
<div class="flower__white-circle"></div>
</div>
<div class="flower__line">
<div class="flower__line__leaf flower__line__leaf--1"></div>
<div class="flower__line__leaf flower__line__leaf--2"></div>
</div>
</div>
</div>
</div>
Gemini Input
<div class="art-gemini-input">
<div class="art-gemini-input-border"></div>
<div class="art-gemini-input-inner">
<button class="art-gemini-input-btn">+</button>
<textarea class="art-gemini-input-field" placeholder="Ask Gemini..."></textarea>
<button class="art-gemini-input-btn">▶</button>
</div>
</div>
CSSwitch (Game Controller)
<div class="art-csswitch">
<div class="controller">
<div class="frame">
<div class="main-frame"></div>
</div>
</div>
</div>
Snowball Preloader
<div class="art-snowball-preloader">
<div class="art-snowball-preloader-outer-ring"></div>
<div class="art-snowball-preloader-inner-ring"></div>
<div class="art-snowball-preloader-track-cover"></div>
<div class="art-snowball-preloader-ball">
<div class="art-snowball-preloader-ball-texture"></div>
<div class="art-snowball-preloader-ball-outer-shadow"></div>
<div class="art-snowball-preloader-ball-inner-shadow"></div>
<div class="art-snowball-preloader-ball-side-shadows"></div>
</div>
</div>
Custom Colors
Override CSS custom properties to customize any art piece:
<div class="art-moon" style="--art-moon-color: oklch(80% 0.08 240);"></div>
<div class="art-sun" style="--art-sun-size: 6rem;"></div>
<div class="art-atom" style="--art-atom-color: #00ff88;">
<div class="electron"></div>
<div class="electron-alpha"></div>
<div class="electron-omega"></div>
</div>
Composing a Night Scene
<div style="background: oklch(15% 0.02 260); padding: 3rem; position: relative; overflow: hidden;">
<div class="art-moon art-moon-crescent art-moon-glow" style="position: absolute; top: 1rem; right: 2rem;"></div>
<div class="art-snowflake art-snowflake-fall" style="left: 20%; --art-snowflake-duration: 6s;"></div>
<div class="art-snowflake art-snowflake-fall" style="left: 50%; --art-snowflake-duration: 4s; animation-delay: 1s;"></div>
<div class="art-snowflake art-snowflake-fall" style="left: 80%; --art-snowflake-duration: 5s; animation-delay: 2s;"></div>
<div class="art-mountain-range" style="position: absolute; bottom: 0;">
<div class="art-peak"></div>
<div class="art-peak"></div>
<div class="art-peak"></div>
</div>
</div>
CSS Architecture
- All classes prefixed with
.art- to avoid collisions
- All custom properties prefixed with
--art- for namespacing
- Uses
@layer css-art to avoid cascade conflicts with other libraries
- Colors use OKLCH format for perceptual uniformity
- Animations use
@keyframes with art- prefixed names
Importing Individual Art Pieces
@import "@duskmoon-dev/css-art/art";
Development Commands
bun run build:css-art
bun run dev:css-art
cd packages/css-art && bun test tests/unit
Bundle Size
- Unminified: ~50 KB
- Minified: ~36 KB
