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

Class Size
.art-cat-stargazer-sm 300px
(default) 500px
.art-cat-stargazer-lg 700px

Custom Size

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

Custom Size

CSS Custom Properties

Property Default Description
--art-cat-stargazer-size 500px Overall 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

Class Description
.art-cat-stargazer Base component — starry night scene with cat on the moon
.art-cat-stargazer-sm Small size (300px)
.art-cat-stargazer-lg Large size (700px)