dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1.lightbar,
2.lightbar-visual {
3 position: absolute;
4 width: 500vw;
5 height: 800px;
6 pointer-events: none;
7 user-select: none;
8}
9
10[dir] .lightbar {
11 left: 50vw;
12 transform: translateX(-50%);
13}
14
15@screen sm {
16 .lightbar,
17 .lightbar-visual {
18 width: 150vw;
19 }
20
21 [dir] .lightbar {
22 left: -25vw;
23 transform: initial;
24 }
25}
26
27[dir] .lightbar {
28 display: flex;
29 justify-content: center;
30 align-items: center;
31 --d: 3s;
32 --animation: cubic-bezier(0.75, -0, 0.25, 1);
33 animation: boot var(--d) var(--animation) forwards;
34}
35
36[dir] .lightbar-visual {
37 left: 0;
38 --top: theme("colors.background.main");
39 --bottom: theme("colors.lightBar.light");
40 --first: conic-gradient(from 90deg at 80% 50%, var(--top), var(--bottom));
41 --second: conic-gradient(from 270deg at 20% 50%, var(--bottom), var(--top));
42 mask-image: radial-gradient(100% 50% at center center, black, transparent);
43 background-image: var(--first), var(--second);
44 background-position-x: 1%, 99%;
45 background-position-y: 0%, 0%;
46 background-size:
47 50% 100%,
48 50% 100%;
49 opacity: 1;
50 transform: rotate(180deg) translateZ(0px) translateY(400px);
51 transform-origin: center center;
52 background-repeat: no-repeat;
53 animation: lightbarBoot var(--d) var(--animation) forwards;
54}
55
56.lightbar canvas {
57 width: 40%;
58 height: 300px;
59 transform: translateY(-250px);
60}
61
62@keyframes boot {
63 from {
64 opacity: 0.25;
65 }
66
67 to {
68 opacity: 1;
69 }
70}
71
72@keyframes lightbarBoot {
73 0% {
74 transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(0.8);
75 }
76
77 100% {
78 transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1);
79 }
80}