CSS Artart-componentsimplemented2 demos
ArtCatStargazer
ArtCatStargazer renders the ArtCatStargazer CSS-art scene as a reusable React component.
Import
@duskmoon-dev/art-components1API sections
0documented props
1behavior scenarios
Usage
When to use
- Use it when a page needs a reusable DuskMoon visual asset rendered from CSS rather than an image.
- Keep it decorative unless the illustration carries information that must be announced.
Implementation notes
StylesheetImport @duskmoon-dev/art-components/styles.css once before rendering art components.
StateStart with default props for static examples, then switch to controlled props when state must be shared.
SizingUse the size prop and CSS custom properties to adapt the scene without replacing markup.
Features
CSS-art wrapper
Renders the matching @duskmoon-dev/css-art scene through a typed React component.
Accessible decoration
Defaults to decorative output while allowing aria labels and roles when the scene carries meaning.
Covered behavior
Renders the stargazing scene structure
Feature Demos
Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.
Preview
Basic usage
Import ArtCatStargazer and the art component stylesheet before rendering the CSS art scene.
Source
import "@duskmoon-dev/art-components/styles.css";
import { ArtCatStargazer } from "@duskmoon-dev/art-components";
export function Example() {
return (<ArtCatStargazer size="sm" />);
}Preview
Accessible art
Use ArtCatStargazer as decorative output by default, or pass accessible labeling when the scene is meaningful.
Source
import "@duskmoon-dev/art-components/styles.css";
import { ArtCatStargazer } from "@duskmoon-dev/art-components";
export function AccessibleArt() {
return (<ArtCatStargazer size="sm"
decorative={false}
aria-label="Art Cat Stargazer illustration" />);
}API
The API reference below lists every parsed exported type or interface for ArtCatStargazer.
Types:
packages/art-components/src/index.tsxScenarios: packages/art-components/tests/art-components.test.tsxSizedArtProps