← back to Only CSS: Star Warp Displaycompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Star Warp Display
A 0.81T 0.32
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Hyperspace Animation</title>
7 <style>
8 :root {
9 --bg-color: #121e31;
10 --phone-color: #080808;
11 --star-color: #ffffff;
12 }
13
14 body {
15 margin: 0;
16 padding: 0;
17 display: flex;
18 justify-content: center;
19 align-items: center;
20 height: 100vh;
21 background-color: var(--bg-color);
22 overflow: hidden;
23 font-family: sans-serif;
24 }
25
26 /* The Phone Container */
27 .container {
28 position: relative;
29 width: 280px;
30 height: 500px;
31 background-color: var(--phone-color);
32 border-radius: 4px;
33 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
34 overflow: hidden;
35 display: flex;
36 justify-content: center;
37 align-items: center;
38 }
39
40 /* Subtle glass shine effect */
41 .container::after {
42 content: '';
43 position: absolute;
44 top: 0;
45 left: 0;
46 right: 0;
47 bottom: 0;
48 background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
49 pointer-events: none;
50 z-index: 10;
51 }
52
53 /* Shadow beneath the phone */
54 .shadow {
55 position: absolute;
56 bottom: -40px;
57 width: 260px;
58 height: 20px;
59 background: rgba(0, 0, 0, 0.3);
60 filter: blur(15px);
61 border-radius: 50%;
62 }
63
64 /* Star styling */
65 .star {
66 position: absolute;
67 top: 50%;
68 left: 50%;
69 height: 1.5px;
70 background: var(--star-color);
71 transform-origin: left center;
72 border-radius: 2px;
73 opacity: 0;
74 }
75
76 @keyframes hyperspace {
77 0% {
78 transform: rotate(var(--angle)) translateX(0) scaleX(0);
79 opacity: 0;
80 }
81 10% {
82 opacity: 1;
83 }
84 80% {
85 opacity: 1;
86 }
87 100% {
88 transform: rotate(var(--angle)) translateX(var(--distance)) scaleX(var(--length));
89 opacity: 0;
90 }
91 }
92 </style>
93</head>
94<body>
95
96 <div class="container" id="screen">
97 <!-- Stars will be injected here by JavaScript -->
98 </div>
99 <div class="shadow"></div>
100
101 <script>
102 const screen = document.getElementById('screen');
103 const starCount = 60;
104
105 function createStar() {
106 const star = document.createElement('div');
107 star.className = 'star';
108
109 // Randomize properties
110 const angle = Math.random() * 360;
111 const distance = 150 + Math.random() * 200; // How far they travel
112 const length = 1 + Math.random() * 4; // How much they stretch
113 const duration = 1 + Math.random() * 2; // Speed of travel
114 const delay = Math.random() * 3; // Staggered start
115 const thickness = 0.5 + Math.random() * 1.5; // Random line thickness
116 const initialWidth = 10 + Math.random() * 30; // Base width of the line
117
118 // Set CSS variables for the animation
119 star.style.setProperty('--angle', `${angle}deg`);
120 star.style.setProperty('--distance', `${distance}px`);
121 star.style.setProperty('--length', `${length}`);
122
123 star.style.width = `${initialWidth}px`;
124 star.style.height = `${thickness}px`;
125
126 // Apply animation
127 star.style.animation = `hyperspace ${duration}s linear ${delay}s infinite`;
128
129 screen.appendChild(star);
130 }
131
132 // Initialize stars
133 for (let i = 0; i < starCount; i++) {
134 createStar();
135 }
136
137 // Periodically refresh stars to maintain variety if needed,
138 // but infinite CSS loop is more performant for this specific effect.
139 </script>
140</body>
141</html>