model output
Gemini 3 Flash Preview

Animated Concepts #3
A 0.81T 0.31
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 Loader Animation</title>
7    <style>
8        /* Base styling to match the background of the provided frames */
9        body {
10            margin: 0;
11            padding: 0;
12            background-color: #1f1f1f; /* Dark grey background */
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17            overflow: hidden;
18        }
19
20        /* Container for the line to ensure centering */
21        .loader-container {
22            width: 100px;
23            height: 100px;
24            display: flex;
25            justify-content: center;
26            align-items: center;
27        }
28
29        /* The animated line */
30        .loader-line {
31            width: 32px;
32            height: 4px;
33            background-color: #ec7a72; /* Salmon/Coral color from video */
34            border-radius: 4px; /* Rounded caps */
35            transform-origin: center center;
36            /* 
37               Duration: 4 seconds as per the timestamp sequence (0s to 4s) 
38               Timing function: cubic-bezier provides the slightly snappy, elastic feel 
39            */
40            animation: line-cycle 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
41        }
42
43        /* 
44           Keyframes based on timestamp analysis:
45           0.0s: Diagonal (\)
46           0.5s: Steeper diagonal (/)
47           1.0s: Flatter diagonal (\)
48           1.5s: Vertical (|)
49           2.0s: Point/Dot (.)
50           2.5s: Horizontal (-)
51           3.0s: Short horizontal (-)
52           3.5s: Diagonal (/)
53           4.0s: Loop back to (\)
54        */
55        @keyframes line-cycle {
56            0% {
57                transform: rotate(150deg) scaleX(1);
58            }
59            12.5% { /* 0.5s */
60                transform: rotate(225deg) scaleX(1.3);
61            }
62            25% { /* 1.0s */
63                transform: rotate(300deg) scaleX(1.1);
64            }
65            37.5% { /* 1.5s */
66                transform: rotate(360deg) scaleX(0.8);
67            }
68            50% { /* 2.0s */
69                transform: rotate(450deg) scaleX(0.1); /* Shrinks to a dot */
70            }
71            62.5% { /* 2.5s */
72                transform: rotate(540deg) scaleX(0.8); /* Re-expands horizontally */
73            }
74            75% { /* 3.0s */
75                transform: rotate(540deg) scaleX(0.3); /* Shortens while horizontal */
76            }
77            87.5% { /* 3.5s */
78                transform: rotate(480deg) scaleX(1.2); /* Slight overshoot / acceleration */
79            }
80            100% {
81                transform: rotate(510deg) scaleX(1); /* Completed 360deg (150+360=510) */
82            }
83        }
84    </style>
85</head>
86<body>
87    <div class="loader-container">
88        <div class="loader-line"></div>
89    </div>
90</body>
91</html>