Interactive digital ceremonies can be incredibly powerful. This project allows users to type a personal wish or thought and visually “release” it into a digital night sky as glowing, floating lanterns.

The Environment

We create a pure CSS starry background using scattered box shadows or a canvas particle system. For the lanterns, we create simple light orange HTML elements emitting a warm box-shadow.

Lantern Upward Drift

The key to a realistic lantern is an upward transform coupled with a slight side-to-side wobble, mimicking the unstable heat from the candle.

.lantern {
  animation: floatUp 15s ease-in forwards, wobble 4s ease-in-out infinite alternate;
  box-shadow: 0 0 20px rgba(255, 150, 50, 0.8), 0 0 50px rgba(255, 100, 0, 0.4);
}

@keyframes floatUp {
  0% { transform: translateY(100vh) scale(1); opacity: 1; }
  100% { transform: translateY(-20vh) scale(0.3); opacity: 0; }
}

@keyframes wobble {
  0% { margin-left: 0; }
  100% { margin-left: 40px; }
}

Try typing a wish and hitting “Release” in the Live Demo to see the magnificent glowing effect!