Spaces:

moonlantern1
/

clipforge

Sleeping

App Files Files Community

moonlantern1 commited on 10 days ago

Commit

d6ac878

verified ·

1 Parent(s): 1ceabda

Animate full hero headline

Browse files

Files changed (1) hide show

app.py +32 -8

app.py CHANGED Viewed

@@ -554,8 +554,8 @@ INDEX_HTML = r"""<!DOCTYPE html>
   .eyebrow { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 16px; }
   .hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 500; line-height: 1.15; color: var(--ink); max-width: 620px; margin-bottom: 12px; }
   .hero-title em { font-style: italic; color: var(--gold); }
-  .typing-text { display: inline-block; min-width: 4.4em; white-space: nowrap; border-right: 0.05em solid var(--gold); }
-  @media (prefers-reduced-motion: reduce) { .typing-text { border-right: 0; } }
   .hero-sub { font-size: 0.95rem; color: var(--ink-muted); margin-bottom: 48px; font-weight: 300; }
   .input-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; width: 100%; max-width: 520px; box-shadow: 0 8px 32px rgba(42,31,14,0.07); }
   .mode-tabs { display: flex; background: var(--surface); border-radius: 10px; padding: 4px; margin-bottom: 28px; gap: 4px; }
@@ -670,7 +670,7 @@ INDEX_HTML = r"""<!DOCTYPE html>
 </nav>
 <div class="screen active" id="screen-input">
   <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 65px);padding:40px 20px;text-align:center;">
-    <h1 class="hero-title">Convert your long video to <em class="typing-text" id="hero-typed">short clips</em> for social media</h1>
     <p class="hero-sub">Upload a file - we handle the rest</p>
     <div class="input-card">
       <div class="input-section" id="mode-yt" style="display:none">
@@ -760,18 +760,41 @@ INDEX_HTML = r"""<!DOCTYPE html>
   function startHeroTyping() {
     const el = document.getElementById('hero-typed');
     if (!el || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-    const text = 'short clips';
     const typeMs = 3000;
     const eraseMs = 3000;
     const holdMs = 650;
-    let index = text.length;
-    let deleting = true;
     function step() {
       const delay = (deleting ? eraseMs : typeMs) / text.length;
       if (deleting) {
         index = Math.max(0, index - 1);
-        el.textContent = text.slice(0, index) || '\u00a0';
         if (index === 0) {
           deleting = false;
           setTimeout(step, holdMs);
@@ -779,7 +802,7 @@ INDEX_HTML = r"""<!DOCTYPE html>
         }
       } else {
         index = Math.min(text.length, index + 1);
-        el.textContent = text.slice(0, index);
         if (index === text.length) {
           deleting = true;
           setTimeout(step, holdMs);
@@ -789,6 +812,7 @@ INDEX_HTML = r"""<!DOCTYPE html>
       setTimeout(step, delay);
     }
     setTimeout(step, holdMs);
   }

   .eyebrow { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 16px; }
   .hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 500; line-height: 1.15; color: var(--ink); max-width: 620px; margin-bottom: 12px; }
   .hero-title em { font-style: italic; color: var(--gold); }
+  .typing-line { display: inline; border-right: 0.045em solid var(--gold); padding-right: 0.04em; }
+  @media (prefers-reduced-motion: reduce) { .typing-line { border-right: 0; } }
   .hero-sub { font-size: 0.95rem; color: var(--ink-muted); margin-bottom: 48px; font-weight: 300; }
   .input-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; width: 100%; max-width: 520px; box-shadow: 0 8px 32px rgba(42,31,14,0.07); }
   .mode-tabs { display: flex; background: var(--surface); border-radius: 10px; padding: 4px; margin-bottom: 28px; gap: 4px; }
 </nav>
 <div class="screen active" id="screen-input">
   <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 65px);padding:40px 20px;text-align:center;">
+    <h1 class="hero-title" aria-label="Convert your long video to short clips for social media"><span class="typing-line" id="hero-typed">Convert your long video to <em>short clips</em> for social media</span></h1>
     <p class="hero-sub">Upload a file - we handle the rest</p>
     <div class="input-card">
       <div class="input-section" id="mode-yt" style="display:none">
   function startHeroTyping() {
     const el = document.getElementById('hero-typed');
     if (!el || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const text = 'Convert your long video to short clips for social media';
+    const highlight = 'short clips';
+    const highlightStart = text.indexOf(highlight);
+    const highlightEnd = highlightStart + highlight.length;
     const typeMs = 3000;
     const eraseMs = 3000;
     const holdMs = 650;
+    let index = 0;
+    let deleting = false;
+    function render(count) {
+      el.replaceChildren();
+      if (count <= 0) {
+        el.textContent = '\u00a0';
+        return;
+      }
+      const beforeEnd = Math.min(count, highlightStart);
+      if (beforeEnd > 0) {
+        el.append(document.createTextNode(text.slice(0, beforeEnd)));
+      }
+      if (count > highlightStart) {
+        const em = document.createElement('em');
+        em.textContent = text.slice(highlightStart, Math.min(count, highlightEnd));
+        el.append(em);
+      }
+      if (count > highlightEnd) {
+        el.append(document.createTextNode(text.slice(highlightEnd, count)));
+      }
+    }
     function step() {
       const delay = (deleting ? eraseMs : typeMs) / text.length;
       if (deleting) {
         index = Math.max(0, index - 1);
+        render(index);
         if (index === 0) {
           deleting = false;
           setTimeout(step, holdMs);
         }
       } else {
         index = Math.min(text.length, index + 1);
+        render(index);
         if (index === text.length) {
           deleting = true;
           setTimeout(step, holdMs);
       setTimeout(step, delay);
     }
+    render(index);
     setTimeout(step, holdMs);
   }