The prompt that made it
as published# MicroVisuals — Boomerang Video Hero Section
## Overview
Build a fullscreen hero section for an AI image-generation product called **MicroVisuals**. A background video plays once, every frame is snapshotted into offscreen canvases, and the frames then ping-pong forward and backward forever (a "boomerang" loop) on a display canvas. A liquid-glass navbar, an oversized italic serif title, mouse-driven parallax on the background, and a bottom action row complete the layout.
## Tech Stack
- **Framework:** React 18 (`react` `^18.3.1`, `react-dom` `^18.3.1`) with TypeScript (`~5.6.3`).
- **Build tool:** Vite (`^6.0.3`) with `@vitejs/plugin-react` (`^4.3.4`).
- **Styling:** Tailwind CSS (`^3.4.15`) with `postcss` (`^8.4.49`) and `autoprefixer` (`^10.4.20`).
- **Animation:** GSAP (`gsap` `^3.12.5`) — used only for the parallax `gsap.set` transform.
- **Icons:** `lucide-react` (`^0.468.0`) is a dependency. No other UI libraries.
- **Fonts:** Instrument Serif and Barlow (Google Fonts), plus a self-hosted `Dirtyline` display face.
- **Notable techniques:** `requestVideoFrameCallback` (with `requestAnimationFrame` fallback) for frame capture; canvas-based boomerang playback; pointer-lerp parallax; CSS "liquid glass" backdrop-filter cards with gradient-masked borders.
> Build a fullscreen hero section in a Vite + React + TypeScript + Tailwind CSS project. Use `gsap` and `lucide-react`. No other UI libraries.
## Global Setup
### Fonts (in `src/index.css`)
Import at the very top of `index.css`, **before** the `@tailwind` directives:
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap');
@font-face {
font-family: 'Dirtyline';
src: url('https://fonts.cdnfonts.com/s/15011/Dirtyline36DaysofType.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
```
Then the Tailwind layers and the body base styles:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: 'Barlow', sans-serif;
background: #000;
}
```
- **Body font:** `'Barlow', sans-serif`.
- **Background:** `#000`.
### Tailwind config (`tailwind.config.js`)
```js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{ts,tsx}'],
theme: {
extend: {
fontFamily: {
heading: ['Instrument Serif', 'serif'],
body: ['Barlow', 'sans-serif'],
dirtyline: ['Dirtyline', 'sans-serif'],
},
borderRadius: { DEFAULT: '9999px' },
},
},
plugins: [],
}
```
> Note: The Tailwind default `borderRadius` is overridden to `9999px` (full pill), so every `rounded` class in the markup produces pill corners.
### Custom CSS (append to `src/index.css`)
```css
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.45) 0%,
rgba(255, 255, 255, 0.15) 20%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, 0.15) 80%,
rgba(255, 255, 255, 0.45) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.liquid-glass-strong {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border: none;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.liquid-glass-strong::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, 0.2) 80%,
rgba(255, 255, 255, 0.5) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.hero-title {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: clamp(96px, 18vw, 280px);
line-height: 0.92;
letter-spacing: -0.02em;
color: white;
text-align: center;
}
```
## Component (`src/App.tsx`)
### Imports & constants
```tsx
import { useEffect, useRef, useState } from 'react'
import { gsap } from 'gsap'
const NAV_LINKS = ['Gallery', 'Styles', 'API', 'Pricing', 'Blog']
const VIDEO_SRC =
'https://d8j0ntlcm91z4.cloudfront.net/user_38xzzbokvigwjottwixh07lwa1p/hf_20260511_080827_a9e5ad52-b6ee-4e79-b393-d936f179cfd7.mp4'
```
- **`NAV_LINKS`** = `['Gallery', 'Styles', 'API', 'Pricing', 'Blog']`.
- **`VIDEO_SRC`** = `'https://d8j0ntlcm91z4.cloudfront.net/user_38xzzbokvigwjottwixh07lwa1p/hf_20260511_080827_a9e5ad52-b6ee-4e79-b393-d936f179cfd7.mp4'`. The URL is case-sensitive — keep it exactly as shown.
Use `requestVideoFrameCallback` when available, with a `requestAnimationFrame` fallback.
### `LogoMark` — inline SVG
Width `44`, height `26`, `viewBox="0 0 44 26"`, `fill="none"`, `aria-hidden="true"`. Three white rects at `y="3"`, height `20`, `rx="3"`:
```tsx
function LogoMark() {
return (
<svg width="44" height="26" viewBox="0 0 44 26" fill="none" aria-hidden="true">
<rect x="0" y="3" width="14" height="20" rx="3" fill="white" />
<rect x="16" y="3" width="12" height="20" rx="3" fill="white" />
<rect x="30" y="3" width="14" height="20" rx="3" fill="white" />
</svg>
)
}
```
### State & refs
- `mounted` — boolean, set `true` in a mount effect to drive the fade-in.
- `framesReady` — boolean state, flipped `true` once frame capture completes.
- `videoRef` — `useRef<HTMLVideoElement>(null)`.
- `videoBgRef` — `useRef<HTMLDivElement>(null)`.
- `displayCanvasRef` — `useRef<HTMLCanvasElement>(null)`.
- `framesRef` — `useRef<HTMLCanvasElement[]>([])`.
```tsx
const [mounted, setMounted] = useState(false)
const [framesReady, setFramesReady] = useState(false)
const videoRef = useRef<HTMLVideoElement>(null)
const videoBgRef = useRef<HTMLDivElement>(null)
const displayCanvasRef = useRef<HTMLCanvasElement>(null)
const framesRef = useRef<HTMLCanvasElement[]>([])
```
Mount effect:
```tsx
useEffect(() => {
setMounted(true)
}, [])
```
### Effect 1 — Frame capture (boomerang setup)
On mount, grab `videoRef.current`; bail if absent. Play the video once and snapshot every frame into offscreen canvases. Use `requestVideoFrameCallback` when available, with a `requestAnimationFrame` fallback.
- Locals: `capturing = true`, `lastTime = -1`, `rafId = 0`, `vfcId = 0`, `MAX_WIDTH = 960`, `frames: HTMLCanvasElement[] = []`, and `supportsVFC = typeof video.requestVideoFrameCallback === 'function'`.
- **`captureFrame()`:** bail if `!capturing`. If `video.readyState < 2` or `video.currentTime === lastTime`, reschedule and return. Otherwise update `lastTime`, compute `scale = Math.min(1, MAX_WIDTH / video.videoWidth)`, derive rounded `w`/`h`, create an offscreen `<canvas>` at that size, `ctx.drawImage(video, 0, 0, w, h)`, and push the canvas into `frames`. Then reschedule.
- **`scheduleCapture()`:** if still capturing, use `video.requestVideoFrameCallback(captureFrame)` when supported, else `requestAnimationFrame(captureFrame)`.
- **`onLoaded()`:** `video.play().catch(() => {})` then `scheduleCapture()`.
- **`onEnded()`:** set `capturing = false`, store `framesRef.current = frames`, and `setFramesReady(true)`.
- Add `loadedmetadata` → `onLoaded` and `ended` → `onEnded` listeners. If `video.readyState >= 1`, invoke `onLoaded()` immediately.
- **Cleanup:** set `capturing = false`, remove both listeners, cancel any pending `rafId` / `vfcId`.
```tsx
useEffect(() => {
const video = videoRef.current
if (!video) return
let capturing = true
let lastTime = -1
let rafId = 0
let vfcId = 0
const MAX_WIDTH = 960
const frames: HTMLCanvasElement[] = []
const supportsVFC = typeof video.requestVideoFrameCallback === 'function'
const captureFrame = () => {
if (!capturing) return
if (video.readyState < 2 || video.currentTime === lastTime) {
scheduleCapture()
return
}
lastTime = video.currentTime
const scale = Math.min(1, MAX_WIDTH / video.videoWidth)
const w = Math.round(video.videoWidth * scale)
const h = Math.round(video.videoHeight * scale)
const frame = document.createElement('canvas')
frame.width = w
frame.height = h
const ctx = frame.getContext('2d')
if (ctx) {
ctx.drawImage(video, 0, 0, w, h)
frames.push(frame)
}
scheduleCapture()
}
const scheduleCapture = () => {
if (!capturing) return
if (supportsVFC) {
vfcId = video.requestVideoFrameCallback!(captureFrame)
} else {
rafId = requestAnimationFrame(captureFrame)
}
}
const onLoaded = () => {
video.play().catch(() => {})
scheduleCapture()
}
const onEnded = () => {
capturing = false
framesRef.current = frames
setFramesReady(true)
}
video.addEventListener('loadedmetadata', onLoaded)
video.addEventListener('ended', onEnded)
if (video.readyState >= 1) onLoaded()
return () => {
capturing = false
video.removeEventListener('loadedmetadata', onLoaded)
video.removeEventListener('ended', onEnded)
if (rafId) cancelAnimationFrame(rafId)
if (vfcId && video.cancelVideoFrameCallback) video.cancelVideoFrameCallback(vfcId)
}
}, [])
```
### Effect 2 — Boomerang render
Runs when `framesReady` is `true`. Ping-pong through the captured frames at ~30fps on the display canvas. Never touches `video.currentTime`.
- Grab `displayCanvasRef.current` and `framesRef.current`; bail if no canvas or `frames.length === 0`.
- Size the canvas from `frames[0]`: `canvas.width = frames[0].width`, `canvas.height = frames[0].height`.
- Locals: `index = 0`, `direction = 1`, `last = performance.now()`, `interval = 1000 / 30`, `rafId = 0`.
- In a `requestAnimationFrame(render)` loop: when `now - last >= interval`, update `last`, draw `frames[index]`, then `index += direction`. If `index >= frames.length - 1`, clamp to `frames.length - 1` and flip `direction = -1`; else if `index <= 0`, clamp to `0` and flip `direction = 1`.
- **Cleanup:** `cancelAnimationFrame(rafId)`.
```tsx
useEffect(() => {
if (!framesReady) return
const canvas = displayCanvasRef.current
const frames = framesRef.current
if (!canvas || frames.length === 0) return
canvas.width = frames[0].width
canvas.height = frames[0].height
const ctx = canvas.getContext('2d')
if (!ctx) return
let index = 0
let direction = 1
let last = performance.now()
const interval = 1000 / 30
let rafId = 0
const render = (now: number) => {
if (now - last >= interval) {
last = now
ctx.drawImage(frames[index], 0, 0)
index += direction
if (index >= frames.length - 1) {
index = frames.length - 1
direction = -1
} else if (index <= 0) {
index = 0
direction = 1
}
}
rafId = requestAnimationFrame(render)
}
rafId = requestAnimationFrame(render)
return () => cancelAnimationFrame(rafId)
}, [framesReady])
```
### Effect 3 — Parallax mouse tracking (GSAP)
Lerp toward the pointer and move the video background layer with GSAP.
- `strength = 20`. Track `targetX`/`targetY` and `currentX`/`currentY` (all start `0`), plus `rafId = 0`.
- **`onMouseMove(event)`:** with `cx = window.innerWidth / 2` and `cy = window.innerHeight / 2`, set `targetX = ((event.clientX - cx) / cx) * strength` and `targetY = ((event.clientY - cy) / cy) * strength`.
- **`tick()`:** each frame lerp `currentX += (targetX - currentX) * 0.06` (same for `currentY`), then `gsap.set(videoBgRef.current, { x: currentX, y: currentY })` when the ref exists; reschedule with `requestAnimationFrame(tick)`.
- Add a `window` `mousemove` listener and kick off the `tick` loop.
- **Cleanup:** remove the listener and `cancelAnimationFrame(rafId)`.
```tsx
useEffect(() => {
const strength = 20
let targetX = 0
let targetY = 0
let currentX = 0
let currentY = 0
let rafId = 0
const onMouseMove = (event: MouseEvent) => {
const cx = window.innerWidth / 2
const cy = window.innerHeight / 2
targetX = ((event.clientX - cx) / cx) * strength
targetY = ((event.clientY - cy) / cy) * strength
}
const tick = () => {
currentX += (targetX - currentX) * 0.06
currentY += (targetY - currentY) * 0.06
if (videoBgRef.current) {
gsap.set(videoBgRef.current, { x: currentX, y: currentY })
}
rafId = requestAnimationFrame(tick)
}
window.addEventListener('mousemove', onMouseMove)
rafId = requestAnimationFrame(tick)
return () => {
window.removeEventListener('mousemove', onMouseMove)
cancelAnimationFrame(rafId)
}
}, [])
```
### Fade-in helper
```tsx
const fadeIn = mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'
```
## Layout & JSX Structure
Root: `<div className="min-h-screen bg-black text-white font-body overflow-x-hidden">`.
### 1. Video background layer
`<div ref={videoBgRef} className="fixed top-0 left-0 w-full h-full z-0 scale-[1.08] origin-center">` containing:
- **`<video>`** with `src={VIDEO_SRC}`, `muted`, `playsInline`, `preload="auto"`, `crossOrigin="anonymous"`, `className="w-full h-full object-cover"`, and `style={{ display: framesReady ? 'none' : 'block' }}`.
- **`<canvas ref={displayCanvasRef}>`** with `className="w-full h-full object-cover"` and `style={{ display: framesReady ? 'block' : 'none' }}`.
### 2. Hero title
A fixed div, `left-0 right-0 z-20 w-full px-4`, with inline `style={{ top: '126px' }}`. It fades in via `transition-all duration-1000` plus the `fadeIn` classes (`opacity-100 translate-y-0` when mounted, else `opacity-0 translate-y-6`).
Inside: `<h1 className="hero-title select-none">MicroVisuals</h1>`.
### 3. Navbar
`<nav className="fixed top-5 left-1/2 -translate-x-1/2 z-50 whitespace-nowrap">` wrapping a `liquid-glass flex items-center gap-6 rounded px-4 py-2.5` pill that contains:
- `<LogoMark />`.
- A `<div className="flex items-center gap-5">` mapping `NAV_LINKS` to `<a href="#">` links, each with `className="text-sm font-body font-light text-white/70 hover:text-white transition-colors duration-200"`.
- A right cluster `<div className="flex items-center gap-3 ml-4">`:
- **"Sign in"** — an `<a href="#">` with the same link classes (`text-sm font-body font-light text-white/70 hover:text-white transition-colors duration-200`).
- **"Try it free"** — a `<button type="button">` with `className="liquid-glass-strong text-sm font-body font-medium text-white rounded px-4 py-1.5 transition-all duration-200 hover:scale-[1.04] hover:shadow-[0_0_16px_2px_rgba(255,255,255,0.12)] active:scale-[0.97]"`.
### 4. Bottom row
A fixed div, `bottom-12 left-0 right-0 px-10 flex items-end justify-between z-20`, that fades in via `transition-all duration-1000 delay-300` plus the `fadeIn` classes.
- **Left `<p>`:** `className="text-sm font-body font-light text-white/75 max-w-[220px] leading-relaxed"`, text: "Forma's AI understands context, composition, and style like a creative director would." (the apostrophe is escaped as `'` in JSX).
- **Center cluster:** `<div className="absolute left-1/2 -translate-x-1/2 bottom-0 flex items-center gap-3">` with two buttons:
- **Primary** `<button type="button">` with `className="group relative bg-white text-black text-sm font-body font-medium rounded px-6 py-3 overflow-hidden active:scale-[0.97] transition-all duration-200 shadow-[0_0_0_0_rgba(255,255,255,0)] hover:shadow-[0_0_24px_4px_rgba(255,255,255,0.25)] hover:scale-[1.03]"`. Contents:
- `<span className="relative z-10">Start generating</span>`.
- Overlay `<span className="absolute inset-0 bg-gradient-to-b from-white to-white/85 opacity-0 group-hover:opacity-100 transition-opacity duration-200" />`.
- **Secondary** `<button type="button">` with `className="liquid-glass group text-white text-sm font-body font-medium rounded px-6 py-3 active:scale-[0.97] transition-all duration-200 hover:scale-[1.03] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_0_20px_2px_rgba(255,255,255,0.07)]"`, label "See templates".
- **Right `<p>`:** same classes as the left paragraph plus `text-right` (`text-sm font-body font-light text-white/75 max-w-[220px] leading-relaxed text-right`), text: "Describe what you see in your head — get images that actually match."
## UI Copy (verbatim)
- Logo title / hero `<h1>`: `MicroVisuals`
- Nav links: `Gallery`, `Styles`, `API`, `Pricing`, `Blog`
- `Sign in`
- `Try it free`
- Left paragraph: `Forma's AI understands context, composition, and style like a creative director would.`
- `Start generating`
- `See templates`
- Right paragraph: `Describe what you see in your head — get images that actually match.`
## Color Palette
- **Page background:** `#000` / `bg-black`.
- **Text:** white, with muted variants `text-white/70` (nav links) and `text-white/75` (bottom paragraphs).
- **Primary button:** `bg-white text-black`.
- **Glass tints:** `rgba(255, 255, 255, 0.01)` fills with white gradient-masked borders ranging from `0.15`–`0.5` alpha; shadows use `rgba(255, 255, 255, …)` and `rgba(0, 0, 0, 0.05)`.
## Animation Summary
- **Fade-in:** mounted toggle drives `opacity-0 translate-y-6` → `opacity-100 translate-y-0` over `duration-1000`; the bottom row adds `delay-300`.
- **Boomerang playback:** ~30fps (`interval = 1000 / 30`) ping-pong over the captured `frames[]` array.
- **Parallax:** pointer-lerp at factor `0.06`, magnitude `strength = 20`, applied via `gsap.set` translate on the background layer (which is pre-scaled `scale-[1.08]`).
- **Hover micro-interactions:** scale (`1.03`/`1.04`) and glow shadows on buttons; `active:scale-[0.97]` press states; `transition-colors duration-200` on links.
## File Structure
- `index.html` — entry HTML that mounts `/src/main.tsx`.
- `src/main.tsx` — React entry that renders `<App />` and imports `index.css`.
- `src/App.tsx` — the hero component (constants, `LogoMark`, three effects, JSX).
- `src/index.css` — font imports, `@font-face`, Tailwind layers, body styles, `.liquid-glass`, `.liquid-glass-strong`, `.hero-title`.
- `src/vite-env.d.ts` — Vite type references.
- `tailwind.config.js`, `postcss.config.js`, `vite.config.ts`, `tsconfig.json` — tooling config.
## Notes
- The Tailwind default border radius is overridden to `9999px` (full pill), so every `rounded` in the markup produces pill corners.
- Do not use `video.currentTime` to reverse — the boomerang uses the captured `frames[]` array only.
- The video element stays mounted (hidden once `framesReady`) so the canvas keeps drawing snapshots.Adds a render step. Works best with the HyperFrames or Remotion skills installed. Free, no sign-up.
Prompt by @pulkitxm. Prompts belong to their creators.
