← back to background wave animationcompare with ground truth →
model output
LLaMA 4 Scout
background wave animation
A 0.60T 0.25
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>Animation</title>
7 <style>
8 body {
9 margin: 0;
10 background-color: #03055B;
11 }
12 .blob {
13 position: absolute;
14 top: 0;
15 left: 0;
16 width: 100vw;
17 height: 100vh;
18 background: radial-gradient(50% 50% at 50% 50%, #87CEEB 0%, #4682B4 100%);
19 border-radius: 50%;
20 animation: appear 3s forwards;
21 }
22 @keyframes appear {
23 0% {
24 width: 0;
25 height: 0;
26 border-radius: 50%;
27 top: 50%;
28 left: 50%;
29 transform: translate(-50%, -50%);
30 }
31 100% {
32 width: 100vw;
33 height: 100vh;
34 border-radius: 0;
35 top: 0;
36 left: 0;
37 transform: none;
38 }
39 }
40 </style>
41</head>
42<body>
43 <div class="blob"></div>
44</body>
45</html>