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>Kirby Eye Shine Loop</title>
7<style>
8 :root{
9 --bg:#ffffff;
10 --pink:#f88d93;
11 --outline:#000;
12 --blush:#ff4b57;
13 --eye-blue:#1a18ff;
14 --eye-green:#1ea33a;
15 --eye-white:#e9e9e9;
16 --size:min(44vmin, 420px);
17 --stroke:max(6px, .9vmin);
18 }
19
20 html,body{
21 margin:0;
22 height:100%;
23 background:var(--bg);
24 overflow:hidden;
25 font-family:sans-serif;
26 }
27
28 .stage{
29 height:100%;
30 display:grid;
31 place-items:center;
32 }
33
34 .kirby{
35 position:relative;
36 width:var(--size);
37 aspect-ratio:1;
38 border:var(--stroke) solid var(--outline);
39 border-radius:50%;
40 background:var(--pink);
41 box-sizing:border-box;
42 }
43
44 .eye{
45 position:absolute;
46 width:11.5%;
47 height:27%;
48 top:16.5%;
49 border:var(--stroke) solid var(--outline);
50 border-radius:999px;
51 box-sizing:border-box;
52 overflow:hidden;
53 background:#000;
54 }
55
56 .eye.left{ left:34.5%; }
57 .eye.right{ left:56.5%; }
58
59 .eye::before{
60 content:"";
61 position:absolute;
62 inset:0;
63 border-radius:inherit;
64 background:
65 linear-gradient(to bottom,
66 var(--eye-white) 0 46%,
67 transparent 46% 100%);
68 z-index:3;
69 }
70
71 .iris{
72 position:absolute;
73 inset:0;
74 border-radius:inherit;
75 background:
76 linear-gradient(to bottom,
77 #000 0 52%,
78 var(--eye-blue) 52% 100%);
79 z-index:1;
80 }
81
82 .shine{
83 position:absolute;
84 width:170%;
85 height:34%;
86 left:-35%;
87 top:58%;
88 border-radius:999px;
89 background:linear-gradient(90deg,
90 rgba(0,0,0,0) 0%,
91 rgba(0,0,0,0) 18%,
92 rgba(40,255,255,.95) 42%,
93 rgba(70,255,120,.95) 56%,
94 rgba(0,0,0,0) 78%,
95 rgba(0,0,0,0) 100%);
96 filter:blur(.5px);
97 mix-blend-mode:screen;
98 z-index:2;
99 animation:shineSweep 2.2s linear infinite;
100 }
101
102 .eye.right .shine{ animation-delay:-.08s; }
103
104 .blush{
105 position:absolute;
106 width:14%;
107 height:7%;
108 top:42%;
109 background:var(--blush);
110 border-radius:50%;
111 filter:none;
112 }
113
114 .blush.left{
115 left:12%;
116 transform:rotate(8deg);
117 }
118
119 .blush.right{
120 right:12%;
121 transform:rotate(8deg);
122 }
123
124 .mouth{
125 position:absolute;
126 width:2.2%;
127 aspect-ratio:1;
128 left:49%;
129 top:53%;
130 transform:translate(-50%,-50%);
131 background:#000;
132 border-radius:50%;
133 }
134
135 @keyframes shineSweep{
136 0% { transform:translate(-18%, -34%) rotate(-24deg); opacity:.95; }
137 12% { transform:translate(-10%, -26%) rotate(-20deg); opacity:.95; }
138 25% { transform:translate(0%, -14%) rotate(-14deg); opacity:.98; }
139 37% { transform:translate(10%, -2%) rotate(-8deg); opacity:1; }
140 50% { transform:translate(18%, 8%) rotate(0deg); opacity:1; }
141 63% { transform:translate(10%, 18%) rotate(8deg); opacity:1; }
142 75% { transform:translate(0%, 28%) rotate(14deg); opacity:.98; }
143 88% { transform:translate(-10%, 18%) rotate(8deg); opacity:.96; }
144 100% { transform:translate(-18%, -34%) rotate(-24deg); opacity:.95; }
145 }
146
147 /* subtle overall stillness matching the frames */
148 .kirby,
149 .eye,
150 .blush,
151 .mouth{
152 transform-origin:center;
153 }
154</style>
155</head>
156<body>
157 <div class="stage">
158 <div class="kirby">
159 <div class="eye left">
160 <div class="iris"></div>
161 <div class="shine"></div>
162 </div>
163 <div class="eye right">
164 <div class="iris"></div>
165 <div class="shine"></div>
166 </div>
167
168 <div class="blush left"></div>
169 <div class="blush right"></div>
170 <div class="mouth"></div>
171 </div>
172 </div>
173</body>
174</html>