model output
Claude Sonnet 4.6

Only CSS: Joint Animation
A 0.82T 0.38
1Looking at the animation frames, I can see:
2
31. Two rectangles (gray and blue) start horizontal and connected
42. They rotate independently - the gray one rotates ~-45° (counterclockwise) while the blue one stays horizontal, then they come back together
53. Each rectangle has a yellow dot/circle on it
64. There's a dashed line showing the connection point between them
75. The animation appears to be a "folding" motion where the two bars pivot around a shared point
8
9Let me analyze more carefully:
10- Frame 1: Both bars horizontal, side by side
11- Frame 2: Gray bar rotated ~-30°, blue bar slightly rotated, they're separating
12- Frame 3: Gray bar nearly vertical (~-80°), blue bar horizontal at bottom
13- Frame 4-5: Similar to frame 3 but blue bar moving left
14- Frame 6: Coming back together at ~-30° angle
15
16This looks like two bars connected at a pivot point, with the gray bar rotating up and the blue bar staying relatively horizontal, then returning.
17
18<!DOCTYPE html>
19<html>
20<head>
21<style>
22  body { margin: 0; background: white; overflow: hidden; }
23  canvas { display: block; }
24</style>
25</head>
26<body>
27<canvas id="c"></canvas>
28<script>
29const canvas = document.getElementById('c');
30const ctx = canvas.getContext('2d');
31canvas.width = 1024;
32canvas.height = 768;
33
34const BAR_W = 260, BAR_H = 72;
35const DOT_R = 10;
36const DOT_COLOR = '#FFC107';
37const GRAY = '#999999';
38const BLUE = '#4BAFD4';
39
40// Pivot point (connection between the two bars)
41const pivotX = 620, pivotY = 384;
42
43const duration = 3000; // ms for full cycle
44let startTime = null;
45
46function easeInOut(t) {
47  return t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
48}
49
50function drawBar(x, y, w, h, angle, color, dotRelX, dotRelY, pivotRelX, pivotRelY) {
51  ctx.save();
52  // Translate to pivot point on the bar
53  ctx.translate(x, y);
54  ctx.rotate(angle);
55  // Draw rectangle centered so pivot is at (pivotRelX, pivotRelY) within bar
56  const rx = -pivotRelX;
57  const ry = -pivotRelY;
58  ctx.fillStyle = color;
59  ctx.fillRect(rx, ry, w, h);
60  // Draw dot
61  ctx.beginPath();
62  ctx.arc(rx + dotRelX, ry + dotRelY, DOT_R, 0, Math.PI*2);
63  ctx.fillStyle = 'white';
64  ctx.fill();
65  ctx.beginPath();
66  ctx.arc(rx + dotRelX, ry + dotRelY, DOT_R*0.6, 0, Math.PI*2);
67  ctx.fillStyle = DOT_COLOR;
68  ctx.fill();
69  ctx.restore();
70}
71
72function drawDashedConnection(px, py, angle1, angle2, w, h) {
73  // Draw dashed lines from pivot showing original bar positions
74  ctx.save();
75  ctx.setLineDash([5, 5]);
76  ctx.strokeStyle = '#555';
77  ctx.lineWidth = 1;
78  // The corner points of the blue bar's original position
79  ctx.beginPath();
80  // pivot is at left edge center of blue bar
81  // original blue bar: horizontal, pivot at left
82  const corners = [
83    [0, -h/2], [w, -h/2], [w, h/2], [0, h/2]
84  ];
85  // rotate corners by angle2
86  const rotated = corners.map(([cx, cy]) => {
87    return [
88      px + cx*Math.cos(angle2) - cy*Math.sin(angle2),
89      py + cx*Math.sin(angle2) + cy*Math.cos(angle2)
90    ];
91  });
92  ctx.moveTo(rotated[0][0], rotated[0][1]);
93  for(let i=1;i<rotated.length;i++) ctx.lineTo(rotated[i][0], rotated[i][1]);
94  ctx.closePath();
95  ctx.stroke();
96  ctx.restore();
97}
98
99function animate(ts) {
100  if (!startTime) startTime = ts;
101  const elapsed = (ts - startTime) % (duration * 2);
102  let t = elapsed / duration;
103  if (t > 1) t = 2 - t; // ping-pong
104  const e = easeInOut(t);
105
106  ctx.clearRect(0, 0, canvas.width, canvas.height);
107
108  // Gray bar: rotates from 0 to -90deg, pivot at its right end center
109  const grayAngle = e * (-Math.PI/2 + 0.1);
110  // Blue bar: stays mostly horizontal but slight rotation, pivot at its left end center
111  const blueAngle = e * (0.05);
112
113  // Gray bar pivot at pivotX, pivotY; pivot is at right end of gray bar
114  drawBar(pivotX, pivotY, BAR_W, BAR_H, grayAngle, GRAY, 50, BAR_H/2, BAR_W, BAR_H/2);
115
116  // Dashed outline for blue bar original
117  if (e > 0.1) {
118    drawDashedConnection(pivotX, pivotY, 0, blueAngle, BAR_W, BAR_H);
119  }
120
121  // Blue bar pivot at pivotX, pivotY; pivot is at left end of blue bar
122  drawBar(pivotX, pivotY, BAR_W, BAR_H, blueAngle, BLUE, BAR_W - 50, BAR_H/2, 0, BAR_H/2);
123
124  requestAnimationFrame(animate);
125}
126
127requestAnimationFrame(animate);
128</script>
129</body>
130</html>