animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Houdini Gradient Border Button

model output

LLaMA 4 Scout

Houdini Gradient Border Button

A 0.36T 0.00
compare with ground truth →
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>Shiny Border Animation</title>
7<style>
8  .shiny-border {
9    position: relative;
10    padding: 10px;
11    border: 2px solid #000;
12    width: fit-content;
13  }
14  .shiny-border::after {
15    content: "";
16    position: absolute;
17    width: 100%;
18    height: 100%;
19    top: 0;
20    left: 0;
21    border: 2px solid transparent;
22    border-color: #007bff;
23    animation: shine 2s linear infinite;
24  }
25  @keyframes shine {
26    0% {
27      transform: scale(1);
28      opacity: 0;
29    }
30    100% {
31      transform: scale(1.5);
32      opacity: 0;
33    }
34  }
35</style>
36</head>
37<body>
38
39<div class="shiny-border">Shiny Border</div>
40
41</body>
42</html>