Pro-camera HUD mockup template — full-viewport black canvas wrapping a real video with monospace overlays (corner brackets, top status bar, side AF/exposure columns, bottom timecode + aperture/shutter/ISO row, vertical 8-filter wheel, animated reticle). For cinematographer portfolios, camera-app demos, LUT pack previews, filter-look auditions. NOT a TikTok/Reels mockup, NOT a storyboard, NOT a shot list, NOT a script document. The chrome wraps real footage — never a div placeholder.
Instrucciones de origen · Vista previa de solo lectura
name
video-shortform
description
Pro-camera HUD mockup template — full-viewport black canvas wrapping a real video with monospace overlays (corner brackets, top status bar, side AF/exposure columns, bottom timecode + aperture/shutter/ISO row, vertical 8-filter wheel, animated reticle). For cinematographer portfolios, camera-app demos, LUT pack previews, filter-look auditions. NOT a TikTok/Reels mockup, NOT a storyboard, NOT a shot list, NOT a script document. The chrome wraps real footage — never a div placeholder.
Camera-HUD mockup that wraps a real piece of footage with pro-camera (RED / ARRI / Blackmagic / Sony Cine-flavored) viewfinder chrome and lets the user audition 8 film-emulation looks against it.
This template is not a TikTok / Reels / 视频号 / 抖音 social mockup, not a storyboard, not a shot list, not a 分镜 / 脚本 document, not a vertical-video ad poster.
⚠️ Three Pre-flight Gates — clear all three BEFORE writing code
Gate 1 — Is this actually a HUD job, or a script/storyboard job?
Trigger words that mean this skill is wrong and you should refuse:
User says
What they actually want
Correct response
短视频脚本 / 视频脚本 / script doc
shot-by-shot text with VO / timing
refuse, suggest a doc template or wireframe-sketch
The chrome wraps a real <video>. A <div> with [视频画面] text inside is not acceptable — that's what B48 did and the whole point of this template was lost.
Decision tree:
User gave a video file / URL → use it directly in <video src="...">
→ pick ONE from the Hotlink List below, paste the URL into , add a one-liner "示例素材:Big Buck Bunny / 公共测试视频,替换为自己的素材后效果一致"
User gave nothing but is OK with sample footage
<video src>
User wants offline / self-contained → curl -L -o sample.mp4 <hotlink> into the case folder, then <video src="sample.mp4">
Unclear → stop and ask which of 1/2/3 they want
Hotlink List (public sample footage, verified 200 OK as of 2026-06)
Pick in this priority order. The historical "Google Cloud gtv-videos-bucket" URLs are dead (anonymous access revoked) — don't use them even though they're widely cited online.
If you need to verify before using: curl -sIL -o /dev/null -w "%{http_code} %{content_type}\n" <url> — expect 200 video/mp4. If a URL returns 403 / 404 / 000, fall to the next in the list. Don't ship a dead URL.
Required <video> attributes (or autoplay won't fire on most browsers):
Must-Have HUD Interactions — none of these are optional
If any is missing, the artifact is incomplete. B48 was missing all 6.
Real <video> element (Gate 2 enforces). Not a div, not a poster image, not a bg image.
Filter wheel switching — scroll wheel + ArrowUp/ArrowDown + click each dot cycles through the 8 filters; active filter highlighted in record-red.
Timecode running at 24/25 fps — HH:MM:SS:FF format, requestAnimationFrame-driven, tabular-nums, restarts with the video loop.
Reticle pulse — slow scale + opacity loop, accent stroke (record-red not green), animation paused under prefers-reduced-motion.
Filter-switch brightness flash — 80–120 ms white flash over the video on filter change (simulates exposure re-meter); skip if prefers-reduced-motion.
Battery drain — top-right battery readout decreases 1% every 8–12s, stops at 5%, turns red ≤ 20%.
Optional but encouraged: REC pulse (red dot blinks at 1Hz when "recording"), focus-confirm beep when filter changes, histogram glyph in a corner.
Must-Lock Visual Rules — no substitutions
Lock
Value
Why
Background
pure #000
Not #0a0a0a, not a dark gray. Black canvas is the viewfinder.
Foreground type
#e0e0e0 / #fff
One light tone only.
Single accent
record-red #ff3b30
Used for REC pill, active filter, reticle, warning states. Not green, not blue, not teal — record-red is the entire visual signature of this template.
Type stack
mono only (SF Mono / JetBrains Mono / Menlo / IBM Plex Mono)
No sans for HUD numerics. CJK script-overlay is the only sans use, and that overlay is itself rare.
HUD opacity
secondary readouts ≈ 45%
Video stays protagonist.
Border style
4 corner brackets, never solid border
Solid border = monitor frame, not viewfinder.
Filter wheel
vertical, ~8 dots, right side
Horizontal carousel = social UI, wrong register.
Anti-patterns (self-check against B48's failure modes)
<video> is missing or replaced with <div> + text → reject, go back to Gate 2
Accent color is anything other than #ff3b30 (e.g. green, teal, blue) → revert
HUD numerics are static strings (timecode, ISO, battery) → make them live
Filter wheel has no interaction (no scroll/arrow/click handler) → wire it up
Script / 镜头 / VO / 旁白 text block layered on top → wrong skill, refuse the job at Gate 1
Social UI (profile, likes, captions, music attribution) → wrong skill, refuse
Centered Play/Pause button → this is a viewfinder, kill it
More than one accent color → revert to record-red only
Glassmorphism / gradient / glow shadow on HUD elements → camera chrome is flat, kill it
Sans-serif on HUD readouts → switch to mono
Yellow / amber / cyan HUD tint to "look futuristic" → flat white/gray + record-red only
No muted playsinline autoplay loop on <video> → won't autoplay, add them
Required Reading
Read this SKILL.md first, end to end. Then read video-shortform.html for the actual implementation patterns: corner-bracket geometry, the timecode HH:MM:SS:FF ticker logic, the 8-filter wheel scroll/keyboard handlers, the reticle pulse keyframes, the battery drain interval, and the filter-switch brightness flash.
Do not copy:
the fallback video URLs from the reference (use the Hotlink List above)
the placeholder filter metadata (use Gate 3's defaults or the user's spec)
class names wholesale (rename for the project)
Design Strategy
Lock the experience contract before writing:
Source video (Gate 2) — what footage, what aspect ratio, how long?
Filter set (Gate 3) — names + CSS filter recipes for all 8
HUD honesty — which numbers react to filter change, which are decorative?
Aspect — 16:9 desktop default; if vertical 9:16, the side columns crowd, switch to top/bottom-only HUD strips
Layout Bias
Prefer:
pure black canvas; mono only; record-red accent
4 corner brackets at 24–32 px from video edges
secondary HUD at ~45% opacity so footage dominates
timecode bottom-center, tabular-nums, bigger than other HUD elements
Avoid: everything in the Must-Lock and Anti-patterns tables above.
Platform / Size
Full-viewport, responsive to window aspect. Best on desktop with a 16:9 source. Portrait video works but side columns crowd — move HUD strips to top/bottom. Mobile renders but keyboard cycling is lost — add touch swipe up/down on the filter wheel.
