CodePen Home Estrelas e Velocidade Warp

Abrir no Editor Video Publique Seu Código

Recomendado

9 July 2025

Menu de contexto de vidro neon com seletor de cores

27 January 2026

html,body{height:100%;max-width:100%;margin:0;overflow:hidden;background:rgba(0,10,20,1) url(https://i.imgur.com/r838U7u.jpg) center no-repeat;background-size:cover;image-rendering: pixelated; font-family:sans-serif}
#space{width:100%}
#warp{position:absolute;z-index:9;bottom:0;left:0;right:0;margin:20px auto;color:rgba(209, 255, 255,1);border:2px solid;padding:1em;width:10em;text-align:center;font-weight:700;font-size:1.2em;display:inline-block;text-decoration:none;background:rgba(0,0,0,0.8);
transition:all 0.2s}
#warp:hover{
    box-shadow: 0 0 10px #eef, 0 0 12px #a0cdff inset;
    text-shadow: 0 0 12px #489cfa, 0 0 5px #fff;
}

/* follow me @nodws */
#btn-twtr{
  clear:both;
  color:#fff;
  border:2px solid;
  border-radius:3px;
  text-align:center;
  text-decoration:none;
  display:block;
  font-family:sans-serif;
  font-size:14px;
  width:13em;
  padding:5px 10px;
  font-weight:600;
  position:absolute;
  top:0;
  right:10%;
  margin:90vh 0;
  background:rgba(0,0,0,0.2);
  box-shadow:0 0 0px 3px rgba(0,0,0,0.2);
  opacity:0.3
}#btn-twtr:hover{color:#fff;opacity:1}

JS

//based on an Example by @curran
window.requestAnimFrame = (function(){   return  window.requestAnimationFrame})();
var canvas = document.getElementById("space");
var c = canvas.getContext("2d");

var numStars = 1900;
var radius = '0.'+Math.floor(Math.random() * 9) + 1  ;
var focalLength = canvas.width *2;
var warp = 0;
var centerX, centerY;

var stars = [], star;
var i;

var animate = true;

initializeStars();

function executeFrame(){
  
  if(animate)
    requestAnimFrame(executeFrame);
  moveStars();
  drawStars();
}

function moveStars(){
  for(i = 0; i < numStars; i++){
    star = stars[i];
    star.z--;
    
    if(star.z <= 0){
      star.z = canvas.width;
    }
  }
}

document.getElementById('warp').addEventListener("click",function(e){
 window.warp = window.warp==1 ? 0 : 1;
window.c.clearRect(0, 0, window.canvas.width, window.canvas.height);
executeFrame();
});

executeFrame();

CodePen Home Estrelas e Velocidade Warp

Recomendado

Menu de contexto de vidro neon com seletor de cores

Web

Jardim de falhas

HTML

CSS

JS

Recomendado

Menu de contexto de vidro neon com seletor de cores

Web

Jardim de falhas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS