@webforge6: How I build Websites with Claude ☝🏻 Goal: Animate the hero-reveal overlay (title, video, controls, logo) from a hidden/inert state into a fully visible, interactive cinematic intro, then hand off cleanly into the scrolly-telling section. Stage 1 — Load state: - On mount, the overlay is `opacity: 0; pointer-events: none`. - Fetch the hero video as a Blob (`fetch(src).then(r => r.blob())`) and assign `video.src = URL.createObjectURL(blob)` — do not use a plain tag, to give us control over exactly when playback/decoding begins. - While the video buffers, show the poster (desktop/mobile variants already built). Stage 2 — Reveal timeline (GSAP): - Build one GSAP timeline that: fades in the title (opacity/y from 12px), fades in the video layer over the poster, then staggers in the mute/skip controls (~0.08s stagger). - The "Start experience" CTA becomes enabled only once the video's readyState >= 3 (HAVE_FUTURE_DATA) — reflect this with the existing `.c-button--disabled` class rather than a new one. - Clicking mute toggles video.muted and swaps the lucide icon between volume-2 and volume-x. - Clicking Skip (or the video ending naturally) fades the entire hero-reveal overlay to opacity: 0; pointer-events: none and hands scroll control to the page (unlock body scroll if it was locked during the intro). Stage 3 — Cleanup: - Revoke the object URL (URL.revokeObjectURL) once playback is confirmed complete or the section is skipped, to avoid a memory leak. Guard clause: If prefers-reduced-motion: reduce is set, skip the timeline entirely — set all elements to their final visible state immediately and do not autoplay the video (show the static poster image and go straight to "Start experience" enabled, muted, no forced playback). On touch devices, do not attempt to autoplay video with sound under any circumstance — always mount muted, and reveal an explicit "tap to unmute" affordance instead of relying on hover. Save this if you want the same Hero animations. #webdesign #buildinpublic #claude #ai #3d

WebForge

Open In TikTok:

Region: DE

Thursday 06 August 2026 15:20:02 GMT