Cat Stargazer

Pure CSS kawaii cat sitting on the moon, gazing at the stars — with a blinking animation

Cat Stargazer

A pure CSS kawaii black cat in a space suit, sitting on the moon and gazing at the stars. The scene features a starry night background, a glowing crescent moon, a glass bubble helmet, and a blinking eye animation — all in CSS.

Original art by Alvaro Montoro.

Basic Usage

The component requires a specific HTML structure with named child elements:

Cat Stargazer

Sizes

Three sizes are available via modifier classes or the --art-cat-stargazer-size custom property:

Cat Stargazer Sizes

ClassSize
.art-cat-stargazer-sm300px
(default)500px
.art-cat-stargazer-lg700px

Custom Size

Use --art-cat-stargazer-size to set an arbitrary size:

Custom Size

CSS Custom Properties

PropertyDefaultDescription
--art-cat-stargazer-size500pxOverall container size (scales everything proportionally)

HTML Structure

<div class="art-cat-stargazer">
  <div class="moon"></div>
  <div class="cat">
    <div class="tail"></div>
    <div class="backpack"></div>
    <div class="body">
      <div class="leg"></div>
      <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="eye"></div>
      <div class="eye"></div>
      <div class="nose"></div>
    </div>
    <div class="bubble"></div>
  </div>
</div>

API Reference

ClassDescription
.art-cat-stargazerBase component — starry night scene with cat on the moon
.art-cat-stargazer-smSmall size (300px)
.art-cat-stargazer-lgLarge size (700px)