Day 56: Live demo loop · sharper, framed, floating

Rebuilt the hero loop on agiletask.ai today across three deploys.

What shipped

1. Killed the grey container around the macBook window. The product now floats on the walnut canvas. The macOS chrome inside the recording is the only frame.

2. Swapped the 924 × 590 source for a fresh 1784 × 1080 capture at 1.2 Mbps. The old version was being upscaled around 2.5× by the browser, which is why text on the AI plan looked smudged on Retina. Razor sharp now.

3. Bumped the video clip radius to 16px so the macOS window's own rounded corners stay clean, and amplified the bronze glow behind it so the loop visibly lifts off the page instead of blending in.

Why it matters

The loop is the first proof a visitor sees that AgileTask is a real product, not a pitch deck. If the loop is blurry or sits inside a square grey tray, the "AI plans your sprint in 15 seconds" claim reads like marketing. Sharpness + a clean float makes the same claim feel like a demo.

Cost

About 3 hours, three deploys (v4.6.3 → v4.6.4 → v4.6.5). Zero new Sentry issues. No backend changes.

Stack notes for anyone tackling the same problem

• Hero video files at the source resolution beat any amount of CSS polish. We upgraded the encoding (924 × 590 at 369 kbps → 1784 × 1080 at 1.2 Mbps). The blur was data, not styling.

• Border-radius on the <video> element needs to be tighter than the macOS chrome's own corners inside the recording, otherwise the OS window's light edge bleeds into the page background.

• For "lift off the canvas" effect: stacked radial gradients on a ::before plus a wide rim-glow box-shadow on the video itself. Bronze rgba(207, 168, 106, 0.42) center, fading to transparent.
  
  What's next

  Product is in a good place. Distribution is the only thing that matters now. Outbound, founder posts, a Product Hunt push, and a few partner placements are queued for the coming days. Updates soon.

Live: agiletask.ai