deepspace.fscss: a CSS planet in a box

#codepen #css #fscss #webdev

A small FSCSS module that draws a deep-space scene: starfield, soft rays, atmosphere, rotating planet, and an orbiting moon. CSS (and FSCSS to package it).

Why a module?

The scene is easy to paste once and painful to keep consistent across pages. deepspace.fscss turns it into four helpers:

Helper	Role
`@deepspace-root()`	Tokens (size, glow, background)
`@deepspace-size(planet)`	Scale planet / system / moon together
`@deepspace(sel)`	Bind the scene to a host (default `body`)
`@deepspace-as-body()`	Full-viewport body reset when you want the page itself to be the stage

Important detail: the host is scoped. Use @deepspace(.scene) and overflow, stars, and motion stay inside that element. The rest of the page is untouched.

Contained demo

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.1/runtime.min.js" defer></script>

@import((*) from deepspace)

@deepspace-root()
@deepspace(.scene)
:root {
  @deepspace-size(200px)
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #111;
  font-family: system-ui, sans-serif;
  color: #ccc;
}
main { width: min(420px, 92vw); }
h1 { font-size: 1rem; margin: 0 0 12px; font-weight: 600; }
.scene {
  height: 380px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
p {
  font-size: 13px;
  color: #888;
  margin: 12px 0 0;
}

<main>
  <h1>deepspace.fscss — contained</h1>
  <div class="scene">
    <div class="ds-rays"></div>
    <div class="ds-planet-system">
      <div class="ds-atmosphere"></div>
      <div class="ds-planet"></div>
      <div class="ds-moon-orbit"><div class="ds-moon"></div></div>
    </div>
    <div class="ds-title">Deep Space</div>
  </div>
  <p>Overflow stays inside <code>.scene</code></p>
</main>

Markup classes: ds-rays, ds-planet-system, ds-atmosphere, ds-planet, ds-moon-orbit, ds-moon, ds-title.

Live preview

Fork from the template:

codepen.io/editor/pen?template=01a0b135-563b-7138-a185-260878cab5fb

Full page (optional)

When the scene should own the viewport:

@deepspace-root()
@deepspace-as-body()
@deepspace(body)

Put the same ds-* children on body (or nest them as in the sample).

Tokens

Defaults from @deepspace-root() — override anytime:

--ds-planet, --ds-system, --ds-moon
--ds-glow, --ds-bg-top, --ds-bg-bottom, --ds-title

Or scale in one call: @deepspace-size(180px).

Requirements

FSCSS ≥ 1.2.1 (runtime or CLI)
Import via deepspace / from deepspace

CSS art stays maintainable when it’s a module with a host selector, not a one-off paste on body.

Repo: github.com/fscss-ttr/deepspace.fscss

DEV Community