duskmoon-art-components

DuskMoon Art Components Usage

Use @duskmoon-dev/art-components for React wrappers around the external @duskmoon-dev/css-art CSS illustrations.

Install

bun add @duskmoon-dev/art-components @duskmoon-dev/css-art react react-dom

Import the stylesheet once at the app root:

import "@duskmoon-dev/art-components/styles.css";

For Next.js App Router, put the style import in app/layout.tsx or the root client entry. Do not import files from dist/ directly.

Imports

All wrappers are exported from the package root:

import { ArtMoon, ArtPlasmaBall } from "@duskmoon-dev/art-components";

The package also exports @duskmoon-dev/art-components/styles.css.

Available Wrappers

• ArtMoon
• ArtSun
• ArtAtom
• ArtEclipse
• ArtMountain
• ArtSnowflake
• ArtPlasmaBall
• ArtCircularGallery
• ArtCatStargazer
• ArtFlowerAnimation
• ArtColorSpin
• ArtSynthwaveStarfield
• ArtCsswitch / ArtCSSwitch
• ArtSnowballPreloader
• ArtGeminiInput

ArtCircularGalleryItem is exported as a TypeScript item type for ArtCircularGallery.

Examples

Decorative art:

import { ArtMoon, ArtSun } from "@duskmoon-dev/art-components";

export function HeaderArt() {
  return (
    <div>
      <ArtMoon crescent glow size="lg" />
      <ArtSun rays pulse size="sm" />
    </div>
  );
}

Accessible labeled art:

import { ArtAtom } from "@duskmoon-dev/art-components";

export function AtomLogo() {
  return <ArtAtom decorative={false} aria-label="Orbiting atom logo" />;
}

Circular gallery:

import { ArtCircularGallery } from "@duskmoon-dev/art-components";

export function Gallery() {
  return (
    <ArtCircularGallery
      title="Featured"
      items={[
        { title: "Moon", src: "/moon.jpg" },
        { title: "Sun", src: "/sun.jpg", alt: "Sun illustration" },
      ]}
    />
  );
}

Interactive plasma ball:

import { ArtPlasmaBall } from "@duskmoon-dev/art-components";

export function PlasmaSwitch() {
  return (
    <ArtPlasmaBall
      defaultChecked
      onCheckedChange={(checked) => console.log(checked)}
    />
  );
}

Variant Guidance

• Most wrappers accept size="sm" | "default" | "lg".
• ArtMoon and ArtSun also accept size="xl".
• ArtMoon supports crescent and glow.
• ArtSun supports rays, sunset, and pulse.
• ArtSnowflake supports unicode and fall.
• ArtPlasmaBall supports checked, defaultChecked, hideBase, hideElectrode, inputProps, and onCheckedChange.
• ArtSynthwaveStarfield supports paused.
• ArtGeminiInput behaves like a styled textarea wrapper with optional before/after buttons.

All wrappers accept className, style, and CSS custom properties through style.

Accessibility

• Decorative wrappers are hidden from assistive technology by default.
• Pass decorative={false} plus aria-label, aria-labelledby, role, or title when the art carries meaning.
• For interactive wrappers such as ArtPlasmaBall and ArtGeminiInput, pass native input or textarea props for labels, names, disabled state, and form integration.

Guidance For Agents

• Always include the stylesheet import in first-time setup examples.
• Keep wrapper names exact, especially ArtCsswitch and its alias ArtCSSwitch.
• Do not claim this package owns the underlying CSS art source; it wraps @duskmoon-dev/css-art.
• Prefer package-root imports for wrappers.
• If the user is editing this repo's source rather than consuming the package, inspect packages/art-components/src/index.tsx, packages/art-components/package.json, and packages/art-components/tests/art-components.test.tsx before changing code.