ZeroSum-Solutions/mishmash

Mainframe — Mouse-Scrub Video Hero with AI Typewriter

Hero section vendored from the MIT-licensed pulkitxm/claude-directory gallery.

A full-screen, cinematic hero landing page for a creative agency called Mainframe, featuring a fixed background video that scrubs forward and backward in response to horizontal mouse movement, an AI-assistant-themed blurred intro label, a typewriter-animated headline, and a row of pill-shaped action buttons with a clipboard copy email link. The design pairs HelveticaNowDisplay-Medium headings with HelveticaNowDisplayW01-Rg body text, both vendored locally for offline use. Built with React 19, TypeScript, Vite, and Tailwind CSS v3.

Workflow

1. Clone example.html into the user's workspace as the working file.
2. Replace placeholder content with the user's real brand name, headlines, body copy, numbers, and imagery. Match existing image dimensions when swapping assets.
3. Preserve the design system. The palette, type scale, spacing rhythm, and motion in the build spec below are the identity — do not substitute fonts, recolour the palette, or strip decorative elements.
4. Extend by duplicating sections, never by importing a layout from another template. If a section is missing, design it from scratch in this template's own vocabulary.
5. Keep motion accessible. Every animation must stay behind prefers-reduced-motion, as the build spec requires.

Output contract

Emit between <artifact> tags:

<artifact identifier="mainframe-hero-landing" type="text/html" title="Mainframe — Mouse-Scrub Video Hero with AI Typewriter">
<!doctype html>
<html>...</html>
</artifact>

Build spec

The upstream prompt that produced this design, verbatim.

Mainframe — Cinematic Hero Landing Page

Overview

Build a full-screen hero landing page for a creative agency called "Mainframe". The page features a fixed background video that scrubs forward and backward in response to horizontal mouse movement, an AI-assistant-themed hero with a blurred intro label and a typewriter headline, and a row of pill-shaped action buttons. It is built with React, TypeScript, Vite, and Tailwind CSS v3.

Tech Stack

• Framework: React 19 (react and react-dom ^19.2.6) with TypeScript (typescript ~6.0.2)
• Build tool: Vite (vite ^8.0.12) with @vitejs/plugin-react (^6.0.1), scaffolded via npm create vite@latest using the react-ts template
• Styling: Tailwind CSS v3 (tailwindcss ^3.4.19) with postcss (^8.5.15) and autoprefixer (^10.5.0)
• Fonts: HelveticaNowDisplay-Medium (headings/logo) and HelveticaNowDisplayW01-Rg (body), vendored locally and loaded via @font-face CSS files
• No other UI libraries. Only React, ReactDOM, Tailwind CSS, and Vite are used.
• Notable techniques: mouse-scrub video seeking with anti-flooding via the seeked event, a custom useTypewriter hook, CSS-keyframe blinking cursor, and clipboard copy via navigator.clipboard.writeText().

Global Setup

Fonts

The two fonts are vendored locally. Two stylesheet files live under public/fonts/ and are loaded from index.html via <link rel="stylesheet"> tags pointing at /fonts/HelveticaNowDisplay-Medium.css and /fonts/HelveticaNowDisplayW01-Rg.css.

Each CSS file defines an @font-face rule that points at locally vendored .woff2, .woff, and .ttf files (also under public/fonts/).

public/fonts/HelveticaNowDisplay-Medium.css:

@font-face{
    font-family: "HelveticaNowDisplay-Medium";
    src: url("/fonts/5ac3fe7c6abd2f62067f266d89671492.woff2")format("woff2"),
        url("/fonts/5ac3fe7c6abd2f62067f266d89671492.woff")format("woff"),
        url("/fonts/5ac3fe7c6abd2f62067f266d89671492.ttf")format("truetype");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

public/fonts/HelveticaNowDisplayW01-Rg.css:

@font-face{
    font-family: "HelveticaNowDisplayW01-Rg";
    src: url("/fonts/1aa3377e489837a26d019bba501e779d.woff2")format("woff2"),
        url("/fonts/1aa3377e489837a26d019bba501e779d.woff")format("woff"),
        url("/fonts/1aa3377e489837a26d019bba501e779d.ttf")format("truetype");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

Note: The underlying font assets originate from db.onlinewebfonts.com (the hashes 5ac3fe7c6abd2f62067f266d89671492 → HelveticaNowDisplay-Medium and 1aa3377e489837a26d019bba501e779d → HelveticaNowDisplayW01-Rg match the original source URLs), but they are served locally in this project rather than fetched from a CDN.

In src/index.css, define CSS variables for the fonts and set the body font:

:root {
  --font-heading: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'HelveticaNowDisplayW01-Rg', 'Helvetica Neue', Arial, sans-serif;
}
body {
  font-family: var(--font-body);
}

The entire page uses var(--font-body) except the logo text, which uses var(--font-heading).

src/index.css

In addition to the font variables above, this file:

• Imports Tailwind layers at the top:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• Adds base/reset styles on body: margin: 0; padding: 0; overflow-x: hidden; (in addition to font-family: var(--font-body);).

• Defines the blink keyframe animation and a .cursor-blink helper class for the typewriter cursor:

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
  
  .cursor-blink {
    animation: blink 1s step-end infinite;
  }
  

index.html

• Standard Vite React HTML boilerplate.

• <title>Mainframe</title>.

• Load the two font stylesheets via <link rel="stylesheet"> tags before the title:

  <link rel="stylesheet" href="/fonts/HelveticaNowDisplay-Medium.css" />
  <link rel="stylesheet" href="/fonts/HelveticaNowDisplayW01-Rg.css" />
  

• Mounts the React app at <div id="root"></div> with <script type="module" src="/src/main.tsx"></script>.

Background Video (Mouse-Scrub Controlled)

• A full-screen <video> element is position: fixed; inset: 0; z-index: 0; object-fit: cover; object-position: 70% center;. In Tailwind terms it is fixed inset-0 z-0 w-full h-full object-cover with an inline style of objectPosition: '70% center'.

• Video source URL: /assets/hf_20260530_042513_df96a13b-6155-4f6e-8b93-c9dee66fba08.mp4 (vendored locally under public/assets/).

  Note: The original source for this asset was https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260530_042513_df96a13b-6155-4f6e-8b93-c9dee66fba08.mp4, but it is served locally in this project.

• The video is muted, playsInline, preload="auto". It does not autoplay.

• The video scrubs forward/backward based on horizontal mouse movement. Use a mousemove event listener on window. Track prevX, compute delta = currentX - prevX, and convert it to a time offset:

  const offset = (delta / window.innerWidth) * SENSITIVITY * video.duration;
  

  where SENSITIVITY = 0.8. Clamp the resulting targetTime between 0 and video.duration. Use video.currentTime to seek, and a seeked event handler to queue the next seek if targetTime has moved, preventing seek-flooding.

The exact effect logic from src/components/Hero.tsx:

const VIDEO_URL =
  '/assets/hf_20260530_042513_df96a13b-6155-4f6e-8b93-c9dee66fba08.mp4';

const SENSITIVITY = 0.8;

// inside the component:
const videoRef = useRef<HTMLVideoElement>(null);
const prevXRef = useRef<number | null>(null);
const targetTimeRef = useRef(0);
const seekingRef = useRef(false);

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  const handleSeeked = () => {
    seekingRef.current = false;
    if (Math.abs(video.currentTime - targetTimeRef.current) > 0.01) {
      seekingRef.current = true;
      video.currentTime = targetTimeRef.current;
    }
  };

  video.addEventListener('seeked', handleSeeked);

  const handleMouseMove = (e: MouseEvent) => {
    if (!video || !video.duration) return;

    const currentX = e.clientX;
    if (prevXRef.current === null) {
      prevXRef.current = currentX;
      return;
    }

    const delta = currentX - prevXRef.current;
    prevXRef.current = currentX;

    const offset = (delta / window.innerWidth) * SENSITIVITY * video.duration;
    const newTime = Math.max(0, Math.min(video.duration, targetTimeRef.current + offset));
    targetTimeRef.current = newTime;

    if (!seekingRef.current) {
      seekingRef.current = true;
      video.currentTime = newTime;
    }
  };

  window.addEventListener('mousemove', handleMouseMove);
  return () => {
    window.removeEventListener('mousemove', handleMouseMove);
    video.removeEventListener('seeked', handleSeeked);
  };
}, []);

Navbar (Fixed, z-index 10)

Fixed to top, full width: fixed top-0 left-0 right-0 z-10. Padding: px-5 sm:px-8 py-4 sm:py-5. Flex row, justify-between, items-center.

Nav links are defined once as an array: ['LABS', 'STUDIO', 'OPENINGS', 'SHOP'].

Logo (Left)

• Flex row with gap-3.
• Text "MAINFRAME®" (use the registered trademark symbol) at text-[21px] sm:text-[26px], tracking-tight, black, using style={{ fontFamily: 'var(--font-heading)' }}.
• Beside it, a decorative asterisk character ✳︎ at text-[25px] sm:text-[30px], black, select-none, with inline style letterSpacing: '-0.02em' and aria-hidden="true".

Desktop Nav Links (Center, hidden below md)

• hidden md:flex flex-row items-center text-[23px] text-black.
• Links: "LABS", "STUDIO", "OPENINGS", "SHOP", separated by commas rendered as , (each non-final link is followed by a <span className="mr-1">,</span>).
• Each link is an <a href="#"> with hover:opacity-60 transition-opacity.

Desktop CTA (Right, hidden below md)

• An anchor "GET IN TOUCH" with classes hidden md:block text-[23px] text-black underline underline-offset-2 hover:opacity-60 transition-opacity.

Mobile Hamburger (visible below md)

• A <button> with md:hidden flex flex-col justify-center items-center gap-[5px] w-8 h-8, aria-label="Toggle menu", toggling a menuOpen state.
• 3 horizontal bars, each w-6 h-[2px] bg-black block transition-all duration-300.
• On toggle:
  • Top bar (origin-center): transform: 'rotate(45deg) translateY(7px)' when open, else 'none'.
  • Middle bar: opacity: 0 when open, else 1.
  • Bottom bar (origin-center): transform: 'rotate(-45deg) translateY(-7px)' when open, else 'none'.
• All transitions use duration-300.

Mobile Overlay (z-index 9)

• md:hidden fixed inset-0 z-[9] bg-white/95 backdrop-blur-sm flex flex-col justify-center items-start px-8 gap-8 transition-all duration-300.
• Inline style toggles visibility: opacity: menuOpen ? 1 : 0 and pointerEvents: menuOpen ? 'auto' : 'none'.
• The same links at text-[32px] font-medium text-black hover:opacity-60 transition-opacity, each closing the menu on click (onClick={() => setMenuOpen(false)}).
• Plus a "GET IN TOUCH" anchor at text-[32px] font-medium text-black underline underline-offset-2 hover:opacity-60 transition-opacity, also closing the menu on click.
• Hidden on md+.

Hero Section (z-index 1)

• Full h-screen, flex column. On mobile: justify-end pb-12. On md:: md:justify-center md:pb-0. Horizontal padding: px-5 sm:px-8 md:px-10. overflow-hidden. Wrapper classes: relative z-[1] h-screen flex flex-col justify-end pb-12 md:justify-center md:pb-0 px-5 sm:px-8 md:px-10 overflow-hidden.
• Content container: max-w-xl relative z-10.

1. Blurred Intro Label

• Classes: mb-5 sm:mb-6 pointer-events-none select-none.
• Inline style: fontSize: 'clamp(18px, 4vw, 26px)', lineHeight: 1.3, fontWeight: 400, color: '#000', filter: 'blur(4px)'.
• Two lines of text separated by a <br />:
  • Line 1: Hey there, meet A.R.I.A,
  • Line 2: Mainframe's Adaptive Response Interface Agent

2. Typewriter Text

• Headline text: "Glad you stopped in. Good taste tends to find us. Now, what are we building?"

• Driven by a custom useTypewriter hook (see File Structure). The hook takes text, speed (default 38ms per character), and startDelay (default 600ms). After the delay, an interval reveals one character at a time. It returns { displayed, done }.

• In the hero, it is invoked as:

  const { displayed, done } = useTypewriter({
    text: "Glad you stopped in. Good taste tends to find us. Now, what are we building?",
    speed: 38,
    startDelay: 600,
  });
  

• Rendered in a <p> tag with classes text-black mb-5 sm:mb-6 and inline style fontSize: 'clamp(18px, 4vw, 26px)', lineHeight: 1.35, fontWeight: 400, minHeight: '54px'.

• While typing (!done), show a blinking cursor: a <span> with classes inline-block w-[2px] h-[1.1em] bg-black align-middle ml-[2px] cursor-blink. The cursor-blink class applies animation: blink 1s step-end infinite (opacity: 1 at 0%/100%, 0 at 50%). The cursor disappears when done is true.

3. Action Pill Buttons

• The whole pill group appears with a fade-in + slide-up animation, applied via inline style on the container: opacity 0 → 1, transform: translateY(8px) → translateY(0), with transition: 'opacity 0.4s ease, transform 0.4s ease'. They become visible 400ms after page load, independent of the typewriter animation (do not wait for typing to finish):

  const [pillsVisible, setPillsVisible] = useState(false);
  
  useEffect(() => {
    const timer = setTimeout(() => setPillsVisible(true), 400);
    return () => clearTimeout(timer);
  }, []);
  

• Container: flex flex-wrap gap-y-1 with the inline transition style above.

• 4 white pill buttons. Labels: Pitch us an idea, Come work here, Send a brief hello, See how we operate. Each button:

  • Classes: inline-flex items-center justify-center bg-white text-black border border-black/10 rounded-full text-[13px] sm:text-[15px] px-4 sm:px-5 mx-[0.2em] mb-[0.4em] hover:bg-black hover:text-white transition-colors duration-200 whitespace-nowrap.
  • Inline style for vertical padding: paddingTop: '0.3em', paddingBottom: '0.3em'.

• 1 outline pill button (email). Content: Reach us: followed by [email protected] (the email wrapped in <span className="underline underline-offset-1">), then a small 12×12 copy icon (inline SVG of two overlapping rectangles).

  • Classes: inline-flex items-center justify-center gap-2 sm:gap-3 text-white bg-transparent border border-white rounded-full text-[13px] sm:text-[15px] px-4 sm:px-5 mx-[0.2em] mb-[0.4em] hover:bg-white hover:text-black transition-colors duration-200 whitespace-nowrap.

  • Inline style for vertical padding: paddingTop: '0.3em', paddingBottom: '0.3em'.

  • gap-2 sm:gap-3 separates the text from the icon.

  • On click, copies [email protected] to clipboard via navigator.clipboard.writeText('[email protected]').

  • Copy icon SVG:

    <svg
      width="12"
      height="12"
      viewBox="0 0 12 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <rect x="3" y="0" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="1.2" fill="none" />
      <rect x="0" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="1.2" fill="none" />
    </svg>
    

Animations Summary

• Typewriter: one character revealed every 38ms after a 600ms start delay.
• Cursor blink: blink 1s step-end infinite (opacity 1 → 0 → 1).
• Pill group entrance: opacity and translateY transition over 0.4s ease, triggered 400ms after load.
• Hamburger morph: bars rotate/translate/fade over duration-300.
• Mobile overlay: opacity and pointer-events transition over duration-300.
• Video scrub: seek-driven, throttled by the seeked event with a 0.01 second deadband.

Color Palette

• Black text and UI: text-black, bg-black, #000.
• White surfaces and pills: bg-white, text-white, border-white.
• Subtle borders: border-black/10.
• Mobile overlay scrim: bg-white/95 with backdrop-blur-sm.

File Structure

The project is scaffolded with npm create vite@latest using the react-ts template, with Tailwind CSS v3.

• index.html — loads the two local font stylesheets via <link rel="stylesheet">; standard Vite React HTML boilerplate; <title>Mainframe</title>.
• src/main.tsx — standard Vite entry: imports ./index.css, renders <App /> inside <StrictMode> via createRoot(document.getElementById('root')!).
• src/index.css — Tailwind layers, the font CSS variables, base/reset styles, and the blink keyframe + .cursor-blink class.
• src/hooks/useTypewriter.ts — the custom typewriter hook.
• src/components/Navbar.tsx — navbar with mobile hamburger and overlay.
• src/components/Hero.tsx — hero section with video scrub, blurred label, typewriter, and pill buttons.
• src/App.tsx — composes <Navbar /> + <Hero />.
• public/fonts/ — the two @font-face CSS files plus their .woff2/.woff/.ttf assets.
• public/assets/ — the background video MP4.
• tailwind.config.js and postcss.config.js — standard Tailwind v3 config.

src/App.tsx

import { Navbar } from './components/Navbar';
import { Hero } from './components/Hero';

function App() {
  return (
    <>
      <Navbar />
      <Hero />
    </>
  );
}

export default App;

src/hooks/useTypewriter.ts

import { useState, useEffect } from 'react';

interface UseTypewriterOptions {
  text: string;
  speed?: number;
  startDelay?: number;
}

interface UseTypewriterReturn {
  displayed: string;
  done: boolean;
}

export function useTypewriter({
  text,
  speed = 38,
  startDelay = 600,
}: UseTypewriterOptions): UseTypewriterReturn {
  const [displayed, setDisplayed] = useState('');
  const [done, setDone] = useState(false);

  useEffect(() => {
    setDisplayed('');
    setDone(false);

    const delayTimer = setTimeout(() => {
      let index = 0;
      const interval = setInterval(() => {
        index += 1;
        setDisplayed(text.slice(0, index));
        if (index >= text.length) {
          clearInterval(interval);
          setDone(true);
        }
      }, speed);

      return () => clearInterval(interval);
    }, startDelay);

    return () => clearTimeout(delayTimer);
  }, [text, speed, startDelay]);

  return { displayed, done };
}

Dependencies

Only React, ReactDOM, Tailwind CSS, and Vite. No other UI libraries.

Build

The final result should be a clean build with npm run build passing (the build script is tsc -b && vite build).

Source & license

Vendored from MIT-licensed pulkitxm/claude-directory. The upstream MIT licence text ships in this template at LICENSE and must be redistributed alongside any copy of example.html or assets/.

Webfonts and full-resolution imagery are not vendored: local @font-face rules are served from the Google Fonts CDN and referenced images are downscaled. Fetch the upstream folder for the original assets.