model output
Claude Sonnet 4.6

Animated Concepts #3
A 0.89T 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>Line Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #222;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    align-items: center;
20    justify-content: center;
21    overflow: hidden;
22  }
23
24  .line {
25    width: 70px;
26    height: 3px;
27    background-color: #f07070;
28    border-radius: 2px;
29    transform-origin: center center;
30    animation: rotateLine 2s ease-in-out infinite;
31  }
32
33  @keyframes rotateLine {
34    0% {
35      transform: rotate(-30deg) scaleX(1);
36    }
37    25% {
38      transform: rotate(80deg) scaleX(1);
39    }
40    40% {
41      transform: rotate(0deg) scaleX(1);
42    }
43    50% {
44      transform: rotate(0deg) scaleX(1);
45    }
46    60% {
47      transform: rotate(0deg) scaleX(0.05);
48    }
49    65% {
50      transform: rotate(0deg) scaleX(1);
51    }
52    75% {
53      transform: rotate(-30deg) scaleX(1);
54    }
55    85% {
56      transform: rotate(80deg) scaleX(1);
57    }
58    95% {
59      transform: rotate(0deg) scaleX(1);
60    }
61    100% {
62      transform: rotate(-30deg) scaleX(1);
63    }
64  }
65</style>
66</head>
67<body>
68  <div class="line"></div>
69
70  <script>
71    // The animation is purely CSS-driven
72    // The sequence observed:
73    // Frame 1: diagonal line (~-30deg)
74    // Frame 2: nearly vertical (~80deg)
75    // Frame 3: nearly horizontal with slight tilt
76    // Frame 4: horizontal (0deg)
77    // Frame 5: tiny dot (scaleX very small)
78    // Frame 6: horizontal again
79    // Frame 7: nearly invisible/tiny
80    // Frame 8: horizontal
81    // Frame 9: diagonal again
82    // Frame 10: nearly vertical
83    // Frame 11: slight diagonal
84  </script>
85</body>
86</html>