← back to CSS animated wavescompare with ground truth →
model output
LLaMA 4 Scout
CSS animated waves
A 0.64T 0.27
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>Ocean Waves</title>
7 <style>
8 body {
9 margin: 0;
10 overflow: hidden;
11 background: linear-gradient(to bottom, #ADD8E6 50%, #032B44 100%);
12 }
13 .wave {
14 position: absolute;
15 bottom: 0;
16 left: 0;
17 width: 100%;
18 height: 150px;
19 background: #4682B4;
20 border-radius: 50px 50px 0 0;
21 animation: wave 5s linear infinite;
22 }
23 @keyframes wave {
24 0% {
25 transform: translateX(0);
26 }
27 100% {
28 transform: translateX(-100%);
29 }
30 }
31 </style>
32</head>
33<body>
34 <div class="wave"></div>
35</body>
36</html>