DEV Community

Cover image for Welcome Home
CherninLab
CherninLab

Posted on

2

Welcome Home

This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

The "Welcome Home" scene is inspired by the feeling of returning to Earth after a long space journey, drawing from the aesthetics of sci-fi movies.

Demo

Journey

To create the starry background, I used three .stars-layer divs with different translateZ and scale values for a parallax effect:

.stars-layer {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  animation: rotate 240s linear infinite;
}
.stars-layer-1 {
  transform: translateZ(-300px) scale(2);
}
.stars-layer-2 {
  transform: translateZ(-200px) scale(1.75);
}
.stars-layer-3 {
  transform: translateZ(-100px) scale(1.5);
}
Enter fullscreen mode Exit fullscreen mode

Pseudo-elements with radial-gradient backgrounds create the twinkling stars, animated using keyframes:

.stars-layer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 350px 350px;
  animation: twinkle 4s infinite ease-in-out;
}
Enter fullscreen mode Exit fullscreen mode

The Earth glow effect is achieved with a .earth-glow div, a radial gradient background, and a blur filter:

.earth-glow {
  position: absolute;
  bottom: -20vh;
  left: 0;
  width: 100%;
  height: 40vh;
  background: radial-gradient(...);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: blur(16px);
}
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up