Warp Speed Background
Star streaks burst out of the center and stretch as they race past, the classic jump to hyperspace. Each streak is a line from the center that grows with scaleX, so nothing repaints.
Also known as: hyperspace background css, light speed animation css, star warp effect.
HTML
<div class="bgx-warp-speed" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
CSS
.bgx-warp-speed {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 34%, #0a0d1f), #020308 60%);}
.bgx-warp-speed::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7em;
height: 7em;
margin: -3.5em;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, #fff), transparent);
animation: bgx-warp-speed-core 1.6s ease-in-out infinite alternate;
}
.bgx-warp-speed span {
position: absolute;
top: 50%;
left: 50%;
width: 75%;
height: var(--w);
margin-top: calc(var(--w) / -2);
transform-origin: 0 50%;
rotate: var(--a);
background: linear-gradient(to right, transparent 45%, color-mix(in srgb, var(--c) 55%, #fff) 86%, #fff 95%, transparent);
opacity: 0;
animation: bgx-warp-speed-streak var(--dur) cubic-bezier(0.55, 0, 1, 0.45) var(--delay) infinite;
}
.bgx-warp-speed span:nth-child(1) { --a: 0deg; --w: 0.15em; --dur: 1.57s; --delay: -0.12s; }
.bgx-warp-speed span:nth-child(2) { --a: 14deg; --w: 0.08em; --dur: 1.72s; --delay: -0.62s; }
.bgx-warp-speed span:nth-child(3) { --a: 27deg; --w: 0.12em; --dur: 1.66s; --delay: -0.2s; }
.bgx-warp-speed span:nth-child(4) { --a: 45deg; --w: 0.15em; --dur: 1.35s; --delay: -1.74s; }
.bgx-warp-speed span:nth-child(5) { --a: 54deg; --w: 0.12em; --dur: 1.66s; --delay: -0.99s; }
.bgx-warp-speed span:nth-child(6) { --a: 66deg; --w: 0.06em; --dur: 1.71s; --delay: -0.41s; }
.bgx-warp-speed span:nth-child(7) { --a: 74deg; --w: 0.13em; --dur: 1.51s; --delay: -0.5s; }
.bgx-warp-speed span:nth-child(8) { --a: 89deg; --w: 0.08em; --dur: 1.45s; --delay: -0.47s; }
.bgx-warp-speed span:nth-child(9) { --a: 103deg; --w: 0.15em; --dur: 1.08s; --delay: -0.44s; }
.bgx-warp-speed span:nth-child(10) { --a: 113deg; --w: 0.14em; --dur: 1.2s; --delay: -0.58s; }
.bgx-warp-speed span:nth-child(11) { --a: 125deg; --w: 0.12em; --dur: 1.78s; --delay: -0.95s; }
.bgx-warp-speed span:nth-child(12) { --a: 133deg; --w: 0.06em; --dur: 1.34s; --delay: -0.78s; }
.bgx-warp-speed span:nth-child(13) { --a: 150deg; --w: 0.08em; --dur: 1.5s; --delay: -1.17s; }
.bgx-warp-speed span:nth-child(14) { --a: 163deg; --w: 0.14em; --dur: 1.66s; --delay: -1.48s; }
.bgx-warp-speed span:nth-child(15) { --a: 171deg; --w: 0.11em; --dur: 1.37s; --delay: -0.05s; }
.bgx-warp-speed span:nth-child(16) { --a: 181deg; --w: 0.15em; --dur: 1.68s; --delay: -0.86s; }
.bgx-warp-speed span:nth-child(17) { --a: 200deg; --w: 0.06em; --dur: 1.07s; --delay: -0.96s; }
.bgx-warp-speed span:nth-child(18) { --a: 210deg; --w: 0.07em; --dur: 1.45s; --delay: -1.59s; }
.bgx-warp-speed span:nth-child(19) { --a: 225deg; --w: 0.14em; --dur: 1.78s; --delay: -0.99s; }
.bgx-warp-speed span:nth-child(20) { --a: 229deg; --w: 0.08em; --dur: 1.16s; --delay: -1.67s; }
.bgx-warp-speed span:nth-child(21) { --a: 246deg; --w: 0.1em; --dur: 1.25s; --delay: -0.26s; }
.bgx-warp-speed span:nth-child(22) { --a: 253deg; --w: 0.09em; --dur: 1.09s; --delay: -0.38s; }
.bgx-warp-speed span:nth-child(23) { --a: 273deg; --w: 0.14em; --dur: 1.28s; --delay: -0.76s; }
.bgx-warp-speed span:nth-child(24) { --a: 277deg; --w: 0.12em; --dur: 1.05s; --delay: -0.39s; }
.bgx-warp-speed span:nth-child(25) { --a: 290deg; --w: 0.14em; --dur: 1.28s; --delay: -0.86s; }
.bgx-warp-speed span:nth-child(26) { --a: 305deg; --w: 0.14em; --dur: 1.67s; --delay: -1.44s; }
.bgx-warp-speed span:nth-child(27) { --a: 319deg; --w: 0.1em; --dur: 1.48s; --delay: -1.34s; }
.bgx-warp-speed span:nth-child(28) { --a: 327deg; --w: 0.1em; --dur: 1.24s; --delay: -0.19s; }
.bgx-warp-speed span:nth-child(29) { --a: 336deg; --w: 0.15em; --dur: 1.69s; --delay: -1.6s; }
.bgx-warp-speed span:nth-child(30) { --a: 350deg; --w: 0.13em; --dur: 1.26s; --delay: -1.49s; }
@keyframes bgx-warp-speed-streak {
0% { transform: scaleX(0.06); opacity: 0; }
30% { opacity: 1; }
100% { transform: scaleX(1.4); opacity: 1; }
}
@keyframes bgx-warp-speed-core {
from { opacity: 0.55; transform: scale(0.9); }
to { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-warp-speed, .bgx-warp-speed *, .bgx-warp-speed::before, .bgx-warp-speed::after, .bgx-warp-speed *::before, .bgx-warp-speed *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.