model output
LLaMA 4 Scout

Animated Concepts #3
A 0.49T 0.13
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            background-color: #000;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .logo {
18            position: relative;
19            width: 50px;
20            height: 50px;
21            background-image: linear-gradient(to right, #FFC67D 50%, #000 50%);
22            border-radius: 50%;
23        }
24        .line {
25            position: absolute;
26            top: 50%;
27            left: 50%;
28            transform-origin: top left;
29            width: 2px;
30            height: 20px;
31            background-color: #FFC67D;
32        }
33    </style>
34</head>
35<body>
36    <div class="logo">
37        <div class="line" style="transform: rotate(45deg);"></div>
38    </div>
39
40    <script>
41        let logo = document.querySelector('.logo');
42        let line = document.querySelector('.line');
43
44        logo.style.opacity = 0;
45        line.style.opacity = 0;
46        line.style.transform = 'rotate(45deg)';
47
48        setTimeout(() => {
49            logo.style.opacity = 1;
50            line.style.opacity = 1;
51            line.style.animation = 'line 1s';
52            logo.style.animation = 'logo 2s';
53
54            function reset() {
55                logo.style.opacity = 0;
56                line.style.opacity = 0;
57                line.style.animation = '';
58                logo.style.animation = '';
59                setTimeout(() => {
60                    line.style.transform = 'rotate(0deg)';
61                    logo.style.transform = 'scale(1)';
62                    line.style.top = '50%';
63                    line.style.left = '50%';
64                    resetTimeout();
65                }, 100);
66            }
67
68            function resetTimeout() {
69                setTimeout(() => {
70                    line.style.transform = 'rotate(45deg)';
71                    line.style.animation = 'line 1s';
72                    logo.style.animation = 'logo 2s';
73                    logo.style.opacity = 1;
74                    line.style.opacity = 1;
75                }, 2000);
76            }
77
78            resetTimeout();
79        }, 1000);
80    </script>
81</body>
82</html>