model output
GPT-5.4

Exploring Bourbon
A 0.77T 0.32
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>Center Morph Animation</title>
7<style>
8  :root{
9    --bg:#df6b45;
10    --red:#b33656;
11    --white:#f7f7f7;
12    --shadow: rgba(120, 35, 55, .28);
13    --size: 50px;
14    --dur: 1.6s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    overflow:hidden;
22    background:var(--bg);
23    font-family:sans-serif;
24  }
25
26  .stage{
27    width:100%;
28    height:100%;
29    display:grid;
30    place-items:center;
31    background:var(--bg);
32  }
33
34  .icon{
35    position:relative;
36    width:var(--size);
37    height:var(--size);
38    filter: drop-shadow(0 4px 6px var(--shadow));
39  }
40
41  .shape,
42  .shape::before{
43    position:absolute;
44    inset:0;
45    content:"";
46    display:block;
47  }
48
49  /* Main square/rounded-square morph */
50  .shape{
51    background:var(--red);
52    border-radius:0;
53    animation: bodyMorph var(--dur) ease-in-out infinite;
54  }
55
56  /* White horizontal band appears only during red phase */
57  .shape::before{
58    inset:auto 0;
59    top:50%;
60    height:6px;
61    transform:translateY(-50%) scaleX(0);
62    transform-origin:center;
63    background:var(--white);
64    border-radius:3px;
65    animation: stripeMorph var(--dur) ease-in-out infinite;
66  }
67
68  @keyframes bodyMorph{
69    0%, 18%{
70      background:var(--red);
71      border-radius:0;
72      transform:scale(1);
73    }
74    28%, 48%{
75      background:var(--white);
76      border-radius:14px;
77      transform:scale(1);
78    }
79    58%, 72%{
80      background:var(--red);
81      border-radius:0;
82      transform:scale(1);
83    }
84    82%, 100%{
85      background:var(--white);
86      border-radius:14px;
87      transform:scale(1);
88    }
89  }
90
91  @keyframes stripeMorph{
92    0%, 18%{
93      transform:translateY(-50%) scaleX(0);
94      opacity:0;
95    }
96    22%, 26%{
97      transform:translateY(-50%) scaleX(1);
98      opacity:1;
99    }
100    28%, 48%{
101      transform:translateY(-50%) scaleX(0);
102      opacity:0;
103    }
104    58%, 62%{
105      transform:translateY(-50%) scaleX(1);
106      opacity:1;
107    }
108    72%, 100%{
109      transform:translateY(-50%) scaleX(0);
110      opacity:0;
111    }
112  }
113</style>
114</head>
115<body>
116  <div class="stage">
117    <div class="icon">
118      <div class="shape"></div>
119    </div>
120  </div>
121</body>
122</html>