model output
Claude Sonnet 4.6

Animated Concepts #3
A 0.78T 0.28
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>Bouncing Ball Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #2d2d2d;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    align-items: center;
20    justify-content: center;
21    overflow: hidden;
22  }
23
24  .container {
25    position: relative;
26    width: 80px;
27    height: 80px;
28    display: flex;
29    flex-direction: column;
30    align-items: center;
31    justify-content: flex-end;
32  }
33
34  .ball {
35    width: 22px;
36    height: 22px;
37    background-color: #f07060;
38    border-radius: 50%;
39    position: absolute;
40    bottom: 8px;
41    animation: bounce 1s cubic-bezier(0.33, 0, 0.66, 0) infinite alternate;
42  }
43
44  .line {
45    width: 70px;
46    height: 3px;
47    background-color: #f07060;
48    border-radius: 2px;
49    position: absolute;
50    bottom: 0;
51  }
52
53  @keyframes bounce {
54    0% {
55      bottom: 8px;
56      transform: scaleX(1) scaleY(1);
57      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0);
58    }
59    10% {
60      transform: scaleX(1.2) scaleY(0.8);
61    }
62    20% {
63      transform: scaleX(1) scaleY(1);
64      animation-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
65    }
66    100% {
67      bottom: 55px;
68      transform: scaleX(1) scaleY(1);
69      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0);
70    }
71  }
72</style>
73</head>
74<body>
75  <div class="container">
76    <div class="ball"></div>
77    <div class="line"></div>
78  </div>
79
80  <script>
81    // The CSS animation handles everything
82  </script>
83</body>
84</html>