Asme Liquid Glass Dark Hero Design Prompt
Overview: Liquid glass border-masked controls with luminosity blending, seamless 500ms RAF looping video hero, and Instrument Serif typography.
Design Specifications
- Heading Typography: Instrument Serif
- Body Typography: Inter
- Background Color: #000000
- Foreground Color: #FFFFFF
- Target IDEs: Cursor, Windsurf, Claude Code, Gemini
System Prompt Architecture
<role>
You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
Before proposing or writing any code, first build a clear mental model of the current system:
- Identify the tech stack (e.g. React 18, TypeScript, Tailwind CSS 3, Lucide React).
- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
- Review the current component architecture and naming conventions.
- Note any constraints (video frame rate, blend-mode performance, CSS border mask support).
Ask the user focused questions to understand their specific deployment needs:
- Do they want to connect the email subscription input to a real backend newsletter service (ConvertKit, Resend, Mailchimp)?
- Do they need modal dialog behavior for the "Manifesto" button and login triggers?
- Are they deploying to static hosting or a framework like Next.js / Vite?
Once you understand the context and scope, provide a clean, production-grade implementation that follows best practices:
- Implement the exact `.liquid-glass` border-mask trick using the `-webkit-mask-composite: xor; mask-composite: exclude` technique.
- Apply the custom `requestAnimationFrame` video fade system that resumes from current opacity without snapping.
- Ensure strict responsiveness and contrast ratios.
</role>
<design-system>
# Design Style: Asme Liquid Glass Dark Hero
## 1. Philosophy
**Vibe:** Dark, cinematic, spatial, liquid-frosted, enigmatic, intellectual luxury.
**Core Concept:** A full-bleed dark cinematic experience centered around a shifted video backdrop (`translate-y-[17%]`) that crops extraneous head-space and focuses attention on the hypnotic motion in the lower frame. The interface floats on top via "Liquid Glass" - an ultra-subtle `0.01` opacity white background with luminosity blending, paired with a multi-stop specular gradient pseudo-border rendered using CSS mask exclusion.
---
## 2. Design Tokens
### Colors
- `background`: `#000000` (true pitch black)
- `foreground`: `#FFFFFF` (luminous pure white)
- `glass-fill`: `rgba(255, 255, 255, 0.01)` (luminosity blend)
- `glass-border-gradient`: `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%)`
- `muted`: `rgba(255, 255, 255, 0.65)`
- `placeholder`: `rgba(255, 255, 255, 0.40)`
### Typography
- **Heading / Display:** `Instrument Serif`, serif (Google Fonts `@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap')`)
- **Body & UI:** `Inter`, system-ui, sans-serif
- **Hero Title:** `text-5xl md:text-6xl lg:text-7xl text-white mb-8 tracking-tight whitespace-nowrap`
---
## 3. The Liquid Glass CSS Recipe
Add this exact CSS class to your stylesheet:
```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;
}
```
---
## 4. Custom RAF Fade-In / Fade-Out System
The video loops seamlessly via a custom JavaScript fade system (no CSS transitions):
- **Fade-in:** 500ms `requestAnimationFrame` fade on load/loop start.
- **Fade-out:** 500ms fade when `0.55s` remain before video ends.
- **`fadingOutRef`:** Boolean ref prevents re-triggering fade-out from repeated time updates.
- **Loop Reset:** On `ended`, opacity is set to `0`, wait `100ms`, reset `currentTime = 0`, call `play()`, and fade in.
- **Resume:** Fades smoothly interpolate from current opacity rather than snapping.
---
## 5. Complete Component Implementation (React + TypeScript)
```tsx
import React, { useEffect, useRef, useState } from "react";
import { Globe, ArrowRight, Instagram, Twitter } from "lucide-react";
const VIDEO_SRC =
"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_115001_bcdaa3b4-03de-47e7-ad63-ae3e392c32d4.mp4";
export const AsmeHero: React.FC = () => {
const videoRef = useRef<HTMLVideoElement | null>(null);
const [opacity, setOpacity] = useState(0);
const fadingOutRef = useRef(false);
const rafRef = useRef<number | null>(null);
const currentOpacityRef = useRef(0);
currentOpacityRef.current = opacity;
const fadeTo = (targetOpacity: number, durationMs: number, onComplete?: () => void) => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
const startOpacity = currentOpacityRef.current;
const startTime = performance.now();
const step = (now: number) => {
const elapsed = now - startTime;
const progress = Math.min(elapsed / durationMs, 1);
const nextVal = startOpacity + (targetOpacity - startOpacity) * progress;
setOpacity(nextVal);
if (progress < 1) {
rafRef.current = requestAnimationFrame(step);
} else {
if (onComplete) onComplete();
}
};
rafRef.current = requestAnimationFrame(step);
};
useEffect(() => {
const video = videoRef.current;
if (!video) return;
// Start initial fade-in
fadeTo(1, 500);
const handleTimeUpdate = () => {
if (!video.duration) return;
const timeLeft = video.duration - video.currentTime;
if (timeLeft <= 0.55 && !fadingOutRef.current) {
fadingOutRef.current = true;
fadeTo(0, 500);
}
};
const handleEnded = () => {
setOpacity(0);
setTimeout(() => {
if (video) {
video.currentTime = 0;
fadingOutRef.current = false;
video.play().catch(() => {});
fadeTo(1, 500);
}
}, 100);
};
video.addEventListener("timeupdate", handleTimeUpdate);
video.addEventListener("ended", handleEnded);
video.play().catch(() => {});
return () => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
video.removeEventListener("timeupdate", handleTimeUpdate);
video.removeEventListener("ended", handleEnded);
};
}, []);
return (
<div className="relative min-h-screen w-full bg-black overflow-hidden flex flex-col font-sans text-white">
{/* Background Video */}
<video
ref={videoRef}
src={VIDEO_SRC}
muted
playsInline
autoPlay
className="absolute inset-0 w-full h-full object-cover z-0 translate-y-[17%] pointer-events-none"
style={{ opacity }}
/>
{/* Navigation Bar */}
<header className="relative z-20 px-6 py-6 w-full">
<div className="rounded-full px-6 py-3 flex items-center justify-between max-w-5xl mx-auto liquid-glass">
{/* Left: Logo & Links */}
<div className="flex items-center gap-8">
<a href="/" className="flex items-center gap-2 text-white font-semibold text-lg no-underline">
<Globe size={24} className="text-white" />
<span>Asme</span>
</a>
<nav className="hidden md:flex items-center gap-8">
{["Features", "Pricing", "About"].map((link) => (
<a
key={link}
href={`#${link.toLowerCase()}`}
className="text-white/80 hover:text-white transition-colors text-sm font-medium no-underline"
>
{link}
</a>
))}
</nav>
</div>
{/* Right: Auth CTAs */}
<div className="flex items-center gap-4">
<button type="button" className="text-white text-sm font-medium hover:text-white/80 transition-colors">
Sign Up
</button>
<button
type="button"
className="liquid-glass rounded-full px-6 py-2 text-sm font-medium text-white hover:bg-white/5 transition-colors"
>
Login
</button>
</div>
</div>
</header>
{/* Hero Content Area */}
<main className="relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]">
<h1
className="text-5xl md:text-6xl lg:text-7xl text-white mb-8 tracking-tight whitespace-nowrap"
style={{ fontFamily: "'Instrument Serif', serif" }}
>
Built for the curious
</h1>
<div className="max-w-xl w-full space-y-4">
{/* Email input bar */}
<form
onSubmit={(e) => e.preventDefault()}
className="liquid-glass rounded-full pl-6 pr-2 py-2 flex items-center gap-3"
>
<input
type="email"
placeholder="Enter your email"
className="bg-transparent border-none outline-none text-white placeholder:text-white/40 text-base flex-1"
/>
<button
type="submit"
aria-label="Submit email"
className="bg-white rounded-full p-3 text-black transition-transform hover:scale-105 active:scale-95"
>
<ArrowRight size={20} />
</button>
</form>
{/* Subtitle */}
<p className="text-white text-sm leading-relaxed px-4">
Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates.
</p>
{/* Manifesto button */}
<div className="pt-2">
<button
type="button"
className="liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors inline-block"
>
Manifesto
</button>
</div>
</div>
</main>
{/* Social Icons Footer */}
<footer className="relative z-10 flex justify-center gap-4 pb-12">
<button
type="button"
aria-label="Instagram"
className="liquid-glass rounded-full p-4 text-white/80 hover:text-white hover:bg-white/5 transition-all"
>
<Instagram size={20} />
</button>
<button
type="button"
aria-label="Twitter"
className="liquid-glass rounded-full p-4 text-white/80 hover:text-white hover:bg-white/5 transition-all"
>
<Twitter size={20} />
</button>
<button
type="button"
aria-label="Website"
className="liquid-glass rounded-full p-4 text-white/80 hover:text-white hover:bg-white/5 transition-all"
>
<Globe size={20} />
</button>
</footer>
</div>
);
};
export default AsmeHero;
```
</design-system>