model output
Claude Sonnet 4.6

Animated Concepts #3
A 0.81T 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>Bar Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #2a2a2a;
16    display: flex;
17    justify-content: center;
18    align-items: center;
19    height: 100vh;
20    overflow: hidden;
21  }
22
23  .bars {
24    display: flex;
25    align-items: flex-end;
26    gap: 4px;
27    height: 60px;
28  }
29
30  .bar {
31    width: 3px;
32    background-color: #e8756a;
33    border-radius: 2px;
34    animation: bounce 1.2s ease-in-out infinite;
35    transform-origin: bottom center;
36  }
37
38  .bar:nth-child(1) {
39    animation-name: bar1;
40    animation-duration: 1.2s;
41    animation-delay: 0s;
42  }
43
44  .bar:nth-child(2) {
45    animation-name: bar2;
46    animation-duration: 1.2s;
47    animation-delay: 0.15s;
48  }
49
50  .bar:nth-child(3) {
51    animation-name: bar3;
52    animation-duration: 1.2s;
53    animation-delay: 0.3s;
54  }
55
56  @keyframes bar1 {
57    0%   { height: 20px; transform: translateY(0); }
58    25%  { height: 40px; transform: translateY(-10px); }
59    50%  { height: 20px; transform: translateY(0); }
60    75%  { height: 30px; transform: translateY(-5px); }
61    100% { height: 20px; transform: translateY(0); }
62  }
63
64  @keyframes bar2 {
65    0%   { height: 35px; transform: translateY(0); }
66    25%  { height: 20px; transform: translateY(0); }
67    50%  { height: 45px; transform: translateY(-15px); }
68    75%  { height: 25px; transform: translateY(0); }
69    100% { height: 35px; transform: translateY(0); }
70  }
71
72  @keyframes bar3 {
73    0%   { height: 25px; transform: translateY(0); }
74    25%  { height: 45px; transform: translateY(-10px); }
75    50%  { height: 25px; transform: translateY(0); }
76    75%  { height: 40px; transform: translateY(-8px); }
77    100% { height: 25px; transform: translateY(0); }
78  }
79</style>
80</head>
81<body>
82  <div class="bars">
83    <div class="bar"></div>
84    <div class="bar"></div>
85    <div class="bar"></div>
86  </div>
87</body>
88</html>