idlebg commited on
Commit
1db2961
1 Parent(s): f7f7c7d

removing gsap test / testing plain styling

Browse files
Files changed (1) hide show
  1. README.md +1 -160
README.md CHANGED
@@ -120,168 +120,9 @@ license: creativeml-openrail-m
120
  fill: none;
121
  }
122
  </style>
123
- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
124
- <script>
125
- gsap.config({ trialWarn: false });
126
- let select = s => document.querySelector(s),
127
- allEll = gsap.utils.toArray('.ell'),
128
- mainSVG = select('#mainSVG'),
129
- colorArr = ['#00ffff', '#ff00ff', '#EF476F', '#ffff00'],
130
- colorInterp = gsap.utils.interpolate(colorArr);
131
 
132
- // Ellipses Animation
133
- gsap.set(mainSVG, { visibility: 'visible' });
134
-
135
- allEll.forEach((c, i) => {
136
- function animate(el, count) {
137
- let tl = gsap.timeline({
138
- defaults: { ease: 'rough.inOut' },
139
- repeat: -1
140
- });
141
- gsap.set(el, {
142
- opacity: 1 - count / (allEll.length),
143
- stroke: colorInterp(count / (allEll.length))
144
- });
145
-
146
- tl.to(el, {
147
- attr: {
148
- ry: `-=${count * 2.3}`,
149
- rx: `+=${count * 1.4}`
150
- },
151
- ease: 'sine.in'
152
- })
153
- .to(el, {
154
- attr: {
155
- ry: `+=${count * 2.3}`,
156
- rx: `-=${count * 1.4}`
157
- },
158
- ease: 'sine'
159
- })
160
- .to(el, {
161
- duration: 1,
162
- rotation: 190,
163
- transformOrigin: '50% 50%'
164
- }, 0).timeScale(0.5);
165
- }
166
-
167
- gsap.delayedCall(i / (allEll.length - 1), animate, [c, i + 1]);
168
- });
169
-
170
- // Gradient Animation
171
- gsap.to('#aiGrad', {
172
- duration: 3.5,
173
- delay: 0.75,
174
- attr: { x1: '-=300', x2: '-=300' },
175
- scale: 1.2,
176
- transformOrigin: '10% 50%',
177
- repeat: -1,
178
- ease: 'sine.inOut',
179
- });
180
-
181
- // AI Logo Animation (Blur + Pulsate)
182
- gsap.to('#ai', {
183
- duration: 2,
184
- scale: 1,
185
- repeat: -1,
186
- yoyo: false,
187
- ease: 'back.out(1.7)',
188
- filter: 'blur(2px)' // Blur effect
189
- });
190
-
191
- // AI Logo Animation (Blur + Pulsate)
192
- gsap.to('#idle', {
193
- duration: 3,
194
- scale: 1.2,
195
- repeat: -1,
196
-
197
- ease: 'sine.inOut',
198
- filter: 'blur(0px)' // Blur effect
199
- });
200
-
201
- // AI Clone Animation (Crystal Clear and Expand)
202
- let aiClone = select('#aiClone'); // Cloned logo
203
- gsap.set(aiClone, { scale: 1, filter: 'blur(0px)', opacity: 0 }); // Initially hidden
204
-
205
- gsap.timeline({ repeat: -1 })
206
- .to(aiClone, {
207
- duration: 1,
208
- scale: 1.2,
209
- ease: 'power2.in',
210
- opacity: 1
211
- })
212
- .to(aiClone, {
213
- duration: 2, // Stay visible for 2 seconds
214
- ease: 'power2.out',
215
- })
216
- .to(aiClone, {
217
- duration: 1,
218
- scale: 1.6, // Expand
219
- ease: 'power2.in',
220
- opacity: 0
221
- });
222
- </script>
223
  <div class="container">
224
- <div class="logo-container" style="text-align: center; max-height: 512px;">
225
-
226
- <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg"preserveAspectRatio="xMidYMid" viewBox="0 0 800 600">
227
-
228
-
229
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
230
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
231
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
232
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
233
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
234
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
235
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
236
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
237
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
238
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
239
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
240
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
241
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
242
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
243
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
244
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
245
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
246
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
247
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
248
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
249
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
250
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
251
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
252
- <ellipse class="ell" cx="400" cy="300" rx="69" ry="69" />
253
-
254
- <linearGradient id="aiGrad" x1="513.98" y1="290" x2="479.72" y2="320" gradientUnits="userSpaceOnUse" >
255
- <stop offset="0" stop-color="#FFFFFF" stop-opacity="0" />
256
- <stop offset=".15" stop-color="#EF476F" />
257
- <stop offset=".4" stop-color="#359eee" />
258
- <stop offset=".6" stop-color="#03cea4" />
259
- <stop offset=".78" stop-color="#FFC43D" />
260
- <stop offset="1" stop-color="#FFFFFF" stop-opacity="0" />
261
- </linearGradient>
262
-
263
-
264
-
265
- <g transform="translate(362.90899348258972, 320.99999618530273)">
266
- <path id="aiGrad" d="m30.21-33.92q-5.19 0-8.96-1.73l-2.05 10.37h12.35q0 3.39-1.69 5.54-1.7 2.14-4.77 2.14-3.33 0-6.4-1.22-0.64-0.25-0.71-0.32l-3.64 19.14h-13.96l8.13-42.24h28.55q0 3.9-1.83 6.11-1.82 2.21-5.02 2.21zm34.37 0q-5.19 0-8.96-1.73l-2.05 10.37h12.35q0 3.39-1.7 5.54-1.69 2.14-4.76 2.14-3.33 0-6.4-1.22-0.64-0.25-0.71-0.32l-3.65 19.14h-13.95l8.13-42.24h28.54q0 3.9-1.82 6.11t-5.02 2.21z"
267
- fill="url(#aiGrad)" stroke-linecap="round" stroke-miterlimit="10" stroke="url(#aiGrad)" stroke-width="1" opacity="0.99"></path>
268
- </g>
269
- <g transform="translate(362.90899348258972, 320.99999618530273)">
270
- <path id="ai" d="m30.21-33.92q-5.19 0-8.96-1.73l-2.05 10.37h12.35q0 3.39-1.69 5.54-1.7 2.14-4.77 2.14-3.33 0-6.4-1.22-0.64-0.25-0.71-0.32l-3.65 19.14h-13.95l8.13-42.24h28.54q0 3.9-1.82 6.11t-5.02 2.21z" fill="url(#aiGrad)" stroke-linecap="round" stroke-miterlimit="10" stroke="url(#aiGrad)" stroke-width="3" opacity="1"></path>
271
- </g>
272
-
273
- <g transform="translate(362.90899348258972, 320.99999618530273)">
274
- <path id="aiClone d="m30.21-33.92q-5.19 0-8.96-1.73l-2.05 10.37h12.35q0 3.39-1.69 5.54-1.7 2.14-4.77 2.14-3.33 0-6.4-1.22-0.64-0.25-0.71-0.32l-3.64 19.14h-13.96l8.13-42.24h28.55q0 3.9-1.83 6.11-1.82 2.21-5.02 2.21zm34.37 0q-5.19 0-8.96-1.73l-2.05 10.37h12.35q0 3.39-1.7 5.54-1.69 2.14-4.76 2.14-3.33 0-6.4-1.22-0.64-0.25-0.71-0.32l-3.65 19.14h-13.95l8.13-42.24h28.54q0 3.9-1.82 6.11t-5.02 2.21z"
275
- fill="url(#aiGrad)" stroke-linecap="round" stroke-miterlimit="10" stroke="url(#aiGrad)" stroke-width="1"></path>
276
-
277
- </svg>
278
-
279
-
280
-
281
-
282
-
283
- </div>
284
- <div class="row">
285
  <!-- Card 1 -->
286
  <div class="model-card">
287
  <img alt="FFusion/FFusionXL-BASE · Hugging Face - Cover Image" src="FFusion00.jpeg"/>
 
120
  fill: none;
121
  }
122
  </style>
 
 
 
 
 
 
 
 
123
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  <div class="container">
125
+ <div class="row">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
126
  <!-- Card 1 -->
127
  <div class="model-card">
128
  <img alt="FFusion/FFusionXL-BASE · Hugging Face - Cover Image" src="FFusion00.jpeg"/>