David Haz — <FloatingLines /> (Launch Video Storyboard & Reverse-Engineering Breakdown)

About David Haz & This Product Release

David Haz — Introducing <FloatingLines /> After building this, I realize it’s a component that can please everyone. Why? You can make it look super minimal and clean, or you can go absolutely wild with the config! It’s live right now, go play with it! Watch the full 24s David Haz launch video with shot-by-shot breakdown and Remotion code.

Official X Account: @davidhaz | Original X Launch Post →

Explore David Haz Company Profile & Video Archive (/company/david-haz) | Visit Official David Haz Website (David Haz) →

Editorial Structure & Storyboard Timeline (24s Total Runtime · Fast (2.2s avg shot))

  • 01 · THE HOOK (00:00 – 00:03 · 13%): Prompt-to-Execution Split Reveal for David Haz — Opens immediately on the high-contrast tension point before showing the brand logo, locking viewer retention in the first 3 seconds. (Camera: 1.6x macro push-in with 0ms dead air on frame 1)
  • 02 · HERO UI REVEAL (00:03 – 00:11 · 33%): Core David Haz Surface & Interaction Loop — Demonstrates the primary action in a single continuous take (8s) with cursor smoothing and highlighted focal bounds. (Camera: Isometric-to-flat spring settle (cubic-bezier 0.22, 1, 0.36, 1))
  • 03 · VELOCITY MONTAGE (00:11 – 00:19 · 33%): Multi-State Feature Proof on Downbeat Cuts — Compresses 3–4 secondary workflows into rapid visual proof without narration drag. (Camera: Fast (2.2s avg shot) matched to 122 BPM transients)
  • 04 · PAYOFF & LOCKUP (00:19 – 00:24 · 21%): David Haz Brand Lockup & Availability CTA — Holds final URL and launch status cleanly for 5s so viewers on X stop scrolling and click the link. (Camera: Clean center lockup with subtle radial luminance decay)

Release Context & Production Format

Published by David Haz (@davidhaz) on 2025-11-14 in the ai category (24s total runtime).

30fps Remotion React Code Specification

import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";

// David Haz — David Haz — <FloatingLines /> (24s @ 30fps)
export const DavidHazComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: "#141413" }}>
      <Sequence from={0} durationInFrames={90} name="Act01_hook">
        {/* 00:00 – 00:03: Prompt-to-Execution Split Reveal for David Haz */}
      </Sequence>
      <Sequence from={90} durationInFrames={240} name="Act02_reveal">
        {/* 00:03 – 00:11: Core David Haz Surface & Interaction Loop */}
      </Sequence>
      <Sequence from={330} durationInFrames={240} name="Act03_velocity">
        {/* 00:11 – 00:19: Multi-State Feature Proof on Downbeat Cuts */}
      </Sequence>
      <Sequence from={570} durationInFrames={150} name="Act04_payoff">
        {/* 00:19 – 00:24: David Haz Brand Lockup & Availability CTA */}
      </Sequence>
    </AbsoluteFill>
  );
};